// ============================================================================
// MOVA RELOCATION — Sections 2 : Services, Process, Destinations
// ============================================================================

// ----------------------------------------------------------------------------
// 6. NOTRE SAVOIR-FAIRE (Services)
// ----------------------------------------------------------------------------
function ServicesSection() {
  const t = useT();
  return (
    <section
      id="services"
      data-screen-label="06 Services"
      style={{
        background: "var(--mova-cream)",
        color: "var(--mova-black)",
        padding: "160px 48px 180px",
      }}
    >
      <div style={{ maxWidth: 1380, margin: "0 auto" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.4fr",
            gap: 80,
            alignItems: "end",
            marginBottom: 96,
          }}
          className="mova-services-head"
        >
          <div>
            <Reveal>
              <Eyebrow>{t("services.eyebrow")}</Eyebrow>
            </Reveal>
            <Reveal delay={120}>
              <h2
                style={{
                  fontFamily: "var(--font-serif)",
                  fontWeight: 400,
                  fontSize: "clamp(36px, 4.4vw, 58px)",
                  lineHeight: 1.15,
                  margin: 0,
                  textWrap: "balance",
                }}
              >
                {t("services.title1")}
                <br />
                {t("services.title2")}
                <br />
                <span style={{ fontStyle: "italic", color: "var(--mova-gold)" }}>
                  {t("services.title3")}
                </span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={250}>
            <p
              style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 300,
                fontSize: 18,
                lineHeight: 1.8,
                color: "var(--mova-muted)",
                maxWidth: 560,
                textWrap: "pretty",
                margin: 0,
              }}
            >
              {t("services.lead")}
            </p>
          </Reveal>
        </div>

        <div
          className="mova-services-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 0,
            borderTop: "0.5px solid rgba(10,10,10,0.16)",
          }}
        >
          {SERVICES.map((s, i) => (
            <ServiceCard key={s.key} service={s} index={i} />
          ))}
        </div>

        <Reveal delay={300}>
          <div
            style={{
              marginTop: 80,
              display: "flex",
              alignItems: "center",
              gap: 24,
              justifyContent: "center",
            }}
          >
            <span
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: 11,
                letterSpacing: "0.4em",
                color: "var(--mova-muted)",
                textTransform: "uppercase",
              }}
            >
              {t("services.tagline")}
            </span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ServiceCard({ service, index }) {
  const t = useT();
  const [hover, setHover] = useState(false);
  return (
    <Reveal delay={index * 100}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          padding: "56px 36px",
          borderRight: "0.5px solid rgba(10,10,10,0.16)",
          borderBottom: "0.5px solid rgba(10,10,10,0.16)",
          position: "relative",
          minHeight: 340,
          display: "flex",
          flexDirection: "column",
          gap: 28,
          transition: "background 400ms ease",
          background: hover ? "rgba(184,148,76,0.06)" : "transparent",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: 12,
            border: "0.5px solid var(--mova-gold)",
            opacity: hover ? 1 : 0,
            transform: hover ? "scale(1)" : "scale(0.98)",
            transition:
              "opacity 420ms cubic-bezier(0.22,0.61,0.36,1), transform 420ms cubic-bezier(0.22,0.61,0.36,1)",
            pointerEvents: "none",
          }}
        />
        <div
          style={{
            transform: hover ? "translateY(-4px)" : "translateY(0)",
            transition: "transform 480ms cubic-bezier(0.22,0.61,0.36,1)",
            position: "relative",
          }}
        >
          <Icon name={service.icon} size={48} />
        </div>
        <div
          style={{
            fontFamily: "var(--font-sans)",
            fontWeight: 400,
            fontSize: 12,
            letterSpacing: "0.42em",
            color: "var(--mova-black)",
            position: "relative",
          }}
        >
          {t(`services.${service.key}.title`)}
          <div
            style={{
              marginTop: 8,
              height: 0.5,
              width: hover ? 60 : 24,
              background: "var(--mova-gold)",
              transition: "width 480ms cubic-bezier(0.22,0.61,0.36,1)",
            }}
          />
        </div>
        <p
          style={{
            fontFamily: "var(--font-sans)",
            fontWeight: 300,
            fontSize: 15,
            lineHeight: 1.75,
            color: "var(--mova-muted)",
            margin: 0,
            textWrap: "pretty",
            position: "relative",
          }}
        >
          {t(`services.${service.key}.body`)}
        </p>
        <div
          style={{
            position: "absolute",
            top: 16,
            right: 20,
            fontFamily: "ui-monospace, Menlo, monospace",
            fontSize: 9,
            letterSpacing: "0.25em",
            color: "rgba(10,10,10,0.32)",
          }}
        >
          0{index + 1}
        </div>
      </div>
    </Reveal>
  );
}

// ----------------------------------------------------------------------------
// 7. PROCESS — 6 étapes numérotées
// ----------------------------------------------------------------------------
function ProcessSection({ scrollRef }) {
  const t = useT();
  const sectionRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const rect = sectionRef.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const start = vh * 0.7;
      const end = -rect.height + vh * 0.7;
      const total = start - end;
      const passed = start - rect.top;
      const p = Math.max(0, Math.min(1, passed / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section
      id="process"
      ref={sectionRef}
      data-screen-label="07 Process"
      style={{
        background: "var(--mova-cream)",
        color: "var(--mova-black)",
        padding: "160px 48px 200px",
        position: "relative",
      }}
    >
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 120 }}>
          <Reveal>
            <Eyebrow center>{t("process.eyebrow")}</Eyebrow>
          </Reveal>
          <Reveal delay={150}>
            <h2
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 400,
                fontSize: "clamp(36px, 4.4vw, 58px)",
                lineHeight: 1.15,
                margin: 0,
                textWrap: "balance",
              }}
            >
              {t("process.title1")} <span style={{ fontStyle: "italic", color: "var(--mova-gold)" }}>{t("process.title2")}</span> ?
            </h2>
          </Reveal>
          <Reveal delay={300}>
            <p
              style={{
                marginTop: 28,
                fontFamily: "var(--font-sans)",
                fontWeight: 300,
                fontSize: 17,
                lineHeight: 1.8,
                color: "var(--mova-muted)",
                maxWidth: 580,
                margin: "28px auto 0",
                textWrap: "pretty",
              }}
            >
              {t("process.lead")}
            </p>
          </Reveal>
        </div>

        <div style={{ position: "relative" }}>
          {/* Ligne verticale */}
          <div
            aria-hidden="true"
            style={{
              position: "absolute",
              left: "calc(180px - 0.5px)",
              top: 0,
              bottom: 0,
              width: 0.5,
              background: "rgba(10,10,10,0.12)",
            }}
            className="mova-process-line"
          />
          <div
            aria-hidden="true"
            style={{
              position: "absolute",
              left: "calc(180px - 0.5px)",
              top: 0,
              width: 0.5,
              height: `${progress * 100}%`,
              background: "var(--mova-gold)",
              transition: "height 100ms linear",
            }}
            className="mova-process-line-active"
          />

          <div style={{ display: "flex", flexDirection: "column", gap: 84 }}>
            {PROCESS_STEPS.map((step, i) => (
              <ProcessStep key={step.num} step={step} index={i} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessStep({ step, index }) {
  const t = useT();
  const [ref, inView] = useInView({ threshold: 0.4 });
  return (
    <div
      ref={ref}
      className="mova-process-step"
      style={{
        display: "grid",
        gridTemplateColumns: "180px 1fr",
        gap: 60,
        alignItems: "baseline",
        opacity: inView ? 1 : 0,
        transform: `translateX(${inView ? 0 : -30}px)`,
        transition: `opacity 800ms ease, transform 800ms cubic-bezier(0.22,0.61,0.36,1)`,
      }}
    >
      <div
        style={{
          fontFamily: "var(--font-serif)",
          fontStyle: "italic",
          fontWeight: 300,
          fontSize: "clamp(64px, 7vw, 96px)",
          color: "var(--mova-gold)",
          lineHeight: 1,
          textAlign: "right",
          paddingRight: 40,
        }}
      >
        {step.num}
      </div>
      <div>
        <h3
          style={{
            fontFamily: "var(--font-sans)",
            fontWeight: 400,
            fontSize: 13,
            letterSpacing: "0.36em",
            color: "var(--mova-black)",
            margin: 0,
            textTransform: "uppercase",
          }}
        >
          {t(`process.${step.key}.title`)}
        </h3>
        <div style={{ height: 0.5, width: 36, background: "var(--mova-gold)", marginTop: 14 }} />
        <p
          style={{
            marginTop: 22,
            fontFamily: "var(--font-sans)",
            fontWeight: 300,
            fontSize: 17,
            lineHeight: 1.75,
            color: "var(--mova-muted)",
            maxWidth: 560,
            textWrap: "pretty",
          }}
        >
          {t(`process.${step.key}.body`)}
        </p>
      </div>
    </div>
  );
}

// ----------------------------------------------------------------------------
// 8. DESTINATIONS — Constellation cartographique
// ----------------------------------------------------------------------------

// Villes avec coordonnées géographiques réelles (lat, lng)
const GEO_DESTINATIONS = [
  { name: "Paris", lat: 48.85, lng: 2.35, country: "FR", hub: true },
  { name: "Lyon", lat: 45.76, lng: 4.84, country: "FR" },
  { name: "Marseille", lat: 43.30, lng: 5.37, country: "FR" },
  { name: "Lille", lat: 50.63, lng: 3.06, country: "FR" },
  { name: "Rennes", lat: 48.11, lng: -1.68, country: "FR" },
  { name: "London", lat: 51.51, lng: -0.13, country: "UK", major: true },
  { name: "Edinburgh", lat: 55.95, lng: -3.19, country: "UK" },
  { name: "Manchester", lat: 53.48, lng: -2.24, country: "UK" },
  { name: "Birmingham", lat: 52.49, lng: -1.90, country: "UK" },
  { name: "Newcastle", lat: 54.98, lng: -1.62, country: "UK" },
  { name: "Bournemouth", lat: 50.72, lng: -1.88, country: "UK" },
  { name: "Madrid", lat: 40.42, lng: -3.70, country: "ES", major: true },
  { name: "Barcelona", lat: 41.39, lng: 2.17, country: "ES" },
  { name: "Valencia", lat: 39.47, lng: -0.38, country: "ES" },
  { name: "Seville", lat: 37.39, lng: -5.99, country: "ES" },
  { name: "Genève", lat: 46.20, lng: 6.14, country: "CH" },
  { name: "Lausanne", lat: 46.52, lng: 6.63, country: "CH" },
  { name: "Monaco", lat: 43.74, lng: 7.42, country: "MC" },
  { name: "Bruxelles", lat: 50.85, lng: 4.35, country: "BE" },
  { name: "Amsterdam", lat: 52.37, lng: 4.90, country: "NL" },
  { name: "Rome", lat: 41.90, lng: 12.50, country: "IT", major: true },
  { name: "Milan", lat: 45.46, lng: 9.19, country: "IT" },
  { name: "Berlin", lat: 52.52, lng: 13.40, country: "DE", major: true },
  { name: "Munich", lat: 48.14, lng: 11.58, country: "DE" },
  { name: "Frankfurt", lat: 50.11, lng: 8.68, country: "DE" },
  { name: "Stuttgart", lat: 48.78, lng: 9.18, country: "DE" },
  { name: "Dortmund", lat: 51.51, lng: 7.47, country: "DE" },
];

// Projection simple en viewBox 900 × 640
const PROJ = {
  lngMin: -10, lngMax: 18, latMin: 35, latMax: 59,
  vbW: 900, vbH: 640,
};
function project(lat, lng) {
  const x = ((lng - PROJ.lngMin) / (PROJ.lngMax - PROJ.lngMin)) * PROJ.vbW;
  const y = ((PROJ.latMax - lat) / (PROJ.latMax - PROJ.latMin)) * PROJ.vbH;
  return { x, y };
}

function DestinationsSection() {
  const t = useT();
  const [active, setActive] = useState(null);
  const indexed = GEO_DESTINATIONS.map((d, i) => ({ ...d, n: i + 1 }));

  return (
    <section
      id="destinations"
      data-screen-label="08 Destinations"
      style={{
        background: "var(--mova-black)",
        color: "var(--mova-cream)",
        padding: "160px 64px 180px",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Halo doré */}
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(60% 50% at 50% 55%, rgba(184,148,76,0.10), transparent 70%)",
          pointerEvents: "none",
        }}
      />

      <div style={{ maxWidth: 1480, margin: "0 auto", position: "relative" }}>
        {/* En-tête */}
        <div
          className="mova-destinations-head"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 80,
            alignItems: "end",
            marginBottom: 80,
          }}
        >
          <Reveal>
            <div>
              <Eyebrow>{t("destinations.eyebrow")}</Eyebrow>
              <h2
                style={{
                  fontFamily: "var(--font-serif)",
                  fontWeight: 400,
                  fontSize: "clamp(40px, 5vw, 72px)",
                  lineHeight: 1,
                  margin: 0,
                  textWrap: "balance",
                }}
              >
                {t("destinations.title1")}
                <br />
                <span style={{ fontStyle: "italic", color: "var(--mova-gold)" }}>
                  {t("destinations.title2")}
                </span>
              </h2>
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-end",
                paddingBottom: 12,
                borderBottom: "0.5px solid rgba(184,148,76,0.22)",
              }}
            >
              <p
                style={{
                  fontFamily: "var(--font-sans)",
                  fontWeight: 300,
                  fontSize: 15,
                  lineHeight: 1.7,
                  color: "rgba(245,240,230,0.72)",
                  maxWidth: 440,
                  margin: 0,
                  textWrap: "pretty",
                }}
              >
                {t("destinations.lead")}
              </p>
              <div
                style={{
                  fontFamily: "ui-monospace, Menlo, monospace",
                  fontSize: 11,
                  letterSpacing: "0.3em",
                  color: "var(--mova-gold)",
                  textTransform: "uppercase",
                  whiteSpace: "nowrap",
                  paddingLeft: 40,
                }}
              >
                28 · 08 · 01
              </div>
            </div>
          </Reveal>
        </div>

        {/* Carte constellation pleine largeur */}
        <Reveal>
          <ConstellationMap
            destinations={GEO_DESTINATIONS}
            active={active}
            onHover={setActive}
            showAllLabels
          />
        </Reveal>

        {/* Index inline en bas — 4 colonnes */}
        <div
          className="mova-atlas-grid"
          style={{
            marginTop: 64,
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 48,
            borderTop: "0.5px solid rgba(184,148,76,0.22)",
            paddingTop: 40,
          }}
        >
          {[
            { country: t("country.FR"), code: "FR", cities: ["Paris", "Lyon", "Marseille", "Lille", "Rennes"] },
            { country: t("country.UK"), code: "UK", cities: ["London", "Edinburgh", "Manchester", "Birmingham", "Newcastle", "Bournemouth"] },
            { country: t("country.ES"), code: "ES", cities: ["Madrid", "Barcelona", "Valencia", "Seville"] },
            { country: t("country.DE"), code: "DE", cities: ["Berlin", "Munich", "Frankfurt", "Stuttgart", "Dortmund"] },
            { country: t("country.IT"), code: "IT", cities: ["Rome", "Milan"] },
            { country: t("country.CH"), code: "CH", cities: ["Genève", "Lausanne"] },
            { country: t("country.BENELUX"), code: "BE/NL", cities: ["Bruxelles", "Amsterdam"] },
            { country: t("country.MC"), code: "MC", cities: ["Monaco"] },
          ].map((g, i) => (
            <Reveal key={g.country} delay={i * 50}>
              <div>
                <div
                  style={{
                    display: "flex",
                    alignItems: "baseline",
                    justifyContent: "space-between",
                    marginBottom: 14,
                  }}
                >
                  <span
                    style={{
                      fontFamily: "var(--font-sans)",
                      fontSize: 10,
                      letterSpacing: "0.42em",
                      color: "var(--mova-gold)",
                      textTransform: "uppercase",
                    }}
                  >
                    {g.country}
                  </span>
                  <span
                    style={{
                      fontFamily: "ui-monospace, Menlo, monospace",
                      fontSize: 9,
                      letterSpacing: "0.2em",
                      color: "rgba(245,240,230,0.4)",
                    }}
                  >
                    {g.code} · {String(g.cities.length).padStart(2, "0")}
                  </span>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  {g.cities.map((name) => {
                    const idx = GEO_DESTINATIONS.findIndex((d) => d.name === name);
                    const isActive = active === idx;
                    return (
                      <button
                        key={name}
                        onMouseEnter={() => setActive(idx)}
                        onMouseLeave={() => setActive(null)}
                        style={{
                          background: "transparent",
                          border: "none",
                          padding: 0,
                          textAlign: "left",
                          cursor: "pointer",
                          fontFamily: "var(--font-serif)",
                          fontStyle: "italic",
                          fontWeight: 300,
                          fontSize: 17,
                          color: isActive ? "var(--mova-gold)" : "rgba(245,240,230,0.82)",
                          transition: "color 320ms ease",
                          lineHeight: 1.4,
                        }}
                      >
                        {name}
                      </button>
                    );
                  })}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----------------------------------------------------------------------------
// Counter — bloc chiffre + label
// ----------------------------------------------------------------------------
function Counter({ num, label }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span
        style={{
          fontFamily: "var(--font-serif)",
          fontWeight: 300,
          fontStyle: "italic",
          fontSize: 32,
          color: "var(--mova-gold)",
          lineHeight: 1,
          letterSpacing: 0,
        }}
      >
        {num}
      </span>
      <span style={{ fontSize: 10, letterSpacing: "0.32em" }}>{label}</span>
    </div>
  );
}

// ----------------------------------------------------------------------------
// CompassRibbon — flux horizontal ouest → est des 9 villes principales
// ----------------------------------------------------------------------------
function CompassRibbon({ active }) {
  const flow = [
    "Edinburgh",
    "London",
    "Amsterdam",
    "Bruxelles",
    "Paris",
    "Genève",
    "Milan",
    "Rome",
    "Madrid",
    "Berlin",
  ];
  const ordered = flow
    .map((name) => GEO_DESTINATIONS.find((d) => d.name === name))
    .sort((a, b) => a.lng - b.lng);

  return (
    <div
      style={{
        position: "relative",
        padding: "32px 0",
        borderTop: "0.5px solid rgba(184,148,76,0.22)",
        borderBottom: "0.5px solid rgba(184,148,76,0.22)",
        marginBottom: 0,
      }}
    >
      {/* Repères W / E */}
      <div
        style={{
          position: "absolute",
          left: 0,
          top: -7,
          background: "var(--mova-black)",
          padding: "0 8px 0 0",
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: "0.32em",
          color: "var(--mova-gold)",
        }}
      >
        OUEST · W
      </div>
      <div
        style={{
          position: "absolute",
          right: 0,
          top: -7,
          background: "var(--mova-black)",
          padding: "0 0 0 8px",
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: "0.32em",
          color: "var(--mova-gold)",
        }}
      >
        EST · E
      </div>

      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 32,
          justifyContent: "space-between",
          flexWrap: "wrap",
        }}
        className="mova-compass-flow"
      >
        {ordered.map((d, i) => {
          const isHub = d.hub;
          return (
            <div
              key={d.name}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: 8,
                opacity: active === null || (d && active !== null) ? 1 : 0.4,
                transition: "opacity 320ms ease",
              }}
            >
              <div
                style={{
                  width: isHub ? 8 : 5,
                  height: isHub ? 8 : 5,
                  borderRadius: "50%",
                  background: "var(--mova-gold)",
                  boxShadow: isHub ? "0 0 0 4px rgba(184,148,76,0.15)" : "none",
                }}
              />
              <div
                style={{
                  fontFamily: isHub ? "var(--font-serif)" : "var(--font-sans)",
                  fontStyle: isHub ? "italic" : "normal",
                  fontSize: isHub ? 16 : 11,
                  fontWeight: isHub ? 400 : 300,
                  letterSpacing: isHub ? "0.02em" : "0.32em",
                  textTransform: isHub ? "none" : "uppercase",
                  color: isHub ? "var(--mova-cream)" : "rgba(245,240,230,0.72)",
                }}
              >
                {d.name}
              </div>
              <div
                style={{
                  fontFamily: "ui-monospace, Menlo, monospace",
                  fontSize: 9,
                  letterSpacing: "0.18em",
                  color: "rgba(184,148,76,0.55)",
                }}
              >
                {d.lng >= 0 ? d.lng.toFixed(1) : Math.abs(d.lng).toFixed(1)}°
                {d.lng >= 0 ? "E" : "W"}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ----------------------------------------------------------------------------
// AtlasCard — fiche typographique d'une ville
// ----------------------------------------------------------------------------
function AtlasCard({ city, isActive, onHover, onLeave }) {
  return (
    <div
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      style={{
        position: "relative",
        padding: "32px 28px 28px",
        borderRight: "0.5px solid rgba(184,148,76,0.22)",
        borderBottom: "0.5px solid rgba(184,148,76,0.22)",
        background: isActive ? "rgba(184,148,76,0.06)" : "transparent",
        transition: "background 360ms ease",
        minHeight: 200,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
      }}
    >
      {/* Coin haut : numéro */}
      <div
        style={{
          display: "flex",
          alignItems: "baseline",
          justifyContent: "space-between",
        }}
      >
        <span
          style={{
            fontFamily: "ui-monospace, Menlo, monospace",
            fontSize: 11,
            letterSpacing: "0.25em",
            color: isActive ? "var(--mova-gold)" : "rgba(245,240,230,0.4)",
            transition: "color 320ms ease",
          }}
        >
          № {String(city.n).padStart(2, "0")}
        </span>
        <span
          style={{
            fontFamily: "ui-monospace, Menlo, monospace",
            fontSize: 10,
            letterSpacing: "0.3em",
            color: "rgba(245,240,230,0.4)",
          }}
        >
          {city.country}
        </span>
      </div>

      {/* Centre : nom de ville */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: "24px 0" }}>
        <div
          style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 400,
            fontStyle: city.hub ? "italic" : "normal",
            fontSize: "clamp(22px, 2.4vw, 30px)",
            color: isActive ? "var(--mova-gold)" : "var(--mova-cream)",
            lineHeight: 1.1,
            transition: "color 360ms ease",
          }}
        >
          {city.name}
        </div>
        {city.hub && (
          <div
            style={{
              marginTop: 6,
              fontFamily: "var(--font-sans)",
              fontSize: 9,
              letterSpacing: "0.42em",
              color: "var(--mova-gold)",
              textTransform: "uppercase",
            }}
          >
            · HEADQUARTERS ·
          </div>
        )}
        {city.major && !city.hub && (
          <div
            style={{
              marginTop: 6,
              fontFamily: "var(--font-sans)",
              fontSize: 9,
              letterSpacing: "0.4em",
              color: "rgba(184,148,76,0.7)",
              textTransform: "uppercase",
            }}
          >
            · MAJEURE ·
          </div>
        )}
      </div>

      {/* Coin bas : coordonnées */}
      <div
        style={{
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 9,
          letterSpacing: "0.18em",
          color: "rgba(245,240,230,0.55)",
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <span>
          {Math.abs(city.lat).toFixed(2)}° {city.lat >= 0 ? "N" : "S"}
        </span>
        <span>
          {Math.abs(city.lng).toFixed(2)}° {city.lng >= 0 ? "E" : "W"}
        </span>
      </div>

      {/* Coin déco quand active */}
      {isActive && (
        <React.Fragment>
          <Corner pos={{ top: 4, left: 4 }} />
          <Corner pos={{ top: 4, right: 4 }} flip="x" />
          <Corner pos={{ bottom: 4, left: 4 }} flip="y" />
          <Corner pos={{ bottom: 4, right: 4 }} flip="xy" />
        </React.Fragment>
      )}
    </div>
  );
}

function Corner({ pos, flip = "" }) {
  const sx = flip.includes("x") ? -1 : 1;
  const sy = flip.includes("y") ? -1 : 1;
  return (
    <svg
      width="10"
      height="10"
      viewBox="0 0 10 10"
      style={{
        position: "absolute",
        ...pos,
        transform: `scale(${sx}, ${sy})`,
      }}
    >
      <path
        d="M0 0 L0 10 M0 0 L10 0"
        stroke="var(--mova-gold)"
        strokeWidth="0.6"
        fill="none"
      />
    </svg>
  );
}

// ----------------------------------------------------------------------------
// ConstellationMap — 28 villes projetées géographiquement
// ----------------------------------------------------------------------------
function ConstellationMap({ destinations, active, onHover, showAllLabels = false }) {
  const paris = destinations.find((d) => d.hub);
  const parisXY = project(paris.lat, paris.lng);

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: "900 / 640",
        background: "transparent",
      }}
    >
      {/* Méridiens de référence — très fins, atmosphériques */}
      <svg
        viewBox="0 0 900 640"
        preserveAspectRatio="xMidYMid meet"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
      >
        <defs>
          <radialGradient id="mapGlow" cx="0.5" cy="0.55" r="0.5">
            <stop offset="0%" stopColor="rgba(184,148,76,0.06)" />
            <stop offset="100%" stopColor="transparent" />
          </radialGradient>
          <radialGradient id="dotHalo" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stopColor="rgba(184,148,76,0.45)" />
            <stop offset="100%" stopColor="transparent" />
          </radialGradient>
        </defs>

        {/* Halo central */}
        <rect width="900" height="640" fill="url(#mapGlow)" />

        {/* Grille géographique très subtile */}
        <g stroke="rgba(184,148,76,0.06)" strokeWidth="0.4" fill="none">
          {/* Méridiens (longitudes) */}
          {[-10, -5, 0, 5, 10, 15].map((lng) => {
            const x = ((lng - PROJ.lngMin) / (PROJ.lngMax - PROJ.lngMin)) * PROJ.vbW;
            return <line key={`lng${lng}`} x1={x} y1="0" x2={x} y2="640" />;
          })}
          {/* Parallèles (latitudes) */}
          {[40, 45, 50, 55].map((lat) => {
            const y = ((PROJ.latMax - lat) / (PROJ.latMax - PROJ.latMin)) * PROJ.vbH;
            return <line key={`lat${lat}`} x1="0" y1={y} x2="900" y2={y} />;
          })}
        </g>

        {/* Étiquettes degrés latitude */}
        <g
          fontFamily="ui-monospace, Menlo, monospace"
          fontSize="9"
          fill="rgba(184,148,76,0.35)"
          letterSpacing="0.15em"
        >
          {[40, 45, 50, 55].map((lat) => {
            const y = ((PROJ.latMax - lat) / (PROJ.latMax - PROJ.latMin)) * PROJ.vbH;
            return (
              <text key={`labelLat${lat}`} x="6" y={y - 4}>
                {lat}°N
              </text>
            );
          })}
        </g>

        {/* Lignes de réseau depuis Paris (HQ) */}
        <g stroke="rgba(184,148,76,0.18)" strokeWidth="0.4" fill="none">
          {destinations
            .filter((d) => !d.hub)
            .map((d) => {
              const { x, y } = project(d.lat, d.lng);
              return (
                <line
                  key={`line-${d.name}`}
                  x1={parisXY.x}
                  y1={parisXY.y}
                  x2={x}
                  y2={y}
                  strokeDasharray="1.5 3"
                />
              );
            })}
        </g>

        {/* Points + étiquettes villes */}
        {destinations.map((d, i) => {
          const { x, y } = project(d.lat, d.lng);
          const isActive = active === i;
          const isHub = d.hub;
          const isMajor = d.major || isHub;
          const labelAnchor =
            x > 750 ? "end" : x < 90 ? "start" : "middle";
          const labelDX = labelAnchor === "end" ? -10 : labelAnchor === "start" ? 10 : 0;
          const labelDY = isHub ? -16 : -10;
          return (
            <g
              key={d.name}
              transform={`translate(${x} ${y})`}
              onMouseEnter={() => onHover(i)}
              onMouseLeave={() => onHover(null)}
              style={{ cursor: "pointer" }}
            >
              {/* Halo pulsant */}
              <circle
                r={isHub ? 14 : 9}
                fill="url(#dotHalo)"
                style={{
                  transformOrigin: "center",
                  animation: `movaPulse 3s ${(i % 7) * 0.3}s ease-in-out infinite`,
                }}
              />
              {/* Cercle externe pour villes majeures ou actives */}
              {(isMajor || isActive) && (
                <circle
                  r={isHub ? 7 : isActive ? 6 : 5}
                  fill="none"
                  stroke={isActive ? "var(--mova-cream)" : "var(--mova-gold)"}
                  strokeWidth="0.5"
                  opacity={isActive ? 0.9 : 0.5}
                />
              )}
              {/* Point central */}
              <circle
                r={isHub ? 3 : isActive ? 3 : isMajor ? 2.4 : 1.8}
                fill="var(--mova-gold)"
                style={{ transition: "r 240ms ease" }}
              />
              {/* Étiquette ville — toutes visibles si showAllLabels, sinon majeures */}
              {(isMajor || showAllLabels) && (
                <text
                  x={labelDX}
                  y={labelDY}
                  textAnchor={labelAnchor}
                  fontFamily="var(--font-sans)"
                  fontSize={isHub ? 12 : isMajor ? 11 : 9.5}
                  fontWeight={isHub ? 400 : isMajor ? 400 : 300}
                  letterSpacing={isHub ? "0.32em" : isMajor ? "0.22em" : "0.2em"}
                  fill={
                    isActive
                      ? "var(--mova-gold)"
                      : isHub
                      ? "var(--mova-cream)"
                      : isMajor
                      ? "rgba(245,240,230,0.85)"
                      : "rgba(245,240,230,0.55)"
                  }
                  style={{
                    textTransform: "uppercase",
                    transition: "fill 320ms ease",
                    pointerEvents: "none",
                  }}
                >
                  {d.name}
                </text>
              )}
              {/* Étiquette ville — secondaires uniquement au hover si pas showAllLabels */}
              {!isMajor && !showAllLabels && isActive && (
                <text
                  x={labelDX}
                  y={labelDY}
                  textAnchor={labelAnchor}
                  fontFamily="var(--font-sans)"
                  fontSize={11}
                  fontWeight={400}
                  letterSpacing="0.22em"
                  fill="var(--mova-cream)"
                  style={{
                    textTransform: "uppercase",
                    pointerEvents: "none",
                  }}
                >
                  {d.name}
                </text>
              )}
              {/* Marqueur HQ pour Paris */}
              {isHub && (
                <text
                  y={16}
                  textAnchor="middle"
                  fontFamily="ui-monospace, Menlo, monospace"
                  fontSize="8"
                  letterSpacing="0.25em"
                  fill="var(--mova-gold)"
                  style={{ pointerEvents: "none" }}
                >
                  · HQ ·
                </text>
              )}
            </g>
          );
        })}
      </svg>

      {/* Légende coins */}
      <div
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: "0.25em",
          color: "rgba(184,148,76,0.5)",
        }}
      >
        EU · 28 VILLES
      </div>
      <div
        style={{
          position: "absolute",
          right: 0,
          top: 0,
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: "0.25em",
          color: "rgba(184,148,76,0.5)",
          textAlign: "right",
        }}
      >
        MERCATOR — APPROX.
      </div>
      <div
        style={{
          position: "absolute",
          left: 0,
          bottom: 0,
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: "0.25em",
          color: "rgba(184,148,76,0.5)",
        }}
      >
        9° W — 18° E
      </div>
      <div
        style={{
          position: "absolute",
          right: 0,
          bottom: 0,
          fontFamily: "ui-monospace, Menlo, monospace",
          fontSize: 10,
          letterSpacing: "0.25em",
          color: "rgba(184,148,76,0.5)",
          textAlign: "right",
        }}
      >
        35° N — 59° N
      </div>
    </div>
  );
}

Object.assign(window, {
  ServicesSection,
  ServiceCard,
  ProcessSection,
  ProcessStep,
  DestinationsSection,
  ConstellationMap,
  GEO_DESTINATIONS,
});