/* global React */

function Landing({ onEnter }) {
  const { I, Seal } = window.UI;

  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--bg)',
      position: 'relative',
      overflow: 'hidden',
    }} data-screen-label="01 Landing">

      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '24px 48px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Seal size="sm">花信<br/>风</Seal>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
            <span className="serif" style={{ fontSize: 15, letterSpacing: '0.08em' }}>花信风</span>
            <span className="caps" style={{ fontSize: 9 }}>HUAXINFENG · EST.2025</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 24, alignItems: 'center', fontSize: 13 }}>
          <a className="serif" style={{ color: 'var(--ink-2)', cursor: 'pointer' }} onClick={onEnter}>花事地图</a>
          <a className="serif" style={{ color: 'var(--ink-2)', cursor: 'pointer' }} onClick={() => window.__goto && window.__goto('huaxin')}>二十四番</a>
          <a className="serif" style={{ color: 'var(--ink-2)', cursor: 'pointer' }}>花卉百科</a>
          <a className="serif" style={{ color: 'var(--ink-2)', cursor: 'pointer' }}>诗词花事</a>
          <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>中 · EN · 日 · 한</span>
          <button className="btn primary" onClick={onEnter}>进入花事 <I.chev/></button>
        </div>
      </div>

      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, var(--bg) 0%, oklch(0.94 0.014 90) 60%, oklch(0.90 0.018 80) 100%)',
      }}/>

      <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.85 }}>
        <defs>
          <linearGradient id="mountA" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="oklch(0.55 0.06 180)" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="oklch(0.45 0.08 180)" stopOpacity="0.9"/>
          </linearGradient>
          <linearGradient id="mountB" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="oklch(0.58 0.05 170)" stopOpacity="0.4"/>
            <stop offset="100%" stopColor="oklch(0.48 0.07 175)" stopOpacity="0.7"/>
          </linearGradient>
          <linearGradient id="mountC" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="oklch(0.65 0.03 160)" stopOpacity="0.2"/>
            <stop offset="100%" stopColor="oklch(0.55 0.04 170)" stopOpacity="0.5"/>
          </linearGradient>
        </defs>
        <path d="M0 620 L 120 540 L 220 580 L 330 500 L 440 560 L 560 490 L 680 560 L 820 480 L 960 560 L 1100 500 L 1240 570 L 1360 510 L 1500 570 L 1600 540 L 1600 900 L 0 900 Z"
          fill="url(#mountC)"/>
        <path d="M0 700 L 100 640 L 200 700 L 290 620 L 400 690 L 500 610 L 620 680 L 750 600 L 880 690 L 1020 610 L 1160 700 L 1280 630 L 1420 700 L 1600 650 L 1600 900 L 0 900 Z"
          fill="url(#mountB)"/>
        <path d="M0 800 L 150 720 L 280 790 L 420 710 L 560 800 L 720 720 L 880 810 L 1040 730 L 1200 810 L 1360 740 L 1520 810 L 1600 770 L 1600 900 L 0 900 Z"
          fill="url(#mountA)"/>

        <g transform="translate(720 690)" opacity="0.6">
          <path d="M-14 0 L 0 -12 L 14 0 Z" fill="var(--ink)"/>
          <rect x="-10" y="0" width="20" height="14" fill="var(--ink)" opacity="0.7"/>
          <line x1="-14" y1="0" x2="14" y2="0" stroke="var(--ink)" strokeWidth="0.7"/>
        </g>

        {Array.from({ length: 14 }).map((_, i) => (
          <circle key={i}
            cx={100 + (i * 113) % 1500}
            cy={200 + ((i * 71) % 280)}
            r={1.5 + (i % 3) * 0.6}
            fill="oklch(0.6 0.14 30)"
            opacity={0.4 + (i % 3) * 0.15}/>
        ))}
      </svg>

      <div style={{
        position: 'absolute', left: '50%', top: '42%',
        transform: 'translate(-50%, -50%)',
        textAlign: 'center',
        zIndex: 5,
      }} className="fade-in">
        <div className="cn-caps" style={{ marginBottom: 14 }}>庚子 · 谷雨 · 第二候</div>
        <div className="serif" style={{
          fontSize: 96,
          letterSpacing: '0.3em',
          color: 'var(--ink)',
          marginLeft: '0.3em',
          fontWeight: 500,
          lineHeight: 1,
        }}>花信风</div>
        <div className="serif" style={{
          fontSize: 16,
          color: 'var(--ink-2)',
          marginTop: 20,
          letterSpacing: '0.08em',
        }}>应花期而来的风也 · 以二十四番花信风为脉络</div>

        <div style={{ marginTop: 40, display: 'flex', gap: 24, justifyContent: 'center', alignItems: 'center' }}>
          <div style={{ width: 60, height: 1, background: 'var(--ink-3)', opacity: 0.3 }}/>
          <div className="serif" style={{ fontSize: 13, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
            一霎清明雨 · 番风有信来
          </div>
          <div style={{ width: 60, height: 1, background: 'var(--ink-3)', opacity: 0.3 }}/>
        </div>

        <button onClick={onEnter} style={{
          marginTop: 48,
          padding: '14px 42px',
          background: 'var(--ink)',
          color: 'var(--bg)',
          border: 'none',
          borderRadius: 0,
          fontFamily: 'var(--font-serif)',
          fontSize: 14,
          letterSpacing: '0.3em',
          cursor: 'pointer',
          transition: 'background 0.2s',
        }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--zhusha)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'var(--ink)'}>
          入  山  寻  花
        </button>
      </div>

      <div style={{
        position: 'absolute', bottom: 36, left: 0, right: 0,
        display: 'flex', justifyContent: 'center', gap: 56,
      }}>
        {[
          ['408', '赏花景点'], ['74', '花卉'], ['24', '花信候'], ['34', '省市'], ['52', '诗词'],
        ].map(([n, l]) => (
          <div key={l} style={{ textAlign: 'center' }}>
            <div className="serif" style={{ fontSize: 26, color: 'var(--ink)' }}>{n}</div>
            <div className="cn-caps" style={{ fontSize: 10, marginTop: 4 }}>{l}</div>
          </div>
        ))}
      </div>

      <div style={{ position: 'absolute', bottom: 32, left: 48, display: 'flex', gap: 12 }}>
        <Seal size="sm" rotate={6}>壬寅<br/>春分</Seal>
        <div style={{ alignSelf: 'flex-end' }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>N 39.9°  E 116.4°</div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>12.4℃  ·  轻风东南  ·  桃始华</div>
        </div>
      </div>
    </div>
  );
}

window.Landing = Landing;