import { ImageCarousel } from "@/components/layout/ImageCarousel";

export default function PtHome() {
  return (
    <>
      <section className="hero-overlay" aria-labelledby="home-title">
        <ImageCarousel />
        <div className="hero-content">
          <div className="container container-wide">
            <h1 id="home-title" className="title">Associação Portuguesa de Powerlifting</h1>
            <p className="subtitle">Acessível. Transparente. Para todos os atletas.</p>
            <div className="mt-4 flex gap-2">
              <a className="btn btn-primary" href="/pt/competicoes/calendario">Ver Calendário</a>
              <a className="btn btn-outline" href="/pt/competicoes/resultados">Ver Resultados</a>
            </div>
          </div>
        </div>
      </section>
      <section className="hero hero-compact" aria-label="Destaques do APP">
        <div className="container container-wide">
          <div className="space-y-6">
            <div className="space-y-6">
              <div className="border rounded-md overflow-hidden bg-white">
                <div className="bg-[var(--color-green)] text-white px-6 py-4 flex flex-col gap-1 md:flex-row md:items-center md:justify-between" style={{ color: "#fff" }}>
                  <div>
                    <p className="text-xs font-semibold tracking-[0.08em] uppercase text-white" style={{ color: "#fff" }}>Boas-vindas</p>
                    <h2 className="text-xl md:text-2xl font-bold text-white" style={{ color: "#fff" }}>Aqui é casa para atletas, treinadores e clubes</h2>
                  </div>
                  <a className="btn btn-outline bg-white text-[var(--color-green)] border-white shadow-sm" href="/pt/sobre/quem-somos" aria-label="Falar com a APP">Falar connosco</a>
                </div>
                <div className="p-6 space-y-4">
                  <p className="muted">Boas-vindas ao site da Associação Portuguesa de Powerlifting! Estás na casa para todos os recursos relacionados com powerlifting na IPF, em português.</p>
                  <div className="flex flex-wrap gap-2 text-sm">
                    <span className="rounded-full px-3 py-1 bg-[rgba(0,106,61,0.08)] text-[var(--color-green)]">Calendário e inscrições</span>
                    <span className="rounded-full px-3 py-1 bg-[rgba(192,0,33,0.08)] text-[var(--color-red)]">Regras e anti-doping</span>
                    <span className="rounded-full px-3 py-1 bg-[rgba(0,0,0,0.06)]">Dúvidas frequentes</span>
                    <span className="rounded-full px-3 py-1 bg-[rgba(0,106,61,0.08)] text-[var(--color-green)]">Contacto direto</span>
                  </div>
                  <div className="grid gap-3 md:grid-cols-3">
                    <div className="border rounded-md overflow-hidden">
                      <div className="bg-[var(--color-red)] text-white px-4 py-2 flex items-center justify-between">
                        <h3 className="font-semibold">Calendário</h3>
                        <span className="text-xs font-semibold uppercase tracking-[0.08em]">Próximas provas</span>
                      </div>
                      <div className="p-4 space-y-2 bg-[rgba(192,0,33,0.06)]">
                        <p className="text-sm text-[var(--foreground)]">Encontre a sua próxima prova.</p>
                        <a className="btn btn-outline px-3 text-[var(--color-red)] border-[rgba(192,0,33,0.35)]" href="/pt/competicoes/calendario">Abrir calendário</a>
                      </div>
                    </div>
                    <div className="border rounded-md overflow-hidden">
                      <div className="bg-[#f2b600] text-[var(--foreground)] px-4 py-2 flex items-center justify-between">
                        <h3 className="font-semibold">Regras</h3>
                        <span className="text-xs font-semibold uppercase tracking-[0.08em]">IPF</span>
                      </div>
                      <div className="p-4 space-y-2 bg-[rgba(242,182,0,0.14)]">
                        <p className="text-sm text-[var(--foreground)]">IPF Rule Book e orientações.</p>
                        <a className="btn btn-outline px-3 text-[#b88700] border-[rgba(242,182,0,0.45)]" href="/pt/regras/ipf-rule-book">Ver regras</a>
                      </div>
                    </div>
                    <div className="border rounded-md overflow-hidden">
                      <div className="bg-[var(--color-green)] text-white px-4 py-2 flex items-center justify-between">
                        <h3 className="font-semibold">FAQ</h3>
                        <span className="text-xs font-semibold uppercase tracking-[0.08em]">Dúvidas</span>
                      </div>
                      <div className="p-4 space-y-2 bg-[rgba(0,106,61,0.08)]">
                        <p className="text-sm text-[var(--foreground)]">Equipamento, pesagens, logística.</p>
                        <a className="btn btn-outline px-3 text-[var(--color-green)] border-[rgba(0,106,61,0.35)]" href="/pt/perguntas">Abrir FAQ</a>
                      </div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                   <a className="btn bg-[var(--color-red)] text-white hover:opacity-90 px-4 text-center" href="/pt/competicoes/resultados" aria-label="Ver resultados oficiais">Resultados</a>
                   <a className="btn bg-[var(--color-green)] text-white hover:opacity-90 px-4 text-center" href="/pt/competicoes/calendario" aria-label="Ver fotos das competições">Fotos</a>
                  </div>
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="border rounded-md overflow-hidden">
                  <div className="bg-[var(--color-red)] text-white px-4 py-2 flex items-center justify-between">
                    <h3 className="font-semibold">Preparar a próxima prova</h3>
                    <span className="text-xs font-semibold uppercase tracking-[0.08em]">Passo a passo</span>
                  </div>
                  <div className="p-6">
                    <ol className="space-y-3 text-sm">
                      <li><span className="font-semibold text-[var(--color-red)]">1.</span> Escolha a prova e confirme standards da categoria.</li>
                      <li><span className="font-semibold text-[var(--color-red)]">2.</span> Revise o IPF Rule Book e as orientações anti-doping.</li>
                      <li><span className="font-semibold text-[var(--color-red)]">3.</span> Tire dúvidas no FAQ e alinhe equipamento e pesagens.</li>
                    </ol>
                  </div>
                </div>
                <div className="border rounded-md overflow-hidden">
                  <div className="bg-[#f2b600] text-[var(--foreground)] px-4 py-2 flex items-center justify-between">
                    <h3 className="font-semibold">Documentos e ajuda</h3>
                    <span className="text-xs font-semibold uppercase tracking-[0.08em]">Acesso rápido</span>
                  </div>
                  <div className="p-6 flex flex-wrap gap-2 text-sm">
                    <a className="btn btn-outline px-3" href="/pt/competicoes/calendario">Calendário e inscrições</a>
                    <a className="btn btn-outline px-3" href="/pt/competicoes/resultados">Resultados oficiais</a>
                    <a className="btn btn-outline px-3" href="/pt/regras/anti-doping">Guia anti-doping</a>
                    <a className="btn btn-outline px-3" href="/pt/sobre/quem-somos">Quem somos e contactos</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}