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

export default function EnHome() {
  return (
    <>
      <section className="hero-overlay" aria-labelledby="home-title">
        <ImageCarousel />
        <div className="hero-content">
          <div className="container">
            <h1 id="home-title" className="title">Portuguese Powerlifting Association</h1>
            <p className="subtitle">Accessible. Transparent. For all athletes.</p>
            <div className="mt-4 flex gap-2">
              <a className="btn btn-primary" href="/en/competicoes/calendario">View Calendar</a>
              <a className="btn btn-outline" href="/en/competicoes/resultados">View Results</a>
            </div>
          </div>
        </div>
      </section>
      <section className="hero" aria-label="APP Highlights">
        <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">About</h3>
              <p className="muted">Learn about APP and our mission.</p>
              <a className="underline mt-2 inline-block" href="/en/sobre/quem-somos">Read more</a>
            </div>
            <div className="border p-4 rounded-md">
              <h3 className="font-semibold">Rules</h3>
              <p className="muted">IPF Rule Book and Anti-Doping.</p>
              <a className="underline mt-2 inline-block" href="/en/regras/ipf-rule-book">See rules</a>
            </div>
            <div className="border p-4 rounded-md">
              <h3 className="font-semibold">FAQ</h3>
              <p className="muted">Frequently asked questions.</p>
              <a className="underline mt-2 inline-block" href="/en/perguntas">Explore</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
