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

export const metadata: Metadata = {
  title: "Les stands",
  description: "Stands 10, 20, 25 et 50 m mécanisés — STO Ostwald.",
};

export default function StandsPage() {
  return (
    <>
      <PageHero
        kicker="Infrastructure"
        title="Quatre pas. Une discipline."
        lead="Indoor et semi-indoor, entièrement rénovés. Alarme, LED, vidéo. Munitions plomb ou alliage cuivreux uniquement — pas de surplus militaire."
        image={IMG.indoor}
        pos="center"
      />
      <div className="px-5 py-16 md:px-8 md:py-24">
        <div className="mx-auto max-w-7xl space-y-24">
          {STANDS.map((item, i) => (
            <Reveal key={item.slug}>
              <article className="grid items-center gap-10 lg:grid-cols-2">
                <div className={`hud-frame relative aspect-4/5 overflow-hidden ${i % 2 ? "lg:order-2" : ""}`}>
                  <Image src={item.image} alt={`Stand ${item.dist}`} fill className="object-cover" style={{ objectPosition: item.pos }} />
                </div>
                <div>
                  <p className="font-mono text-[10px] tracking-[0.28em] text-brass uppercase">{item.tag}</p>
                  <h2 className="font-display mt-3 text-6xl md:text-8xl">{item.dist}</h2>
                  <p className="mt-6 text-lg text-mute">{item.body}</p>
                  <ul className="mt-8 space-y-3 text-sm">
                    {item.specs.map((s) => (
                      <li key={s} className="flex gap-3">
                        <span className="mt-2 h-1.5 w-1.5 rotate-45 bg-brass" />
                        {s}
                      </li>
                    ))}
                  </ul>
                  <p className="mt-8 text-xs text-mute">
                    La maîtrise de vos tirs est de votre responsabilité. Des dommages
                    matériels peuvent être facturés.
                  </p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </>
  );
}