import type { Metadata } from "next";
import Image from "next/image";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { COMITE, IMG, MEMBRES } from "@/lib/data";

export const metadata: Metadata = {
  title: "Le club",
  description: "Société de Tir d’Ostwald — 500 licenciés, fondée en 1970, club FFTir.",
};

export default function ClubPage() {
  return (
    <>
      <PageHero
        kicker="Le club"
        title="Société de Tir d’Ostwald."
        lead="Association loi 1901. Près de 500 licenciés. Saison 25/26 au complet. Tir de loisir et sportif, normes FFTir, 100 % patriote."
        image={IMG.team}
        pos="center 32%"
      />
      <section className="px-5 py-20 md:px-8">
        <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-2">
          <Reveal className="hud-frame relative aspect-4/5 overflow-hidden">
            <Image
              src={IMG.team}
              alt="Binôme tactique en progression"
              fill
              className="object-cover object-[center_32%]"
            />
          </Reveal>
          <Reveal delay={0.1} className="flex flex-col justify-center">
            <h2 className="font-display text-4xl md:text-5xl">Notre ADN</h2>
            <p className="mt-6 text-lg text-mute">
              En 1970, Gilbert Hans et une bande de passionnés construisent intégralement
              la Société de Tir d’Ostwald. Fort d’un passé de compétition, le club est
              aujourd’hui tourné vers le loisir et le sport — quatre pas de tir rénovés,
              sécurité et environnement (tri, recyclage des métaux).
            </p>
            <p className="mt-4 text-lg text-mute">
              Convivialité, passion, règles de sécurité appliquées sans exception.
            </p>
          </Reveal>
        </div>
      </section>
      <section className="border-t border-line px-5 py-20 md:px-8">
        <div className="mx-auto max-w-7xl">
          <Reveal>
            <p className="font-mono text-[10px] tracking-[0.32em] text-brass uppercase">Comité</p>
            <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {COMITE.map((p) => (
                <div key={p.name} className="border-t border-line pt-4">
                  <p className="text-xs text-brass">{p.role}</p>
                  <p className="font-display mt-1 text-2xl normal-case tracking-tight">{p.name}</p>
                </div>
              ))}
            </div>
            <p className="mt-10 max-w-3xl text-sm text-mute">
              Membres : {MEMBRES.join(" · ")}
            </p>
          </Reveal>
        </div>
      </section>
    </>
  );
}