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">
            <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" aria-label="Destaques do APP">
        <div className="container">
          <div className="mt-8 grid gap-4 md:grid-cols-3">
            <div className="border p-4 rounded-md">
              <h3 className="font-semibold">Quem Somos</h3>
              <p className="muted">Conheça a APP e a nossa missão.</p>
              <a className="underline mt-2 inline-block" href="/pt/sobre/quem-somos">Ler mais</a>
            </div>
            <div className="border p-4 rounded-md">
              <h3 className="font-semibold">Regras</h3>
              <p className="muted">IPF Rule Book e Anti-Doping.</p>
              <a className="underline mt-2 inline-block" href="/pt/regras/ipf-rule-book">Consultar</a>
            </div>
            <div className="border p-4 rounded-md">
              <h3 className="font-semibold">FAQ</h3>
              <p className="muted">Perguntas frequentes para atletas e treinadores.</p>
              <a className="underline mt-2 inline-block" href="/pt/perguntas">Explorar</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
