export default function FutebolGoiasSite() { const jogos = [ { id: 1, competicao: "Campeonato Goiano", horario: "16:00", time1: "Goiás", time2: "Vila Nova", status: "Agendado", canal: "TV Brasil Central", dataJogo: "Hoje", }, { id: 2, competicao: "Campeonato Goiano", horario: "18:30", time1: "Atlético-GO", time2: "Anápolis", status: "Ao vivo", canal: "YouTube", dataJogo: "Hoje", }, { id: 3, competicao: "Campeonato Goiano", horario: "20:00", time1: "Aparecidense", time2: "Crac", status: "Agendado", canal: "Premiere", dataJogo: "Amanhã", }, ];

const destaques = jogos.filter((jogo) => jogo.dataJogo === "Hoje");

return ( <div className="min-h-screen bg-zinc-950 text-white"> <header className="border-b border-white/10 bg-zinc-950/80 backdrop-blur"> <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4"> <div> <h1 className="text-2xl font-bold tracking-tight">Futebol GO</h1> <p className="text-sm text-zinc-400">Jogos, horários e transmissões do futebol goiano</p> </div> <nav className="hidden gap-6 text-sm text-zinc-300 md:flex"> <a href="#jogos" className="hover:text-white">Jogos</a> <a href="#competicoes" className="hover:text-white">Competições</a> <a href="#times" className="hover:text-white">Times</a> </nav> </div> </header>

<main>
    <section className="mx-auto grid max-w-7xl gap-8 px-6 py-12 md:grid-cols-[1.25fr_0.75fr] md:py-20">
      <div>
        <span className="inline-flex rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-300">
          Portal profissional de jogos
        </span>
        <h2 className="mt-4 text-4xl font-black tracking-tight md:text-6xl">
          O futebol de Goiás em um só lugar.
        </h2>
        <p className="mt-5 max-w-2xl text-base leading-7 text-zinc-300 md:text-lg">
          Exiba jogos de hoje, próximas partidas, campeonatos, canais de transmissão e filtros por clube com um visual moderno, rápido e pronto para crescer.
        </p>
        <div className="mt-8 flex flex-wrap gap-3">
          <button className="rounded-2xl bg-white px-5 py-3 text-sm font-semibold text-zinc-950 shadow-lg transition hover:scale-[1.02]">
            Ver jogos de hoje
          </button>
          <button className="rounded-2xl border border-white/15 px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/5">
            Explorar competições
          </button>
        </div>

        <div className="mt-10 grid gap-4 sm:grid-cols-3">
          {[
            { label: "Jogos listados", value: "120+" },
            { label: "Times monitorados", value: "20+" },
            { label: "Atualização", value: "Tempo real" },
          ].map((item) => (
            <div key={item.label} className="rounded-3xl border border-white/10 bg-white/5 p-5 shadow-2xl shadow-black/20">
              <div className="text-2xl font-bold">{item.value}</div>
              <div className="mt-1 text-sm text-zinc-400">{item.label}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="rounded-[28px] border border-white/10 bg-gradient-to-br from-emerald-500/20 to-cyan-500/10 p-5 shadow-2xl shadow-emerald-950/20">
        <div className="rounded-3xl border border-white/10 bg-zinc-950/80 p-5">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-zinc-400">Destaque do dia</p>
              <h3 className="text-xl font-bold">Clássico goiano</h3>
            </div>
            <span className="rounded-full bg-red-500/20 px-3 py-1 text-xs font-semibold text-red-300">
              Ao vivo
            </span>
          </div>
          <div className="mt-8 rounded-3xl border border-white/10 bg-white/5 p-6 text-center">
            <p className="text-sm text-zinc-400">Campeonato Goiano</p>
            <div className="mt-4 grid grid-cols-[1fr_auto_1fr] items-center gap-4">
              <div>
                <div className="text-lg font-bold">Atlético-GO</div>
              </div>
              <div className="text-2xl font-black text-emerald-300">x</div>
              <div>
                <div className="text-lg font-bold">Anápolis</div>
              </div>
            </div>
            <p className="mt-4 text-sm text-zinc-300">18:30 • YouTube</p>
          </div>
        </div>
      </div>
    </section>

    <section id="jogos" className="mx-auto max-w-7xl px-6 pb-16">
      <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div>
          <h3 className="text-2xl font-bold">Próximos jogos</h3>
          <p className="text-zinc-400">Visual limpo, filtros e cards prontos para integrar com sua API.</p>
        </div>
        <div className="flex flex-wrap gap-3">
          {['Hoje', 'Amanhã', 'Ao vivo', 'Todos'].map((filtro) => (
            <button
              key={filtro}
              className="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-zinc-200 transition hover:bg-white/10"
            >
              {filtro}
            </button>
          ))}
        </div>
      </div>

      <div className="grid gap-5 lg:grid-cols-3">
        {jogos.map((jogo) => (
          <article
            key={jogo.id}
            className="rounded-[28px] border border-white/10 bg-white/5 p-5 shadow-xl shadow-black/20 transition hover:-translate-y-1 hover:bg-white/[0.07]"
          >
            <div className="flex items-start justify-between gap-3">
              <div>
                <p className="text-xs uppercase tracking-[0.2em] text-emerald-300">{jogo.competicao}</p>
                <p className="mt-2 text-sm text-zinc-400">{jogo.dataJogo}</p>
              </div>
              <span className="rounded-full border border-white/10 bg-zinc-900 px-3 py-1 text-xs text-zinc-300">
                {jogo.status}
              </span>
            </div>

            <div className="mt-8 flex items-center justify-between gap-3">
              <div className="text-left">
                <div className="text-lg font-bold">{jogo.time1}</div>
              </div>
              <div className="text-xl font-black text-zinc-500">x</div>
              <div className="text-right">
                <div className="text-lg font-bold">{jogo.time2}</div>
              </div>
            </div>

            <div className="mt-8 flex items-center justify-between border-t border-white/10 pt-4 text-sm text-zinc-300">
              <span>{jogo.horario}</span>
              <span>{jogo.canal}</span>
            </div>
          </article>
        ))}
      </div>
    </section>

    <section id="competicoes" className="mx-auto max-w-7xl px-6 pb-16">
      <div className="grid gap-5 md:grid-cols-3">
        {[
          "Campeonato Goiano",
          "Copa Verde",
          "Série B",
        ].map((item) => (
          <div key={item} className="rounded-[28px] border border-white/10 bg-gradient-to-b from-white/8 to-white/5 p-6">
            <h4 className="text-xl font-bold">{item}</h4>
            <p className="mt-3 text-sm leading-6 text-zinc-400">
              Área dedicada para calendário, classificação, regulamento e cobertura da competição.
            </p>
          </div>
        ))}
      </div>
    </section>

    <section id="times" className="mx-auto max-w-7xl px-6 pb-24">
      <div className="rounded-[32px] border border-white/10 bg-white/5 p-8">
        <h3 className="text-2xl font-bold">Pronto para integrar com sua API</h3>
        <p className="mt-3 max-w-3xl text-zinc-300">
          A próxima etapa é trocar os dados fixos por um fetch da sua API, aplicar filtro para exibir apenas jogos de Goiás e criar páginas internas de times, campeonatos e detalhes da partida.
        </p>
        <div className="mt-8 grid gap-4 md:grid-cols-4">
          {[
            "Página inicial profissional",
            "Cards de jogos",
            "Filtro por data",
            "Base pronta para API",
          ].map((feature) => (
            <div key={feature} className="rounded-2xl border border-white/10 bg-zinc-900/70 p-4 text-sm text-zinc-200">
              {feature}
            </div>
          ))}
        </div>
      </div>
    </section>
  </main>
</div>

); }