import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { IMG } from "@/lib/data";

export const metadata: Metadata = {
  title: "Nous rejoindre",
  description: "Devenir licencié STO — entretien, dossier, formation, QCM FFTir.",
};

const PIECES = [
  "Une photo d’identité",
  "Copie recto verso de la CNI",
  "Certificat médical autorisant la pratique du tir",
  "Règlement complet de la cotisation",
];

export default function RejoindrePage() {
  return (
    <>
      <PageHero
        kicker="Licence"
        title="On ne s’improvise pas."
        lead="Visite, entretien avec le président Laurent Bassi ou un membre du comité, dossier, formation en situation, QCM FFTir. Objectif 100 % safe & protect."
        image={IMG.sights}
        pos="center 18%"
      />
      <section className="px-5 py-20 md:px-8">
        <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-2">
          <Reveal>
            <h2 className="font-display text-4xl">Le dossier</h2>
            <p className="mt-4 text-mute">
              Contactez-nous, passez visiter. Après entretien, un dossier vous est remis
              avec les règles du club et les pièces à fournir.
            </p>
            <ul className="mt-8 space-y-4">
              {PIECES.map((p) => (
                <li key={p} className="flex gap-3 border-b border-line pb-3">
                  <span className="text-brass">▸</span>
                  {p}
                </li>
              ))}
            </ul>
            <p className="mt-8 text-sm text-mute">
              Il est indispensable d’accepter les règles d’usage du club en termes de
              calibre et de comportement de sécurité. Tout nouvel adhérent suit une
              formation préalable en situation de tir.
            </p>
            <Link
              href="/contact"
              className="mt-10 inline-flex rounded-sm bg-brass px-6 py-3 text-xs tracking-[0.18em] text-ink uppercase"
            >
              Demander un entretien
            </Link>
          </Reveal>
          <Reveal className="hud-frame relative aspect-4/5 overflow-hidden" delay={0.1}>
            <Image src={IMG.sights} alt="Visée" fill className="object-cover object-[center_18%]" />
          </Reveal>
        </div>
      </section>
    </>
  );
}