function Features() {
  const features = [
    {
      icon: "analytics",
      title: "Estatísticas que contam a história",
      body: "Gols, assistências, minutos, aproveitamento e muito mais. Tudo atualizado a cada jogo registrado.",
      accent: "primary",
      tag: "stats",
    },
    {
      icon: "event",
      title: "Novo jogo em 30 segundos",
      body: "Formulário enxuto: time, adversário, placar e lances. Registre durante o intervalo.",
      accent: "tertiary",
      tag: "flow",
    },
    {
      icon: "payments",
      title: "Controle de custos do jogo",
      body: "Mensalidade, uniforme, inscrição, viagem, transmissão, lanche e muito mais. Registre cada gasto e veja o total da temporada.",
      accent: "tertiary",
      tag: "custos",
    },
    {
      icon: "share",
      title: "Compartilhe com a família",
      body: "Gere cards prontos com os números do seu craque pra mandar no grupo da família.",
      accent: "primary",
      tag: "share",
      soon: true,
    },
  ];

  return (
    <section id="recursos" className="relative py-24" data-screen-label="Recursos">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex items-end justify-between flex-wrap gap-6 mb-12">
          <div className="max-w-2xl">
            <div className="code-chip text-on-surface-variant mb-3">
              <span className="text-primary">/</span>recursos
            </div>
            <h2 className="text-4xl md:text-5xl font-black tracking-tighter leading-[1.05]">
              Os números do craque,<br />
              <span className="text-on-surface-variant">e os do seu bolso.</span>
            </h2>
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
          {features.map((f, i) => (
            <div key={i} className="group relative bg-surface-container border border-outline rounded-xl p-6 hover:bg-surface-container-high transition-colors overflow-hidden">
              {f.soon && (
                <div className="absolute top-3 right-3 px-2 py-0.5 rounded-full bg-primary/15 border border-primary/30 text-[9px] font-bold uppercase tracking-widest text-primary-dim">
                  Em breve
                </div>
              )}
              <div className="flex items-center justify-between mb-8">
                <div className={`w-10 h-10 rounded-lg flex items-center justify-center border border-outline ${f.accent === "tertiary" ? "bg-tertiary-container" : "bg-primary/10"}`}>
                  <Icon name={f.icon} className={f.accent === "tertiary" ? "text-tertiary" : "text-primary"} size={20} />
                </div>
                <span className="code-chip text-on-surface-variant opacity-50">#{f.tag}</span>
              </div>
              <h3 className="text-[16px] font-bold tracking-tight text-on-surface mb-2">
                {f.title}
              </h3>
              <p className="text-[13px] text-on-surface-variant leading-relaxed">{f.body}</p>
              <div className="mt-5 pt-4 border-t border-outline flex items-center text-[11px] font-bold text-primary opacity-0 group-hover:opacity-100 transition-opacity">
                Saiba mais
                <Icon name="arrow_forward" size={14} className="ml-1" />
              </div>
            </div>
          ))}
        </div>

        {/* Feature bento */}
        <div className="mt-4 grid lg:grid-cols-3 gap-3">
          {/* Big: Aproveitamento example */}
          <div className="lg:col-span-2 bg-surface-container border border-outline rounded-2xl p-8 overflow-hidden relative">
            <div className="absolute top-0 right-0 w-64 h-64" style={{ background: "radial-gradient(circle, rgba(167,139,250,0.08), transparent 60%)" }} />
            <div className="code-chip text-primary mb-3">// aproveitamento</div>
            <h3 className="text-2xl font-black tracking-tight mb-2">Cada partida gera insight.</h3>
            <p className="text-on-surface-variant text-[13px] max-w-lg mb-8">
              Vitórias, empates, derrotas e a eficácia calculada em tempo real. O donut chart do app
              mostra a temporada em uma olhada.
            </p>

            <div className="grid grid-cols-[auto_1fr] gap-8 items-center">
              <div className="relative w-40 h-40">
                <div
                  className="w-full h-full rounded-full donut-mask"
                  style={{ background: "conic-gradient(#34d399 0% 65%, #fbbf24 65% 85%, #ef4444 85% 100%)" }}
                />
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                  <span className="text-3xl font-black">82%</span>
                  <span className="text-[9px] text-on-surface-variant uppercase font-bold tracking-widest">Eficácia</span>
                </div>
              </div>

              <div className="space-y-3">
                {[
                  { l: "Vitórias", v: "12", c: "bg-tertiary", pct: "63%" },
                  { l: "Empates", v: "4", c: "bg-warning", pct: "21%" },
                  { l: "Derrotas", v: "3", c: "bg-error", pct: "16%" },
                ].map((r, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className={`w-2 h-2 rounded-full ${r.c}`} />
                    <span className="text-[12px] font-bold w-20">{r.l}</span>
                    <div className="flex-1 h-1 bg-surface-container-highest rounded-full overflow-hidden">
                      <div className={`h-full ${r.c} rounded-full bar-fill`} style={{ width: r.pct }} />
                    </div>
                    <span className="text-[12px] font-black w-6 text-right">{r.v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Side: Live card */}
          <div className="bg-surface-container border border-outline rounded-2xl p-6 relative overflow-hidden flex flex-col">
            <div className="code-chip text-tertiary mb-3">// ao vivo</div>
            <h3 className="text-2xl font-black tracking-tight mb-2">Modo intervalo.</h3>
            <p className="text-on-surface-variant text-[13px] mb-6">
              Registre gols e lances durante a partida — sem atrapalhar o jogo.
            </p>

            <div className="space-y-2 mt-auto">
              {[
                { t: "34'", txt: "⚽ Gol — Arthur Silva", accent: "text-tertiary" },
                { t: "41'", txt: "🅰️ Assistência — Arthur", accent: "text-primary" },
                { t: "58'", txt: "🟨 Falta sofrida", accent: "text-warning" },
                { t: "72'", txt: "⚽ Gol — Arthur Silva", accent: "text-tertiary" },
              ].map((e, i) => (
                <div key={i} className="flex items-center gap-3 bg-surface-container-high border border-outline rounded-lg px-3 py-2">
                  <span className="text-[11px] font-mono font-bold text-on-surface-variant w-8">{e.t}</span>
                  <span className={`text-[12px] font-medium ${e.accent}`}>{e.txt}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Features = Features;