// === Landing screen — comparison-first version ===
const { useEffect: useEffectL, useState: useStateL, useRef: useRefL } = React;

function Landing({ onSubmit, verdictIdx, pending }) {
  const [phase, setPhase] = useStateL('boot');
  const [query, setQuery] = useStateL('');
  const inputRef = useRefL(null);

  useEffectL(() => {
    const t1 = setTimeout(() => setPhase('ready'), 1900);
    return () => clearTimeout(t1);
  }, []);

  useEffectL(() => {
    if (phase === 'ready') setTimeout(() => inputRef.current?.focus(), 300);
  }, [phase]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (pending) return;
    if (!query.trim()) return;
    onSubmit(query.trim());
  };

  const verdict = window.VERDICTS[verdictIdx % window.VERDICTS.length];

  return (
    <div className="landing">
      <NeonGrid />
      {phase === 'boot' && <BootSequence />}
      {phase === 'ready' && (
        <div className="landing__ready page-enter">
          <div className="landing__verdict">
            <div className="landing__verdict-eyebrow">
              <span className="dot"></span> TAKE OF THE DAY · 06 MAY 2026
            </div>
            <h2 className="landing__verdict-headline">
              <GlitchText as="span">{verdict.headline}</GlitchText>
            </h2>
            <p className="landing__verdict-sub">{verdict.sub}</p>
          </div>

          <div className="landing__hero">
            <div className="landing__eyebrow">
              <Chip color="#ff2bd6" size="sm">1,847 TOOLS · 53 CATEGORIES</Chip>
              <Chip color="#c6ff3d" size="sm">UPDATED 2H AGO</Chip>
            </div>
            <h1 className="landing__title">
              There are <span className="too-many">too&nbsp;many</span><br/>
              AI tools. <em>We help you pick.</em>
            </h1>
            <p className="landing__sub">
              Tell us your use case. We surface the best tools for the job —
              with pros, cons, pricing, and our take.{' '}
              <span className="muted">No SEO directories. No 200-row spreadsheets.</span>
            </p>

            <form className="landing__input" onSubmit={handleSubmit}>
              <span className="landing__input-prompt">▶ I need AI to</span>
              <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder=""
                className="landing__input-field"
                autoFocus
              />
              {!query && (
                <span className="landing__input-typer">
                  <Typewriter items={[
                    'help me code without context-switching',
                    'transcribe my meetings privately',
                    'run a local LLM on my laptop',
                    'generate marketing videos',
                    'review legal contracts',
                  ]} />
                </span>
              )}
              <button type="submit" className="btn btn--primary landing__submit" disabled={pending}>
                {pending ? 'FINDING YOUR MATCH…' : 'COMPARE TOOLS ⟶'}
              </button>
            </form>

            <div className="landing__suggestions">
              <span className="landing__suggestions-label">OR JUMP IN</span>
              {window.USE_CASES.slice(0, 5).map((u, i) => (
                <button
                  key={u.q}
                  className="landing__suggestion"
                  onClick={() => { if (!pending) onSubmit(u.q); }}
                  disabled={pending}
                  style={{ '--i': i }}
                >
                  {u.q}
                </button>
              ))}
            </div>
          </div>

          <FloatingFighters />
          <CornerHud />
        </div>
      )}
    </div>
  );
}

function BootSequence() {
  const [lines, setLines] = useStateL([]);
  useEffectL(() => {
    const all = [
      '> initialising comparison engine v4.7.1',
      '> loading 1,847 tools…',
      '> syncing pricing + updates…',
      '> warming up the take generator',
      '> READY.',
    ];
    let i = 0;
    const id = setInterval(() => {
      i++;
      setLines(all.slice(0, i));
      if (i >= all.length) clearInterval(id);
    }, 280);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="boot">
      <div className="boot__logo">
        <div className="boot__ring"></div>
        <div className="boot__ring boot__ring--2"></div>
        <div className="boot__ring boot__ring--3"></div>
        <div className="boot__core">⌬</div>
      </div>
      <div className="boot__lines">
        {lines.map((l, i) => (
          <div key={i} className="boot__line">{l}</div>
        ))}
      </div>
    </div>
  );
}

function FloatingFighters() {
  const picks = [window.TOOLS[0], window.TOOLS[10]];
  return (
    <div className="float-fighters" aria-hidden>
      {picks.map((t, i) => (
        <div key={t.id} className={`float-fighters__item float-fighters__item--${i}`}>
          <FighterCard tool={t} size="xs" />
        </div>
      ))}
    </div>
  );
}

function CornerHud() {
  return (
    <div className="hud">
      <div className="hud__block hud__block--tl">
        <div className="hud__label">SYS</div>
        <div className="hud__line">CATALOG · LIVE</div>
        <div className="hud__line">LATENCY 12ms</div>
      </div>
      <div className="hud__block hud__block--tr">
        <div className="hud__label">CATALOG</div>
        <div className="hud__line">1,847 TOOLS · 53 CATS</div>
        <div className="hud__line">UPDATED 2h AGO</div>
      </div>
    </div>
  );
}

window.Landing = Landing;