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: "Initiation",
  description: "Séance d’initiation au tir au STO — 50 €, 25 m, .22 LR et 9 mm.",
};

export default function InitiationPage() {
  return (
    <>
      <PageHero
        kicker="Découverte"
        title="Une heure. Deux calibres. Zéro licence."
        lead="Autorisée et encadrée par la loi. Deux séances max par personne et par an. 50 €. Contrôle FINIADA obligatoire."
        image={IMG.pistol}
        pos="center 12%"
      />
      <section className="px-5 py-20 md:px-8">
        <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-2">
          <Reveal className="hud-frame relative aspect-4/5 overflow-hidden">
            <Image
              src={IMG.pistol}
              alt="Tireur en stance pistolet, stand indoor"
              fill
              className="object-cover object-[center_12%]"
            />
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="font-display text-4xl">Comment ça se passe</h2>
            <ol className="mt-8 space-y-6">
              {[
                "Prise de rendez-vous : nom, prénom, date de naissance, adresse actuelle.",
                "Contrôle FINIADA en ligne — obligation légale.",
                "Séance d’environ une heure au 25 m, armes de poing .22 LR et 9 mm.",
                "Encadrement par le président ou un membre du comité.",
              ].map((step, i) => (
                <li key={step} className="flex gap-4">
                  <span className="font-display text-2xl text-brass">0{i + 1}</span>
                  <span className="pt-1 text-mute">{step}</span>
                </li>
              ))}
            </ol>
            <p className="mt-8 font-display text-5xl text-brass">50 €</p>
            <Link
              href="/contact"
              className="mt-8 inline-flex rounded-sm bg-brass px-6 py-3 text-xs tracking-[0.18em] text-ink uppercase"
            >
              Réserver une initiation
            </Link>
          </Reveal>
        </div>
      </section>
    </>
  );
}