function Hero() {
  const [phoneScreen, setPhoneScreen] = React.useState("home");

  // Rotate the phone screens slowly
  React.useEffect(() => {
    const seq = ["home", "match", "profile", "novo"];
    let i = 0;
    const t = setInterval(() => {
      i = (i + 1) % seq.length;
      setPhoneScreen(seq[i]);
    }, 3800);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="relative pt-32 pb-20 overflow-hidden ambient-violet" data-screen-label="Hero">
      <div className="absolute inset-0 bg-grid pointer-events-none" />
      <div className="relative max-w-7xl mx-auto px-6 grid lg:grid-cols-[1.1fr_1fr] gap-16 items-center">
        {/* Copy side */}
        <div className="relative z-10">
          {/* Eyebrow */}
          <div className="inline-flex items-center gap-2 px-3 py-1 bg-surface-container border border-outline rounded-full">
            <span className="w-1.5 h-1.5 bg-tertiary rounded-full live-dot" />
            <span className="text-[11px] font-bold uppercase tracking-widest text-on-surface-variant">
              Novo — v1.2
            </span>
            <span className="text-[11px] text-on-surface-variant">
              Convites de time em tempo real
            </span>
          </div>

          <h1 className="mt-6 text-[56px] md:text-[72px] leading-[0.95] font-black tracking-[-0.035em] text-on-surface">
            Acompanhe <br />
            seu craque<br />
            <span className="text-primary">de perto.</span>
          </h1>

          <p className="mt-6 max-w-xl text-[17px] text-on-surface-variant leading-relaxed">
            MeuCraque é o app feito para pais que querem acompanhar os números do seu craque
            e ter controle total dos custos — mensalidade, uniforme, inscrições, viagens,
            transmissões e muito mais, tudo em um só lugar.
          </p>

          <div className="mt-8 flex flex-wrap items-center gap-3">
            <a href="#download" className="px-5 py-3 bg-primary text-on-primary rounded-lg text-[14px] font-bold flex items-center gap-2 cta-glow transition-all hover:-translate-y-0.5">
              <Icon name="download" size={16} />
              Baixar para iOS
            </a>
            <a href="#download" className="px-5 py-3 bg-surface-container border border-outline rounded-lg text-[14px] font-bold flex items-center gap-2 hover:bg-surface-container-high transition-colors">
              <Icon name="android" size={16} className="text-tertiary" />
              Baixar para Android
            </a>
            <a href="#app" className="px-4 py-3 text-[13px] text-on-surface-variant hover:text-on-surface flex items-center gap-1 transition-colors">
              Ver o app
              <Icon name="arrow_forward" size={14} />
            </a>
          </div>

          {/* Proof stats */}
          <div className="mt-10 grid grid-cols-3 gap-6 max-w-md">
            {[
              { v: "12k+", l: "Atletas cadastrados" },
              { v: "4.8★", l: "Nota média nas lojas" },
              { v: "98%", l: "Continuam após 30d" },
            ].map((s, i) => (
              <div key={i} className="border-l border-outline pl-4">
                <div className="text-2xl font-black tracking-tight">{s.v}</div>
                <div className="text-[10px] mt-0.5 uppercase tracking-widest text-on-surface-variant font-bold">
                  {s.l}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Phone side */}
        <div className="relative flex justify-center lg:justify-end">
          {/* Ambient glow behind phone */}
          <div className="absolute -inset-10 pointer-events-none">
            <div className="absolute inset-0 rounded-full" style={{ background: "radial-gradient(circle at center, rgba(167,139,250,0.2), transparent 55%)", filter: "blur(60px)" }} />
          </div>

          {/* Floating callouts */}
          <div className="hidden lg:block absolute top-10 -left-6 bg-surface-container border border-outline rounded-lg px-3 py-2 shadow-xl z-20">
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 rounded bg-tertiary-container flex items-center justify-center">
                <Icon name="sports_soccer" className="text-tertiary" size={14} />
              </div>
              <div>
                <div className="text-[10px] text-on-surface-variant font-bold uppercase tracking-wider">Gol registrado</div>
                <div className="text-[11px] font-bold">Arthur — 34'</div>
              </div>
            </div>
          </div>
          <div className="hidden lg:block absolute bottom-20 -right-4 bg-surface-container border border-outline rounded-lg px-3 py-2 shadow-xl z-20">
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 rounded bg-primary/15 flex items-center justify-center">
                <Icon name="trending_up" className="text-primary" size={14} />
              </div>
              <div>
                <div className="text-[10px] text-on-surface-variant font-bold uppercase tracking-wider">Temporada</div>
                <div className="text-[11px] font-bold">+18 gols no mês</div>
              </div>
            </div>
          </div>

          <PhoneMock screen={phoneScreen} />

          {/* Tab pills under phone */}
          <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 bg-surface-container border border-outline rounded-full px-1.5 py-1 flex gap-0.5 shadow-xl z-20">
            {[
              { id: "home", l: "Home" },
              { id: "match", l: "Jogo" },
              { id: "profile", l: "Perfil" },
              { id: "novo", l: "Novo" },
            ].map((t) => (
              <button
                key={t.id}
                onClick={() => setPhoneScreen(t.id)}
                className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider transition-colors ${
                  phoneScreen === t.id
                    ? "bg-primary text-on-primary"
                    : "text-on-surface-variant hover:text-on-surface"
                }`}
              >
                {t.l}
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;