/* global React */
const { useState, useEffect, useRef } = React;

// ============ ICONS (Lucide, inline) ============
const Icon = {
  ArrowRight: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  Menu: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 20} height={p.size || 20} fill="none" stroke="currentColor" strokeWidth="1.5" aria-label="Menu" {...p}>
      <path d="M4 7h16M4 12h16M4 17h16" />
    </svg>
  ),
  X: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 20} height={p.size || 20} fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M6 6l12 12M18 6L6 18" />
    </svg>
  ),
  Check: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <path d="M5 13l4 4L19 7" />
    </svg>
  ),
  Plus: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" {...p}>
      <path d="M12 5v14M5 12h14" />
    </svg>
  ),
  ChevronRight: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 14} height={p.size || 14} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter" {...p}>
      <path d="M9 6l6 6-6 6" />
    </svg>
  ),
  Linkedin: (p) => (
    <svg viewBox="0 0 24 24" width={p.size || 18} height={p.size || 18} fill="none" stroke="currentColor" strokeWidth="1.5" {...p}>
      <rect x="3" y="3" width="18" height="18" rx="0.5" />
      <path d="M8 10v7M8 7v.01M12 17v-5M12 17V12c0-1.1.9-2 2-2s2 .9 2 2v5" />
    </svg>
  ),
};

// ============ REVEAL ON SCROLL ============
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    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;
}

// ============ LOGO LOCKUP ============
// V1 Care-label mark + Newsreader wordmark. Three variants: horizontal | stacked | reverse.
const MarkSvg = () => (
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Market Fit Group">
    <g fill="currentColor">
      <rect x="20" y="28" width="60" height="1.5" />
      <text x="50" y="64" fontFamily="'Newsreader', 'Tiempos Headline', Georgia, serif" fontWeight="400" fontSize="36" letterSpacing="2" textAnchor="middle">M·F</text>
      <rect x="20" y="74" width="60" height="1" />
      <text x="50" y="86" fontFamily="'Instrument Sans', sans-serif" fontSize="7" letterSpacing="2" textAnchor="middle">EST · 1974</text>
    </g>
  </svg>
);
function Lockup({ variant = 'horizontal', reverse = false, size, href = null, className = '', ariaLabel = 'Market Fit Group' }) {
  const cls = [
    'mf-lockup',
    variant === 'stacked' ? 'mf-lockup--stacked' : '',
    size === 'lg' ? 'mf-lockup--lg' : '',
    reverse ? 'mf-lockup--reverse' : '',
    className,
  ].filter(Boolean).join(' ');
  const inner = (
    <React.Fragment>
      <span className="mf-lockup-mark" aria-hidden="true"><MarkSvg /></span>
      <span className="mf-wordmark">Market Fit <em>Group</em></span>
    </React.Fragment>
  );
  if (href !== null) {
    return <a href={href} className={cls} aria-label={ariaLabel}>{inner}</a>;
  }
  return <span className={cls} aria-label={ariaLabel} role="img">{inner}</span>;
}

// ============ NAV ============
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { label: 'Solutions',      href: '/fr/solutions' },
    { label: 'Notre réseau',   href: '/fr/notre-reseau' },
    { label: 'Durabilité',     href: '/fr/durabilite' },
    { label: 'À propos',       href: '/fr/a-propos' },
    { label: 'Insights',       href: '/fr/insights' },
  ];
  return (
    <React.Fragment>
      <nav className={`mf-nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="mf-nav-inner">
          <Lockup href="/fr" />
          <div className="mf-nav-links">
            {links.map((l) => <a key={l.label} href={l.href}>{l.label}</a>)}
          </div>
          <div className="mf-nav-right">
            <span className="mf-nav-lang" data-mf-lang-switch="nav"></span>
            <a href="/fr/contact" className="mf-btn-p">Démarrer votre prochaine collection</a>
            <button className="mf-menu-btn" onClick={() => setOpen(!open)} aria-label="Menu">
              {open ? <Icon.X /> : <Icon.Menu />}
            </button>
          </div>
        </div>
      </nav>
      <div className={`mf-mobile-menu ${open ? 'open' : ''}`}>
        {links.map((l) => <a key={l.label} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>)}
        <a href="/fr/contact" className="mf-btn-p" style={{ marginTop: 32, alignSelf: 'flex-start' }} onClick={() => setOpen(false)}>
          Démarrer votre prochaine collection <Icon.ArrowRight />
        </a>
      </div>
    </React.Fragment>
  );
}

// ============ HERO ============
function Hero() {
  // Fallback frames (crossfade) while a real factory loop is provided by the family.
  const frames = [
    '/assets/images/img-01.png',
    '/assets/images/img-03.png',
    '/assets/images/img-12.png',
    '/assets/images/img-18.png',
  ];
  const [idx, setIdx] = useState(0);
  const videoRef = useRef(null);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % frames.length), 4200);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="mf-hero" id="hero">
      {/* Real <video> element, silent + looped. Uses the poster as a visual placeholder
          until a factory-floor clip is supplied. */}
      <video
        ref={videoRef}
        className="mf-hero-video"
        autoPlay muted loop playsInline
        poster="/assets/images/img-01.png"
        aria-hidden="true"
      >
        {/* Video source intentionally empty — placeholder until the family supplies a loop. */}
      </video>
      <div className="mf-hero-frames">
        {frames.map((f, i) => (
          <div key={f} className={`mf-hero-frame ${i === idx ? 'active' : ''}`} style={{ backgroundImage: `url(${f})` }} />
        ))}
      </div>
      <div className="mf-hero-vignette" />
      <div className="mf-hero-eyebrow">Market Fit Group &nbsp;/&nbsp; Depuis 1974</div>
      <div className="mf-hero-content">
        {/* REVIEW-REQ : H1 à valider par un locuteur natif. */}
        <h1>Le partenaire ODM des<br /><em>marques de mode contemporaine.</em></h1>
        <p className="mf-hero-sub">
          Du tech-pack à l'échantillon chiffré en sept jours. Ateliers en propre, à travers un réseau de sept pays. Cinquante-deux ans de pratique.
        </p>
        <div className="mf-hero-ctas">
          <a href="/fr/contact" className="mf-btn-p">Envoyer un tech-pack <Icon.ArrowRight /></a>
          <a href="#solutions" className="mf-btn-hero">Voir comment nous travaillons <Icon.ArrowRight size={16} /></a>
        </div>
      </div>
      <div className="mf-hero-scroll">
        <span>SCROLL</span>
        <div className="mf-hero-scroll-line" />
      </div>
    </section>
  );
}

// ============ CREDENTIALS ============
function Credentials() {
  const data = [
    { num: '52', unit: 'Ans', label: 'Propriété familiale depuis 1974' },
    { num: '7', unit: 'Pays', label: 'Asie, Moyen-Orient et Europe' },
    { num: '13', unit: 'Sites', label: 'Bureaux et usines à travers sept pays' },
    { num: '7', unit: 'Jours', label: "Délai d'échantillonnage" },
  ];
  return (
    <section className="mf-creds">
      <div className="mf-creds-grid">
        {data.map((d, i) => (
          <div key={i} className="mf-cred mf-reveal" style={{ transitionDelay: `${i * 60}ms` }}>
            <div className="mf-cred-num">{d.num}</div>
            <div className="mf-cred-unit">{d.unit}</div>
            <div className="mf-cred-label">{d.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ SOLUTIONS ============
function Solutions() {
  const items = [
    { title: 'ODM et développement design', desc: 'Du croquis au vêtement prêt pour la production. Équipes techniques et design en interne.', img: '/assets/images/img-02.png', href: '/fr/solutions/odm-developpement' },
    { title: 'Échantillonnage', desc: "Sept jours du brief à l'échantillon chiffré sur votre bureau. Les ateliers d'échantillonnage au Vietnam et à Suzhou tiennent la cadence.", img: '/assets/images/img-03.png', href: '/fr/solutions/echantillonnage' },
    { title: 'Sourcing tissus et accessoires', desc: 'Entrepôt de tissus en propre à Shaoxing. Filatures Vietnam qui montent en parallèle sous audit Tier 2. Visibilité complète de la chaîne.', img: '/assets/images/img-05.png', href: '/fr/solutions/sourcing-tissus' },
    { title: 'Production en petites séries', desc: "MOQ dès 300 pièces à Suzhou, 500 au Vietnam. Nous tenons le planning sur les ateliers que nous possédons. Qualité premium à des volumes contemporains.", img: '/assets/images/img-21.png', href: '/fr/solutions/production-petite-serie' },
    { title: 'Qualité et conformité', desc: 'Dix standards d\'audit détenus à travers le réseau. Rapports sur demande.', img: '/assets/images/img-04.png', href: '/fr/solutions/qualite-conformite' },
  ];
  return (
    <section className="mf-section" id="solutions">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Ce que nous faisons</div>
          <h2>Conçu pour les marques qui placent le <em>design</em> au cœur.</h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Nous accompagnons les marques contemporaines premium du premier croquis au vêtement fini. Tissus sourcés. Échantillons développés. Production planifiée. Qualité auditée. Chaque étape confiée au spécialiste qui la maîtrise le mieux.
        </p>
      </div>
      <div className="mf-solutions-grid">
        {items.map((s, i) => (
          <a key={s.title} href={s.href} className="mf-solution mf-reveal" style={{ transitionDelay: `${i * 60}ms`, textDecoration: 'none', color: 'inherit', borderBottom: '1px solid var(--mf-ink-10)' }}>
            <div className="mf-solution-media">
              <div className="mf-solution-num">{String(i + 1).padStart(2, '0')}</div>
              <img src={s.img} alt={s.title} width="1600" height="1200" loading="lazy" decoding="async" />
            </div>
            <div className="mf-solution-body">
              <h3 className="mf-solution-title">{s.title}</h3>
              <p className="mf-solution-desc">{s.desc}</p>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ============ PROGRAMMES ============
// Mirror of the EN Programmes section. Five number-led editorial tiles
// covering the most common shapes of work we run.
function Programmes() {
  const items = [
    {
      num: '01',
      title: 'Première capsule contemporaine',
      desc: "Pour les marques qui lancent leur première collection en ODM. Nous démarrons par l'échantillonnage et de petites séries depuis un seul pays, en montant en cadence à mesure que la gamme prend.",
      spec: 'MOQ plancher 500 pièces · échantillonnage en 7 jours',
      href: '/fr/solutions/echantillonnage',
    },
    {
      num: '02',
      title: 'Diversification China plus one',
      desc: "Pour les books établis qui rééquilibrent leur capacité hors de Chine. Nous déplaçons certains styles vers le Vietnam, le Bangladesh, l'Inde ou la Turquie sans rompre vos relations chinoises.",
      spec: 'Production multi-pays · reporting consolidé',
      href: '/fr/notre-reseau',
    },
    {
      num: '03',
      title: 'Collection à approvisionnement certifié',
      desc: "Pour les marques engagées sur la durabilité qui construisent des gammes certifiées GRS, GOTS ou OEKO-TEX. Documentation de chaîne de traçabilité de la fibre au vêtement fini.",
      spec: "Prêt à l'audit · tous les pays de production",
      href: '/fr/durabilite',
    },
    {
      num: '04',
      title: 'Pièces techniques',
      desc: "Pour la pièce que les autres usines refusent. Jersey léger, dentelle fine, sequin coupé main, outerwear structuré avec thermocollants et épaulettes. Les pièces qui demandent des modélistes qui lisent la couture.",
      spec: 'Tissus difficiles · construction structurée',
      href: '/fr/notre-reseau',
    },
    {
      num: '05',
      title: 'Production en cycles de drops',
      desc: 'Pour les marques contemporaines qui pilotent 4 à 6 drops par an. Cycles de production reproductibles de 6 à 8 semaines sur la maille, le tissé et les petits programmes jersey.',
      spec: 'Cycles 6 à 8 semaines · 4 à 6 drops par an',
      href: '/fr/solutions/production-petite-serie',
    },
  ];
  return (
    <section className="mf-section" id="programmes">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Programmes</div>
          <h2>Trouvez la forme <em>qui vous correspond.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          L'essentiel de notre travail entre dans l'un de ces cinq archétypes. Choisissez celui qui vous ressemble, ou envoyez-nous un brief qui n'entre pas tout à fait dedans — nous nous adapterons.
        </p>
      </div>
      <div className="mf-programmes">
        {items.map((p, i) => (
          <a key={p.num} href={p.href} className="mf-programme mf-reveal" style={{ transitionDelay: `${i * 50}ms` }}>
            <div className="mf-programme-num">{p.num}</div>
            <div className="mf-programme-rule" />
            <h3 className="mf-programme-title">{p.title}</h3>
            <p className="mf-programme-desc">{p.desc}</p>
            <div className="mf-programme-spec">{p.spec}</div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ============ NETWORK (Map only) ============
// Mirrors the EN homepage: section is just the Asia map with its own
// heading and clickable country dots/legend. The 5-factory China grid
// lives on /fr/notre-reseau/chine. Section wrapper preserves the
// #our-network anchor target referenced from about-fr.jsx.
function Network() {
  return (
    <section id="our-network">
      <WorldMap />
    </section>
  );
}

// ============ ASIA MAP ============
// Focus: Middle East → East Asia. Simple equirectangular slice roughly spanning
// lon 25°E–125°E, lat 42°N–10°N. Coordinates are hand-placed from real city
// locations, then scaled to the 1000×560 viewBox below.
function WorldMap() {
  // Real city coords then mapped: x = (lon - 25) * 10, y = (42 - lat) * 17.5
  const loc = (lon, lat) => ({ x: (lon - 25) * 10, y: (42 - lat) * 17.5 });
  const countries = [
    { name: 'Turquie',    slug: 'turquie',    ...loc(29.0, 41.0), city: 'Istanbul',        info: 'Istanbul — siège fondateur, 1974' },
    { name: 'Pakistan',   slug: 'pakistan',   ...loc(67.0, 24.9), city: 'Karachi / Lahore', info: 'Coton, mailles' },
    { name: 'Inde',       slug: 'inde',       ...loc(77.2, 28.6), city: 'Delhi / Mumbai',  info: 'Embellissement, broderie' },
    { name: 'Bangladesh', slug: 'bangladesh', ...loc(90.4, 23.8), city: 'Dhaka',            info: 'Mailles, basiques en volume' },
    { name: 'Vietnam',    slug: 'vietnam',    ...loc(106.6, 17.5), city: 'Hô-Chi-Minh / Tien Giang', info: "Atelier en propre à Tien Giang · femme trend" },
    { name: 'Chine',      slug: 'chine',      ...loc(121.5, 31.2), city: 'Shanghai',        info: 'Suzhou, Nanjing, Hubei, Shaoxing — réseau cœur' },
    { name: 'Hong Kong',  slug: 'hong-kong',  ...loc(114.2, 22.3), city: 'Hong Kong',       info: 'Siège du groupe, sourcing & merchandising' },
  ];
  const countryHref = (slug) => `/fr/notre-reseau/${slug}`;

  // Connecting hairline path — west to east through the network.
  const routeOrder = ['Turquie', 'Pakistan', 'Inde', 'Bangladesh', 'Chine', 'Hong Kong', 'Vietnam'];
  const byName = Object.fromEntries(countries.map(c => [c.name, c]));
  const route = routeOrder.map(n => `${byName[n].x},${byName[n].y}`).join(' ');

  const [active, setActive] = useState(null);
  const [tt, setTt] = useState(null);
  const mapRef = useRef(null);

  return (
    <div className="mf-map-wrap mf-reveal" ref={mapRef}>
      <div className="mf-map-head">
        <div className="mf-eyebrow">Empreinte</div>
        <h3>Huit pays de sourcing. Un partenaire responsable pour chacun.</h3>
      </div>
      <div className="mf-map" style={{ position: 'relative' }}>
        <svg viewBox="0 0 1000 560" preserveAspectRatio="xMidYMid meet">
          <AsiaPath />
          {/* Connecting hairline path */}
          <polyline
            points={route}
            fill="none"
            stroke="rgba(250,250,247,0.35)"
            strokeWidth="1"
            strokeDasharray="2 4"
          />
          {countries.map((c) => (
            <a
              key={c.name}
              href={countryHref(c.slug)}
              aria-label={`${c.name} — voir la page pays`}
            >
              <g
                className={`mf-map-country ${active === c.name ? 'active' : ''}`}
                onMouseEnter={(e) => {
                  setActive(c.name);
                  const rect = mapRef.current.querySelector('.mf-map').getBoundingClientRect();
                  const svg = e.currentTarget.ownerSVGElement;
                  const pt = svg.createSVGPoint(); pt.x = c.x; pt.y = c.y;
                  const ctm = svg.getScreenCTM();
                  const s = pt.matrixTransform(ctm);
                  setTt({ x: s.x - rect.left, y: s.y - rect.top, name: c.name, city: c.city, info: c.info });
                }}
                onMouseLeave={() => { setActive(null); setTt(null); }}
              >
                <circle className="mf-map-dot-halo" cx={c.x} cy={c.y} r={18} />
                <circle className="mf-map-dot-halo" cx={c.x} cy={c.y} r={11} />
                <circle className="mf-map-dot" cx={c.x} cy={c.y} r={5} />
                <text className="mf-map-label" x={c.x} y={c.y + 26} textAnchor="middle">{c.name.toUpperCase()}</text>
              </g>
            </a>
          ))}
        </svg>
        {tt && (
          <div className="mf-map-tooltip show" style={{ left: tt.x, top: tt.y }}>
            <strong style={{ display: 'block', marginBottom: 2, fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 500 }}>{tt.name}</strong>
            <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--mf-ink-40)', marginBottom: 4 }}>{tt.city}</div>
            {tt.info}
          </div>
        )}
      </div>
      <div className="mf-map-legend">
        {countries.map((c) => (
          <a key={c.name}
            href={countryHref(c.slug)}
            className={`mf-map-legend-item ${active === c.name ? 'active' : ''}`}
            onMouseEnter={() => setActive(c.name)}
            onMouseLeave={() => setActive(null)}
          >
            — {c.name}
          </a>
        ))}
      </div>
    </div>
  );
}

// Stylized dot-stipple landmass for Asia + Middle East.
// Uses bounds checks for rough country silhouettes on the 1000×560 canvas
// (same lon/lat basis as WorldMap · 25°E–125°E, 42°N–9°N).
function AsiaPath() {
  // Landmass regions as rectangles in lon/lat, converted to canvas space.
  // Each region is sampled as a dot grid. Kept intentionally rough — editorial, not cartographic.
  const toX = (lon) => (lon - 25) * 10;
  const toY = (lat) => (42 - lat) * 17.5;
  const dots = [];
  const step = 10;
  for (let lon = 25; lon <= 125; lon += 1.1) {
    for (let lat = 9; lat <= 42; lat += 0.9) {
      const x = toX(lon); const y = toY(lat);
      // Hand-tuned silhouettes
      const inTurkeyAnatolia = lon > 26 && lon < 45 && lat > 36 && lat < 42;
      const inMiddleEast = lon > 34 && lon < 60 && lat > 13 && lat < 37 && !(lon < 42 && lat < 22);
      const inCentralAsia = lon > 50 && lon < 80 && lat > 34 && lat < 42;
      const inIndiaSub = (lon > 67 && lon < 92 && lat > 8 && lat < 34) && !(lon > 88 && lat < 22);
      const inSEAsia = (lon > 92 && lon < 110 && lat > 9 && lat < 23);
      const inChina = (lon > 75 && lon < 123 && lat > 22 && lat < 42) && !(lon > 115 && lat > 38);
      const inKorea = lon > 124 && lon < 126 && lat > 34 && lat < 38;
      if (inTurkeyAnatolia || inMiddleEast || inCentralAsia || inIndiaSub || inSEAsia || inChina || inKorea) {
        // Noise check — skip ~15% of dots for organic feel
        if ((Math.sin(lon * 12.9898 + lat * 78.233) * 43758.5453 % 1 + 1) % 1 > 0.15) {
          dots.push({ x, y });
        }
      }
    }
  }
  return (
    <g opacity="0.32">
      {dots.map((d, i) => (
        <circle key={i} cx={d.x} cy={d.y} r="1.5" fill="rgba(250,250,247,0.55)" />
      ))}
    </g>
  );
}

// ============ COMPLIANCE ============
function Compliance() {
  // REVIEW-REQ : copie à valider par un locuteur natif.
  const certs = [
    { label: 'amfori BSCI',     mark: <BSCIMark /> },
    { label: 'GRS 4.0',         img: '/assets/certifications/globalrecycledstandard.jpg' },
    { label: 'Higg Index',      img: '/assets/certifications/higgindex.png' },
    { label: 'OEKO-TEX',        img: '/assets/certifications/oekotex.png' },
    { label: 'Textile Genesis', img: '/assets/certifications/textilegenesis.jpg' },
  ];
  return (
    <section className="mf-section warm" id="sustainability">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Conformité</div>
          <h2>Audités selon le standard <em>qui compte.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Les acheteurs des marques contemporaines premium n'ont pas le temps d'auditer leur propre chaîne d'approvisionnement. Nous l'avons déjà fait. À travers notre réseau, nous détenons les principaux standards sociaux, environnementaux et de traçabilité matière, dont amfori BSCI, Higg FSLM, Higg FEM, ISO 14001, GRS, OEKO-TEX et Textile Genesis. Les standards diffèrent selon les sites. La répartition par site se trouve sur notre <a href="/fr/durabilite">page durabilité</a>, et les rapports sont disponibles sur demande.
        </p>
      </div>
      <div className="mf-certs">
        {certs.map((c) => (
          <div key={c.label} className="mf-cert">
            <div className="mf-cert-mark">{c.img ? <img src={c.img} alt={c.label} loading="lazy" decoding="async" /> : c.mark}</div>
            <div className="mf-cert-label">{c.label}</div>
          </div>
        ))}
      </div>
      <p className="mf-certs-plus">
        Plus <em>ISO 14001</em> à travers le réseau.
      </p>
    </section>
  );
}

function GRSMark() {
  return (
    <svg viewBox="0 0 120 48" width="110" height="44">
      <circle cx="20" cy="24" r="14" fill="none" stroke="#2B8287" strokeWidth="1.8" />
      <path d="M8 24 Q20 16 32 24 Q20 32 8 24 Z" fill="none" stroke="#2B8287" strokeWidth="1.4" />
      <path d="M20 10 Q26 24 20 38" fill="none" stroke="#2B8287" strokeWidth="1.4" />
      <text x="42" y="21" fontFamily="var(--font-body)" fontSize="11" fontWeight="700" fill="#0B2B5C" letterSpacing="0.1em">GRS</text>
      <text x="42" y="35" fontFamily="var(--font-body)" fontSize="7" fill="#0B2B5C" letterSpacing="0.08em">Global Recycled</text>
    </svg>
  );
}
function SMETAMark() {
  return (
    <svg viewBox="0 0 120 48" width="110" height="44">
      <rect x="4" y="10" width="56" height="28" fill="#0B2B5C" />
      <text x="32" y="29" fontFamily="var(--font-body)" fontSize="11" fontWeight="700" fill="#FAFAF7" textAnchor="middle" letterSpacing="0.12em">SMETA</text>
      <text x="64" y="21" fontFamily="var(--font-body)" fontSize="8" fontWeight="600" fill="#0B2B5C" letterSpacing="0.06em">Sedex</text>
      <text x="64" y="33" fontFamily="var(--font-body)" fontSize="7" fill="#0B2B5C" letterSpacing="0.04em">4-pillar</text>
    </svg>
  );
}
function BSCIMark() {
  return (
    <svg viewBox="0 0 120 48" width="110" height="44">
      <circle cx="18" cy="24" r="11" fill="#A61D1D" />
      <text x="18" y="28" fontFamily="var(--font-body)" fontSize="11" fontWeight="700" fill="#FAFAF7" textAnchor="middle">a</text>
      <text x="36" y="21" fontFamily="var(--font-body)" fontSize="9" fontWeight="700" fill="#A61D1D" letterSpacing="0.04em">amfori</text>
      <text x="36" y="33" fontFamily="var(--font-body)" fontSize="9" fontWeight="700" fill="#0B2B5C" letterSpacing="0.12em">BSCI</text>
    </svg>
  );
}
function ClientMark({ label, small }) {
  const w = small ? 90 : 110; const h = small ? 34 : 44;
  return (
    <svg viewBox="0 0 120 48" width={w} height={h}>
      <rect x="4" y="10" width="112" height="28" fill="none" stroke="#1A1A1A" strokeWidth="1" />
      <text x="60" y="29" fontFamily="var(--font-display)" fontSize="14" fontWeight="500" fill="#1A1A1A" textAnchor="middle" letterSpacing="0.2em">{label}</text>
    </svg>
  );
}

// ============ BRANDS ============
function Brands() {
  const brands = [
    { name: 'Anthropologie', desc: 'Lifestyle américain',               logo: '/assets/client-logos/anthropologie.png' },
    { name: 'Whistles',      desc: 'Womenswear contemporain londonien', logo: '/assets/client-logos/whistles.png' },
    { name: 'IKKS',          desc: 'Prêt-à-porter contemporain',        logo: '/assets/client-logos/ikks.png' },
    { name: 'Kiabi',         desc: 'Distributeur mode value',           logo: '/assets/client-logos/kiabi.png' },
    { name: 'Oliver Bonas',  desc: 'Lifestyle contemporain',            logo: '/assets/client-logos/oliver-bonas.png' },
    { name: 'Mayoral',       desc: 'Enfant espagnol',                   logo: '/assets/client-logos/mayoral.png' },
    { name: 'The Warehouse', desc: 'Groupe de distribution',            logo: '/assets/client-logos/warehouse.png' },
    { name: 'Fransa',        desc: 'Womenswear danois',                 logo: '/assets/client-logos/fransa.png' },
    { name: 'Sosandar',      desc: 'Womenswear direct-to-consumer',     logo: '/assets/client-logos/sosandar.webp' },
  ];
  return (
    <section className="mf-section">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Clients</div>
          <h2 style={{ fontSize: 'var(--fs-display-m)' }}>Au service des marques qui <em>placent le design en premier.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Maisons premium et contemporaines en Europe, au Royaume-Uni et en Asie-Pacifique.
        </p>
      </div>
      <div className="mf-brands">
        {brands.map((b, i) => (
          <div key={b.name} className="mf-brand mf-reveal" style={{ transitionDelay: `${i * 40}ms` }}>
            <div className="mf-brand-logo-wrap">
              <img className="mf-brand-logo" src={b.logo} alt={b.name} loading="lazy" decoding="async" />
            </div>
            <div className="mf-brand-name">{b.name}</div>
            <div className="mf-brand-desc">{b.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ STORY ============
function Story() {
  return (
    <section className="mf-section" id="about">
      <div className="mf-story">
        <div className="mf-reveal">
          <div className="mf-story-img">
            <img src="/assets/images/img-19.png" alt="Market Fit Group, cinquante-deux ans de mode" width="1600" height="1200" loading="lazy" decoding="async" />
          </div>
        </div>
        <div className="mf-story-text mf-reveal" style={{ transitionDelay: '80ms' }}>
          <div className="mf-eyebrow">Notre histoire</div>
          <h2>Cinquante-deux ans de mode, <em>dans une seule famille.</em></h2>
          <p>
            Une entreprise familiale, fondée à Istanbul en 1974 — débutée dans le cuir avant de passer aux textiles. Nous opérons sans interruption à travers cinq décennies de cycles de la mode, toujours autour de la même question : comment aider les marques qui nous tiennent à cœur à fabriquer de meilleurs vêtements, plus efficacement, avec moins de gaspillage.
          </p>
          <a href="/fr/a-propos" className="mf-btn-g">Lire notre histoire <span className="arrow"><Icon.ArrowRight size={16} /></span></a>
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT ============
function Contact() {
  const [state, setState] = useState({ name: '', brand: '', email: '', msg: '' });
  const [sent, setSent] = useState(false);
  const onChange = (k) => (e) => setState({ ...state, [k]: e.target.value });
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="mf-section warm" id="contact">
      <div className="mf-contact">
        <div className="mf-reveal">
          <div className="mf-eyebrow" style={{ textAlign: 'center' }}>Démarrer</div>
          <h2>Créons votre <em>prochaine collection.</em></h2>
          <p className="mf-lead" style={{ textAlign: 'center', margin: '0 auto var(--s-5)' }}>
            Dites-nous ce que vous construisez et nous reviendrons vers vous sous 24 heures pour échanger sur l'adéquation, la capacité et le calendrier.
          </p>
        </div>
        {!sent ? (
          <form className="mf-form mf-reveal" onSubmit={onSubmit} style={{ transitionDelay: '80ms' }}>
            <div className="mf-field">
              <label>Votre nom</label>
              <input type="text" value={state.name} onChange={onChange('name')} required />
            </div>
            <div className="mf-field">
              <label>Nom de la marque</label>
              <input type="text" value={state.brand} onChange={onChange('brand')} required />
            </div>
            <div className="mf-field full">
              <label>E-mail</label>
              <input type="email" value={state.email} onChange={onChange('email')} required />
            </div>
            <div className="mf-field full">
              <label>Sur quoi travaillez-vous ?</label>
              <textarea rows="3" value={state.msg} onChange={onChange('msg')} />
            </div>
            <div className="mf-form-submit">
              <button type="submit" className="mf-btn-p">Envoyer <Icon.ArrowRight /></button>
            </div>
          </form>
        ) : (
          <div className="mf-reveal in" style={{ padding: 'var(--s-8) 0', fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.01em', color: 'var(--mf-ink)' }}>
            Merci. Nous reviendrons vers vous sous 24 heures.
          </div>
        )}
        <div className="mf-contact-info mf-reveal">
          <div className="mf-contact-block">
            <div className="mf-eyebrow">Siège — Hong Kong</div>
            Unit 2102, 21/F., Golden Centre<br />188 Des Voeux Road Central
          </div>
          <div className="mf-contact-block">
            <div className="mf-eyebrow">Demande générale</div>
            <a href="mailto:jordan@market-fit.com">jordan@market-fit.com</a>
          </div>
          <div className="mf-contact-block">
            <div className="mf-eyebrow">Bureau de Chine</div>
            <a href="mailto:tony@market-fit.com">tony@market-fit.com</a>
          </div>
          <div className="mf-contact-block">
            <div className="mf-eyebrow">Carrières</div>
            <a href="mailto:CVApply@market-fit.com">CVApply@market-fit.com</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ BREADCRUMBS ============
// Trail: array of { label, href? }. Last item is the current page (no href).
function Breadcrumbs({ trail }) {
  if (!trail || trail.length === 0) return null;
  return (
    <nav className="mf-crumbs" aria-label="Fil d'Ariane">
      <ol className="mf-crumbs-list">
        {trail.map((item, i) => {
          const isLast = i === trail.length - 1;
          return (
            <li key={i} className="mf-crumb">
              {item.href && !isLast ? (
                <a href={item.href} className="mf-crumb-link">{item.label}</a>
              ) : (
                <span className="mf-crumb-current" aria-current={isLast ? 'page' : undefined}>{item.label}</span>
              )}
              {!isLast ? <span className="mf-crumb-sep" aria-hidden="true"><Icon.ChevronRight /></span> : null}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

// ============ FAQ ACCORDION ============
// items: [{ q, a }]. eyebrow + heading optional.
function Faq({ items, eyebrow, heading, headingEm }) {
  const [openIx, setOpenIx] = useState(-1);
  if (!items || items.length === 0) return null;
  return (
    <section className="mf-faq" id="faq">
      <div className="mf-faq-inner">
        <div className="mf-faq-head mf-reveal">
          {eyebrow ? <div className="mf-eyebrow">{eyebrow}</div> : null}
          <h2 className="mf-faq-h">
            {heading || 'Questions fréquentes'} {headingEm ? <em>{headingEm}</em> : null}
          </h2>
        </div>
        <ul className="mf-faq-list">
          {items.map((it, i) => {
            const open = openIx === i;
            return (
              <li key={i} className={`mf-faq-item mf-reveal ${open ? 'open' : ''}`} style={{ transitionDelay: `${i * 30}ms` }}>
                <button
                  type="button"
                  className="mf-faq-q"
                  aria-expanded={open}
                  onClick={() => setOpenIx(open ? -1 : i)}
                >
                  <span className="mf-faq-q-text">{it.q}</span>
                  <span className="mf-faq-q-icon" aria-hidden="true"><Icon.Plus /></span>
                </button>
                <div className="mf-faq-a-wrap" role="region">
                  <div className="mf-faq-a-inner">
                    <div className="mf-faq-a">{it.a}</div>
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

// ============ LINK TARGETS REGISTRY ============
// Single source of truth for canonical internal links + Related card metadata.
const LINK_TARGETS = {
  // Solutions
  'sol-odm':        { href: '/fr/solutions/odm-developpement',        eyebrow: 'SOLUTION', title: 'ODM & développement',       desc: 'Du croquis au vêtement prêt pour la production, en interne.', img: '/assets/images/img-06.png' },
  'sol-sampling':   { href: '/fr/solutions/echantillonnage',          eyebrow: 'SOLUTION', title: 'Échantillonnage en 7 jours',      desc: '500 styles par mois depuis notre atelier d\'échantillonnage en propre.', img: '/assets/images/img-24.jpg' },
  'sol-fabric':     { href: '/fr/solutions/sourcing-tissus',          eyebrow: 'SOLUTION', title: 'Sourcing tissus & accessoires',  desc: 'Entrepôt en propre à Shaoxing, plus de 8 000 tissus actifs.', img: '/assets/images/img-17.png' },
  'sol-production': { href: '/fr/solutions/production-petite-serie',  eyebrow: 'SOLUTION', title: 'Production en petites séries',  desc: 'MOQ de 500 pièces. Usines auditées. Même exigence qualité.', img: '/assets/images/img-21.png' },
  'sol-quality':    { href: '/fr/solutions/qualite-conformite',       eyebrow: 'SOLUTION', title: 'Qualité & conformité',    desc: 'GRS, SMETA, BSCI à travers le réseau.', img: '/assets/images/img-04.png' },
  'sol-hub':        { href: '/fr/solutions',                          eyebrow: 'SOLUTIONS', title: 'Les cinq solutions',     desc: 'Comment développement, échantillonnage, sourcing, production et qualité s\'articulent.', img: '/assets/images/img-25.jpg' },
  // Network parent + countries
  'net-hub':        { href: '/fr/notre-reseau',             eyebrow: 'RÉSEAU',  title: 'Le réseau complet',        desc: 'Treize bureaux et usines à travers sept pays.', img: '/assets/photography/cad-digital-cutter.jpg' },
  'net-china':      { href: '/fr/notre-reseau/chine',       eyebrow: 'CHINE',    title: 'Opérations en Chine',        desc: 'Bureau sourcing de Shanghai et cinq usines spécialisées.', img: '/assets/network/china-hero.jpg' },
  'net-vietnam':    { href: '/fr/notre-reseau/vietnam',     eyebrow: 'VIETNAM',  title: 'Vietnam',                  desc: "Atelier en propre à Tien Giang, bureau de design à Hô-Chi-Minh-Ville. Femme trend.", img: '/assets/network/vietnam-hero.jpg' },
  'net-bangladesh': { href: '/fr/notre-reseau/bangladesh',  eyebrow: 'BANGLADESH', title: 'Bangladesh',             desc: 'Bureau d\'achat pour l\'Europe depuis 2002. Laboratoire en interne.', img: '/assets/network/bangladesh-hero.jpg' },
  'net-pakistan':   { href: '/fr/notre-reseau/pakistan',    eyebrow: 'PAKISTAN', title: 'Pakistan',                 desc: 'Vêtements tissés et articles de sport, expertise coton.', img: '/assets/network/pakistan-hero.jpg' },
  'net-turkey':     { href: '/fr/notre-reseau/turquie',     eyebrow: 'TURQUIE',   title: 'Turquie',                   desc: 'Le bureau d\'origine. Le modèle de tout ce qui a suivi.', img: '/assets/network/turkey-hero.jpg' },
  'net-india':      { href: '/fr/notre-reseau/inde',        eyebrow: 'INDE',    title: 'Inde',                    desc: 'Sourcing et design à Gurgaon — tissé, embellissement, cuir.', img: '/assets/network/india-hero.jpg' },
  'net-hongkong':   { href: '/fr/notre-reseau/hong-kong',   eyebrow: 'HONG KONG', title: 'Hong Kong',               desc: 'Le siège depuis 2009.', img: '/assets/network/hongkong-hero.jpg' },
  // Factories (China)
  'fac-mf-suzhou':  { href: '/fr/notre-reseau/chine/market-fit-suzhou',    eyebrow: 'USINE',  title: 'Market Fit Suzhou',        desc: 'Notre site en propre pour les programmes exigeants en conformité.', img: '/assets/photography/cad-room-mannequin.jpg' },
  'fac-tongxiang':  { href: '/fr/notre-reseau/chine/tongxiang-yinshi',     eyebrow: 'USINE',  title: 'Tongxiang Yinshi',         desc: 'Robes, blouses, tops. Spécialiste du tissé léger.', img: '/assets/photography/hand-finishing-green-blouse.jpg' },
  'fac-mupai':      { href: '/fr/notre-reseau/chine/suzhou-mupai',         eyebrow: 'USINE',  title: 'Suzhou Mupai',             desc: 'Spécialiste outerwear. Manteaux matelassés et tailleurs.', img: '/assets/photography/sewing-room-wide.jpg' },
  'fac-suho':       { href: '/fr/notre-reseau/chine/suho-fashion-nanjing', eyebrow: 'USINE',  title: 'Suho Fashion Nanjing',     desc: 'Costumes, manteaux, chemises, vêtements de travail, casual.', img: '/assets/photography/seamstress-jack-machine.jpg' },
  'fac-sainty':     { href: '/fr/notre-reseau/chine/suho-fashion-nanjing', eyebrow: 'USINE',  title: 'Suho Fashion Nanjing',     desc: 'Costumes, manteaux, chemises, vêtements de travail, casual.', img: '/assets/photography/seamstress-jack-machine.jpg' },
  'fac-hubei':      { href: '/fr/notre-reseau/chine/hubei',                eyebrow: 'USINE',  title: 'Site du Hubei',           desc: 'Capacité tissé léger pour programmes à plus fort volume.', img: '/assets/photography/cad-digital-cutter.jpg' },
  'fac-mf-vietnam': { href: '/fr/notre-reseau/vietnam/market-fit-vietnam', eyebrow: 'USINE',  title: 'Market Fit Vietnam',       desc: "Atelier en propre à Tien Giang. Pièces techniques en maille et tissé femme.", img: '/assets/photography/sewing-room-wide.jpg' },
  // Editorial pages
  'about':          { href: '/fr/a-propos',          eyebrow: 'À PROPOS',    title: 'Cinquante-deux ans de mode', desc: 'Une entreprise familiale depuis 1974.', img: '/assets/images/img-05.png' },
  'sustain':        { href: '/fr/durabilite',        eyebrow: 'DURABILITÉ', title: 'La conformité n\'est pas négociable', desc: 'Nos certifications, matériaux et feuille de route DPP.', img: '/assets/images/img-09.png' },
  'contact':        { href: '/fr/contact',           eyebrow: 'CONTACT',  title: 'Engager la conversation',     desc: 'Dites-nous ce que vous construisez.', img: '/assets/photography/cad-digital-cutter.jpg' },
  'insights':       { href: '/fr/insights',          eyebrow: 'INSIGHTS', title: 'La stratégie de sourcing, mise par écrit', desc: 'Guides pays et réalités opérationnelles.', img: '/assets/photography/warehouse-boxes.jpg' },
};

function relatedFor(keys) {
  return keys.map((k) => {
    const t = LINK_TARGETS[k];
    if (!t) return null;
    return { href: t.href, eyebrow: t.eyebrow, title: t.title, desc: t.desc, img: t.img };
  }).filter(Boolean);
}

// ============ RELATED CONTENT (image card variant) ============
// items: [{ href, eyebrow, title, desc, img }]
function RelatedContent({ heading = 'Lié à ce travail', items }) {
  if (!items || items.length === 0) return null;
  return (
    <section className="mf-rc">
      <div className="mf-rc-inner">
        <div className="mf-eyebrow mf-reveal">En lien</div>
        <h2 className="mf-rc-h mf-reveal" style={{ transitionDelay: '60ms' }}>{heading}</h2>
        <ul className="mf-rc-grid">
          {items.map((it, i) => (
            <li key={i} className="mf-reveal" style={{ transitionDelay: `${80 + i * 60}ms` }}>
              <a href={it.href} className="mf-rc-card">
                {it.img ? (
                  <span className="mf-rc-img">
                    <img src={it.img} alt="" width="600" height="400" loading="lazy" decoding="async" />
                  </span>
                ) : null}
                <span className="mf-rc-body">
                  {it.eyebrow ? <span className="mf-rc-eye">{it.eyebrow}</span> : null}
                  <span className="mf-rc-title">{it.title}</span>
                  {it.desc ? <span className="mf-rc-desc">{it.desc}</span> : null}
                  <span className="mf-rc-arrow" aria-hidden="true"><Icon.ArrowRight size={14} /></span>
                </span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ============ RELATED LINKS (legacy, text-only) ============
// Contextual link block. items: [{ href, label, eyebrow }]
function RelatedLinks({ heading, items }) {
  if (!items || items.length === 0) return null;
  return (
    <section className="mf-related">
      <div className="mf-related-inner">
        {heading ? <div className="mf-eyebrow mf-reveal">{heading}</div> : null}
        <ul className="mf-related-list">
          {items.map((it, i) => (
            <li key={i} className="mf-reveal" style={{ transitionDelay: `${i * 40}ms` }}>
              <a href={it.href} className="mf-related-card">
                {it.eyebrow ? <span className="mf-related-eye">{it.eyebrow}</span> : null}
                <span className="mf-related-label">{it.label}</span>
                <span className="mf-related-arrow" aria-hidden="true"><Icon.ArrowRight size={16} /></span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="mf-footer">
      <div className="mf-footer-inner">
        <div className="mf-footer-grid">
          <div>
            <Lockup href="/fr" reverse className="mf-footer-lockup" />
            <div className="mf-footer-tag">Le partenaire ODM de la mode contemporaine. Petites séries. Sans compromis.</div>
          </div>
          <div className="mf-footer-col">
            <h6>Entreprise</h6>
            <ul>
              <li><a href="/fr/a-propos">À propos</a></li>
              <li><a href="/fr/carrieres">Carrières</a></li>
              <li><a href="/fr/insights">Insights</a></li>
              <li><a href="/fr/durabilite">Durabilité</a></li>
              <li><a href="/fr/contact">Contact</a></li>
            </ul>
          </div>
          <div className="mf-footer-col">
            <h6>Solutions</h6>
            <ul>
              <li><a href="/fr/solutions/odm-developpement">ODM et développement</a></li>
              <li><a href="/fr/solutions/echantillonnage">Échantillonnage</a></li>
              <li><a href="/fr/solutions/sourcing-tissus">Sourcing tissus</a></li>
              <li><a href="/fr/solutions/production-petite-serie">Production en petite série</a></li>
              <li><a href="/fr/solutions/qualite-conformite">Qualité et conformité</a></li>
            </ul>
          </div>
          <div className="mf-footer-col">
            <h6>Réseau</h6>
            <ul>
              <li><a href="/fr/notre-reseau">Tous les pays</a></li>
              <li><a href="/fr/notre-reseau/chine">Chine</a></li>
              <li><a href="/fr/notre-reseau/turquie">Turquie</a></li>
              <li><a href="/fr/notre-reseau/vietnam">Vietnam</a></li>
              <li><a href="/fr/notre-reseau/inde">Inde</a></li>
              <li><a href="/fr/notre-reseau/hong-kong">Hong Kong (siège)</a></li>
            </ul>
          </div>
          <div className="mf-footer-col">
            <h6>Contact</h6>
            <ul>
              <li>Unit 2102, 21/F., Golden Centre<br />188 Des Voeux Road Central<br />Hong Kong</li>
              <li><a href="mailto:jordan@market-fit.com">jordan@market-fit.com</a></li>
              <li><a href="mailto:CVApply@market-fit.com">CVApply@market-fit.com</a></li>
              <li style={{ marginTop: 16 }}><a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Icon.Linkedin size={16} /> LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="mf-footer-bottom">
          <div>© 1974–2026 Market Fit Group Ltd.</div>
          <div style={{ display: 'flex', gap: 18, opacity: 0.6 }}>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>GRS 4.0</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>SMETA</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>amfori BSCI</span>
          </div>
          <div className="mf-footer-legal">
            <a href="#">Confidentialité</a>
            <a href="#">Conditions</a>
            <span className="mf-footer-lang" data-mf-lang-switch="footer" style={{ marginLeft: 18 }}></span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============ APP ============
function App() {
  const ref = useReveal();
  return (
    <div ref={ref}>
      <Nav />
      <Hero />
      <Credentials />
      <Brands />
      <Programmes />
      <Solutions />
      <Network />
      <Compliance />
      <Story />
      <Contact />
      <Footer />
    </div>
  );
}

Object.assign(window, { App, Nav, Footer, Breadcrumbs, Faq, RelatedLinks, Icon });