// sections.jsx — Tous les chapitres de la landing après le HERO
// Comment ça marche (avec animation signature Exaucement), 10 univers, Sponsors B2B, Cofondateurs, Footer

/* ═══════════════════════════════════════════════════════════════════════ */
/* CHAPITRE 2 — Comment ça marche : 3 étapes animées + animation signature  */
/* ═══════════════════════════════════════════════════════════════════════ */

function ExaucementAnimation() {
  // L'animation SIGNATURE : étincelle dorée → arc lumineux → éclat → +score
  const [trigger, setTrigger] = React.useState(0);
  const [score, setScore] = React.useState(120);
  const containerRef = React.useRef(null);

  // Auto-loop when visible
  React.useEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) return;
    let int;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        int = setInterval(() => {
          setTrigger(t => t + 1);
          setScore(s => s + 25);
        }, 3500);
      } else {
        clearInterval(int);
      }
    }, { threshold: 0.5 });
    if (containerRef.current) obs.observe(containerRef.current);
    return () => { obs.disconnect(); clearInterval(int); };
  }, []);

  return (
    <div ref={containerRef} style={{ position: "relative", width: "100%", height: 180 }}>
      <svg viewBox="0 0 320 180" style={{ width: "100%", height: "100%" }} key={trigger}>
        <defs>
          <radialGradient id="exGlow1">
            <stop offset="0%" stopColor="#fff" stopOpacity="1" />
            <stop offset="40%" stopColor="#F5B544" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#F5B544" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="exGlow2">
            <stop offset="0%" stopColor="#fff" stopOpacity="1" />
            <stop offset="40%" stopColor="#22D3EE" stopOpacity="0.7" />
            <stop offset="100%" stopColor="#22D3EE" stopOpacity="0" />
          </radialGradient>
        </defs>

        {/* Demandeur (gauche) */}
        <g transform="translate(60, 90)">
          <circle r="32" fill="url(#exGlow2)" opacity="0.5" />
          <circle r="18" fill="#22D3EE" opacity="0.2" />
          <circle r="14" fill="#1C1C1F" stroke="#22D3EE" strokeWidth="1" />
          <text textAnchor="middle" y="4" fontSize="14" fill="#fff">🙏</text>
        </g>

        {/* Aideur (droite) */}
        <g transform="translate(260, 90)">
          <circle r="32" fill="url(#exGlow1)" opacity="0.4" />
          <circle r="18" fill="#F5B544" opacity="0.2" />
          <circle r="14" fill="#1C1C1F" stroke="#F5B544" strokeWidth="1" />
          <text textAnchor="middle" y="4" fontSize="14" fill="#fff">✨</text>
        </g>

        {/* Arc lumineux */}
        <path
          d="M 74 90 Q 160 20 246 90"
          fill="none"
          stroke="#F5B544"
          strokeWidth="2"
          strokeLinecap="round"
          style={{
            filter: "drop-shadow(0 0 6px #F5B544) drop-shadow(0 0 12px rgba(245,181,68,.5))",
            strokeDasharray: 300,
            strokeDashoffset: 300,
            animation: "exArc 1.4s 0.2s cubic-bezier(0.22,1,0.36,1) forwards",
          }}
        />

        {/* Étincelle voyageuse */}
        <circle r="4" fill="#fff" style={{
          filter: "drop-shadow(0 0 8px #F5B544) drop-shadow(0 0 16px #F5B544)",
          offsetPath: "path('M 74 90 Q 160 20 246 90')",
          animation: "exTravel 1.4s 0.2s cubic-bezier(0.4,0,0.2,1) forwards",
        }} />

        {/* Particules d'éclat (au point d'arrivée) */}
        {Array.from({ length: 12 }).map((_, i) => {
          const angle = (i / 12) * Math.PI * 2;
          const dist = 28 + (i % 3) * 8;
          return (
            <circle
              key={i}
              cx={260} cy={90}
              r={1.5 + (i % 3) * 0.6}
              fill="#F5B544"
              style={{
                filter: "drop-shadow(0 0 4px #F5B544)",
                transform: "translate(0, 0)",
                animation: `exBurst 0.9s 1.5s cubic-bezier(0.22,1,0.36,1) forwards`,
                "--tx": `${Math.cos(angle) * dist}px`,
                "--ty": `${Math.sin(angle) * dist}px`,
              }}
            />
          );
        })}

        {/* +Points label */}
        <g style={{ animation: "exScore 1.2s 1.7s cubic-bezier(0.22,1,0.36,1) forwards", opacity: 0, transform: "translateY(10px)" }}>
          <text x="280" y="60" fontSize="13" fontWeight="600" fill="#F5B544" fontFamily="Space Grotesk">+25</text>
        </g>

        <style>{`
          @keyframes exArc {
            0% { stroke-dashoffset: 300; opacity: 0; }
            20% { opacity: 1; }
            70% { stroke-dashoffset: 0; opacity: 1; }
            100% { stroke-dashoffset: 0; opacity: 0.3; }
          }
          @keyframes exTravel {
            0% { offset-distance: 0%; opacity: 0; transform: scale(0.5); }
            15% { opacity: 1; transform: scale(1); }
            85% { offset-distance: 100%; opacity: 1; transform: scale(1.4); }
            100% { offset-distance: 100%; opacity: 0; transform: scale(2); }
          }
          @keyframes exBurst {
            0% { transform: translate(0, 0); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
          }
          @keyframes exScore {
            0% { opacity: 0; transform: translateY(10px); }
            40% { opacity: 1; transform: translateY(-2px); }
            70% { opacity: 1; transform: translateY(-4px); }
            100% { opacity: 0; transform: translateY(-20px); }
          }
        `}</style>
      </svg>

      {/* Compteur PévèleScore */}
      <div style={{
        position: "absolute",
        bottom: -8, left: "50%",
        transform: "translateX(-50%)",
        display: "flex", alignItems: "center", gap: 8,
        padding: "6px 14px",
        borderRadius: 999,
        background: "rgba(245,181,68,0.1)",
        border: "1px solid rgba(245,181,68,0.3)",
        fontFamily: "Space Grotesk",
        fontSize: 12,
        fontWeight: 500,
      }}>
        <span style={{ color: "#A1A1AA" }}>PévèleScore</span>
        <span style={{
          color: "#F5B544",
          fontFeatureSettings: "'tnum'",
          minWidth: 36,
          display: "inline-block",
          transition: "all 0.5s cubic-bezier(0.22,1,0.36,1)",
        }} key={score}>
          {score}
        </span>
      </div>
    </div>
  );
}

function StepVisualVoeu() {
  // L'écriture d'un vœu — champ "qui respire"
  return (
    <div style={{
      width: "100%",
      padding: 20,
      borderRadius: 16,
      background: "rgba(124,92,255,0.04)",
      border: "1px solid rgba(124,92,255,0.2)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute",
        inset: -20,
        background: "radial-gradient(circle at 30% 50%, rgba(124,92,255,0.3), transparent 60%)",
        animation: "breathe 4s infinite ease-in-out",
        pointerEvents: "none",
      }} />
      <div style={{ position: "relative" }}>
        <div style={{ fontSize: 11, color: "#A1A1AA", marginBottom: 8, fontWeight: 500, letterSpacing: 0.5 }}>
          MON VŒU
        </div>
        <div style={{ fontSize: 17, lineHeight: 1.35, fontFamily: "Inter", color: "#fff" }}>
          J'ai besoin d'aide pour <span style={{
            background: "linear-gradient(135deg, #7C5CFF, #22D3EE)",
            WebkitBackgroundClip: "text",
            backgroundClip: "text",
            color: "transparent",
          }}>monter une étagère</span>
          <span style={{
            display: "inline-block",
            width: 2, height: 18,
            background: "#7C5CFF",
            marginLeft: 2,
            verticalAlign: "middle",
            animation: "caret 1s infinite",
          }} />
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
          <span style={{
            padding: "4px 10px",
            borderRadius: 999,
            background: "rgba(245,158,11,0.15)",
            border: "1px solid rgba(245,158,11,0.3)",
            color: "#F59E0B",
            fontSize: 11,
            fontWeight: 500,
          }}>🏠 Habitat</span>
          <span style={{
            padding: "4px 10px",
            borderRadius: 999,
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.08)",
            color: "#A1A1AA",
            fontSize: 11,
            fontWeight: 500,
          }}>📍 Orchies</span>
        </div>
      </div>
      <style>{`
        @keyframes breathe { 0%,100%{opacity:.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.05);} }
        @keyframes caret { 0%,100%{opacity:1;} 50%{opacity:0;} }
      `}</style>
    </div>
  );
}

function StepVisualMatch() {
  // 3 profils suggérés par le Génie
  const matches = [
    { name: "Camille D.", commune: "Orchies", initial: "C", score: 94, color: "#22D3EE" },
    { name: "Léo B.",     commune: "Auchy",   initial: "L", score: 87, color: "#7C5CFF" },
    { name: "Hugo M.",    commune: "Bouvignies", initial: "H", score: 81, color: "#F472B6" },
  ];
  return (
    <div style={{ width: "100%" }}>
      <div style={{ fontSize: 11, color: "#A1A1AA", marginBottom: 12, fontWeight: 500, letterSpacing: 0.5 }}>
        LE GÉNIE PROPOSE — 3 VOISINS PROCHES
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {matches.map((m, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 12,
            padding: "10px 12px",
            borderRadius: 14,
            background: "rgba(255,255,255,0.03)",
            border: "1px solid rgba(255,255,255,0.08)",
            animation: `slideIn 0.5s ${i * 0.15}s cubic-bezier(0.22,1,0.36,1) backwards`,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: "50%",
              background: `linear-gradient(135deg, ${m.color}, #22D3EE)`,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontWeight: 600, fontSize: 13,
              fontFamily: "Space Grotesk",
            }}>{m.initial}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{m.name}</div>
              <div style={{ fontSize: 11, color: "#A1A1AA" }}>📍 {m.commune}</div>
            </div>
            <div style={{
              padding: "2px 8px",
              borderRadius: 999,
              fontSize: 11, fontWeight: 600,
              background: "rgba(74,222,128,0.12)",
              color: "#4ADE80",
              fontFamily: "Space Grotesk",
            }}>{m.score}%</div>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes slideIn {
          from { opacity: 0; transform: translateX(-12px); }
          to { opacity: 1; transform: translateX(0); }
        }
      `}</style>
    </div>
  );
}

function CommentCaMarche() {
  return (
    <section className="section" id="comment">
      <div className="wrap">
        <div className="reveal">
          <div className="eyebrow section-eyebrow">Chapitre 2 — Comment ça marche</div>
          <h2>Trois temps.<br />Un seul geste.</h2>
          <p className="lede">
            On ne poste pas, on n'expose pas. On fait un Vœu — un besoin, une offre —
            et le Génie matche localement, en moins de soixante secondes.
          </p>
        </div>

        <div className="steps">
          <div className="step reveal reveal-delay-1">
            <div className="step-num">01 — Vœu</div>
            <h3>Tu fais un vœu.</h3>
            <p>
              Texte ou voix, en moins de 60 secondes. Un champ qui respire,
              une intention captée — pas un post.
            </p>
            <div className="step-visual">
              <StepVisualVoeu />
            </div>
          </div>

          <div className="step reveal reveal-delay-2">
            <div className="step-num">02 — Match</div>
            <h3>Le Génie te relie.</h3>
            <p>
              IA locale, géolocalisée, hébergée en Europe. Trois voisins,
              artisans ou bénévoles te sont proposés — pas un feed.
            </p>
            <div className="step-visual">
              <StepVisualMatch />
            </div>
          </div>

          <div className="step reveal reveal-delay-3" style={{
            background: "linear-gradient(180deg, rgba(245,181,68,0.04), rgba(124,92,255,0.04))",
            border: "1px solid rgba(245,181,68,0.2)",
          }}>
            <div className="step-num" style={{ color: "#F5B544" }}>03 — Exaucement</div>
            <h3>Le territoire t'exauce.</h3>
            <p>
              Conversation privée éphémère, double confirmation, +PévèleScore.
              Chaque besoin résolu illumine une commune de plus.
            </p>
            <div className="step-visual">
              <ExaucementAnimation />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* CHAPITRE 3 — Les 10 univers                                              */
/* ═══════════════════════════════════════════════════════════════════════ */

const UNIVERS = [
  { id: 1,  nom: "Habitat",         emoji: "🏠", color: "#F59E0B", count: 184 },
  { id: 2,  nom: "Mobilité",        emoji: "🚲", color: "#22D3EE", count: 96  },
  { id: 3,  nom: "Santé",           emoji: "💚", color: "#34D399", count: 142 },
  { id: 4,  nom: "Éducation",       emoji: "📚", color: "#60A5FA", count: 78  },
  { id: 5,  nom: "Économie locale", emoji: "🛍", color: "#A78BFA", count: 211 },
  { id: 6,  nom: "Culture",         emoji: "🎭", color: "#F472B6", count: 64  },
  { id: 7,  nom: "Sport",           emoji: "⚽", color: "#FB7185", count: 89  },
  { id: 8,  nom: "Vie citoyenne",   emoji: "🤝", color: "#4ADE80", count: 47  },
  { id: 9,  nom: "Environnement",   emoji: "🌱", color: "#10B981", count: 121 },
  { id: 10, nom: "Famille",         emoji: "👨‍👩‍👧", color: "#FBBF24", count: 156 },
];

function UniversGrid() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="reveal">
          <div className="eyebrow section-eyebrow">Chapitre 3 — Dix univers</div>
          <h2>Tout ce qui fait<br />vivre la Pévèle.</h2>
          <p className="lede">
            Habitat, mobilité, santé, éducation, économie locale, culture, sport,
            vie citoyenne, environnement, famille. Chaque univers a sa couleur — chaque
            vœu sa lumière.
          </p>
        </div>

        <div className="univers-grid">
          {UNIVERS.map((u, i) => (
            <div
              key={u.id}
              className="univers-tile reveal"
              style={{ "--u-color": u.color, transitionDelay: `${(i % 5) * 60}ms` }}
            >
              <div className="u-emoji">{u.emoji}</div>
              <div>
                <div className="u-name">{u.nom}</div>
                <div className="u-count">{u.count} vœux ce mois-ci</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* CHAPITRE 4 — Sponsors B2B                                                */
/* ═══════════════════════════════════════════════════════════════════════ */

function SponsorVisual() {
  // Mock visuel "Exauceur Officiel" — badge premium
  return (
    <div style={{
      position: "relative",
      borderRadius: 28,
      overflow: "hidden",
      aspectRatio: "4/5",
      background: "linear-gradient(135deg, #1C1C1F, #0A0A0B)",
      border: "1px solid rgba(255,255,255,0.12)",
    }}>
      {/* Aurora background */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(circle at 30% 20%, rgba(124,92,255,0.4), transparent 50%), radial-gradient(circle at 70% 70%, rgba(245,181,68,0.25), transparent 50%)",
      }} />

      {/* Top: badge */}
      <div style={{
        position: "absolute", top: 24, left: 24, right: 24,
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 12px",
          borderRadius: 999,
          background: "rgba(245,181,68,0.15)",
          border: "1px solid rgba(245,181,68,0.3)",
          fontSize: 11, fontWeight: 600,
          letterSpacing: 0.5,
          textTransform: "uppercase",
          color: "#F5B544",
        }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#F5B544", boxShadow: "0 0 6px #F5B544" }} />
          Exauceur Officiel
        </div>
        <span style={{ fontSize: 11, color: "rgba(255,255,255,0.5)" }}>Orchies · Habitat</span>
      </div>

      {/* Center: logo placeholder */}
      <div style={{
        position: "absolute", top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        textAlign: "center",
      }}>
        <div style={{
          width: 120, height: 120,
          borderRadius: 28,
          background: "linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02))",
          border: "1px solid rgba(255,255,255,0.15)",
          display: "flex", alignItems: "center", justifyContent: "center",
          margin: "0 auto 16px",
          fontSize: 48,
          backdropFilter: "blur(20px)",
        }}>🔨</div>
        <div style={{
          fontFamily: "Space Grotesk",
          fontSize: 22,
          fontWeight: 500,
          letterSpacing: "-0.02em",
        }}>Bricolage Dubois</div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", marginTop: 4 }}>
          Artisan menuisier · Verified
        </div>
      </div>

      {/* Bottom: metrics */}
      <div style={{
        position: "absolute", bottom: 24, left: 24, right: 24,
        display: "flex", justifyContent: "space-between",
        padding: "14px 16px",
        borderRadius: 18,
        background: "rgba(0,0,0,0.4)",
        backdropFilter: "blur(20px)",
        border: "1px solid rgba(255,255,255,0.08)",
      }}>
        <div>
          <div style={{ fontFamily: "Space Grotesk", fontSize: 20, fontWeight: 500, color: "#F5B544" }}>34</div>
          <div style={{ fontSize: 10, color: "rgba(255,255,255,0.5)" }}>Exaucements</div>
        </div>
        <div>
          <div style={{ fontFamily: "Space Grotesk", fontSize: 20, fontWeight: 500, color: "#22D3EE" }}>2.1k</div>
          <div style={{ fontSize: 10, color: "rgba(255,255,255,0.5)" }}>Impressions</div>
        </div>
        <div>
          <div style={{ fontFamily: "Space Grotesk", fontSize: 20, fontWeight: 500, color: "#7C5CFF" }}>4.9</div>
          <div style={{ fontSize: 10, color: "rgba(255,255,255,0.5)" }}>Confiance</div>
        </div>
      </div>
    </div>
  );
}

function SponsorsBlock() {
  return (
    <section className="section" style={{
      background: "linear-gradient(180deg, transparent, rgba(124,92,255,0.04), transparent)",
    }}>
      <div className="wrap">
        <div className="sponsor-block">
          <div className="reveal">
            <div className="eyebrow section-eyebrow">Chapitre 4 — Pour les commerçants & sponsors</div>
            <h2 style={{ fontSize: "clamp(36px, 5vw, 64px)" }}>
              Payez le besoin résolu.<br />
              <span className="gradient-text">Pas l'impression.</span>
            </h2>
            <p className="lede" style={{ marginBottom: 28 }}>
              Devenez <strong style={{ color: "#F5B544" }}>Exauceur Officiel</strong> de votre catégorie
              dans votre commune. Exclusivité, visibilité native, retour mesurable —
              et la fierté d'avoir résolu un vrai besoin local.
            </p>

            <div className="sponsor-stats">
              <div className="stat">
                <div className="v">1240</div>
                <div className="l">vœux exaucés cette semaine</div>
              </div>
              <div className="stat">
                <div className="v">38</div>
                <div className="l">communes activables</div>
              </div>
              <div className="stat">
                <div className="v">0€</div>
                <div className="l">pour l'habitant. Toujours.</div>
              </div>
              <div className="stat">
                <div className="v" style={{ background: "linear-gradient(135deg,#F5B544,#FB7185)", WebkitBackgroundClip: "text", backgroundClip: "text" }}>2</div>
                <div className="l">créneaux restants — Orchies</div>
              </div>
            </div>

            <div style={{ marginTop: 32 }}>
              <MagneticButton primary={true}>
                Réserver ma commune
                <span className="arrow" aria-hidden="true">→</span>
              </MagneticButton>
            </div>
          </div>

          <div className="reveal reveal-delay-2">
            <SponsorVisual />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* CHAPITRE 5 — Les Cofondateurs                                            */
/* ═══════════════════════════════════════════════════════════════════════ */

function LinkedInIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/>
    </svg>
  );
}

function CofondateurCard({ name, role, bio, linkedin, photoSrc, initials, gradient }) {
  return (
    <div className="cofond reveal">
      <div className="cofond-photo">
        <div className="cofond-photo-inner" style={{
          background: gradient || "linear-gradient(135deg, rgba(124,92,255,0.4), rgba(34,211,238,0.3))",
        }}>
          {/* Initiales en fond ; la photo (si déposée dans /founders) la recouvre. */}
          <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1 }}>{initials}</span>
          {photoSrc && (
            <img
              src={photoSrc}
              alt={name}
              style={{ position: "relative", zIndex: 2 }}
              onError={(e) => { e.currentTarget.style.display = "none"; }}
            />
          )}
        </div>
      </div>
      <h3>{name}</h3>
      <div className="role">{role}</div>
      <p className="bio">{bio}</p>
      <a className="cofond-li" href={linkedin} target="_blank" rel="noopener noreferrer">
        <LinkedInIcon />
        Voir sur LinkedIn
        <span aria-hidden="true" style={{ marginLeft: 2, opacity: 0.5 }}>↗</span>
      </a>
    </div>
  );
}

function Cofondateurs() {
  return (
    <section className="section" id="cofondateurs">
      <div className="wrap">
        <div className="reveal" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 60px" }}>
          <div className="eyebrow section-eyebrow">Chapitre 5 — Les cofondateurs</div>
          <h2 style={{ marginInline: "auto" }}>Deux voix.<br />Un seul territoire.</h2>
          <p className="lede" style={{ margin: "24px auto 0" }}>
            La Pévèle Augmentée est née d'une obsession partagée : connecter ce qui
            existe déjà, magnifier ce qui se fait déjà — sans publicité, sans
            commentaire, sans toxicité.
          </p>
        </div>

        <div className="cofond-grid">
          <CofondateurCard
            name="Vivien Le Moal"
            role="Cofondateur — Produit & Architecture"
            bio="Architecte du Génie. Conçoit le moteur d'intentions, l'infra hébergée en Europe et la souveraineté technique du projet."
            linkedin="https://www.linkedin.com/in/vivien-le-moal-b52377148/"
            photoSrc="founders/vivien.jpg"
            initials="VL"
            gradient="linear-gradient(135deg, rgba(124,92,255,0.5), rgba(34,211,238,0.3))"
          />
          <CofondateurCard
            name="Émilie Varnier"
            role="Cofondatrice — Direction artistique & Territoire"
            bio="Voix du territoire. Tisse les liens avec les 38 communes, les artisans, les associations — et donne à la plateforme son visage humain."
            linkedin="https://www.linkedin.com/in/emilie-varnier-a5199b2b4/"
            photoSrc="founders/emilie.jpg"
            initials="EV"
            gradient="linear-gradient(135deg, rgba(245,181,68,0.5), rgba(244,114,182,0.3))"
          />
        </div>
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* FOOTER                                                                   */
/* ═══════════════════════════════════════════════════════════════════════ */

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <div className="nav-brand-mark"></div>
            <span style={{ fontFamily: "Space Grotesk", fontWeight: 600, fontSize: 17 }}>
              La Pévèle Augmentée
            </span>
          </div>
          <div className="small">
            Le réseau d'intentions de la Pévèle Carembault. 38 communes, ~100 000
            habitants. Gratuit pour les habitants, financé par le sponsoring local.
            Aucun système de paiement intégré.
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap" }}>
            <span className="pill"><span className="dot"></span>Hébergé en Europe (Hetzner)</span>
            <span className="pill" style={{ paddingLeft: 12 }}>RGPD‑natif</span>
            <span className="pill" style={{ paddingLeft: 12 }}>Open source</span>
          </div>
        </div>
        <div>
          <h4>Produit</h4>
          <a href="#">Le Génie</a>
          <a href="#">Faire un vœu</a>
          <a href="#">Le Radar</a>
          <a href="#">Salle d'Exaucement</a>
        </div>
        <div>
          <h4>Pour les pros</h4>
          <a href="#">Sponsors locaux</a>
          <a href="#">Exauceur Officiel</a>
          <a href="#">Collectivités</a>
          <a href="#">Console B2B</a>
        </div>
        <div>
          <h4>Légal</h4>
          <a href="#">Mentions légales</a>
          <a href="#">Confidentialité</a>
          <a href="#">RGPD</a>
          <a href="#">Souveraineté</a>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 60, paddingTop: 24, borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--text-muted)", fontSize: 12 }}>
        <span>© 2026 La Pévèle Augmentée — Le Génie Territorial.</span>
        <span style={{ fontFamily: "Space Grotesk", letterSpacing: 1 }}>v0.1 · Pré‑lancement</span>
      </div>
    </footer>
  );
}

window.CommentCaMarche = CommentCaMarche;
window.UniversGrid = UniversGrid;
window.SponsorsBlock = SponsorsBlock;
window.Cofondateurs = Cofondateurs;
window.Footer = Footer;