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

export const metadata: Metadata = {
  title: "Horaires",
  description: "Horaires d’ouverture du stand de tir STO Ostwald.",
};

export default function InfosPage() {
  return (
    <>
      <PageHero
        kicker="Infos utiles"
        title="Quand le stand ouvre."
        lead="Zone omnisports, quai Olida, 67540 Ostwald. Entraînements aussi sur rendez-vous."
        image={IMG.stand50}
        pos="center"
      />
      <section className="px-5 py-16 md:px-8 md:py-24">
        <div className="mx-auto max-w-3xl">
          {HORAIRES.map((h, i) => (
            <Reveal key={h.day} delay={i * 0.04}>
              <div className="flex items-baseline justify-between border-b border-line py-5">
                <span className="font-display text-3xl">{h.day}</span>
                <span className="font-mono text-brass">{h.hours}</span>
              </div>
            </Reveal>
          ))}
          <Reveal className="mt-12 text-sm text-mute">
            <p>
              {CONTACT.address}
              <br />
              {CONTACT.city}
            </p>
            <p className="mt-4">
              {CONTACT.phone} · {CONTACT.email}
            </p>
          </Reveal>
        </div>
      </section>
    </>
  );
}