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

export const metadata: Metadata = {
  title: "Contact",
  description: "Contacter le STO — 06 17 66 23 95 · sto_tir@yahoo.com",
};

export default function ContactPage() {
  return (
    <>
      <PageHero
        kicker="Contact"
        title="Une question. Un rappel."
        lead="Pratique ou technique : laissez vos coordonnées, le club vous rappelle."
        image={IMG.carbine}
        pos="center 28%"
      />
      <section className="px-5 py-16 md:px-8 md:py-24">
        <div className="mx-auto grid max-w-7xl gap-16 lg:grid-cols-12">
          <Reveal className="lg:col-span-5">
            <p className="font-mono text-brass">{CONTACT.phone}</p>
            <p className="mt-2">
              <a href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a>
            </p>
            <p className="mt-8 text-mute">
              {CONTACT.address}
              <br />
              {CONTACT.city}
            </p>
          </Reveal>
          <Reveal className="lg:col-span-7" delay={0.1}>
            <ContactForm />
          </Reveal>
        </div>
      </section>
    </>
  );
}