import Link from "next/link";
import { AppelAction } from "@/components/AppelAction";
import { Chevrons, ChevronsFiligrane } from "@/components/Chevrons";
import {
  IconeAtelier,
  IconeCaisses,
  IconeCarte,
  IconeCarteBancaire,
  IconeCle,
  IconeFleche,
  IconeImmeuble,
  IconeMessage,
  IconePosition,
} from "@/components/Icones";
import { metadonneesPage } from "@/lib/metadonnees";

export const metadata = metadonneesPage({
  titre: "Logiciels et plateformes sur mesure | ADT Solutions Web, Laval",
  description:
    "Réservation et codes d'accès, suivi de production, stock, interventions, " +
    "gestion locative. Des logiciels métier développés sur mesure à Laval, " +
    "connectés au paiement, aux SMS et à la cartographie.",
  chemin: "/logiciels-sur-mesure/",
});

/**
 * ── APPRENTISSAGE ────────────────────────────────────────────────────────────
 * Le contenu de la page est décrit dans un simple tableau JavaScript, puis
 * parcouru avec `.map()` juste en dessous. Un seul gabarit HTML pour cinq
 * blocs : si tu changes la mise en forme, tu la changes une fois.
 * C'est exactement ce que faisait ton `foreach` dans une vue PHP.
 * ─────────────────────────────────────────────────────────────────────────────
 */
const DOMAINES = [
  {
    icone: IconeCle,
    titre: "Réservation & codes d'accès",
    chapeau:
      "Le lieu se réserve, se paie et s'ouvre tout seul. C'est le cœur de ce qu'on fait.",
    points: [
      "Réservation en ligne d'espaces, de logements, de box, de salles, de parkings, d'emplacements",
      "Génération et envoi automatiques des codes d'accès, par mail et par SMS",
      "Ouverture et fermeture pilotées par l'état du paiement",
      "Portail occupant : son code, sa porte, sa lumière, son chauffage",
      "Suivi d'une demande étape par étape, façon suivi de colis",
    ],
    casLibelle: "Le cas du loueur de box",
    casHref: "/realisations/#loueur-de-box",
  },
  {
    icone: IconeAtelier,
    titre: "Suivi de production",
    chapeau:
      "Ce qu'il faut produire aujourd'hui, calculé à partir de ce qui restait hier.",
    points: [
      "Journée de fabrication calée sur l'atelier, pas sur le calendrier",
      "Quantités à produire calculées : planning du jour moins les restes de la veille",
      "Recettes et nomenclatures : du produit fini à la matière première",
      "Invendus, rebuts, écarts entre le prévu et le réalisé",
      "Feuilles de production imprimables ou consultables au poste",
    ],
    casLibelle: "Le cas de la boulangerie",
    casHref: "/realisations/#boulangerie",
  },
  {
    icone: IconeCaisses,
    titre: "Stock",
    chapeau:
      "Savoir ce qu'il y a, où, et à partir de quand il faut recommander.",
    points: [
      "Stock multi-sites, multi-dépôts, multi-véhicules",
      "Entrées, sorties, transferts, inventaires",
      "Seuils d'alerte et réapprovisionnement",
      "Traçabilité des mouvements, qui a pris quoi et quand",
    ],
    casLibelle: "Le cas de la société d'intervention",
    casHref: "/realisations/#societe-intervention",
  },
  {
    icone: IconeCarte,
    titre: "Interventions & tournées",
    chapeau:
      "Une demande qui rentre, un technicien qui part, une carte qui dit où il est.",
    points: [
      "Demandes d'intervention, qualification, affectation",
      "Planning par technicien, par agence, par secteur",
      "Itinéraires cartographiés pour préparer les tournées",
      "Position et activité de la flotte dans le même outil",
      "Comptes rendus et pièces jointes depuis le terrain",
    ],
    casLibelle: "Le cas de la société d'intervention",
    casHref: "/realisations/#societe-intervention",
  },
  {
    icone: IconeImmeuble,
    titre: "Gestion locative",
    chapeau:
      "Des baux, des loyers, des charges — et un prorata calculé au jour près.",
    points: [
      "Baux, avenants, échéanciers, quittancement",
      "Charges, régularisations, états des lieux",
      "Prorata calculé au jour près, et non sur un mois moyen",
      "Suivi des impayés et relances",
      "Exports comptables vers l'outil du cabinet",
    ],
    casLibelle: "Le cas de la conciergerie",
    casHref: "/realisations/#conciergerie-meubles",
  },
];

const INTEGRATIONS = [
  {
    icone: IconeCarteBancaire,
    titre: "Paiement carte & prélèvement",
    texte:
      "Encaisser au comptant en carte bancaire, ou mettre en place un prélèvement automatique avec relance en cas de rejet. Souvent les deux, au choix du client final.",
  },
  {
    icone: IconeImmeuble,
    titre: "Régie publique",
    texte:
      "Le paiement en ligne dans le cadre applicable aux collectivités. C'est ce qui rend une réservation payante possible pour une commune, un EPCI, un port ou un camping municipal.",
  },
  {
    icone: IconeMessage,
    titre: "SMS et mails automatiques",
    texte:
      "Le code d'accès qui part 24 h avant l'arrivée, la relance d'échéance, la confirmation d'intervention. Envoyés au bon moment, sans que personne y pense.",
  },
  {
    icone: IconePosition,
    titre: "Cartographie & itinéraires",
    texte:
      "Les demandes posées sur une carte, les tournées préparées dans l'ordre, les distances calculées. De quoi arrêter d'improviser le matin même.",
  },
];

export default function PageLogiciels() {
  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" />
            Logiciels sur mesure
          </p>

          <h1 className="max-w-3xl text-[2rem] sm:text-5xl">
            La plateforme qui fait tourner votre lieu ou votre atelier
          </h1>

          <div className="prose-adt mt-7 max-w-2xl">
            <p>
              On développe des logiciels métier, pas des gadgets. Ils gèrent des
              accès, des réservations, de la fabrication, du stock, des tournées,
              des baux. Ils remplacent un tableur qui a craqué, ou un logiciel du
              marché soit trop rigide, soit surdimensionné.
            </p>
            <p>
              L&apos;outil colle à votre façon de travailler. Pas l&apos;inverse. Et il
              reste le vôtre.
            </p>
          </div>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link href="/contact/" className="bouton-primaire">
              Parler de votre projet
            </Link>
            <Link href="/realisations/" className="bouton-secondaire">
              Voir les six cas
            </Link>
          </div>
        </div>
      </section>

      {/* ══ Les cinq domaines ════════════════════════════════════════════ */}
      <section className="section">
        <div className="conteneur">
          <h2 className="max-w-3xl text-3xl sm:text-4xl">
            Ce que ces plateformes savent faire
          </h2>

          <div className="mt-12 grid gap-x-10 gap-y-12 lg:grid-cols-2">
            {DOMAINES.map((domaine) => {
              const Icone = domaine.icone;

              return (
                <article key={domaine.titre}>
                  <div className="flex items-center gap-3.5">
                    <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-sm bg-saumon-clair">
                      <Icone className="h-6 w-6 text-saumon-texte" />
                    </span>
                    <h3 className="text-2xl">{domaine.titre}</h3>
                  </div>

                  <p className="mt-4 text-[1.0625rem] font-semibold leading-relaxed text-anthracite">
                    {domaine.chapeau}
                  </p>

                  <ul className="mt-5 space-y-3 border-l-2 border-trait pl-5">
                    {domaine.points.map((point) => (
                      <li
                        key={point}
                        className="text-[0.95rem] leading-relaxed text-gris"
                      >
                        {point}
                      </li>
                    ))}
                  </ul>

                  <Link
                    href={domaine.casHref}
                    className="group mt-5 inline-flex items-center gap-2 text-sm font-bold text-anthracite"
                  >
                    {domaine.casLibelle}
                    <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
                  </Link>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* ══ Intégrations ═════════════════════════════════════════════════ */}
      <section className="section bg-ivoire">
        <div className="conteneur">
          <p className="surtitre">
            <Chevrons className="h-3.5 w-3.5" />
            Intégrations
          </p>
          <h2 className="max-w-3xl text-3xl sm:text-4xl">
            Un logiciel qui parle à ce que vous avez déjà
          </h2>
          <p className="mt-5 max-w-2xl text-[1.0625rem] leading-relaxed text-gris">
            Une plateforme utile est une plateforme branchée : sur l&apos;argent qui
            rentre, sur le téléphone de vos clients, sur la carte de vos tournées.
            Sinon, la ressaisie revient par la fenêtre.
          </p>

          <div className="mt-12 grid gap-6 sm:grid-cols-2">
            {INTEGRATIONS.map((integration) => {
              const Icone = integration.icone;

              return (
                <article key={integration.titre} className="carte">
                  <Icone className="h-8 w-8 text-saumon-texte" />
                  <h3 className="mt-4 text-lg">{integration.titre}</h3>
                  <p className="mt-3 text-[0.95rem] leading-relaxed text-gris">
                    {integration.texte}
                  </p>
                </article>
              );
            })}
          </div>

          <p className="mt-10 max-w-2xl text-[0.95rem] leading-relaxed text-gris">
            Au-delà de ces quatre briques, une plateforme se connecte aussi à
            l&apos;existant : caisse, comptabilité, ERP, outil de synchronisation des
            calendriers de réservation.
          </p>
        </div>
      </section>

      {/* ══ Maillage interne entre les pages d'offre ═════════════════════ */}
      <section className="section">
        <div className="conteneur grid gap-6 md:grid-cols-2">
          <Link
            href="/sites-internet/"
            className="group flex flex-col rounded-sm border border-trait p-8 transition-colors hover:border-saumon"
          >
            <p className="text-xs font-bold uppercase tracking-[0.14em] text-saumon-texte">
              L&apos;autre porte d&apos;entrée
            </p>
            <h2 className="mt-4 text-2xl">Sites internet & référencement local</h2>
            <p className="mt-3 text-[0.95rem] leading-relaxed text-gris">
              Souvent le premier contrat : une vitrine ou une boutique qui se
              trouve sur Google, ville par ville.
            </p>
            <span className="mt-6 inline-flex items-center gap-2 text-sm font-bold">
              Voir l&apos;offre sites internet
              <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
            </span>
          </Link>

          <Link
            href="/realisations/"
            className="group flex flex-col rounded-sm border border-trait p-8 transition-colors hover:border-saumon"
          >
            <p className="text-xs font-bold uppercase tracking-[0.14em] text-saumon-texte">
              Les preuves
            </p>
            <h2 className="mt-4 text-2xl">Six cas, problème par problème</h2>
            <p className="mt-3 text-[0.95rem] leading-relaxed text-gris">
              Ce qui coinçait, ce qu&apos;on a construit, ce que ça change au
              quotidien. Des outils en production, pas des démonstrations.
            </p>
            <span className="mt-6 inline-flex items-center gap-2 text-sm font-bold">
              Voir les réalisations
              <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
            </span>
          </Link>
        </div>
      </section>

      <AppelAction
        titre="Décrivez-nous une journée type."
        texte="C'est le meilleur moyen de repérer les gestes à supprimer. On vous dit ensuite ce qui se développe, ce qui s'achète, et ce qui ne vaut pas le coup."
      />
    </>
  );
}