import { Chevrons, ChevronsFiligrane } from "@/components/Chevrons";
import { FormulaireContact } from "@/components/FormulaireContact";
import {
  IconeEnveloppe,
  IconePosition,
  IconeTelephone,
} from "@/components/Icones";
import { Photo } from "@/components/Photo";
import { metadonneesPage } from "@/lib/metadonnees";
import { SITE, ZONES } from "@/lib/site";

export const metadata = metadonneesPage({
  titre: "Contact | ADT Solutions Web, Laval (53)",
  description:
    "Parlez-nous de votre projet : logiciel de gestion sur mesure, plateforme " +
    "de réservation et de contrôle d'accès, ou site internet. Laval, Mayenne, " +
    "Maine-et-Loire et Grand Ouest.",
  chemin: "/contact/",
});

export default function PageContact() {
  return (
    <>
      {/* ══ Hero ═════════════════════════════════════════════════════════ */}
      <section className="relative overflow-hidden bg-ivoire">
        <ChevronsFiligrane className="pointer-events-none absolute -right-20 top-0 h-[420px] w-[420px] text-saumon/[0.16]" />

        <div className="conteneur relative py-14 sm:py-20">
          <p className="surtitre">
            <Chevrons className="h-3.5 w-3.5" />
            Contact
          </p>

          <h1 className="max-w-3xl text-[2rem] sm:text-5xl">
            Racontez-nous ce qui vous fait perdre du temps
          </h1>

          <p className="mt-7 max-w-2xl text-[1.0625rem] leading-relaxed text-gris">
            Une remise de clé en main propre, une donnée saisie deux fois, une
            demande dont personne ne sait où elle en est : décrivez le geste, on
            vous dit s&apos;il peut disparaître — et ce que ça suppose.
          </p>
        </div>
      </section>

      {/* ══ Formulaire + coordonnées ═════════════════════════════════════ */}
      <section className="section">
        <div className="conteneur grid gap-12 lg:grid-cols-12 lg:gap-16">
          {/* ── Le formulaire ── */}
          <div className="lg:col-span-7">
            <h2 className="text-2xl sm:text-3xl">Écrire un message</h2>
            <p className="mt-3 text-[0.95rem] text-gris">
              Les quatre champs sont obligatoires. Le téléphone sert surtout à
              rappeler quand un échange de dix minutes vaut mieux qu&apos;un
              courriel.
            </p>

            <div className="mt-8">
              <FormulaireContact />
            </div>
          </div>

          {/* ── Coordonnées ── */}
          <aside className="lg:col-span-5">
            <h2 className="text-2xl sm:text-3xl">Nous joindre directement</h2>

            <ul className="mt-8 space-y-6">
              <li className="flex gap-4">
                <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-sm bg-saumon-clair">
                  <IconeEnveloppe className="h-5 w-5 text-saumon-texte" />
                </span>
                <div>
                  <p className="text-sm font-bold uppercase tracking-[0.12em] text-gris">
                    E-mail
                  </p>
                  {/* Aucune adresse inventée : le marqueur reste visible tant
                      que la vraie valeur n'a pas été fournie. Voir TODO.md. */}
                  <p className="mt-1.5">
                    <span className="a-completer">{SITE.email}</span>
                  </p>
                </div>
              </li>

              <li className="flex gap-4">
                <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-sm bg-saumon-clair">
                  <IconeTelephone className="h-5 w-5 text-saumon-texte" />
                </span>
                <div>
                  <p className="text-sm font-bold uppercase tracking-[0.12em] text-gris">
                    Téléphone
                  </p>
                  <p className="mt-1.5">
                    <span className="a-completer">{SITE.telephone}</span>
                  </p>
                </div>
              </li>

              <li className="flex gap-4">
                <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-sm bg-saumon-clair">
                  <IconePosition className="h-5 w-5 text-saumon-texte" />
                </span>
                <div>
                  <p className="text-sm font-bold uppercase tracking-[0.12em] text-gris">
                    Où nous sommes
                  </p>
                  <p className="mt-1.5 font-semibold">
                    {SITE.ville} ({SITE.codePostal})
                  </p>
                  <p className="mt-1 text-[0.95rem] text-gris">
                    {ZONES.join(" · ")} — et à distance partout ailleurs.
                  </p>
                  <p className="mt-2">
                    <span className="a-completer">{SITE.adresse}</span>
                  </p>
                </div>
              </li>
            </ul>

            <Photo
              base="/photos/rendez-vous"
              alt="Coin de bureau pendant un rendez-vous : un ordinateur portable ouvert sur une table basse."
              largeurs={[440, 660, 880]}
              largeur={880}
              hauteur={1173}
              sizes="(min-width: 1024px) 440px, 100vw"
              className="mt-10 w-full rounded-sm"
            />
          </aside>
        </div>
      </section>

      {/* ══ Ce qui se passe ensuite ══════════════════════════════════════ */}
      <section className="section bg-ivoire">
        <div className="conteneur">
          <p className="surtitre">
            <Chevrons className="h-3.5 w-3.5" />
            Ce qui se passe ensuite
          </p>
          <h2 className="max-w-3xl text-3xl sm:text-4xl">
            Trois étapes, sans engagement
          </h2>

          <ol className="mt-12 grid gap-6 md:grid-cols-3">
            {[
              {
                titre: "On vous rappelle",
                texte:
                  "Un échange pour comprendre votre métier et la façon dont le travail se fait vraiment chez vous. Pas de démonstration à ce stade.",
              },
              {
                titre: "On vous écrit ce qu'on a compris",
                texte:
                  "Le périmètre, ce qui se développe, ce qui s'achète, et ce qui ne vaut pas le coup. Avec un chiffrage et un délai.",
              },
              {
                titre: "On construit par morceaux",
                texte:
                  "La première version couvre le geste le plus coûteux. On la met en service, on l'utilise, puis on avance.",
              },
            ].map((etape, index) => (
              <li key={etape.titre} className="carte">
                <span className="text-3xl font-extrabold text-saumon-texte">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <h3 className="mt-4 text-xl">{etape.titre}</h3>
                <p className="mt-3 text-[0.95rem] leading-relaxed text-gris">
                  {etape.texte}
                </p>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </>
  );
}