/* global React */
/* network-fr.jsx — Notre réseau parent + sous-pages pays (FR). */

const { useEffect: useEffNet, useRef: useRefNet } = React;

// ============ INDEX ============
const NETWORK_INDEX = [
  { slug: 'vietnam',     num: '01', name: 'Vietnam',     file: '/fr/notre-reseau/vietnam' },
  { slug: 'bangladesh',  num: '02', name: 'Bangladesh',  file: '/fr/notre-reseau/bangladesh' },
  { slug: 'pakistan',    num: '03', name: 'Pakistan',    file: '/fr/notre-reseau/pakistan' },
  { slug: 'china',       num: '04', name: 'Chine',       file: '/fr/notre-reseau/chine' },
  { slug: 'turkey',      num: '05', name: 'Turquie',     file: '/fr/notre-reseau/turquie' },
  { slug: 'india',       num: '06', name: 'Inde',        file: '/fr/notre-reseau/inde' },
  { slug: 'hong-kong',   num: '07', name: 'Hong Kong',   file: '/fr/notre-reseau/hong-kong' },
];

const NETWORK_FACTORIES = [
  { name: 'Market Fit Suzhou',    eye: 'Suzhou, Chine · Détenue depuis 2024', spec: "Notre usine intelligente en propre. Production interne et contrôle qualité sur tout le réseau.", img: '/assets/factories/suzhou/p07-1.jpg', href: '/fr/notre-reseau/chine/market-fit-suzhou' },
  { name: 'Suzhou Mupai',         eye: 'Suzhou, Chine · Depuis 1997',         spec: "Spécialiste outerwear. Manteaux duvet, matelassés, lainage et tailleur. 135 personnes.", img: '/assets/photography/hand-finishing-green-blouse.jpg', href: '/fr/notre-reseau/chine/suzhou-mupai' },
  { name: 'Tongxiang Yinshi',     eye: 'Tongxiang, Chine · Depuis 1997',      spec: "Spécialiste tissés légers et soie. Robes, chemisiers, hauts. 8 000 m², 100+ ouvriers.", img: '/assets/factories/tongxiang/p04-1.jpg', href: '/fr/notre-reseau/chine/tongxiang-yinshi' },
  { name: 'Jiangsu Sainty Suho',  eye: 'Nanjing, Chine · Depuis 1994',        spec: "Costumes, manteaux, chemises, vêtements de travail, casual. 30 000 m², 200+ ouvriers.", img: '/assets/factories/sainty/p03-1.jpg', href: '/fr/notre-reseau/chine/suho-fashion-nanjing' },
  { name: 'Hubei Hongxiang',      eye: 'Hubei, Chine · Depuis 2011',          spec: "Capacité tissés légers. Robes, chemises, jupes, casual. 3 500 m², 200+ ouvriers.",      img: '/assets/factories/hubei/p06-2.jpg', href: '/fr/notre-reseau/chine/hubei' },
];

// ============ COUNTRY DATA ============
const COUNTRIES = {
  // REVIEW-REQ : traduction à valider par un locuteur natif avant mise en ligne.
  vietnam: {
    num: '01', name: 'Vietnam',
    h1: 'Femme trend, fabriqué au Vietnam.',
    sub: "Deux sites au Vietnam. Un bureau de design à Hô-Chi-Minh-Ville. Une usine en propre à Tien Giang.",
    summary: "La filiale Vietnam d'un groupe d'habillement de cinquante ans. Bureau et design à Hô-Chi-Minh-Ville depuis 2010. Usine en propre à Tien Giang depuis 2024.",
    heroImg: '/assets/network/vietnam-hero.jpg',
    heroAlt: "Carte du Vietnam avec lin naturel drapé montrant les deux sites Market Fit : bureau de design à Hô-Chi-Minh-Ville depuis 2010 et usine en propre à Tien Giang depuis 2024",
    paras: [
      "Market Fit Vietnam fabrique ici depuis 2010. Le bureau de Hô-Chi-Minh-Ville porte le design et le merchandising. L'usine de Tien Giang fait tourner l'atelier, pleinement opérationnelle depuis fin 2024 et détenue à 100 % par le groupe. Deux sites, une seule opération.",
      "Nous sommes spécialisés en femme trend, maille et tissé. Les robes de jour et les hauts sont le cœur. Combinaisons, pantalons, jupes et shorts suivent. Une petite part de capacité accompagne l'enfant. Le studio design travaille en cadence mensuelle de collections entre France, Turquie et Vietnam, calé sur le calendrier de chaque acheteur.",
      "Les vêtements fabriqués au Vietnam portent l'origine vietnamienne et bénéficient de la préférence tarifaire UE au titre de l'EVFTA. Le tissu vient majoritairement de notre réseau chinois historique, avec des filatures vietnamiennes qui montent en parallèle sous notre programme d'audit Tier 2. Tout audité. Tout tracé.",
    ],
    links: <>L'usine est notre pièce la plus importante au Vietnam. Voir l'atelier que nous opérons à <a href="/fr/notre-reseau/vietnam/market-fit-vietnam">Market Fit Vietnam</a>. La cadence d'échantillonnage et de production est documentée sur <a href="/fr/solutions">solutions</a>. La posture conformité se trouve sur <a href="/fr/durabilite">durabilité</a>.</>,
    facts: [['Fondé en', '2010'], ['Usine en propre depuis', '2024'], ['Responsable', 'Benjamin Tiphagne']],
    strengths: [
      'Femme maille, robes de jour et hauts',
      'Femme tissé, robes de jour et hauts',
      'Combinaisons, pantalons, jupes, shorts',
      'Casual semi-tailleur avec thermocollants et épaulettes',
      'Pièces techniques, jersey léger, dentelle fine, sequin coupé main',
      'Petite capacité enfant en parallèle',
    ],
    addresses: [
      { label: 'Bureau et design · Hô-Chi-Minh-Ville',
        lines: ['6th Floor, 14 Phan Ton Street', 'Da Kao Ward, District 1', 'Hô-Chi-Minh-Ville, Vietnam'] },
      { label: 'Usine et entrepôt · Tien Giang',
        lines: ['No. 341, Street 30, Quang Tho Hamlet', 'Tan Thuan Binh Commune, Cho Gao District', 'Tien Giang Province, Vietnam'] },
    ],
    phone: '+84 8 38203161',
    coords: { lat: 10.7896, lon: 106.6986, label: 'Ho Chi Minh City' },
    faqs: [
      {
        q: "Où se trouvent les sites Market Fit au Vietnam ?",
        a: "Deux sites. Le bureau et le design sont au 6th Floor, 14 Phan Ton Street, District 1, Hô-Chi-Minh-Ville. L'usine et l'entrepôt sont à Quang Tho Hamlet, Tan Thuan Binh Commune, Cho Gao District, Province de Tien Giang. Les deux sites fonctionnent comme une seule opération."
      },
      {
        q: "Comment l'EVFTA réduit-il les droits de douane UE sur les vêtements fabriqués au Vietnam ?",
        a: "Les vêtements confectionnés au Vietnam bénéficient de la préférence tarifaire UE au titre de l'Accord de libre-échange UE-Vietnam. Nous opérons le programme d'audit tissu Tier 2 sur lequel reposent les déclarations d'origine, ce qui rend les documents incontestables à la douane."
      },
      {
        q: "Market Fit Vietnam est-elle une usine en propre ou un partenaire ?",
        a: "En propre. Market Fit Viet Nam Manufacturing Co., Ltd. est l'entité opérante, filiale de Market Fit Group. L'atelier de Tien Giang a ouvert fin 2024 et constitue le deuxième site de production en propre du groupe après Suzhou."
      },
      {
        q: "Market Fit Vietnam peut-elle traiter des tissus premium et difficiles ?",
        a: "Oui. Jersey léger, dentelle fine, sequin coupé main et construction semi-tailleur avec thermocollants et épaulettes sont la spécialité de l'atelier. L'équipe modélisme compte huit spécialistes haute couture qui tiennent la lecture juste avant le bulk."
      },
      {
        q: "Depuis quand Market Fit opère-t-elle au Vietnam ?",
        a: "Depuis 2010. Les quinze premières années ont construit le bureau pays, le studio design et le flux sourcing tissu avec le réseau chinois. L'usine en propre a ouvert en 2024."
      },
    ],
  },

  bangladesh: {
    num: '02', name: 'Bangladesh',
    h1: 'Sourcing habillement au Bangladesh',
    sub: "Sourcing pour le marché européen depuis 2002. Meilleurs délais. Meilleur prix.",
    summary: "Bureau d'achat pour le marché européen depuis 2002. Laboratoire et atelier d'échantillonnage en interne.",
    heroImg: '/assets/network/bangladesh-hero.jpg',
    heroAlt: 'Carte du Bangladesh avec jersey de coton drapé montrant le bureau Market Fit ouvert en 2002',
    paras: [
      "Le bureau du Bangladesh fonctionne depuis 2002. Dès le départ, il a été conçu comme un bureau d'achat pour le marché européen, centré sur un produit de qualité à prix compétitif. L'équipe de cinquante-quatre personnes sert des clients dans les catégories enfant, homme et femme.",
      "Ce qui distingue l'opération de Dhaka, c'est l'infrastructure interne. Nous opérons notre propre laboratoire pour le contrôle qualité. Nous avons une section échantillonnage interne pour des délais courts. Les principes sont la qualité, la précision et l'engagement, avec un service tenu à la même rigueur à chaque étape du cycle produit.",
    ],
    links: <>Les programmes Bangladesh s'inscrivent dans <a href="/fr/solutions/production-petite-serie">notre modèle de production en petites séries</a>, le laboratoire interne alimentant directement <a href="/fr/solutions/qualite-conformite">le dispositif de conformité du réseau</a>.</>,
    facts: [['Fondé en', '2002'], ['Équipe', '54 personnes'], ['Responsable', 'Nadim Rouf']],
    strengths: [
      "Tous types d'articles enfant (maille, tissé, sweater)",
      'Mode femme et homme — maille',
      'Mode femme et homme — tissé',
      'Mode femme et homme — sweater',
    ],
    address: ['ARHAMS, Level 03, Plot No 79', 'Sector No 07, Uttara', 'Dhaka 1230, Bangladesh'],
    phone: '+880 2 8931273 / 8931293',
    coords: { lat: 23.8759, lon: 90.3795, label: 'Dhaka' },
  },

  pakistan: {
    num: '03', name: 'Pakistan',
    h1: 'Fabricant textile au Pakistan',
    sub: "Basé à Karachi. Construit autour du coton local et des principales filatures du pays.",
    summary: "Vêtements tissés et articles de sport. Construit sur des relations longues avec les filatures.",
    heroImg: '/assets/network/pakistan-hero.jpg',
    heroAlt: 'Carte du Pakistan avec denim brut à lisière drapé montrant le bureau Market Fit ouvert en 2003',
    paras: [
      "Implanté au cœur du pôle textile industriel de Karachi depuis le début des années 2000, le bureau Pakistan s'appuie sur la profondeur du coton local et sur les relations bâties avec les principales filatures du pays. Notre spécialité ici, ce sont les vêtements tissés — denim, fil teint à armures fantaisie, tissés plats, sportswear, et articles de sport incluant ballons, gants et chaussettes techniques.",
      "Les relations avec les filatures sont l'avantage stratégique. Des liens forts avec les principaux fournisseurs de tissu compriment le délai tissu, et donc le délai global du vêtement fini. L'équipe gère chaque étape du programme : sourcing produit, développement, audit de conformité sociale, planification de production, suivi, contrôles qualité finaux et coordination des expéditions.",
    ],
    links: <>Le Pakistan est la pierre angulaire de <a href="/fr/solutions/sourcing-tissus">notre sourcing coton</a> et un partenaire clé pour <a href="/fr/solutions/production-petite-serie">la production en petites séries</a> sur les catégories tissées.</>,
    facts: [['Fondé en', 'Début des années 2000'], ['Responsable', 'Erum Hussain']],
    strengths: ['Bas tissés', 'Denim', 'Chemises', 'Vestes', 'Vêtements enfant', 'Équipement et habillement de sport'],
    address: ['Suite 507, 5th Floor, Ibrahim Trade Towers', 'Block 7 and 8, Main Shara-e-Faisal', 'Karachi 75400, Pakistan'],
    phone: '+92 21 4327554',
    coords: { lat: 24.8607, lon: 67.0011, label: 'Karachi' },
  },

  china: {
    num: '04', name: 'Chine',
    h1: 'Réseau de fabrication en Chine',
    sub: "Notre plus grande opération. Cinq usines spécialistes plus un bureau de sourcing à Shanghai.",
    summary: "Bureau de sourcing à Shanghai et cinq usines spécialistes. La plus grande opération du réseau.",
    heroImg: '/assets/network/china-hero.jpg',
    heroAlt: 'Carte de la Chine avec satin de soie drapé montrant le bureau Market Fit ouvert en 2009',
    paras: [
      "La Chine est le plus grand pays du réseau. Le bureau de Shanghai pilote sourcing, design et merchandising sur les catégories adulte et enfant. Les cinq usines spécialistes — Market Fit Suzhou, Tongxiang Yinshi, Suzhou Mupai, Suho Fashion Nanjing et le site du Hubei — gèrent la production, organisée par spécialité catégorielle.",
      "Notre sourcing chinois couvre toute l'amplitude. Pour l'adulte : outerwear hiver, lainage et matelassé, robes habillées pour l'occasion, hauts tissés fantaisie, jacquards, et tissés légers. Pour l'enfant : chemises, jupes et robes tissées, vestes, sweats et pantalons coupé-cousu, et grenouillères et bodies bébé.",
    ],
    links: <>Chaque usine porte sa propre spécialité : <a href="/fr/notre-reseau/chine/market-fit-suzhou">Market Fit Suzhou</a> est notre site en propre pour les programmes à forte exigence de conformité, <a href="/fr/notre-reseau/chine/tongxiang-yinshi">Tongxiang Yinshi</a> traite les robes et tissés légers, <a href="/fr/notre-reseau/chine/suzhou-mupai">Suzhou Mupai</a> est le spécialiste outerwear, <a href="/fr/notre-reseau/chine/suho-fashion-nanjing">Suho Fashion Nanjing</a> traite le tailleur, et <a href="/fr/notre-reseau/chine/hubei">le site du Hubei</a> porte les capacités tissés légers à plus gros volume. La Chine est le moteur à la fois pour <a href="/fr/solutions/production-petite-serie">la production en petites séries</a> et pour <a href="/fr/solutions/odm-developpement">le développement ODM</a>.</>,
    facts: [['Fondé en', '1999'], ['Réseau', '600+ personnes sur les usines'], ['Responsable', 'Tony']],
    strengths: [
      'Adulte — outerwear (hiver, lainage, matelassé)',
      'Adulte — robe habillée (occasion, soirée)',
      'Adulte — hauts tissés fantaisie et jacquard',
      'Adulte — tissés légers',
      'Enfant — chemises, jupes, robes tissées',
      'Enfant — vestes',
      'Enfant — sweats et pantalons coupé-cousu',
      'Enfant — grenouillères et bodies bébé',
    ],
    address: ['Floor 2, Building 8, Qian Yu Creative Park', 'No 153 Jumen Road, Huangpu District', 'Post code 200023, Shanghai, China'],
    phone: '+86 21 6473 5550',
    coords: { lat: 31.2030, lon: 121.4737, label: 'Shanghai' },
    showFactories: true,
  },

  turkey: {
    num: '05', name: 'Turquie',
    h1: 'Bureau de Turquie · Istanbul',
    sub: "Le plus ancien bureau du groupe en activité ininterrompue. Fondé par André Dupont et Janti Dupont. Toujours dirigé par Janti aujourd'hui.",
    summary: "Le bureau d'origine. Mode rapide femme, homme, enfant, plus catégories spécialisées.",
    heroImg: '/assets/network/turkey-hero.jpg',
    heroAlt: 'Carte de la Turquie avec coton éponge turc drapé montrant le bureau Market Fit ouvert en 1980',
    paras: [
      "Le bureau d'Istanbul est le bureau d'origine. Fondé par les fondateurs du groupe André Dupont et Janti Dupont, il est l'opération en activité ininterrompue la plus ancienne du réseau et le modèle sur lequel chaque bureau suivant a été bâti. Le bureau a fait œuvre pionnière dans le métier d'agence dans ses premières années, puis dans le modèle fast fashion.",
      "Aujourd'hui l'équipe d'Istanbul, quarante personnes, sert le marché européen avec des collections internes et externes en mode rapide femme, homme et enfant. Au-delà du cœur de métier, le bureau abrite des départements spécialisés sur des catégories en croissance : textiles de maison, mode grandes tailles, vêtements de maternité et seamless. Les mêmes principes familiaux qui ont défini le bureau dans les années 1980 définissent son fonctionnement aujourd'hui.",
    ],
    links: <>Istanbul est le bureau fondateur du groupe — le modèle pour <a href="/fr/a-propos">tout ce qui a suivi</a>. Il ancre <a href="/fr/solutions/odm-developpement">le développement ODM</a> pour le marché européen.</>,
    facts: [['Fondé en', 'Années 1980'], ['Équipe', '40 personnes'], ['Responsable', 'Janti Dupont (cofondateur)']],
    strengths: [
      'Mode rapide femme — maille', 'Mode rapide homme — maille', 'Mode rapide enfant — maille',
      'Mode rapide denim', 'Vêtements de maternité', 'Seamless', 'Textiles de maison', 'Éponge',
    ],
    address: ['Piyalepaşa Bulvarı, Ortadoğu Plaza 10/F', 'Okmeydanı 34384', 'Istanbul, Turkey'],
    phone: '+90 212 210 00 12',
    coords: { lat: 41.0498, lon: 28.9617, label: 'Istanbul' },
  },

  india: {
    num: '06', name: 'Inde',
    h1: 'Sourcing & design en Inde · Gurgaon',
    sub: "Un bureau de sourcing et de design à Gurgaon. Deux cents ans d'expérience cumulée en management. Forte expertise cuir.",
    summary: "Bureau de sourcing et design à Gurgaon. Forte expertise tissé, embellissement et cuir.",
    heroImg: '/assets/network/india-hero.jpg',
    heroAlt: "Carte de l'Inde avec coton imprimé à la main au tampon drapé montrant le bureau Market Fit ouvert en 2008",
    paras: [
      "Le bureau d'Inde à Gurgaon est à la fois une opération de sourcing et un studio de design, dirigé par une équipe de quarante personnes. L'équipe de management senior cumule plus de deux cents ans d'expérience en design, merchandising, technique, qualité et cuir. Chaque fonction a son propre référent spécialiste.",
      "Le principe que l'équipe applique est simple : livrer sur la qualité, sur la marge, sur les délais, avec une base d'approvisionnement transparente et une équipe proactive qui traduit les exigences clients en résultats mesurables. L'expertise cuir ici est le prolongement direct du sourcing cuir originel du groupe en Turquie en 1974, transposé dans un contexte indien moderne.",
    ],
    links: <>Gurgaon est un hub majeur pour <a href="/fr/solutions/odm-developpement">le développement ODM</a> sur les catégories tissées et embellies, et un partenaire clé pour <a href="/fr/solutions/sourcing-tissus">le sourcing cuir</a> sur l'habillement, la chaussure et les accessoires.</>,
    facts: [['Fondé en', '2005'], ['Équipe', '40 personnes'], ['Responsable', 'Vikram Bagga']],
    strengths: [
      'Tops et robes casual tissés femme',
      'Femme — perlé et embellissements lourds',
      'Tops et robes en jersey à valeur ajoutée femme',
      'T-shirts et polos en jersey homme',
      'Chinos et shorts femme et homme',
      'Habillement cuir femme et homme',
      'Chaussures et accessoires cuir femme et homme',
    ],
    address: ['252 Udyog Vihar Phase 1', 'Gurgaon 122016', 'Haryana, India'],
    phone: '+91 124 4277219',
    coords: { lat: 28.4595, lon: 77.0266, label: 'Gurgaon' },
  },

  'hong-kong': {
    num: '07', name: 'Hong Kong',
    h1: 'Siège social à Hong Kong',
    sub: "Le siège social. Le lieu d'où le réseau est piloté.",
    summary: "Le siège social depuis 2009. Direction de programmes, services clients, finance et leadership senior.",
    heroImg: '/assets/network/hongkong-hero.jpg',
    heroAlt: 'Carte de Hong Kong avec crêpe de soie drapé montrant le siège Market Fit ouvert en 2009',
    paras: [
      "Hong Kong est devenu le siège opérationnel de Market Fit Group en 2009. Chaque bureau pays et chaque usine du réseau remontent par Hong Kong. Direction de programmes, services clients, finance et leadership senior sont tous ici, dans un seul bâtiment, dans la ville qui se trouve au centre de la géographie du sourcing asiatique.",
      "Le choix de Hong Kong est délibéré. La ville se situe au centre de la géographie du sourcing asiatique. Elle ne porte aucun désavantage de fuseau horaire ni vers l'Europe ni vers les Amériques. Et elle opère dans un cadre juridique et financier que les clients internationaux comprennent.",
    ],
    links: <>Hong Kong est le lieu d'où le groupe est piloté. <a href="/fr/a-propos">Notre histoire</a> commence en 1974 à Istanbul ; le siège a été déplacé ici en 2009. Pour démarrer un programme, <a href="/fr/contact">prenez contact</a>.</>,
    facts: [['Fondé en', '2009 (siège)'], ['Fonction', 'Siège social du groupe'], ['Contact', 'jordan@market-fit.com']],
    strengths: [
      'Direction de programmes du groupe',
      'Services clients et gestion de comptes',
      'Finance et opérations groupe',
      'Leadership senior et stratégie',
    ],
    address: ['Unit 2102, 21/F., Golden Centre', '188 Des Voeux Road Central', 'Hong Kong'],
    phone: 'jordan@market-fit.com',
    coords: { lat: 22.2818, lon: 114.1577, label: 'Central, Hong Kong' },
  },
};

// ============ STATIC LOCATION MAP ============
// Stylised regional illustration — same as EN. Self-contained, no network.
function StaticLocationMap({ coords }) {
  const country = COUNTRY_SHAPES[coords.label];
  if (!country) return <span className="cou-addr-img-tag">Carte à venir</span>;
  const { vb, project, primary, neighbours = [], graticule = true } = country;
  const [px, py] = project(coords.lon, coords.lat);
  const [W, H] = vb;
  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      preserveAspectRatio="xMidYMid meet"
      style={{ width: '100%', height: '100%', display: 'block', background: 'var(--mf-paper-warm)' }}
      role="img"
      aria-label={`Carte du bureau de ${coords.label}`}
    >
      {graticule ? (
        <g stroke="var(--mf-ink)" strokeWidth="0.4" opacity="0.08" fill="none">
          {Array.from({ length: 5 }, (_, i) => (
            <line key={`gh${i}`} x1="0" y1={H * (i + 1) / 6} x2={W} y2={H * (i + 1) / 6} />
          ))}
          {Array.from({ length: 5 }, (_, i) => (
            <line key={`gv${i}`} x1={W * (i + 1) / 6} y1="0" x2={W * (i + 1) / 6} y2={H} />
          ))}
        </g>
      ) : null}
      {neighbours.map((d, i) => (
        <path key={`n${i}`} d={d} fill="var(--mf-ink)" opacity="0.06"
          stroke="var(--mf-ink)" strokeWidth="0.6" strokeOpacity="0.18"
          strokeLinejoin="round" strokeLinecap="round" />
      ))}
      <path d={primary} fill="var(--mf-ink)" fillOpacity="0.12"
        stroke="var(--mf-ink)" strokeWidth="1.2" strokeOpacity="0.88"
        strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={px} cy={py} r="22" fill="var(--mf-navy)" opacity="0.10" />
      <circle cx={px} cy={py} r="12" fill="var(--mf-navy)" opacity="0.22" />
      <circle cx={px} cy={py} r="6" fill="var(--mf-navy)" />
      <circle cx={px} cy={py} r="2.2" fill="var(--mf-paper)" />
      <g fontFamily="var(--font-body)" fill="var(--mf-ink)">
        <text x="14" y="22" fontSize="10" letterSpacing="2" fontWeight="500">
          {(LABEL_FR[coords.label] || coords.label).toUpperCase()}
        </text>
        <text x={W - 14} y={H - 12} textAnchor="end" fontSize="9" letterSpacing="0.5"
          fill="var(--mf-ink-60)">
          {coords.lat.toFixed(2)}°N · {coords.lon.toFixed(2)}°E
        </text>
      </g>
    </svg>
  );
}

// FR label overrides for cities whose names differ in French.
const LABEL_FR = {
  'Ho Chi Minh City': 'Hô-Chi-Minh-Ville',
};

const COUNTRY_SHAPES = (() => {
  const proj = (lonMin, lonMax, latMin, latMax, w, h) => (lon, lat) => [
    ((lon - lonMin) / (lonMax - lonMin)) * w,
    h - ((lat - latMin) / (latMax - latMin)) * h,
  ];
  return {
    'Istanbul': {
      vb: [400, 200], project: proj(25, 45, 35, 43, 400, 200),
      primary: 'M 28 78 L 45 70 L 70 64 L 95 60 L 130 56 L 165 50 L 195 48 L 230 52 L 265 56 L 295 62 L 325 70 L 355 78 L 380 86 L 388 100 L 380 116 L 360 124 L 330 130 L 300 134 L 270 138 L 240 142 L 210 144 L 180 146 L 150 144 L 120 140 L 92 134 L 68 126 L 50 116 L 38 102 L 28 88 Z',
      neighbours: ['M 0 90 L 20 84 L 28 96 L 14 110 L 0 110 Z'],
    },
    'Karachi': {
      vb: [320, 280], project: proj(60, 78, 23, 37, 320, 280),
      primary: 'M 60 250 L 75 240 L 95 232 L 110 218 L 120 200 L 115 180 L 105 162 L 90 148 L 88 130 L 100 115 L 120 105 L 142 95 L 165 80 L 188 70 L 215 60 L 240 56 L 265 60 L 280 75 L 282 95 L 270 115 L 252 130 L 232 142 L 215 158 L 200 175 L 188 192 L 175 210 L 158 225 L 140 240 L 118 252 L 95 262 L 75 264 L 62 260 Z',
      neighbours: [
        'M 280 75 L 310 80 L 318 110 L 314 145 L 300 175 L 282 200 L 270 220 L 252 240 L 230 258 L 220 275 L 240 278 L 270 270 L 295 260 L 314 240 L 318 210 L 318 175 L 314 130 L 305 95 Z',
        'M 88 130 L 78 100 L 90 70 L 130 50 L 170 40 L 200 36 L 215 60 L 188 70 L 165 80 L 142 95 L 120 105 L 100 115 Z',
      ],
    },
    'Gurgaon': {
      vb: [320, 360], project: proj(67, 92, 8, 36, 320, 360),
      primary: 'M 60 70 L 80 55 L 105 45 L 135 38 L 165 35 L 195 38 L 220 45 L 240 56 L 255 70 L 265 88 L 268 108 L 262 128 L 255 148 L 248 168 L 240 188 L 230 208 L 218 228 L 205 248 L 192 268 L 178 286 L 162 302 L 145 316 L 128 326 L 110 332 L 95 330 L 88 318 L 86 300 L 92 280 L 100 260 L 105 240 L 102 218 L 95 196 L 88 174 L 82 152 L 76 130 L 70 108 L 64 88 Z',
      neighbours: [
        'M 0 60 L 30 50 L 60 70 L 64 88 L 70 108 L 50 120 L 30 110 L 12 90 Z',
        'M 165 35 L 200 25 L 240 22 L 270 28 L 280 42 L 255 50 L 220 45 L 195 38 Z',
        'M 268 108 L 290 110 L 305 130 L 308 155 L 295 175 L 275 178 L 262 165 L 262 128 Z',
      ],
    },
    'Dhaka': {
      vb: [320, 380], project: proj(88, 93, 20.5, 27, 320, 380),
      primary: 'M 80 60 L 110 48 L 145 42 L 180 45 L 210 55 L 235 70 L 252 90 L 258 115 L 252 140 L 240 162 L 230 185 L 225 210 L 222 235 L 218 260 L 210 282 L 195 302 L 175 318 L 152 330 L 128 336 L 105 332 L 88 318 L 80 295 L 78 268 L 82 240 L 88 212 L 92 184 L 90 158 L 82 132 L 75 105 L 75 82 Z',
      neighbours: [
        'M 0 30 L 80 20 L 110 48 L 80 60 L 75 82 L 75 105 L 0 95 Z',
        'M 252 90 L 295 75 L 320 95 L 320 180 L 295 210 L 270 215 L 252 200 L 252 140 Z',
        'M 210 282 L 240 295 L 268 320 L 280 355 L 250 372 L 220 372 L 195 360 L 195 302 Z',
      ],
    },
    'Shanghai': {
      vb: [400, 320], project: proj(105, 125, 22, 42, 400, 320),
      primary: 'M 30 80 L 60 65 L 95 55 L 130 50 L 165 50 L 200 55 L 235 62 L 265 72 L 290 86 L 310 102 L 325 122 L 332 145 L 330 168 L 322 188 L 308 205 L 290 218 L 268 226 L 245 230 L 222 230 L 200 226 L 180 218 L 162 208 L 145 195 L 130 180 L 118 162 L 108 145 L 100 128 L 92 110 L 78 96 L 58 90 L 38 88 Z',
      neighbours: [],
    },
    'Central, Hong Kong': {
      vb: [320, 240], project: proj(113, 115, 21.5, 23, 320, 240),
      primary: 'M 80 90 L 110 78 L 140 72 L 170 68 L 200 72 L 225 80 L 240 95 L 245 112 L 240 128 L 225 138 L 205 142 L 180 138 L 160 130 L 145 142 L 130 150 L 110 148 L 92 138 L 82 122 L 75 105 Z',
      neighbours: ['M 0 0 L 320 0 L 320 60 L 280 50 L 240 48 L 200 50 L 160 52 L 120 50 L 80 48 L 40 50 L 0 55 Z'],
    },
    'Ho Chi Minh City': {
      vb: [240, 380], project: proj(102, 110, 8, 23, 240, 380),
      primary: 'M 60 30 L 90 25 L 118 30 L 138 45 L 145 65 L 142 88 L 130 108 L 115 128 L 102 148 L 98 170 L 105 190 L 118 208 L 130 226 L 138 246 L 142 268 L 138 290 L 128 310 L 115 328 L 100 342 L 82 350 L 65 348 L 55 332 L 58 312 L 70 295 L 82 278 L 88 258 L 86 238 L 78 218 L 70 198 L 68 178 L 75 158 L 85 138 L 92 118 L 92 98 L 85 78 L 72 58 L 62 42 Z',
      neighbours: ['M 0 60 L 60 30 L 62 42 L 72 58 L 85 78 L 92 98 L 92 118 L 85 138 L 75 158 L 68 178 L 60 180 L 30 165 L 5 130 L 0 95 Z'],
    },
  };
})();

// ============ REVEAL HOOK ============
function useRevealNet() {
  const ref = useRefNet(null);
  useEffNet(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    el.querySelectorAll('.mf-reveal').forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

// ============ PARENT MAP ============
function NetHeroMap() {
  const loc = (lon, lat) => ({ x: (lon - 25) * 10, y: (42 - lat) * 17.5 });
  const dots = [
    loc(29.0, 41.0),  loc(67.0, 24.9), loc(77.2, 28.6), loc(90.4, 23.8),
    loc(104.9, 11.6), loc(106.6, 17.5), loc(121.5, 31.2), loc(114.2, 22.3),
  ];
  const route = [0,1,2,3,6,7,5,4].map(i => `${dots[i].x},${dots[i].y}`).join(' ');
  return (
    <svg viewBox="0 0 1000 560" preserveAspectRatio="xMidYMid meet">
      <polyline points={route} fill="none" stroke="rgba(250,250,247,0.3)" strokeWidth="1" strokeDasharray="3 5" />
      {dots.map((d, i) => (
        <g key={i}>
          <circle cx={d.x} cy={d.y} r="14" fill="rgba(250,250,247,0.06)" />
          <circle cx={d.x} cy={d.y} r="4" fill="var(--mf-paper)" />
        </g>
      ))}
    </svg>
  );
}

// ============ PARENT — HERO ============
function NetHero() {
  return (
    <section className="net-hero">
      <div className="net-hero-grid" />
      <div className="net-hero-grain" />
      <div className="net-hero-map"><NetHeroMap /></div>
      <div className="net-hero-content">
        <div className="net-hero-eye mf-reveal">Notre réseau</div>
        <h1 className="net-hero-h1 mf-reveal" style={{ transitionDelay: '60ms' }}>
          Huit pays. Douze bureaux et usines. <em>Un partenaire responsable.</em>
        </h1>
        <p className="net-hero-sub mf-reveal" style={{ transitionDelay: '120ms' }}>
          Market Fit opère un réseau soigneusement constitué à travers l'Asie, l'Europe et le Moyen-Orient. Chaque bureau pays est dirigé par des personnes qui ont fait carrière dans leur région. Chaque usine est appariée à sa spécialité catégorielle.
        </p>
      </div>
    </section>
  );
}

function NetGlance() {
  const cells = [
    ['8', 'Pays de sourcing'],
    ['12', 'Bureaux et usines'],
    ['800+', 'Personnes sur le réseau'],
    ['52', "Années d'opération"],
  ];
  return (
    <section className="net-glance">
      <div className="net-glance-grid">
        {cells.map(([n, l], i) => (
          <div key={i} className="net-glance-cell mf-reveal" style={{ transitionDelay: `${i * 60}ms` }}>
            <div className="net-glance-num">{n}</div>
            <div className="net-glance-label">{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function NetGeo() {
  return (
    <section className="net-geo">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Où nous sommes</div>
          <h2>Huit pays, <em>une philosophie.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Nous n'opérons pas comme une holding aux filiales déconnectées. Chaque bureau pays applique les mêmes principes, avec les mêmes standards, et reporte au même siège de Hong Kong. La connaissance locale est locale. La responsabilité est globale.
        </p>
      </div>
      <div className="net-countries-grid">
        {NETWORK_INDEX.map((idx, i) => {
          const c = COUNTRIES[idx.slug];
          const meta = c.facts.filter(([k]) => k === 'Fondé en' || k === 'Équipe').map(([k, v]) => v).join(' · ');
          return (
            <a key={idx.slug} href={idx.file} className="net-country-card mf-reveal" style={{ transitionDelay: `${i * 50}ms` }}>
              <div className="net-country-img">
                <img src={c.heroImg} alt={c.heroAlt} width="1448" height="1086" loading="lazy" decoding="async" />
              </div>
              <div className="net-country-body">
                <div className="net-country-meta">{idx.num} · {meta}</div>
                <h3 className="net-country-name">{c.name}</h3>
                <p className="net-country-summary">{c.summary}</p>
                <span className="net-country-link">Voir le bureau →</span>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

function NetFactSection() {
  return (
    <section className="net-fact">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Où nous fabriquons</div>
          <h2>Cinq usines spécialistes en Chine, <em>plus le réseau étendu.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          La majorité de nos sites en propre et dédiés se trouvent en Chine, organisés par catégorie. Outerwear chez Mupai. Robes et chemisiers chez Tongxiang. Tailleur chez Suho. Casual au Hubei. Production interne et contrôle qualité chez Market Fit Suzhou.
        </p>
      </div>
      <div className="net-fact-grid">
        {NETWORK_FACTORIES.map((f, i) => (
          <a key={f.name} href={f.href} className="net-fact-card mf-reveal" style={{ transitionDelay: `${i * 50}ms` }}>
            <div className="net-fact-card-img"><img src={f.img} alt={f.name} width="1200" height="900" loading="lazy" decoding="async" /></div>
            <div className="net-fact-card-body">
              <div className="net-fact-card-eye">{f.eye}</div>
              <h3 className="net-fact-card-name">{f.name}</h3>
              <p className="net-fact-card-spec">{f.spec}</p>
              <span className="net-fact-card-cta">Voir l'usine →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function NetHow() {
  const cells = [
    ['01', 'Management local', "Chaque bureau pays est dirigé par des cadres seniors avec des décennies d'expérience dans leur région. Les décisions se prennent dans le pays, pas en visioconférence depuis Hong Kong."],
    ['02', 'Responsabilité unique', 'Un seul interlocuteur services clients. Un seul responsable de programme. Un seul nom sur chaque e-mail.'],
    ['03', 'Standards partagés', 'Le même niveau de qualité, les mêmes exigences de conformité, le même rythme d\'audit dans chaque pays.'],
  ];
  return (
    <section className="net-how">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Comment nous opérons</div>
          <h2>Mains locales. <em>Standards globaux.</em></h2>
        </div>
      </div>
      <div className="net-how-grid">
        {cells.map(([n, h, p], i) => (
          <div key={n} className="mf-reveal" style={{ transitionDelay: `${i * 80}ms` }}>
            <div className="net-how-cell-num">{n}</div>
            <h3 className="net-how-cell-h">{h}</h3>
            <p className="net-how-cell-p">{p}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function NetLateral({ activeSlug }) {
  return (
    <nav className="net-lateral" aria-label="Navigation par pays">
      <div className="net-lateral-inner">
        {NETWORK_INDEX.map((s) => (
          <a key={s.slug} href={s.file} className={`net-lat-item ${s.slug === activeSlug ? 'active' : ''}`}>
            <div className="net-lat-num">Pays · {s.num}</div>
            <div className="net-lat-name">{s.name}</div>
          </a>
        ))}
      </div>
    </nav>
  );
}

// ============ PARENT APP ============
function NetworkParentApp() {
  const ref = useRevealNet();
  return (
    <div ref={ref}>
      <Nav />
      <NetHero />
      <NetGlance />
      <NetGeo />
      <NetFactSection />
      <NetHow />
      <NetLateral activeSlug={null} />
      <Footer />
    </div>
  );
}

// ============ COUNTRY SUB-PAGE COMPONENTS ============
function CouHero({ data }) {
  const shape = COUNTRY_SHAPES[data.coords && data.coords.label];
  return (
    <section className="cou-hero">
      <div className="cou-hero-img"><img src={data.heroImg} alt={data.heroAlt || (data.name + ' — Market Fit Group')} width="1448" height="1086" loading="eager" fetchpriority="high" decoding="async" /></div>
      <div className="cou-hero-veil" />
      <svg className="cou-hero-weave" aria-hidden="true" width="100%" height="100%" preserveAspectRatio="none">
        <defs>
          <pattern id="cou-hero-weave-pat" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
            <path d="M0 3 L6 3" stroke="rgba(250,250,247,0.05)" strokeWidth="0.5" />
            <path d="M3 0 L3 6" stroke="rgba(250,250,247,0.04)" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#cou-hero-weave-pat)" />
      </svg>
      {shape ? (
        <svg className="cou-hero-glyph" aria-hidden="true" viewBox={shape.vb} preserveAspectRatio="xMaxYMax meet">
          <path d={shape.primary} fill="none" stroke="rgba(250,250,247,0.18)" strokeWidth="0.6" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
        </svg>
      ) : null}
      <div className="cou-hero-content">
        <div className="cou-hero-eye mf-reveal">
          <span className="cou-hero-num">{String(data.num).padStart(2, '0')}</span>
          <span className="cou-hero-rule" aria-hidden="true" />
          <span>Pays {data.num} sur 08 · {data.country}</span>
        </div>
        <h1 className="cou-hero-h1 mf-reveal" style={{ transitionDelay: '60ms' }}>{data.h1 || data.name}</h1>
        <p className="cou-hero-sub mf-reveal" style={{ transitionDelay: '120ms' }}>{data.sub}</p>
      </div>
      <div className="cou-hero-meta" aria-hidden="true">
        <span>{data.coords && data.coords.label}</span>
        <span className="cou-hero-meta-sep" />
        <span>{data.coords ? `${data.coords.lat.toFixed(2)}° N · ${data.coords.lon.toFixed(2)}° E` : ''}</span>
      </div>
    </section>
  );
}

function CouOffice({ data }) {
  return (
    <section className="cou-office">
      <div className="cou-office-grid">
        <div className="mf-reveal">
          <div className="mf-eyebrow cou-office-eye">Le bureau</div>
          <h2 className="cou-office-h">Ce que nous faisons <em>ici.</em></h2>
          {data.paras.map((p, i) => <p key={i} className="cou-office-p">{p}</p>)}
          {data.links ? <p className="cou-office-p cou-office-links">{data.links}</p> : null}
        </div>
        <div className="cou-office-facts mf-reveal" style={{ transitionDelay: '100ms' }}>
          {data.facts.map(([k, v]) => (
            <div key={k} className="cou-fact-row">
              <div className="cou-fact-label">{k}</div>
              <div className="cou-fact-val">{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CouSpecialisms({ data }) {
  return (
    <section className="cou-spec">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Forces</div>
          <h2 className="cou-spec-h">Ce pour quoi ce bureau est <em>conçu.</em></h2>
        </div>
      </div>
      <div className="cou-spec-grid">
        {data.strengths.map((s, i) => (
          <div key={i} className="cou-spec-item mf-reveal" style={{ transitionDelay: `${i * 40}ms` }}>
            <div className="cou-spec-num">{String(i + 1).padStart(2, '0')}</div>
            <div className="cou-spec-label">{s}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CouAddress({ data }) {
  const manager = (data.facts.find(([k]) => k === 'Responsable') || [])[1];
  const hasMulti = Array.isArray(data.addresses) && data.addresses.length > 0;
  return (
    <section className="cou-addr">
      <div className="cou-addr-grid">
        <div className="cou-addr-block mf-reveal">
          <div className="cou-addr-label">{hasMulti ? 'Deux sites au ' + data.name : 'Adresse'}</div>
          {hasMulti ? (
            <div className="cou-addresses">
              {data.addresses.map((a, ai) => (
                <div key={ai} className="cou-address-block">
                  <div className="cou-address-eye">{a.label}</div>
                  <p className="cou-addr-text">
                    {a.lines.map((line, i) => (
                      <React.Fragment key={i}>{line}{i < a.lines.length - 1 ? <br /> : null}</React.Fragment>
                    ))}
                  </p>
                </div>
              ))}
              {data.phone ? <p className="cou-addr-text"><small>{data.phone}</small></p> : null}
            </div>
          ) : (
            <p className="cou-addr-text">
              {data.address.map((line, i) => (
                <React.Fragment key={i}>{line}{i < data.address.length - 1 ? <br /> : null}</React.Fragment>
              ))}
              <small>{data.phone}</small>
            </p>
          )}
        </div>
        <div className="mf-reveal" style={{ transitionDelay: '100ms' }}>
          <div className="cou-addr-img">
            {data.coords ? <StaticLocationMap coords={data.coords} /> : <span className="cou-addr-img-tag">À venir</span>}
          </div>
          {manager ? <div className="cou-addr-cap">Responsable du bureau — {manager}</div> : null}
        </div>
      </div>
    </section>
  );
}

function CouFaqs({ data }) {
  if (!data.faqs || data.faqs.length === 0) return null;
  return (
    <section className="cou-faqs">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Questions fréquentes</div>
          <h2 className="cou-spec-h">Questions <em>courantes.</em></h2>
        </div>
      </div>
      <div className="cou-faqs-list mf-reveal" style={{ transitionDelay: '80ms' }}>
        {data.faqs.map((f, i) => (
          <details key={i} className="cou-faq-item">
            <summary className="cou-faq-q">{f.q}</summary>
            <div className="cou-faq-a">{f.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

function CouFactories() {
  return (
    <section className="cou-fact-section">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Usines en Chine</div>
          <h2 className="cou-spec-h">Cinq usines spécialistes. <em>Un partenaire responsable.</em></h2>
        </div>
      </div>
      <div className="net-fact-grid" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
        {NETWORK_FACTORIES.map((f, i) => (
          <a key={f.name} href={f.href} className="net-fact-card mf-reveal" style={{ transitionDelay: `${i * 50}ms` }}>
            <div className="net-fact-card-img"><img src={f.img} alt={f.name} width="1200" height="900" loading="lazy" decoding="async" /></div>
            <div className="net-fact-card-body">
              <div className="net-fact-card-eye">{f.eye}</div>
              <h3 className="net-fact-card-name">{f.name}</h3>
              <p className="net-fact-card-spec">{f.spec}</p>
              <span className="net-fact-card-cta">Voir l'usine →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ============ COUNTRY APP ============
function NetworkCountryApp({ slug }) {
  const data = COUNTRIES[slug];
  const ref = useRevealNet();
  if (!data) return <div style={{ padding: 48 }}>Pays inconnu : {slug}</div>;
  const trail = [
    { label: 'Accueil', href: '/fr' },
    { label: 'Notre réseau', href: '/fr/notre-reseau' },
    { label: data.name },
  ];
  const relMap = {
    vietnam:    ['sol-sampling', 'sol-production', 'sol-fabric'],
    bangladesh: ['sol-production', 'sol-quality', 'sol-fabric'],
    pakistan:   ['sol-fabric', 'sol-production', 'sol-quality'],
    china:      ['fac-mf-suzhou', 'fac-tongxiang', 'fac-mupai'],
    turkey:     ['about', 'sol-odm', 'sol-production'],
    india:      ['sol-odm', 'sol-fabric', 'sol-production'],
    'hong-kong':['about', 'contact', 'sol-quality'],
  };
  const relatedItems = (typeof relatedFor === 'function') ? relatedFor(relMap[slug] || []) : [];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <CouHero data={data} />
      <CouOffice data={data} />
      <CouSpecialisms data={data} />
      <CouAddress data={data} />
      {data.showFactories ? <CouFactories /> : null}
      <CouFaqs data={data} />
      {(typeof RelatedContent === 'function') ? <RelatedContent heading={`Comment nous travaillons en ${data.name}`} items={relatedItems} /> : null}
      <NetLateral activeSlug={slug} />
      <Footer />
    </div>
  );
}

Object.assign(window, { NetworkParentApp, NetworkCountryApp, NETWORK_INDEX });
