import Link from "next/link";
import { AppelAction } from "@/components/AppelAction";
import { Chevrons, ChevronsFiligrane } from "@/components/Chevrons";
import { IconeFleche } from "@/components/Icones";
import { FAMILLES, REALISATIONS } from "@/content/realisations";
import { metadonneesPage } from "@/lib/metadonnees";

export const metadata = metadonneesPage({
  titre: "Réalisations : six logiciels et sites en production | ADT Solutions Web",
  description:
    "Six cas concrets, du problème au résultat : box de stockage qui s'ouvre au " +
    "paiement, production de boulangerie calculée, salles municipales en régie " +
    "publique, badges de copropriété, interventions et flotte, meublés multilingues.",
  chemin: "/realisations/",
});

export default function PageRealisations() {
  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" />
            Réalisations
          </p>

          <h1 className="max-w-3xl text-[2rem] sm:text-5xl">
            Six cas. Ce qui coinçait, ce qu&apos;on a construit.
          </h1>

          <div className="prose-adt mt-7 max-w-2xl">
            <p>
              Des outils en production, utilisés tous les jours. Pas des
              démonstrations.
            </p>
            <p>
              Nos clients ne sont pas nommés : <strong>on ne cite personne sans
              accord écrit</strong>, et on ne publie aucune capture contenant de
              vraies données. Ce qui est décrit ici, en revanche, est exactement
              ce que fait le logiciel.
            </p>
          </div>
        </div>
      </section>

      {/* ══ Sommaire ═════════════════════════════════════════════════════ */}
      <section className="border-b border-trait py-10">
        <div className="conteneur">
          <h2 className="sr-only">Sommaire des cas</h2>
          <ul className="flex flex-wrap gap-2.5">
            {REALISATIONS.map((cas) => (
              <li key={cas.slug}>
                <a
                  href={`#${cas.slug}`}
                  className="inline-flex items-center gap-2 rounded-sm border border-trait px-4 py-2 text-sm font-semibold transition-colors hover:border-saumon hover:text-saumon-texte"
                >
                  <Chevrons className="h-3 w-3 text-saumon" />
                  {cas.secteur}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </section>

      {/* ══ Les six cas ══════════════════════════════════════════════════ */}
      {REALISATIONS.map((cas, index) => (
        <article
          key={cas.slug}
          id={cas.slug}
          // `scroll-mt` compense la hauteur de l'entête collante : sans ça,
          // un lien d'ancre positionne le titre SOUS la barre de navigation.
          className={`scroll-mt-24 border-b border-trait py-14 sm:py-20 ${
            index % 2 === 1 ? "bg-ivoire" : ""
          }`}
        >
          <div className="conteneur">
            {/* ── En-tête du cas ── */}
            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
              <span className="rounded-sm bg-anthracite px-2.5 py-1 text-xs font-bold uppercase tracking-[0.12em] text-white">
                {cas.secteur}
              </span>
              <span className="text-xs font-bold uppercase tracking-[0.12em] text-saumon-texte">
                {FAMILLES[cas.famille]}
              </span>
            </div>

            <h2 className="mt-5 max-w-3xl text-[1.75rem] sm:text-4xl">
              {cas.titre}
            </h2>
            <p className="mt-3 text-lg font-semibold text-gris">{cas.client}</p>

            <div className="mt-10 grid gap-8 lg:grid-cols-3 lg:gap-10">
              {/* ── Problème ── */}
              <div>
                <h3 className="mb-4 flex items-center gap-2.5 text-xs font-bold uppercase tracking-[0.16em] text-saumon-texte">
                  <Chevrons className="h-3.5 w-3.5" />
                  Le problème
                </h3>
                <p className="text-[0.95rem] leading-relaxed text-gris">
                  {cas.probleme}
                </p>
              </div>

              {/* ── Solution ── */}
              <div>
                <h3 className="mb-4 flex items-center gap-2.5 text-xs font-bold uppercase tracking-[0.16em] text-saumon-texte">
                  <Chevrons className="h-3.5 w-3.5" />
                  Ce qu&apos;on a construit
                </h3>
                <ul className="space-y-3">
                  {cas.solution.map((ligne) => (
                    <li
                      key={ligne}
                      className="flex gap-2.5 text-[0.95rem] leading-relaxed text-gris"
                    >
                      <span
                        aria-hidden="true"
                        className="mt-2 h-1.5 w-1.5 shrink-0 rotate-45 bg-saumon"
                      />
                      {ligne}
                    </li>
                  ))}
                </ul>
              </div>

              {/* ── Résultat ── */}
              <div>
                <h3 className="mb-4 flex items-center gap-2.5 text-xs font-bold uppercase tracking-[0.16em] text-saumon-texte">
                  <Chevrons className="h-3.5 w-3.5" />
                  Ce que ça change
                </h3>
                <p className="border-l-2 border-saumon pl-5 text-[1.0625rem] font-semibold leading-relaxed text-anthracite">
                  {cas.resultat}
                </p>
              </div>
            </div>

            {/* ── Briques mises en œuvre ── */}
            <div className="mt-10 flex flex-wrap items-center gap-2">
              <span className="mr-1 text-xs font-bold uppercase tracking-[0.12em] text-gris">
                Briques
              </span>
              {cas.briques.map((brique) => (
                <span
                  key={brique}
                  className="rounded-sm border border-trait bg-white px-2.5 py-1 text-xs font-semibold text-gris"
                >
                  {brique}
                </span>
              ))}
            </div>

            <Link
              href={cas.lienOffre}
              className="group mt-8 inline-flex items-center gap-2 text-sm font-bold text-anthracite"
            >
              {cas.lienOffre === "/sites-internet/"
                ? "Voir l'offre sites internet"
                : "Voir l'offre logiciels sur mesure"}
              <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
            </Link>
          </div>
        </article>
      ))}

      <AppelAction
        titre="Votre cas ressemble à l'un de ceux-là ?"
        texte="Les problèmes se répètent d'un métier à l'autre : une clé à remettre en main propre, une donnée saisie deux fois, une demande dont personne ne sait où elle en est."
      />
    </>
  );
}