function Hero() {
  const [greet, setGreet] = useState(0);
  const greetings = ["Hey you.", "Alright —", "Listen —", "Right then —"];
  useEffect(() => {
    const t = setInterval(() => setGreet(g => (g + 1) % greetings.length), 2800);
    return () => clearInterval(t);
  }, []);

  const scrollToApi = (e) => { e.preventDefault(); document.getElementById("api-setup")?.scrollIntoView({ behavior: "smooth" }); };
  const scrollToPlan = (e) => { e.preventDefault(); document.getElementById("plan")?.scrollIntoView({ behavior: "smooth" }); };

  return (
    <section className="pt-8 sm:pt-12 pb-20 sm:pb-28 relative overflow-hidden">
      <div className="max-w-6xl mx-auto px-5 sm:px-8">
      <div className="flex items-center justify-between mb-14 sm:mb-20">
        <div className="mono text-[11px] uppercase tracking-widest text-muted">
          A personal guide · written for one reader · April 2026
        </div>
        <div className="hidden sm:flex items-center gap-2 mono text-[11px] text-muted">
          <span className="w-1.5 h-1.5 rounded-full bg-teal animate-pulse"/>
          <span>Interactive · bring your own API key</span>
        </div>
      </div>

      <div className="grid md:grid-cols-12 gap-10 items-start">
        <div className="md:col-span-7">
          <div className="mono text-sm text-teal mb-4">
            {greetings[greet]}<span className="blink">_</span>
          </div>
          <h1 className="serif text-[44px] sm:text-6xl md:text-[76px] leading-[0.98] text-ink">
            A guide for <em className="text-teal">you</em>,<br/>
            because job boards <br/> don't know you're <span className="underline-teal">brilliant</span>.
          </h1>
          <p className="mt-7 text-ink2 text-lg sm:text-xl max-w-[55ch] leading-relaxed">
            The UK data market in 2026 is harder than it looks — <span className="bg-teal-soft px-1">but you have more leverage than you think</span>. Same MSc, same visa story, different plan. Here's what I'd actually do if I were starting again on a Tuesday morning.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a href="#api-setup" onClick={scrollToApi} className="btn-teal mono text-xs uppercase tracking-widest px-5 py-3 rounded-full inline-flex items-center gap-2">
              Get the AI demos live <I.Arrow size={14}/>
            </a>
            <a href="#plan" onClick={scrollToPlan} className="mono text-xs uppercase tracking-widest px-5 py-3 rounded-full inline-flex items-center gap-2 hairline text-ink hover:bg-paper2 transition">
              Skip to the 90-day plan
            </a>
          </div>
          <div className="mt-10 flex flex-wrap gap-2">
            <Pill>Data Analyst · primary</Pill>
            <Pill>Data Scientist · secondary</Pill>
            <Pill tone="teal">Graduate Visa aware</Pill>
            <Pill tone="ember">UK context throughout</Pill>
          </div>
        </div>

        <div className="md:col-span-5 md:pl-4">
          <Reveal>
            <HeroMini/>
          </Reveal>
          <div className="mt-5 hairline rounded-xl p-4 bg-paper2/60">
            <div className="mono text-[11px] uppercase tracking-widest text-muted mb-2">Table of contents</div>
            <ol className="mono text-[12px] text-ink2 grid grid-cols-2 gap-y-1.5 gap-x-4">
              {[
                ["01","the market"],["02","skills stack"],
                ["03","portfolio"],["04","api setup"],
                ["05","rate my idea"],["06","build a brief"],
                ["07","job co-pilot"],["08","work with me"],
                ["09","static projects"],["10","scope your own"],
                ["11","90-day plan"],["12","one thing"],
              ].map(([n,l]) => (
                <li key={n}><span className="text-muted">{n}</span>&nbsp; {l}</li>
              ))}
            </ol>
          </div>
        </div>
      </div>

      {/* scroll cue */}
      <div className="mt-16 flex items-center gap-3 text-muted">
        <I.Down size={16} className="animate-bounce"/>
        <span className="mono text-[11px] uppercase tracking-widest">scroll — there's a lot, take it slow</span>
      </div>
      </div>{/* /container */}
    </section>
  );
}
window.Hero = Hero;