feat: redesign homepage with triptych process + admin image management

- Redesign Hero section with new copy focused on the triptych offering
- Add Process component (replaces System) with zigzag layout for 3 pillars:
  Google Maps reviews, managed Facebook, converting website
- Redesign AboutMe with orange background and stats row
- Add admin panel for managing site image URLs (replaces Sanity dependency)
- Create site_images API routes and Supabase-backed storage with defaults
- Update FAQ to reference built-in admin panel
- Add site_images table type to database types
- Pass images prop through homepage components

https://claude.ai/code/session_01V8YAjpqRQ3bfBYsABYsEgo

components/marketing/AboutMe.tsx

@@ -1,139 +1,114 @@
 "use client";
 
-import Image from "next/image";
-import { urlFor } from "@/lib/sanity/client";
-import type { SiteSettings } from "@/lib/sanity/queries";
 import ScrollReveal from "@/components/animations/ScrollReveal";
 import AnimatedCounter from "@/components/animations/AnimatedCounter";
 
 interface AboutMeProps {
-  settings?: SiteSettings | null;
+  images?: Record<string, string>;
 }
 
-export default function AboutMe({ settings }: AboutMeProps) {
-  const name = settings?.ownerName || "Enguerrand";
-  const bio = settings?.ownerBio;
-  const address = settings?.address || "Flines-lez-Raches, Nord (59)";
-  const lat = settings?.lat || 50.4267;
-  const lng = settings?.lng || 3.2372;
-  const photoUrl = settings?.ownerPhoto ? urlFor(settings.ownerPhoto)?.width(400).height(480).url() : null;
+export default function AboutMe({ images }: AboutMeProps) {
+  const photoUrl = images?.about_photo;
 
   return (
-    <section id="qui-suis-je" className="py-16 md:py-24 bg-bg" aria-label="Qui suis-je">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header */}
+    <section id="qui-suis-je" className="py-16 md:py-24 bg-orange relative overflow-hidden" aria-label="Qui suis-je">
+      {/* Subtle pattern */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute top-20 right-20 w-40 h-40 border-2 border-white rounded-full" />
+        <div className="absolute bottom-10 left-10 w-60 h-60 border-2 border-white rounded-full" />
+      </div>
+
+      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Stats top row */}
         <ScrollReveal direction="up">
-          <div className="text-center mb-12">
-            <span className="inline-block px-3 py-1.5 bg-navy/5 border border-navy/10 rounded-full text-navy text-xs font-semibold mb-4">
-              Votre expert local
-            </span>
-            <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em]">
-              Pas une plateforme anonyme.{" "}
-              <span className="text-orange">Un voisin.</span>
-            </h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-14">
+            {[
+              { value: 100, suffix: "%", label: "Local Nord" },
+              { value: 24, suffix: "h", label: "Délai de réponse" },
+              { value: 0, suffix: "€", label: "L'audit" },
+              { value: 3, suffix: "", label: "Piliers du système" },
+            ].map((stat, i) => (
+              <div key={i} className="text-center">
+                <p className="text-3xl md:text-4xl font-extrabold text-white">
+                  <AnimatedCounter end={stat.value} suffix={stat.suffix} />
+                </p>
+                <p className="text-white/70 text-sm font-medium mt-1">{stat.label}</p>
+              </div>
+            ))}
           </div>
         </ScrollReveal>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
-          {/* Left - Photo */}
+        {/* Content */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+          {/* Photo */}
           <ScrollReveal direction="left">
             <div className="flex justify-center">
               <div className="relative">
-                <div className="w-64 h-72 sm:w-72 sm:h-80 bg-bg-muted border-2 border-border rounded-2xl flex items-center justify-center overflow-hidden">
+                <div className="w-64 h-80 sm:w-72 sm:h-[22rem] rounded-2xl overflow-hidden border-4 border-white/20 shadow-xl">
                   {photoUrl ? (
-                    <Image
-                      src={photoUrl}
-                      alt={`Photo de ${name}`}
-                      fill
-                      className="object-cover"
-                      sizes="(max-width: 640px) 256px, 288px"
-                    />
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={photoUrl} alt="Enguerrand Ozano" className="w-full h-full object-cover" />
                   ) : (
-                    <div className="text-center p-6">
-                      <div className="w-20 h-20 bg-navy/10 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <svg className="w-10 h-10 text-navy/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                        </svg>
+                    <div className="w-full h-full bg-orange-hover flex items-center justify-center">
+                      <div className="text-center p-6">
+                        <div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                          <svg className="w-10 h-10 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                          </svg>
+                        </div>
+                        <p className="text-white/60 text-sm">Votre photo ici</p>
+                        <p className="text-white/40 text-xs mt-1">(modifiable dans Admin &gt; Images)</p>
                       </div>
-                      <p className="text-text-muted text-sm">Votre photo ici</p>
-                      <p className="text-text-muted text-xs mt-1">(configurable via Sanity)</p>
                     </div>
                   )}
                 </div>
-                <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-orange text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
-                  Basé à {address.split(",")[0]}
+                <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-navy text-white text-xs font-bold px-4 py-2 rounded-full shadow-lg whitespace-nowrap">
+                  Basé à Flines-lez-Raches
                 </div>
               </div>
             </div>
           </ScrollReveal>
 
-          {/* Right - Text */}
+          {/* Text */}
           <ScrollReveal direction="right">
             <div>
-              {bio ? (
-                <p className="text-text text-base sm:text-lg leading-relaxed mb-4">
-                  {bio}
-                </p>
-              ) : (
-                <>
-                  <p className="text-text text-base sm:text-lg leading-relaxed mb-4">
-                    Je suis <strong className="text-navy">{name}</strong>, spécialisé dans la
-                    visibilité locale et la construction de{" "}
-                    <strong className="text-navy">systèmes de confiance en ligne</strong>{" "}
-                    pour les TPE/PME du Nord.
-                  </p>
-                  <p className="text-text-light text-base leading-relaxed mb-4">
-                    Je ne suis pas un call center parisien. Je connais la réalité de vos
-                    chantiers à Douai, Orchies ou Valenciennes. Je sais que vous n&rsquo;avez pas
-                    le temps de gérer &ldquo;un truc internet&rdquo; et que vous voulez des résultats
-                    concrets : des appels de <strong>vrais</strong> clients.
-                  </p>
-                </>
-              )}
-              <p className="text-text-light text-base leading-relaxed mb-6">
-                Mon approche : je vous construis un <strong className="text-navy">dossier de confiance</strong>{" "}
-                (Google + site + preuves) qui transforme votre bouche-à-oreille en système
+              <span className="inline-block px-3 py-1.5 bg-white/15 rounded-full text-white text-xs font-semibold mb-4">
+                Votre expert local
+              </span>
+              <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-4">
+                Pas une plateforme anonyme.{" "}
+                <span className="text-navy">Un voisin.</span>
+              </h2>
+              <p className="text-white/90 text-base leading-relaxed mb-4">
+                Je suis <strong className="text-white">Enguerrand</strong>, spécialisé dans la
+                visibilité locale et la construction de{" "}
+                <strong className="text-white">systèmes de confiance en ligne</strong>{" "}
+                pour les artisans du Nord.
+              </p>
+              <p className="text-white/80 text-base leading-relaxed mb-4">
+                Je ne suis pas un call center parisien. Je connais la réalité de vos
+                chantiers à Douai, Orchies ou Valenciennes. Je sais que vous n&rsquo;avez pas
+                le temps de gérer &ldquo;un truc internet&rdquo; et que vous voulez des résultats
+                concrets : des appels de <strong className="text-white">vrais</strong> clients.
+              </p>
+              <p className="text-white/80 text-base leading-relaxed mb-6">
+                Mon approche : je vous construis un <strong className="text-white">système complet</strong>{" "}
+                (Google + Facebook + Site) qui transforme votre bouche-à-oreille en système
                 permanent. Pas de jargon, pas de blabla &mdash; du concret.
               </p>
 
-              <div className="grid grid-cols-2 gap-4">
-                <div className="bg-bg-white border border-border rounded-xl p-4 text-center">
-                  <p className="text-2xl font-bold text-navy">
-                    <AnimatedCounter end={100} suffix="%" />
-                  </p>
-                  <p className="text-text-muted text-xs mt-1">Local Nord</p>
-                </div>
-                <div className="bg-bg-white border border-border rounded-xl p-4 text-center">
-                  <p className="text-2xl font-bold text-navy">
-                    <AnimatedCounter end={24} suffix="h" />
-                  </p>
-                  <p className="text-text-muted text-xs mt-1">Délai de réponse</p>
-                </div>
-              </div>
+              <a
+                href="#contact"
+                className="inline-flex items-center gap-2 bg-navy hover:bg-navy-light text-white font-bold text-sm px-6 py-3 rounded-xl transition-colors"
+              >
+                Discutons de votre situation
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </a>
             </div>
           </ScrollReveal>
         </div>
-
-        {/* Map */}
-        <ScrollReveal direction="up" className="mt-12">
-          <div className="bg-bg-white border border-border rounded-2xl overflow-hidden">
-            <div className="p-4 border-b border-border flex items-center gap-2">
-              <svg className="w-5 h-5 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-              </svg>
-              <span className="text-navy font-semibold text-sm">Zone d&rsquo;intervention : Douai, Orchies, Arleux, Valenciennes et environs</span>
-            </div>
-            <div className="relative h-48 sm:h-64">
-              <iframe
-                src={`https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.45}%2C${lat - 0.18}%2C${lng + 0.45}%2C${lat + 0.12}&layer=mapnik&marker=${lat}%2C${lng}`}
-                className="absolute inset-0 w-full h-full border-0"
-                title={`Carte de localisation - ${address.split(",")[0]}`}
-                loading="lazy"
-              />
-            </div>
-          </div>
-        </ScrollReveal>
       </div>
     </section>
   );

components/marketing/DemosLive.tsx

@@ -49,7 +49,11 @@ const demos = [
   },
 ];
 
-export default function DemosLive() {
+interface DemosLiveProps {
+  images?: Record<string, string>;
+}
+
+export default function DemosLive(_props: DemosLiveProps) {
   return (
     <section id="demos" className="py-16 md:py-24 bg-bg" aria-label="Démos live">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">

components/marketing/FAQ.tsx

@@ -10,7 +10,7 @@ const faqs = [
   },
   {
     q: "Est-ce que je pourrai changer mes photos moi-même\u00a0?",
-    a: "Oui. Je vous donne accès à une interface simplifiée (Sanity). C\u2019est aussi simple que d\u2019envoyer un SMS. Vous changez une photo, le site se met à jour tout seul.",
+    a: "Oui. Vous avez un panneau d'administration simple et intuitif. Collez un lien d'image, cliquez sur Sauver, et le site se met à jour tout seul. Aussi simple qu'envoyer un SMS.",
   },
   {
     q: "C\u2019est quoi la différence avec un site gratuit\u00a0?",

components/marketing/Hero.tsx

@@ -1,20 +1,25 @@
 "use client";
 
 import Button from "@/components/ui/Button";
-import ParallaxRocket from "@/components/animations/ParallaxRocket";
 import FloatingElements from "@/components/animations/FloatingElements";
 
-export default function Hero() {
+interface HeroProps {
+  images?: Record<string, string>;
+}
+
+export default function Hero({ images }: HeroProps) {
+  const portraitUrl = images?.hero_portrait;
+
   return (
     <section
       className="relative min-h-[90vh] md:min-h-screen flex items-center bg-navy overflow-hidden"
       aria-label="Introduction"
     >
-      {/* Background gradient layers */}
+      {/* Background gradient */}
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_20%_50%,rgba(232,119,46,0.08),transparent_60%)]" />
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(255,255,255,0.04),transparent_50%)]" />
 
-      {/* Grid pattern overlay */}
+      {/* Grid pattern */}
       <div
         className="absolute inset-0 opacity-[0.03]"
         style={{
@@ -24,105 +29,95 @@ export default function Hero() {
         }}
       />
 
-      {/* Floating decorative elements */}
       <FloatingElements />
 
-      {/* Parallax Rocket */}
-      <ParallaxRocket />
-
       <div className="relative z-20 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
-        <div className="max-w-3xl">
-          {/* Badge animé */}
-          <span className="inline-flex items-center gap-2 px-4 py-2 bg-orange/15 border border-orange/25 rounded-full text-orange text-xs font-semibold mb-8 animate-fade-in-down">
-            <span className="w-2 h-2 bg-orange rounded-full animate-pulse" />
-            Flines-lez-Raches, Nord (59)
-          </span>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Left - Text */}
+          <div>
+            <span className="inline-flex items-center gap-2 px-4 py-2 bg-orange/15 border border-orange/25 rounded-full text-orange text-xs font-semibold mb-8 animate-fade-in-down">
+              <span className="w-2 h-2 bg-orange rounded-full animate-pulse" />
+              Flines-lez-Raches, Nord (59)
+            </span>
 
-          {/* H1 avec animation staggered */}
-          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-white leading-[1.1] tracking-[-0.03em] mb-6">
-            <span className="block animate-hero-text-1">
-              Artisans du Nord :
-            </span>
-            <span className="block animate-hero-text-2">
-              Votre site web doit
-            </span>
-            <span className="block animate-hero-text-2">
-              être aussi solide que{" "}
-            </span>
-            <span className="block text-orange animate-hero-text-3 relative">
-              vos ouvrages.
-              {/* Underline animée */}
-              <span className="absolute -bottom-2 left-0 h-1 bg-orange/40 rounded-full animate-underline-grow" />
-            </span>
-          </h1>
+            <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white leading-[1.1] tracking-[-0.03em] mb-6">
+              <span className="block animate-hero-text-1">
+                Artisans du Nord :
+              </span>
+              <span className="block animate-hero-text-2">
+                Transformez votre
+              </span>
+              <span className="block animate-hero-text-2">
+                bouche-à-oreille en{" "}
+              </span>
+              <span className="block text-orange animate-hero-text-3 relative">
+                machine à chantiers.
+                <span className="absolute -bottom-2 left-0 h-1 bg-orange/40 rounded-full animate-underline-grow" />
+              </span>
+            </h1>
 
-          {/* Sous-titre avec fade in */}
-          <p className="text-white/65 text-lg sm:text-xl md:text-2xl leading-relaxed mb-10 max-w-2xl animate-fade-in-up animation-delay-600">
-            Un site professionnel à la hauteur de votre savoir-faire.
-            Depuis Flines-lez-Raches, je conçois des vitrines numériques
-            performantes qui inspirent confiance et génèrent des demandes
-            qualifiées.
-          </p>
+            <p className="text-white/65 text-lg sm:text-xl leading-relaxed mb-10 max-w-xl animate-fade-in-up animation-delay-600">
+              Avis Google + Facebook + Site pro : le triptyque qui fait que vos
+              futurs clients vous appellent <strong className="text-white/90">vous</strong>, et pas votre concurrent.
+            </p>
 
-          {/* CTA buttons avec animation */}
-          <div className="flex flex-col sm:flex-row gap-4 animate-fade-in-up animation-delay-800">
-            <a href="#contact">
-              <Button size="lg" className="w-full sm:w-auto pulse-glow text-base group">
-                <span className="flex items-center gap-2">
-                  DÉMARRER MON AUDIT GRATUIT
-                  <svg
-                    className="w-5 h-5 transition-transform group-hover:translate-x-1"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M17 8l4 4m0 0l-4 4m4-4H3"
-                    />
-                  </svg>
-                </span>
-              </Button>
-            </a>
-            <a
-              href="#demos"
-              className="inline-flex items-center justify-center gap-2 px-6 py-3.5 border border-white/20 text-white font-semibold text-sm rounded-xl hover:bg-white/10 hover:border-white/30 transition-all duration-300"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-              </svg>
-              Découvrir nos réalisations
-            </a>
+            <div className="flex flex-col sm:flex-row gap-4 animate-fade-in-up animation-delay-800">
+              <a href="#contact">
+                <Button size="lg" className="w-full sm:w-auto pulse-glow text-base group">
+                  <span className="flex items-center gap-2">
+                    DÉMARRER MON AUDIT GRATUIT
+                    <svg className="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                    </svg>
+                  </span>
+                </Button>
+              </a>
+              <a
+                href="#process"
+                className="inline-flex items-center justify-center gap-2 px-6 py-3.5 border border-white/20 text-white font-semibold text-sm rounded-xl hover:bg-white/10 hover:border-white/30 transition-all duration-300"
+              >
+                Comment ça marche ?
+              </a>
+            </div>
+
+            <div className="mt-8 flex flex-wrap items-center gap-6 animate-fade-in-up animation-delay-1000">
+              {["Réponse sous 24h", "100% Géré pour vous", "Pas de jargon"].map((t) => (
+                <div key={t} className="flex items-center gap-2">
+                  <div className="w-5 h-5 bg-success/20 rounded-full flex items-center justify-center">
+                    <svg className="w-3 h-3 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <span className="text-white/50 text-sm">{t}</span>
+                </div>
+              ))}
+            </div>
           </div>
 
-          {/* Trust line animée */}
-          <div className="mt-8 flex flex-wrap items-center gap-6 animate-fade-in-up animation-delay-1000">
-            <div className="flex items-center gap-2">
-              <div className="w-5 h-5 bg-success/20 rounded-full flex items-center justify-center">
-                <svg className="w-3 h-3 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                </svg>
+          {/* Right - Portrait */}
+          <div className="hidden lg:flex justify-center">
+            <div className="relative">
+              <div className="absolute -inset-4 bg-orange/20 rounded-3xl blur-2xl" />
+              <div className="relative w-80 h-96 rounded-2xl overflow-hidden border-2 border-white/10">
+                {portraitUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={portraitUrl} alt="Enguerrand Ozano - HookLab" className="w-full h-full object-cover" />
+                ) : (
+                  <div className="w-full h-full bg-navy-light flex items-center justify-center">
+                    <div className="text-center">
+                      <div className="w-20 h-20 bg-orange/20 rounded-full flex items-center justify-center mx-auto mb-3">
+                        <svg className="w-10 h-10 text-orange/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                      </div>
+                      <p className="text-white/30 text-sm">Votre photo ici</p>
+                    </div>
+                  </div>
+                )}
               </div>
-              <span className="text-white/50 text-sm">Réponse sous 24h</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-5 h-5 bg-success/20 rounded-full flex items-center justify-center">
-                <svg className="w-3 h-3 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                </svg>
+              <div className="absolute -bottom-3 -right-3 bg-orange text-white text-xs font-bold px-4 py-2 rounded-xl shadow-lg">
+                Expert Nord (59)
               </div>
-              <span className="text-white/50 text-sm">Pas de jargon</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-5 h-5 bg-success/20 rounded-full flex items-center justify-center">
-                <svg className="w-3 h-3 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
-                </svg>
-              </div>
-              <span className="text-white/50 text-sm">100% Géré pour vous</span>
             </div>
           </div>
         </div>

components/marketing/Process.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import ScrollReveal from "@/components/animations/ScrollReveal";
+
+interface ProcessProps {
+  images?: Record<string, string>;
+}
+
+const steps = [
+  {
+    number: "01",
+    title: "Avis Google Maps automatiques",
+    subtitle: "Être trouvé par les bons clients",
+    description:
+      "Vos clients satisfaits laissent un avis en 30 secondes grâce à notre système automatisé. Plus d'avis = meilleur classement Google Maps = plus de clients qualifiés qui vous trouvent avant votre concurrent.",
+    points: [
+      "Système d'envoi automatique après chaque chantier",
+      "QR Code personnalisé à montrer au client",
+      "Vos avis montent, votre classement Google aussi",
+    ],
+    imageKey: "process_google",
+    color: "orange",
+  },
+  {
+    number: "02",
+    title: "Facebook géré pour vous",
+    subtitle: "Montrer votre savoir-faire au quotidien",
+    description:
+      "Je gère votre page Facebook avec vos photos de chantier. Vous prenez une photo, je la transforme en publication professionnelle qui donne envie. Micro-formation incluse pour prendre de belles photos sur le chantier.",
+    points: [
+      "Publications régulières avec vos réalisations",
+      "Micro-formation : photos qui vendent",
+      "Vos futurs clients voient votre travail avant de vous appeler",
+    ],
+    imageKey: "process_facebook",
+    color: "orange",
+  },
+  {
+    number: "03",
+    title: "Site internet qui convertit",
+    subtitle: "Transformer les visiteurs en devis qualifiés",
+    description:
+      "Un site pro qui met en avant votre travail, votre savoir-faire, votre plus-value. Avec un formulaire intelligent qui trie les curieux et augmente le nombre de devis qualifiés. Fini les appels pour « juste un prix ».",
+    points: [
+      "Design pro qui inspire confiance immédiate",
+      "Formulaire intelligent : filtre les curieux",
+      "Optimisé Google pour votre zone (Douai, Orchies, Valenciennes)",
+    ],
+    imageKey: "process_site",
+    color: "orange",
+  },
+];
+
+export default function Process({ images }: ProcessProps) {
+  return (
+    <section id="process" className="py-16 md:py-24 bg-bg" aria-label="Le processus">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <ScrollReveal direction="up">
+          <div className="text-center mb-16">
+            <span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
+              Le Triptyque HookLab
+            </span>
+            <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
+              3 piliers pour remplir votre{" "}
+              <span className="text-orange">carnet de commandes.</span>
+            </h2>
+            <p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
+              Un système complet qui travaille pour vous 24h/24, même quand vous êtes sur le chantier.
+            </p>
+          </div>
+        </ScrollReveal>
+
+        {/* Steps - Zigzag layout */}
+        <div className="space-y-16 md:space-y-24">
+          {steps.map((step, i) => {
+            const isEven = i % 2 === 0;
+            const imageUrl = images?.[step.imageKey];
+
+            return (
+              <ScrollReveal key={step.number} direction={isEven ? "left" : "right"} delay={i * 100}>
+                <div className={`grid grid-cols-1 md:grid-cols-2 gap-10 items-center ${!isEven ? "md:direction-rtl" : ""}`}>
+                  {/* Image side */}
+                  <div className={`relative ${!isEven ? "md:order-2" : ""}`}>
+                    <div className="relative rounded-2xl overflow-hidden shadow-xl">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img
+                        src={imageUrl || ""}
+                        alt={step.title}
+                        className="w-full h-64 md:h-80 object-cover"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-navy/30 to-transparent" />
+                    </div>
+                    {/* Number badge */}
+                    <div className="absolute -top-4 -left-4 w-16 h-16 bg-orange rounded-2xl flex items-center justify-center shadow-lg">
+                      <span className="text-white font-extrabold text-2xl">{step.number}</span>
+                    </div>
+                  </div>
+
+                  {/* Text side */}
+                  <div className={!isEven ? "md:order-1" : ""}>
+                    <span className="text-orange text-sm font-semibold uppercase tracking-wider">{step.subtitle}</span>
+                    <h3 className="text-2xl md:text-3xl font-bold text-navy mt-2 mb-4">{step.title}</h3>
+                    <p className="text-text-light text-base leading-relaxed mb-6">{step.description}</p>
+                    <ul className="space-y-3">
+                      {step.points.map((point) => (
+                        <li key={point} className="flex items-start gap-3">
+                          <div className="w-6 h-6 bg-orange/15 rounded-full flex items-center justify-center shrink-0 mt-0.5">
+                            <svg className="w-3.5 h-3.5 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                            </svg>
+                          </div>
+                          <span className="text-text text-sm font-medium">{point}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </ScrollReveal>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}