// landing.jsx — landing screen

const Landing = ({ onStart, onPrefilledStart, nextIssue = 1, year = new Date().getFullYear() }) => {
  const issueLabel = String(nextIssue).padStart(3, '0');
  const [query, setQuery] = React.useState('');
  const inputRef = React.useRef(null);

  const examples = [
    "Tokyo vs Seoul",
    "iPhone Air vs iPhone 17 Pro",
    "Claude Opus 4.7 vs GPT-5.5",
    "Tesla Model 3 vs Polestar 2",
    "Lisbon vs Porto",
    "Whoop vs Oura Ring",
  ];

  const submit = () => {
    if (query.trim()) {
      onPrefilledStart(query.trim());
    } else {
      onStart();
    }
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <TopBar onHome={() => {}} />

      <div className="container" style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '60px 32px 80px' }}>

        {/* Hero — editorial masthead */}
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 40 }}>

          <div className="fade-up">
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              No. {issueLabel} · Compare Anything · Vol. {year}
            </div>
            <hr className="hr" style={{ marginBottom: 32 }} />
          </div>

          <div className="fade-up delay-1">
            <h1 className="display" style={{ margin: 0 }}>
              Compare<br/>
              <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>anything</span>,
              <br/>
              thoughtfully.
            </h1>
          </div>

          <div className="fade-up delay-2 g-hero">
            <p className="lede" style={{ margin: 0, maxWidth: 460 }}>
              A small, calm tool that searches the web, weighs what you actually care about, and tells you which one — and why.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div className="eyebrow">Start a comparison</div>
              <div className="landing-input-row" style={{ display: 'flex', alignItems: 'baseline', gap: 12, borderBottom: '1.5px solid var(--ink)', paddingBottom: 6 }}>
                <input
                  ref={inputRef}
                  className="input"
                  style={{ borderBottom: 'none', padding: '4px 0', fontSize: 26 }}
                  placeholder="Type two things to compare…"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && submit()}
                />
                <button className="btn" onClick={submit} style={{ flexShrink: 0 }}>
                  Compare
                  <span style={{ fontFamily: 'var(--mono)' }}>→</span>
                </button>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', alignSelf: 'center', marginRight: 4 }}>TRY:</span>
                {examples.map((ex) => (
                  <button key={ex} className="chip" onClick={() => onPrefilledStart(ex)}>
                    {ex}
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* The 3-step rhythm */}
          <div className="fade-up delay-3" style={{ marginTop: 80 }}>
            <hr className="hr" style={{ marginBottom: 32 }} />
            <div className="g-steps">
              {[
                { n: '01', t: 'You answer', d: 'A short conversation. What you\'re comparing, what for, and what matters most.' },
                { n: '02', t: 'We search', d: 'Live web search across reviews, specs, and trusted sources. Nothing canned.' },
                { n: '03', t: 'You decide', d: 'A weighted verdict, side-by-side specs, pros & cons, and quotes — all cited.' },
              ].map((s) => (
                <div key={s.n} style={{ background: 'var(--paper)', padding: '36px 28px' }}>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 16 }}>{s.n}</div>
                  <div className="serif" style={{ fontSize: 26, marginBottom: 8 }}>{s.t}</div>
                  <div style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6, maxWidth: 280 }}>{s.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Footer rule */}
          <div className="fade-up delay-4" style={{ marginTop: 60, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'var(--ink-3)', fontSize: 13 }}>
            <span className="mono desktop-only">Press <kbd style={{ fontFamily: 'inherit', padding: '2px 6px', border: '1px solid var(--rule)', borderRadius: 4, fontSize: 11 }}>↵</kbd> to begin</span>
            <span className="mono">Cites every claim · Cross-checks sources</span>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Landing = Landing;