function App() {
  const h = { first: "Acompanhe", second: "seu craque", third: "de perto." };

  return (
    <>
      <Nav />
      <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" />
        <HeroCore h={h} />
      </section>
      <Features />
      <LiveMatch />
      <Screens />
      <Testimonials />
      <Pricing />
      <Faq />
      <Footer />
    </>
  );
}

// Extracted hero body so headline can be overridden by tweaks
function HeroCore({ h }) {
  const [phoneScreen, setPhoneScreen] = React.useState("home");
  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 (
    <div className="relative max-w-7xl mx-auto px-6 grid lg:grid-cols-[1.1fr_1fr] gap-16 items-center">
      <div className="relative z-10">
        <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">
          {h.first} <br />
          {h.second}
          <br />
          <span className="text-primary">{h.third}</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"
          >
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
            </svg>
            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="https://app.meucraque.app"
            className="px-4 py-3 text-[13px] font-bold text-primary hover:text-primary-dim flex items-center gap-1.5 transition-colors"
          >
            <Icon name="language" size={14} />
            Versão web
            <span className="text-[9px] font-mono px-1.5 py-0.5 rounded bg-primary/15 text-primary border border-primary/20 uppercase tracking-widest">
              Beta
            </span>
          </a>
        </div>
        <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>
      <div className="relative flex justify-center lg:justify-end">
        <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>
        <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-30">
          <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} />
        <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>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
