function Pricing() {
  const [billing, setBilling] = React.useState("mensal");

  const features = [
    "1 atleta",
    "Jogos ilimitados",
    "Estatísticas avançadas",
    "Controle completo de custos",
    "Cards de compartilhamento premium",
    "Exportação em PDF",
    "Sincronização offline",
  ];

  return (
    <section id="planos" className="relative py-24 border-t border-outline" data-screen-label="Planos">
      <div className="max-w-6xl mx-auto px-6">
        <div className="text-center mb-10">
          <div className="code-chip text-on-surface-variant mb-3"><span className="text-primary">/</span>planos</div>
          <h2 className="text-4xl md:text-5xl font-black tracking-tighter leading-[1.05]">
            Comece grátis.<br />
            <span className="text-primary">Evolua quando quiser.</span>
          </h2>
          <p className="mt-4 text-on-surface-variant max-w-xl mx-auto text-[14px]">
            Teste à vontade no plano gratuito. Quando estiver pronto, escolha entre pagar mês a mês ou no cartão em 12x.
          </p>
        </div>

        {/* Billing toggle (afeta só o plano pago) */}
        <div className="flex justify-center mb-10">
          <div className="bg-surface-container border border-outline rounded-full p-1 flex gap-1">
            <button
              onClick={() => setBilling("mensal")}
              className={`px-5 py-2 rounded-full text-[12px] font-bold uppercase tracking-wider transition-colors ${
                billing === "mensal" ? "bg-primary text-on-primary" : "text-on-surface-variant hover:text-on-surface"
              }`}
            >
              Mensal
            </button>
            <button
              onClick={() => setBilling("anual")}
              className={`px-5 py-2 rounded-full text-[12px] font-bold uppercase tracking-wider transition-colors flex items-center gap-2 ${
                billing === "anual" ? "bg-primary text-on-primary" : "text-on-surface-variant hover:text-on-surface"
              }`}
            >
              Anual
              <span className={`text-[9px] font-mono px-1.5 py-0.5 rounded ${billing === "anual" ? "bg-on-primary/10 text-on-primary" : "bg-tertiary/15 text-tertiary"}`}>
                -35%
              </span>
            </button>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-3">
          {/* Grátis */}
          <div className="relative rounded-2xl p-8 border flex flex-col bg-surface-container border-outline">
            <div className="flex items-baseline justify-between mb-1">
              <h3 className="text-[22px] font-black tracking-tighter">Grátis</h3>
              <span className="code-chip text-on-surface-variant">#00</span>
            </div>
            <p className="text-[12px] text-on-surface-variant mb-6">Pra conhecer o app sem compromisso.</p>
            <div className="mb-1 flex items-baseline gap-1">
              <span className="text-5xl font-black tracking-tighter">R$ 0</span>
              <span className="text-on-surface-variant text-[13px]">/sempre</span>
            </div>
            <p className="text-[11px] text-on-surface-variant font-mono mb-6">
              Sem cartão de crédito.
            </p>
            <ul className="space-y-2.5 mb-8 flex-1">
              {[
                "1 atleta",
                "5 jogos para registrar",
                "Estatísticas básicas",
                "Controle de custos básico",
              ].map((f, j) => (
                <li key={j} className="flex items-start gap-2 text-[13px]">
                  <Icon name="check" className="text-tertiary mt-0.5" size={14} />
                  <span className="text-on-surface">{f}</span>
                </li>
              ))}
            </ul>
            <button className="w-full py-3 rounded-lg text-[13px] font-bold bg-surface-container-high border border-outline hover:bg-surface-container-highest transition-colors">
              Começar grátis
            </button>
          </div>

          {/* Mensal */}
          <div
            className={`relative rounded-2xl p-8 border flex flex-col transition-colors ${
              billing === "mensal"
                ? "bg-surface-container-high border-primary/40"
                : "bg-surface-container border-outline opacity-70"
            }`}
          >
            <div className="flex items-baseline justify-between mb-1">
              <h3 className="text-[22px] font-black tracking-tighter">Craque Mensal</h3>
              <span className="code-chip text-on-surface-variant">#01</span>
            </div>
            <p className="text-[12px] text-on-surface-variant mb-6">Pague mês a mês. Cancele quando quiser.</p>
            <div className="mb-1 flex items-baseline gap-1">
              <span className="text-5xl font-black tracking-tighter">R$ 19,99</span>
              <span className="text-on-surface-variant text-[13px]">/mês</span>
            </div>
            <p className="text-[11px] text-on-surface-variant font-mono mb-6">
              Cobrado mensalmente — sem fidelidade.
            </p>
            <ul className="space-y-2.5 mb-8 flex-1">
              {features.map((f, j) => (
                <li key={j} className="flex items-start gap-2 text-[13px]">
                  <Icon name="check" className={billing === "mensal" ? "text-primary mt-0.5" : "text-tertiary mt-0.5"} size={14} />
                  <span className="text-on-surface">{f}</span>
                </li>
              ))}
            </ul>
            <button
              className={`w-full py-3 rounded-lg text-[13px] font-bold transition-colors ${
                billing === "mensal"
                  ? "bg-primary text-on-primary cta-glow"
                  : "bg-surface-container-high border border-outline hover:bg-surface-container-highest"
              }`}
            >
              Assinar mensal
            </button>
          </div>

          {/* Anual */}
          <div
            className={`relative rounded-2xl p-8 border flex flex-col transition-colors ${
              billing === "anual"
                ? "bg-surface-container-high border-primary/40"
                : "bg-surface-container border-outline opacity-70"
            }`}
          >
            <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-tertiary text-[#001a12] rounded-full text-[10px] font-bold uppercase tracking-widest">
              Economize 35%
            </div>
            <div className="flex items-baseline justify-between mb-1">
              <h3 className="text-[22px] font-black tracking-tighter">Craque Anual</h3>
              <span className="code-chip text-on-surface-variant">#02</span>
            </div>
            <p className="text-[12px] text-on-surface-variant mb-6">Pague no cartão em 12x. Temporada garantida.</p>
            <div className="mb-1 flex items-baseline gap-1">
              <span className="text-5xl font-black tracking-tighter">R$ 12,99</span>
              <span className="text-on-surface-variant text-[13px]">/mês</span>
            </div>
            <p className="text-[11px] text-on-surface-variant font-mono mb-6">
              12x de R$ 12,99 no cartão = R$ 155,88/ano.
            </p>
            <ul className="space-y-2.5 mb-8 flex-1">
              {features.map((f, j) => (
                <li key={j} className="flex items-start gap-2 text-[13px]">
                  <Icon name="check" className={billing === "anual" ? "text-primary mt-0.5" : "text-tertiary mt-0.5"} size={14} />
                  <span className="text-on-surface">{f}</span>
                </li>
              ))}
              <li className="flex items-start gap-2 text-[13px]">
                <Icon name="star" fill className="text-warning mt-0.5" size={14} />
                <span className="text-on-surface font-bold">Economia de R$ 84/ano</span>
              </li>
            </ul>
            <button
              className={`w-full py-3 rounded-lg text-[13px] font-bold transition-colors ${
                billing === "anual"
                  ? "bg-primary text-on-primary cta-glow"
                  : "bg-surface-container-high border border-outline hover:bg-surface-container-highest"
              }`}
            >
              Assinar anual em 12x
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;