import { AppelAction } from "@/components/AppelAction";
import { Chevrons, ChevronsFiligrane } from "@/components/Chevrons";
import { IconeAtelier, IconeCoche, IconeEtapes } from "@/components/Icones";
import { Photo } from "@/components/Photo";
import { metadonneesPage } from "@/lib/metadonnees";
import { SITE, ZONES } from "@/lib/site";

export const metadata = metadonneesPage({
  titre: "L'atelier : qui développe vos logiciels | ADT Solutions Web, Laval",
  description:
    "Dix ans de pilotage de production industrielle mis au service des " +
    "entreprises de l'Ouest. Un interlocuteur unique, de l'audit à la " +
    "maintenance. Et un outil qui reste le vôtre.",
  chemin: "/a-propos/",
});

const PILIERS = [
  {
    icone: IconeEtapes,
    titre: "Un interlocuteur unique",
    texte:
      "La même personne du premier échange à la maintenance : pas de chef de projet qui traduit, pas de dossier qui change de main. Vous décrivez un problème, vous parlez à celui qui écrit le code.",
  },
  {
    icone: IconeCoche,
    titre: "Ça reste le vôtre",
    texte:
      "Le code, les données, les accès : c'est votre outil. Vous n'êtes pas locataire de votre propre gestion, et vous n'êtes pas enfermé chez nous si un jour vous voulez passer la main.",
  },
  {
    icone: IconeAtelier,
    titre: "On montre, on ne promet pas",
    texte:
      "Ce qui est écrit sur ce site tourne déjà quelque part. On préfère décrire ce qu'un logiciel fait, quitte à être moins spectaculaire, que d'annoncer des résultats qu'on n'a pas mesurés.",
  },
];

export default function PageAPropos() {
  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" />À propos
          </p>

          <h1 className="max-w-3xl text-[2rem] sm:text-5xl">
            L&apos;atelier qui fabrique vos outils
          </h1>

          <div className="prose-adt mt-7 max-w-2xl">
            <p>
              ADT Solutions Web développe les logiciels qui font tourner les lieux
              et les ateliers, depuis {SITE.ville}. On travaille pour des
              exploitants de lieux, des syndics, des collectivités, des sociétés
              d&apos;intervention, des ateliers de production et des artisans.
            </p>
            <p>
              Ni agence, ni cabinet de conseil : un atelier de développement.
            </p>
          </div>
        </div>
      </section>

      {/* ══ Dix ans d'industrie ══════════════════════════════════════════ */}
      <section className="section">
        <div className="conteneur grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
          <div>
            <p className="surtitre">
              <Chevrons className="h-3.5 w-3.5" />
              D&apos;où on vient
            </p>
            <h2 className="text-3xl sm:text-4xl">
              Dix ans à équiper des usines avant d&apos;équiper des PME
            </h2>

            <div className="prose-adt mt-6">
              <p>
                Avant le web, une décennie en{" "}
                <strong>solutions de pilotage de production industrielle</strong> :
                suivi d&apos;atelier, ordonnancement, reporting. Des outils posés
                au milieu de vraies machines, utilisés par des gens qui ont autre
                chose à faire que de la saisie.
              </p>
              <p>
                On en a gardé une habitude : partir de la façon dont le travail se
                fait réellement, pas du schéma théorique. Un logiciel qui oblige à
                changer les gestes du terrain n&apos;est pas utilisé — il est
                contourné, et le tableur parallèle réapparaît dans les six mois.
              </p>
              <p>
                C&apos;est la même méthode qu&apos;on applique aujourd&apos;hui à une
                boulangerie, à un loueur de box ou à une communauté
                d&apos;agglomération.
              </p>
            </div>
          </div>

          <Photo
            base="/photos/deux-postes-de-travail"
            alt="Deux postes de travail côte à côte, vus de dessus, pendant une séance de travail."
            largeurs={[480, 720, 1000]}
            largeur={1000}
            hauteur={1250}
            sizes="(min-width: 1024px) 544px, 100vw"
            className="w-full rounded-sm"
          />
        </div>
      </section>

      {/* ══ Les trois piliers ════════════════════════════════════════════ */}
      <section className="section bg-ivoire">
        <div className="conteneur">
          <p className="surtitre">
            <Chevrons className="h-3.5 w-3.5" />
            Notre façon de travailler
          </p>
          <h2 className="max-w-3xl text-3xl sm:text-4xl">
            Trois engagements, et rien de plus
          </h2>

          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {PILIERS.map((pilier) => {
              const Icone = pilier.icone;

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

      {/* ══ Zone d'intervention ══════════════════════════════════════════ */}
      <section className="section">
        <div className="conteneur grid gap-8 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-5">
            <p className="surtitre">
              <Chevrons className="h-3.5 w-3.5" />
              Où on intervient
            </p>
            <h2 className="text-3xl sm:text-4xl">
              De {SITE.ville}, et partout à distance
            </h2>
          </div>

          <div className="lg:col-span-7">
            <ul className="grid gap-3 sm:grid-cols-2">
              {ZONES.map((zone) => (
                <li
                  key={zone}
                  className="flex items-center gap-3 rounded-sm border border-trait px-5 py-4 font-semibold"
                >
                  <Chevrons className="h-4 w-4 shrink-0 text-saumon" />
                  {zone}
                </li>
              ))}
            </ul>

            <p className="mt-6 text-[0.95rem] leading-relaxed text-gris">
              On se déplace pour comprendre un métier : voir l&apos;atelier, la
              réserve, le local à badges, la salle qu&apos;on veut prêter. Le reste
              — développement, mises en production, corrections — se fait à
              distance, ce qui permet de travailler pour des clients bien au-delà
              du département.
            </p>
          </div>
        </div>
      </section>

      <AppelAction
        titre="Un projet, ou juste une question ?"
        texte="On répond aussi aux questions qui ne débouchent sur rien. Savoir qu'un développement ne se justifie pas, c'est déjà une réponse utile."
      />
    </>
  );
}