function Screens() {
  const screens = [
    { id: "home", l: "Dashboard", d: "KPIs, aproveitamento e gols por campeonato." },
    { id: "match", l: "Detalhe do Jogo", d: "Resumo da partida com lances e local." },
    { id: "novo", l: "Novo Jogo", d: "Crie um jogo em segundos." },
    { id: "profile", l: "Perfil", d: "Atletas, times e campeonatos." },
  ];
  const [active, setActive] = React.useState("home");

  return (
    <section id="telas" className="relative py-24 border-t border-outline" data-screen-label="Telas">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex items-end justify-between flex-wrap gap-4 mb-10">
          <div>
            <div className="code-chip text-on-surface-variant mb-3"><span className="text-primary">/</span>telas</div>
            <h2 className="text-4xl md:text-5xl font-black tracking-tighter leading-[1.05]">
              Tudo o que você precisa,<br />
              <span className="text-on-surface-variant">em quatro telas.</span>
            </h2>
          </div>
          <div className="flex flex-wrap gap-1.5 bg-surface-container border border-outline rounded-full p-1">
            {screens.map((s) => (
              <button
                key={s.id}
                onClick={() => setActive(s.id)}
                className={`px-4 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-wider transition-colors ${
                  active === s.id ? "bg-primary text-on-primary" : "text-on-surface-variant hover:text-on-surface"
                }`}
              >
                {s.l}
              </button>
            ))}
          </div>
        </div>

        <div className="grid lg:grid-cols-[auto_1fr] gap-16 items-center">
          <div className="relative flex justify-center">
            <div className="absolute -inset-10">
              <div className="absolute inset-0 rounded-full" style={{ background: "radial-gradient(circle, rgba(167,139,250,0.15), transparent 55%)", filter: "blur(60px)" }} />
            </div>
            <PhoneMock screen={active} />
          </div>

          <div>
            <div className="space-y-2">
              {screens.map((s) => {
                const isActive = active === s.id;
                return (
                  <button
                    key={s.id}
                    onClick={() => setActive(s.id)}
                    className={`w-full text-left border rounded-xl p-5 transition-colors ${
                      isActive
                        ? "bg-surface-container-high border-primary/40"
                        : "bg-surface-container border-outline hover:bg-surface-container-high"
                    }`}
                  >
                    <div className="flex items-center justify-between">
                      <div>
                        <div className="code-chip text-on-surface-variant mb-1 opacity-60">#{s.id}</div>
                        <h3 className={`text-[18px] font-bold tracking-tight ${isActive ? "text-primary" : ""}`}>{s.l}</h3>
                        <p className="text-[13px] text-on-surface-variant mt-1">{s.d}</p>
                      </div>
                      <Icon
                        name={isActive ? "arrow_forward" : "chevron_right"}
                        className={isActive ? "text-primary" : "text-on-surface-variant"}
                        size={18}
                      />
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Screens = Screens;