/* Splash - pre-resume checklist that mirrors the JD */
const { useState, useEffect, useRef } = React;

const SPLASH_ITEMS = [
  {
    text: "Has a creative background - design and advertising before code",
    evidence: "UI and frontend design is where most engineers stop - it's where I start"
  },
  {
    text: "Thinks like a founder, builds like a great engineer",
    evidence: "FileFactory - real users, real revenue, built and run for 20 years"
  },
  {
    text: "Has run a product solo - design, code, infra, support, billing, all of it",
    evidence: "No handoffs. No excuses. End-to-end, every day."
  },
  {
    text: "Has migrated a legacy platform to a modern stack",
    evidence: "400K lines of PHP → Next.js + Convex, thousands of users kept going the whole time"
  },
  {
    text: "Works AI-first every day at production scale",
    evidence: "5,750+ commits in 6 months · Claude Code, Codex, Cursor on a live codebase"
  },
  {
    text: "Shows up, figures it out, gets it done",
    evidence: "No ego, no fuss - just someone who genuinely wants the thing to be good"
  }
];

function Splash({ onEnter, accent = "#FF8A3D" }) {
  const [checked, setChecked] = useState(0);
  const [leaving, setLeaving] = useState(false);

  // Auto-tick items one by one
  useEffect(() => {
    if (checked >= SPLASH_ITEMS.length) return;
    const t = setTimeout(() => setChecked(c => c + 1), checked === 0 ? 700 : 420);
    return () => clearTimeout(t);
  }, [checked]);

  function handleEnter() {
    setLeaving(true);
    setTimeout(() => {
      try { localStorage.setItem("holt:splash-seen", "1"); } catch (e) {}
      onEnter();
    }, 520);
  }

  function handleSkip() {
    try { localStorage.setItem("holt:splash-seen", "1"); } catch (e) {}
    onEnter();
  }

  const allChecked = checked >= SPLASH_ITEMS.length;

  return (
    <div className={"splash " + (leaving ? "splash-leaving" : "")} style={{ "--splash-accent": accent }}>
      <div className="splash-grid-bg" aria-hidden="true" />
      <div className="splash-glow" style={{ background: `radial-gradient(circle at 50% 40%, ${accent}22, transparent 60%)` }} aria-hidden="true" />

      <button className="splash-skip" onClick={handleSkip} aria-label="Skip intro">
        Skip <span className="splash-skip-arrow">→</span>
      </button>

      <div className="splash-stage">
        <div className="splash-eyebrow">
          <span className="splash-eyebrow-dot" style={{ background: accent }} />
          <span>For the Engineering Lead role at Transportme</span>
        </div>

        <h1 className="splash-headline">
          Hire wrong here and you lose six months. Hire someone who's <span style={{ color: accent }}>already done it</span> and you ship.
        </h1>
        <p className="splash-subhead">Quick check - are you looking for someone who:</p>

        <ol className="splash-list">
          {SPLASH_ITEMS.map((item, i) => {
            const isChecked = i < checked;
            return (
              <li
                key={i}
                className={"splash-row " + (isChecked ? "splash-row-checked" : "")}
                style={{ "--row-delay": (i * 60) + "ms" }}
              >
                <span className="splash-check" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="22" height="22">
                    <rect x="2" y="2" width="20" height="20" rx="5" fill="none" stroke="currentColor" strokeWidth="1.5" className="splash-check-box" />
                    <path d="M6 12.5 L10.5 17 L18 8" fill="none" stroke={accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="splash-check-tick" />
                  </svg>
                </span>
                <span className="splash-row-text">
                  <span className="splash-row-main">{item.text}</span>
                  <span className="splash-row-evidence" style={{ color: accent }}>{item.evidence}</span>
                </span>
                <span className="splash-row-num">{String(i + 1).padStart(2, "0")}</span>
              </li>
            );
          })}
        </ol>

        <div className={"splash-foot " + (allChecked ? "splash-foot-ready" : "")}>
          <div className="splash-tally">
            <span className="splash-tally-count" style={{ color: accent }}>{checked}</span>
            <span className="splash-tally-sep">/</span>
            <span className="splash-tally-total">6</span>
            <span className="splash-tally-label">{allChecked ? "You just described me." : "checking…"}</span>
          </div>
          <button
            className="splash-cta"
            onClick={handleEnter}
            disabled={!allChecked}
            style={{ background: accent, boxShadow: allChecked ? `0 0 0 6px ${accent}22, 0 12px 30px -10px ${accent}88` : "none" }}
          >
            <span>Meet Holt</span>
            <span className="splash-cta-arrow">→</span>
          </button>
        </div>

        <div className="splash-foot-meta">
          <span>Holt Meyers</span>
          <span className="splash-foot-dot">·</span>
          <span>Founder &amp; Engineer, FileFactory</span>
          <span className="splash-foot-dot">·</span>
          <span>25 years shipping</span>
        </div>
      </div>
    </div>
  );
}

window.Splash = Splash;