/* global React */
/* network.jsx — Our Network parent + country sub-page templates and data. */

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

// ============ INDEX ============
const NETWORK_INDEX = [
  { slug: 'vietnam',     num: '01', name: 'Vietnam',     file: '/our-network/vietnam' },
  { slug: 'bangladesh',  num: '02', name: 'Bangladesh',  file: '/our-network/bangladesh' },
  { slug: 'pakistan',    num: '03', name: 'Pakistan',    file: '/our-network/pakistan' },
  { slug: 'china',       num: '04', name: 'China',       file: '/our-network/china' },
  { slug: 'turkey',      num: '05', name: 'Turkey',      file: '/our-network/turkey' },
  { slug: 'india',       num: '06', name: 'India',       file: '/our-network/india' },
  { slug: 'hong-kong',   num: '07', name: 'Hong Kong',   file: '/our-network/hong-kong' },
];

const NETWORK_FACTORIES = [
  { name: 'Market Fit Suzhou',    eye: 'Suzhou, China · Owned since 2024', spec: 'Our own smart-factory. Internal production and quality control across the network.',  img: '/assets/factories/suzhou/p07-1.jpg', href: '/our-network/china/market-fit-suzhou' },
  { name: 'Suzhou Mupai',         eye: 'Suzhou, China · Since 1997',         spec: 'Outerwear specialist. Down, padded, woolen, and tailored coats. 135 people.',         img: '/assets/photography/hand-finishing-green-blouse.jpg', href: '/our-network/china/suzhou-mupai' },
  { name: 'Tongxiang Yinshi',     eye: 'Tongxiang, China · Since 1997',      spec: 'Light-woven and silk specialist. Dresses, blouses, tops. 8,000m², 100+ workers.',      img: '/assets/factories/tongxiang/p04-1.jpg', href: '/our-network/china/tongxiang-yinshi' },
  { name: 'Jiangsu Sainty Suho',  eye: 'Nanjing, China · Since 1994',        spec: 'Suits, coats, shirts, workwear, casual. 30,000m², 200+ workers.',                      img: '/assets/factories/sainty/p03-1.jpg', href: '/our-network/china/suho-fashion-nanjing' },
  { name: 'Hubei Hongxiang',      eye: 'Hubei, China · Since 2011',          spec: 'Light-woven capacity. Dresses, shirts, skirts, casual. 3,500m², 200+ workers.',       img: '/assets/factories/hubei/p06-2.jpg', href: '/our-network/china/hubei' },
];

// ============ COUNTRY DATA ============
const COUNTRIES = {
  vietnam: {
    num: '01', name: 'Vietnam',
    h1: 'Trend-led womenswear, made in Vietnam.',
    sub: 'Two sites in Vietnam. A design office in Ho Chi Minh City. A wholly-owned factory in Tien Giang.',
    summary: "A fifty-year-old garment group's Vietnam arm. Office and design in Ho Chi Minh City since 2010. Wholly-owned factory in Tien Giang since 2024.",
    heroImg: '/assets/network/vietnam-hero.jpg',
    heroAlt: "Map of Vietnam with draped fine natural linen showing Market Fit's two sites: design office in Ho Chi Minh City since 2010 and owned factory in Tien Giang since 2024",
    paras: [
      "Market Fit Vietnam has been making garments here since 2010. The Ho Chi Minh City office holds design and merchandising. The factory in Tien Giang runs the floor, fully operational since late 2024 and wholly-owned by the group. Two sites, one operation.",
      "We specialise in trend-led womenswear, knit and woven. Day dresses and tops are the core. Jumpsuits, trousers, skirts, and shorts follow. A small share of capacity supports kidswear alongside. The design team works in monthly collection cadence across France, Turkey, and Vietnam, accurate to each buyer's calendar.",
      "Vietnam-made garments carry Vietnam origin and qualify for EU duty preference under EVFTA. Fabric comes mostly from our long-standing China network, with Vietnam mills growing alongside under our Tier 2 audit programme. All audited. All on the book.",
    ],
    links: <>The factory is our biggest piece of Vietnam. See the floor we run at <a href="/our-network/vietnam/market-fit-vietnam">Market Fit Vietnam</a>. Sampling and production cadence are documented under <a href="/solutions">solutions</a>. Compliance posture sits with <a href="/sustainability">sustainability</a>.</>,
    facts: [['Established', '2010'], ['Owned floor since', '2024'], ['Manager', 'Benjamin Tiphagne']],
    strengths: [
      'Knit womenswear, day dresses and tops',
      'Woven womenswear, day dresses and tops',
      'Jumpsuits, trousers, skirts, shorts',
      'Semi-tailored casual with fusing and shoulder pads',
      'Premium fabric handling, low-GSM jersey, fine lace, hand-cut sequin',
      'Small kidswear capacity alongside',
    ],
    addresses: [
      { label: 'Office and design · Ho Chi Minh City',
        lines: ['6th Floor, 14 Phan Ton Street', 'Da Kao Ward, District 1', 'Ho Chi Minh City, Vietnam'] },
      { label: 'Factory and warehouse · 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: "Where are Market Fit's Vietnam sites located?",
        a: "Two sites. The office and design floor sit at 6th Floor, 14 Phan Ton Street, District 1, Ho Chi Minh City. The factory and warehouse sit in Quang Tho Hamlet, Tan Thuan Binh Commune, Cho Gao District, Tien Giang Province. Both sites run as one operation."
      },
      {
        q: "How does EVFTA reduce EU import duty on Vietnam-made clothing?",
        a: "Garments manufactured in Vietnam qualify for EU duty preference under the EU-Vietnam Free Trade Agreement. We run the Tier 2 fabric audit programme that origin claims depend on, so the paperwork stands up at customs."
      },
      {
        q: "Is Market Fit Vietnam a wholly-owned factory or a partner facility?",
        a: "Wholly-owned. Market Fit Viet Nam Manufacturing Co., Ltd. is the operating entity, part of Market Fit Group. The Tien Giang floor opened in late 2024 and is the group's second owned production site after Suzhou."
      },
      {
        q: "Can Market Fit Vietnam handle premium and difficult fabrics?",
        a: "Yes. Low-GSM jersey, fine lace, hand-cut sequin, and semi-tailored construction with fusing and shoulder pads are the floor's specialism. The pattern team holds eight high-fashion specialists who keep the read-through accurate before bulk."
      },
      {
        q: "How long has Market Fit operated in Vietnam?",
        a: "Since 2010. The first fifteen years built the country office, the design team, and the fabric sourcing flow with the China network. The owned factory opened in 2024."
      },
    ],
  },

  bangladesh: {
    num: '02', name: 'Bangladesh',
    h1: 'Bangladesh garment sourcing',
    sub: 'European market sourcing since 2002. Better lead times. Best price.',
    summary: 'Buying agent for the European market since 2002. In-house lab and sample room.',
    heroImg: '/assets/network/bangladesh-hero.jpg',
    heroAlt: "Map of Bangladesh with draped cotton jersey showing Market Fit's Dhaka office established 2002",
    paras: [
      "The Bangladesh office has been running since 2002. From the start it was built as a buying agent for the European market, focused on quality product at competitive price. The team of fifty-four serves clients across kids, men's, and ladies categories.",
      "What sets the Dhaka operation apart is the in-house infrastructure. We run our own lab facility for quality control. We have an in-house sample section for quick sample turnaround. The principles are quality, accuracy, and commitment, with service held to the same line at every stage of the product cycle.",
    ],
    links: <>Bangladesh programmes flow into <a href="/solutions/production">our small-batch production model</a>, with the in-house lab feeding directly into the <a href="/solutions/quality">network compliance pack</a>.</>,
    facts: [['Established', '2002'], ['Team', '54 people'], ['Manager', 'Nadim Rouf']],
    strengths: [
      'All kinds of kids items (knit, woven, sweater)',
      "Ladies' and men's fashion knit",
      "Ladies' and men's fashion woven",
      "Ladies' and men's fashion 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: 'Pakistan textile manufacturer',
    sub: "Karachi-based. Built around home-grown cotton and the country's leading fabric mills.",
    summary: 'Woven garments and sporting goods. Built on long mill relationships.',
    heroImg: '/assets/network/pakistan-hero.jpg',
    heroAlt: "Map of Pakistan with draped raw selvedge denim showing Market Fit's Karachi office established 2003",
    paras: [
      "Operating in Karachi's textile industrial hub since the early 2000s, the Pakistan office is built around the country's depth of home-grown cotton and the relationships we've developed with its leading fabric mills. Our specialism here is woven garments — denim, yarn-dyed fabrics with fancy weaves, flat fabrics, sportswear, and sporting goods including footballs, gloves, and performance socks.",
      "The mill relationships are the strategic edge. Strong ties with leading fabric suppliers compress the fabric lead time, which compresses the overall delivery time of the finished garment. The team handles every step of the programme: product sourcing, development, social compliance auditing, production planning, follow-up, final quality checks, and shipping coordination.",
    ],
    links: <>Pakistan is the cornerstone of <a href="/solutions/fabric">our cotton sourcing</a> and a key partner for <a href="/solutions/production">small-batch production</a> on woven categories.</>,
    facts: [['Established', 'Early 2000s'], ['Manager', 'Erum Hussain']],
    strengths: ['Woven bottoms', 'Denim', 'Shirts', 'Jackets', 'Kidswear', 'Sports gear and apparel'],
    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: 'China',
    h1: 'China manufacturing network',
    sub: 'Our largest operation. Five specialist factories plus a Shanghai sourcing office.',
    summary: 'Shanghai sourcing office plus five specialist factories. The largest operation in the network.',
    heroImg: '/assets/network/china-hero.jpg',
    heroAlt: "Map of China with draped fine silk satin showing Market Fit's Shanghai office established 2009",
    paras: [
      'China is the largest country in the network. The Shanghai office handles sourcing, design, and merchandising across adults and kids categories. The five specialist factories — Market Fit Suzhou, Tongxiang Yinshi, Suzhou Mupai, Suho Fashion Nanjing, and the Hubei facility — handle production, organised by category specialism.',
      'Our China sourcing covers the full range. For adults: outerwear including winter, woolen, and padded styles, fancy dress for occasion wear, fancy woven tops, jacquard items, and light woven. For kids: woven shirts, skirts, and dresses, jackets, cut and sewn sweats and pants, and baby rompers and bodies.',
    ],
    links: <>Each factory carries its own specialism: <a href="/our-network/china/market-fit-suzhou">Market Fit Suzhou</a> is our owned facility for compliance-heavy programmes, <a href="/our-network/china/tongxiang-yinshi">Tongxiang Yinshi</a> handles dresses and light woven, <a href="/our-network/china/suzhou-mupai">Suzhou Mupai</a> is the outerwear specialist, <a href="/our-network/china/suho-fashion-nanjing">Suho Fashion Nanjing</a> handles tailoring, and the <a href="/our-network/china/hubei">Hubei facility</a> carries higher-volume light-woven capacity. China is the engine for both <a href="/solutions/production">small-batch production</a> and <a href="/solutions/odm">ODM development</a>.</>,
    facts: [['Established', '1999'], ['Network', '600+ across factories'], ['Manager', 'Tony']],
    strengths: [
      'Adults — outerwear (winter, woolen, padded)',
      'Adults — fancy dress (occasion, evening)',
      'Adults — fancy woven tops and jacquard',
      'Adults — light woven',
      'Kids — woven shirts, skirts, dresses',
      'Kids — jackets',
      'Kids — cut and sewn sweats and pants',
      'Kids — baby rompers and bodies',
    ],
    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: 'Turkey',
    h1: 'Turkey office · Istanbul',
    sub: 'The longest continuously operating office in the group. Founded by Andre Dupont and Janti Dupont. Still run by Janti today.',
    summary: 'The original office. Fast fashion lady, men, kids, plus specialist categories.',
    heroImg: '/assets/network/turkey-hero.jpg',
    heroAlt: "Map of Turkey with draped Turkish cotton toweling showing Market Fit's Istanbul office established 1980",
    paras: [
      'The Istanbul office is the original. Established by group founders Andre Dupont and Janti Dupont, it is the longest continuously operating operation in the network and the model that every subsequent office was built against. The office pioneered the agency business in its early years and pioneered the fast fashion model after that.',
      'Today the Istanbul team of forty serves the European market with both internal and external collections in fast fashion ladies\', men\'s, and kids\' categories. Beyond the core, the office houses specialist departments in fast-growing categories: home textiles, plus-size fashion, maternity wear, and seamless fashion. The same family principles that defined the office in the 1980s define how it operates today.',
    ],
    links: <>Istanbul is the founding office of the group — the model for <a href="/about">everything that came after</a>. It anchors <a href="/solutions/odm">ODM development</a> for the European market.</>,
    facts: [['Established', '1980s'], ['Team', '40 people'], ['Manager', 'Janti Dupont (co-founder)']],
    strengths: [
      "Ladies' knit fast fashion", "Men's knit fast fashion", "Kids' knit fast fashion",
      'Denim fast fashion', 'Maternity wear', 'Seamless wear', 'Home textiles', 'Toweling',
    ],
    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: 'India',
    h1: 'India sourcing & design · Gurgaon',
    sub: 'A sourcing and design office in Gurgaon. Two hundred years of combined management experience. Strong leather expertise.',
    summary: 'Gurgaon sourcing and design office. Strong woven, embellishment, and leather expertise.',
    heroImg: '/assets/network/india-hero.jpg',
    heroAlt: "Map of India with draped hand-block-printed cotton showing Market Fit's Gurgaon office established 2008",
    paras: [
      'The India office in Gurgaon is both a sourcing operation and a design office, run by a team of forty. The senior management team carries over two hundred years of combined experience across design, merchandising, technical, quality, and leather. Each function has its own specialist lead.',
      'The principle the team operates by is straightforward: deliver on quality, on margin, on time, with a transparent supply base and a proactive team that translates client requirements into measurable results. The leather expertise here is a direct continuation of the group\'s original 1974 leather sourcing work in Turkey, brought into a modern Indian context.',
    ],
    links: <>Gurgaon is a major hub for <a href="/solutions/odm">ODM development</a> on woven and embellished categories, and a key partner for <a href="/solutions/fabric">leather sourcing</a> across apparel, footwear, and accessories.</>,
    facts: [['Established', '2005'], ['Team', '40 people'], ['Manager', 'Vikram Bagga']],
    strengths: [
      "Ladies' casual woven tops and dresses",
      "Ladies' beaded and heavy-embellished",
      "Ladies' value-added jersey tops and dresses",
      "Men's jersey tees and polos",
      "Ladies' and men's chinos and shorts",
      "Ladies' and men's leather apparel",
      "Ladies' and men's leather footwear and accessories",
    ],
    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: 'Hong Kong headquarters',
    sub: 'The headquarters. Where the network is run from.',
    summary: 'The headquarters since 2009. Programme management, client services, finance, and senior leadership.',
    heroImg: '/assets/network/hongkong-hero.jpg',
    heroAlt: "Map of Hong Kong with draped silk crepe showing Market Fit's Hong Kong headquarters established 2009",
    paras: [
      'Hong Kong became the operational headquarters of Market Fit Group in 2009. Every country office and every factory in the network reports through Hong Kong. Programme management, client services, finance, and senior leadership all sit here, in a single building, in the city that sits at the centre of the Asian sourcing geography.',
      'The choice of Hong Kong was deliberate. It sits at the centre of the Asian sourcing geography. It carries no time-zone disadvantage to either Europe or the Americas. And it operates under a legal and financial framework that international clients understand.',
    ],
    links: <>Hong Kong is where the group is run from. <a href="/about">Our story</a> starts in 1974 in Istanbul; the headquarters moved here in 2009. To start a programme, <a href="/contact">get in touch</a>.</>,
    facts: [['Established', '2009 (HQ)'], ['Function', 'Group headquarters'], ['Contact', 'jordan@market-fit.com']],
    strengths: [
      'Group programme management',
      'Client services and account management',
      'Finance and group operations',
      'Senior leadership and strategy',
    ],
    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: simplified country silhouette in archival ink,
// neighbouring countries hinted in pale grey, navy pin at the office city.
// Self-contained — no network dependencies, no third-party tiles.
//
// Each country outline uses a custom-tuned SVG viewBox sized to a recognisable
// regional frame. Coordinates are mapped to viewBox space via per-country
// projectLatLon functions defined in the SHAPES table below.
function StaticLocationMap({ coords }) {
  const country = COUNTRY_SHAPES[coords.label];
  if (!country) return <span className="cou-addr-img-tag">Map pending</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={`Map showing ${coords.label} office location`}
    >
      {/* Faint graticule */}
      {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}

      {/* Neighbouring countries (pale, no fill emphasis) */}
      {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" />
      ))}

      {/* Primary country outline */}
      <path d={primary} fill="var(--mf-ink)" fillOpacity="0.12"
        stroke="var(--mf-ink)" strokeWidth="1.2" strokeOpacity="0.88"
        strokeLinejoin="round" strokeLinecap="round" />

      {/* Marker — outer halo, ring, dot */}
      <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)" />

      {/* Corner labels — city + coordinates */}
      <g fontFamily="var(--font-body)" fill="var(--mf-ink)">
        <text x="14" y="22" fontSize="10" letterSpacing="2" fontWeight="500">
          {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>
  );
}

// COUNTRY_SHAPES — simplified silhouettes for each country in the network.
// Outlines are stylised, not survey-grade. The viewBox frames a regional crop;
// project(lon,lat) returns the city's location inside that crop.
const COUNTRY_SHAPES = (() => {
  // Helper: linear projection from (lon,lat) bounds to viewBox.
  const proj = (lonMin, lonMax, latMin, latMax, w, h) => (lon, lat) => [
    ((lon - lonMin) / (lonMax - lonMin)) * w,
    h - ((lat - latMin) / (latMax - latMin)) * h,
  ];

  return {
    // ---- TURKEY · Istanbul (41.05N, 28.96E) ----
    // Frame: lon 25..45, lat 35..43
    '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: [
        // Greece nub west
        'M 0 90 L 20 84 L 28 96 L 14 110 L 0 110 Z',
        // Black Sea hint (negative — render as label-free)
      ],
    },

    // ---- PAKISTAN · Karachi (24.86N, 67.00E) ----
    // Frame: lon 60..78, lat 23..37
    '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: [
        // India east
        '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',
        // Afghanistan north
        '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',
      ],
    },

    // ---- INDIA · Gurgaon (28.46N, 77.03E) ----
    // Frame: lon 67..92, lat 8..36
    '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: [
        // Pakistan west sliver
        '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',
        // Nepal/Bhutan north
        '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',
        // Bangladesh east
        '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',
      ],
    },

    // ---- BANGLADESH · Dhaka (23.88N, 90.38E) ----
    // Frame: lon 88..93, lat 20.5..27
    '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: [
        // India wraps around
        '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',
      ],
    },

    // ---- CHINA / SHANGHAI · (31.20N, 121.47E) ----
    // Frame: lon 105..125, lat 22..42
    '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: [],
    },

    // ---- HONG KONG · Central (22.28N, 114.16E) ----
    // Frame: lon 113..115, lat 21.5..23
    'Central, Hong Kong': {
      vb: [320, 240], project: proj(113, 115, 21.5, 23, 320, 240),
      // Stylised Hong Kong island + Kowloon + New Territories cluster
      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: [
        // Mainland Guangdong to north
        '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',
      ],
    },

    // ---- VIETNAM · Ho Chi Minh City (10.79N, 106.70E) ----
    // Frame: lon 102..110, lat 8..23
    '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: [
        // Western neighbours (Laos / Thailand silhouette)
        '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 (decorative, navy hero) ============
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">Our network</div>
        <h1 className="net-hero-h1 mf-reveal" style={{ transitionDelay: '60ms' }}>
          Seven countries. Ten offices and factories. <em>One accountable partner.</em>
        </h1>
        <p className="net-hero-sub mf-reveal" style={{ transitionDelay: '120ms' }}>
          Market Fit operates a curated network across Asia, Europe, and the Middle East. Each country office is run by people who have spent careers in their region. Each factory is matched to its category specialism.
        </p>
      </div>
    </section>
  );
}

function NetGlance() {
  const cells = [
    ['8', 'Sourcing countries'],
    ['12', 'Offices and factories'],
    ['800+', 'People across the network'],
    ['52', 'Years operating'],
  ];
  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">Where we are</div>
          <h2>Seven countries, <em>one philosophy.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          We don't operate as a holding company with disconnected branches. Every country office runs under the same principles, with the same standards, reporting into the same Hong Kong headquarters. The local knowledge is local. The accountability is global.
        </p>
      </div>
      <div className="net-countries-grid">
        {NETWORK_INDEX.map((idx, i) => {
          const c = COUNTRIES[idx.slug];
          const meta = c.facts.filter(([k]) => k === 'Established' || k === 'Team').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">See office →</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">Where we manufacture</div>
          <h2>Five specialist factories in China, <em>plus the broader network.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Most of our owned and dedicated production sits in China, organised by category. Outerwear at Mupai. Dresses and blouses at Tongxiang. Tailoring at Suho. Casual at Hubei. Internal production and quality control at 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">View facility →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function NetHow() {
  const cells = [
    ['01', 'Local management', 'Each country office is run by senior people with decades of experience in their region. Decisions get made in the country, not on a video call from Hong Kong.'],
    ['02', 'Single accountability', 'One client services contact. One programme owner. One name on every email.'],
    ['03', 'Shared standards', 'The same quality bar, the same compliance requirements, the same audit rhythm across every country.'],
  ];
  return (
    <section className="net-how">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">How we operate</div>
          <h2>Local hands. <em>Global standards.</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="Country navigation">
      <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">Country · {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>Country {data.num} of 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">The office</div>
          <h2 className="cou-office-h">What we do <em>here.</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">Strengths</div>
          <h2 className="cou-spec-h">What this office is <em>built for.</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 === 'Manager') || [])[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 ? 'Two sites in ' + data.name : 'Address'}</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">Pending</span>}
          </div>
          {manager ? <div className="cou-addr-cap">Office lead — {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">Frequently asked</div>
          <h2 className="cou-spec-h">Common <em>questions.</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">Factories in China</div>
          <h2 className="cou-spec-h">Five specialist factories. <em>One accountable partner.</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">View facility →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ============ COUNTRY APP ============
function NetworkCountryApp({ slug }) {
  const data = COUNTRIES[slug];
  const ref = useRevealNet();
  if (!data) return <div style={{ padding: 48 }}>Unknown country: {slug}</div>;
  const trail = [
    { label: 'Home', href: '/' },
    { label: 'Our Network', href: '/our-network' },
    { label: data.name },
  ];
  // Country → 3 most-relevant cross-links (Solutions, factories, other countries, editorial).
  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 = 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} />
      <RelatedContent heading={`How we work in ${data.name}`} items={relatedItems} />
      <NetLateral activeSlug={slug} />
      <Footer />
    </div>
  );
}

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