import Link from "next/link";
import { AppelAction } from "@/components/AppelAction";
import { Chevrons, ChevronsFiligrane } from "@/components/Chevrons";
import {
  IconeFleche,
  IconeGlobe,
  IconeLoupe,
  IconePanier,
  IconePosition,
} from "@/components/Icones";
import { Photo } from "@/components/Photo";
import { metadonneesPage } from "@/lib/metadonnees";

export const metadata = metadonneesPage({
  titre: "Création de site internet & référencement local | Laval (53)",
  description:
    "Sites vitrines, boutiques en ligne, référencement local ville par ville et " +
    "fiche Google Business. Des sites rapides, trouvables, et connectés à vos " +
    "outils métier. ADT Solutions Web, Laval.",
  chemin: "/sites-internet/",
});

const PRESTATIONS = [
  {
    icone: IconeGlobe,
    titre: "Sites vitrines",
    texte:
      "Dire ce que vous faites, où, et pour qui — en trois écrans. Un site sobre, rapide sur un téléphone en 4G, qui se met à jour sans nous appeler.",
    points: [
      "Structure pensée pour la lecture, pas pour la démonstration",
      "Rédaction reprise avec vous, dans vos mots",
      "Back-office quand vous avez du contenu qui bouge",
      "Refonte d'un site existant, avec les redirections qui vont avec",
    ],
  },
  {
    icone: IconePanier,
    titre: "Boutiques en ligne",
    texte:
      "Vendre en ligne sans monter une usine à gaz. Catalogue, paiement, expédition, et le lien avec votre gestion quand il existe.",
    points: [
      "Catalogue, déclinaisons, stock",
      "Paiement en ligne et suivi de commande",
      "Back-office de gestion des commandes",
      "Passerelle vers votre outil métier ou votre comptabilité",
    ],
  },
  {
    icone: IconeLoupe,
    titre: "Référencement local",
    texte:
      "Être trouvé quand quelqu'un cherche votre métier à côté de chez lui. Ça se travaille ville par ville, pas en un seul mot-clé national.",
    points: [
      "Une page par métier et par zone, quand ça se justifie",
      "Balises, titres et contenus alignés sur les vraies recherches",
      "Données structurées pour être compris par les moteurs",
      "Temps de chargement : c'est un critère de classement, pas un détail",
    ],
  },
  {
    icone: IconePosition,
    titre: "Fiche Google Business",
    texte:
      "Pour un artisan ou un commerce local, la fiche pèse souvent plus lourd que le site lui-même. Elle se remplit, se tient à jour et se relie au site.",
    points: [
      "Nom, adresse, téléphone : les mêmes partout, à la virgule près",
      "Catégories, zones desservies, horaires, photos",
      "Cohérence entre la fiche, le site et les annuaires",
      "Sollicitation et suivi des avis",
    ],
  },
];

export default function PageSitesInternet() {
  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" />
            Sites internet
          </p>

          <h1 className="max-w-3xl text-[2rem] sm:text-5xl">
            Un site qui se trouve sur Google, et qui tient la route
          </h1>

          <div className="prose-adt mt-7 max-w-2xl">
            <p>
              Le site, c&apos;est souvent le premier contrat. Rarement le dernier.
              On le fait bien parce que c&apos;est par là que la plupart des clients
              arrivent — puis on parle de l&apos;outil qui manque derrière.
            </p>
            <p>
              Vitrine ou boutique, la règle est la même : sobre, rapide, lisible
              sur un téléphone, et trouvable là où vous travaillez.
            </p>
          </div>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link href="/contact/" className="bouton-primaire">
              Demander un devis
            </Link>
            <Link href="/logiciels-sur-mesure/" className="bouton-secondaire">
              Voir l&apos;offre logiciels
            </Link>
          </div>
        </div>
      </section>

      {/* ══ Les prestations ══════════════════════════════════════════════ */}
      <section className="section">
        <div className="conteneur">
          <h2 className="max-w-3xl text-3xl sm:text-4xl">
            Quatre chantiers, dans cet ordre
          </h2>

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

              return (
                <article key={prestation.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">{prestation.titre}</h3>
                  </div>

                  <p className="mt-4 text-[1.0625rem] leading-relaxed text-gris">
                    {prestation.texte}
                  </p>

                  <ul className="mt-5 space-y-2.5">
                    {prestation.points.map((point) => (
                      <li
                        key={point}
                        className="flex gap-2.5 text-[0.95rem] leading-relaxed text-gris"
                      >
                        <Chevrons className="mt-1.5 h-3 w-3 shrink-0 text-saumon" />
                        {point}
                      </li>
                    ))}
                  </ul>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* ══ Photo + le lien avec le métier ═══════════════════════════════ */}
      <section className="section bg-ivoire">
        <div className="conteneur grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
          <Photo
            base="/photos/revue-de-site"
            alt="Revue d'un site internet sur un ordinateur portable, pendant un rendez-vous."
            largeurs={[375, 560, 750]}
            largeur={750}
            hauteur={1000}
            sizes="(min-width: 1024px) 544px, 100vw"
            className="w-full rounded-sm"
          />

          <div>
            <p className="surtitre">
              <Chevrons className="h-3.5 w-3.5" />
              Le lien avec le reste
            </p>
            <h2 className="text-3xl sm:text-4xl">
              Un site branché sur votre outil, pas à côté
            </h2>

            <div className="prose-adt mt-6">
              <p>
                Un formulaire qui envoie un mail que quelqu&apos;un recopie ensuite
                dans un tableur, c&apos;est de la ressaisie déguisée. Quand une
                plateforme existe derrière, la demande y entre directement :
                <strong> une réservation, un devis, une commande, un dossier</strong>.
              </p>
              <p>
                C&apos;est le chemin habituel de nos clients — le site d&apos;abord,
                l&apos;outil ensuite. Et c&apos;est pour ça qu&apos;on fait les deux.
              </p>
            </div>

            <Link
              href="/logiciels-sur-mesure/"
              className="group mt-7 inline-flex items-center gap-2 font-bold text-anthracite"
            >
              Voir ce que fait une plateforme sur mesure
              <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
            </Link>
          </div>
        </div>
      </section>

      {/* ══ Maillage vers les réalisations ═══════════════════════════════ */}
      <section className="section">
        <div className="conteneur">
          <Link
            href="/realisations/#conciergerie-meubles"
            className="group flex flex-col rounded-sm border border-trait p-8 transition-colors hover:border-saumon sm:p-10"
          >
            <p className="text-xs font-bold uppercase tracking-[0.14em] text-saumon-texte">
              Un cas · Hébergement
            </p>
            <h2 className="mt-4 max-w-2xl text-2xl sm:text-3xl">
              Un site en quatre langues, des calendriers qui ne se croisent plus
            </h2>
            <p className="mt-4 max-w-2xl text-[0.95rem] leading-relaxed text-gris">
              Une conciergerie de meublés touristiques dans l&apos;Ouest : la
              vitrine multilingue, la synchronisation des plateformes de
              réservation, et les services commandés en ligne.
            </p>
            <span className="mt-6 inline-flex items-center gap-2 text-sm font-bold">
              Lire le cas
              <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
            </span>
          </Link>
        </div>
      </section>

      <AppelAction
        titre="Un site à refaire, ou à créer ?"
        texte="Dites-nous ce que vous vendez et où vous travaillez. On vous répond avec une structure de site et un périmètre chiffré, pas avec une plaquette."
        libelleBouton="Demander un devis"
      />
    </>
  );
}