import type { Metadata } from "next";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { IMG, PARTENAIRES } from "@/lib/data";

export const metadata: Metadata = {
  title: "Partenaires",
  description: "Partenaires de la Société de Tir d’Ostwald.",
};

export default function PartnersPage() {
  return (
    <>
      <PageHero
        kicker="Soutiens"
        title="Ceux qui tiennent la ligne avec nous."
        lead="Armurerie, assurances, banque, services. Le STO avance avec ses partenaires locaux."
        image={IMG.silhouette}
        pos="center"
      />
      <section className="px-5 py-16 md:px-8 md:py-24">
        <div className="mx-auto grid max-w-7xl gap-3 sm:grid-cols-2 lg:grid-cols-4">
          {PARTENAIRES.map((name, i) => (
            <Reveal key={name} delay={i * 0.04}>
              <div className="flex min-h-32 items-center border border-line px-6 py-8 transition hover:border-brass hover:text-brass">
                <p className="font-display text-2xl normal-case tracking-tight">{name}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </>
  );
}