/* global React, Nav, Footer, Breadcrumbs, Icon */
const { useState: usePg, useEffect: useEffPg, useRef: useRefPg } = React;

// ============ REVEAL ============
function usePgReveal() {
  const ref = useRefPg(null);
  useEffPg(() => {
    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('.pg-reveal').forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

// ============ HERO ============
function PgHero({ size, eyebrow, headline, headlineEm, sub, img, imgAlt, mod }) {
  const cls = 'pg-hero pg-hero--' + (size || 'lg') + (mod ? ' pg-hero--' + mod : '');
  return (
    <section className={cls}>
      {img ? (
        <React.Fragment>
          <div className="pg-hero-img"><img src={img} alt={imgAlt || ''} width="2400" height="1600" loading="eager" fetchpriority="high" decoding="async" /></div>
          <div className="pg-hero-veil" />
          <div className="pg-hero-grain" />
        </React.Fragment>
      ) : null}
      <div className="pg-hero-content">
        {eyebrow ? <div className="pg-hero-eyebrow pg-reveal">{eyebrow}</div> : null}
        <h1 className="pg-hero-h1 pg-reveal" style={{ transitionDelay: '60ms' }}>
          {headline}{headlineEm ? <React.Fragment> <em>{headlineEm}</em></React.Fragment> : null}
        </h1>
        {sub ? <p className="pg-hero-sub pg-reveal" style={{ transitionDelay: '120ms' }}>{sub}</p> : null}
      </div>
    </section>
  );
}

function PgLead({ eyebrow, text, links }) {
  return (
    <section className="pg-lead">
      <div className="pg-lead-inner">
        <div className="pg-lead-eyebrow">{eyebrow || 'Lead'}</div>
        <p className="pg-lead-text pg-reveal">{text}</p>
        {links ? <p className="pg-lead-links pg-reveal">{links}</p> : null}
      </div>
    </section>
  );
}

function PgCta({ headline, headlineEm, sub, ctaLabel, ctaHref }) {
  return (
    <section className="pg-cta">
      <h2 className="pg-cta-h pg-reveal">
        {headline}{headlineEm ? <React.Fragment> <em>{headlineEm}</em></React.Fragment> : null}
      </h2>
      {sub ? <p className="pg-cta-sub pg-reveal">{sub}</p> : null}
      <a href={ctaHref} className="mf-btn-p pg-reveal">{ctaLabel} <Icon.ArrowRight /></a>
    </section>
  );
}

// ============================================================
// 1. SOLUTIONS HUB
// ============================================================
const HUB_CARDS = [
  { num: '01 / 05', name: 'ODM et développement design',
    desc: 'Du croquis au vêtement prêt pour la production. Équipes design et techniques en interne qui pilotent les programmes de développement pour les marques de mode contemporaine à travers le réseau.',
    stats: [['50', 'Styles en développement actif par mois'], ['En interne', 'Équipes design et techniques'], ['Complet', 'Livraison du tech pack']],
    href: '/fr/solutions/odm-developpement', img: '/assets/images/img-06.png' },
  { num: '02 / 05', name: 'Échantillonnage',
    desc: 'Sept jours du brief validé à l\'échantillon sur votre bureau. Notre atelier d\'échantillonnage en propre traite 500 styles par mois. Ce que vous briefez le lundi arrive sur votre bureau le lundi suivant.',
    stats: [['7 jours', 'Délai standard'], ['500 / mois', 'Capacité d\'échantillonnage'], ['2 gratuites', 'Révisions incluses']],
    href: '/fr/solutions/echantillonnage', img: '/assets/images/img-24.jpg' },
  { num: '03 / 05', name: 'Sourcing tissus et accessoires',
    desc: 'Entrepôt en propre à Shaoxing, plus un réseau approuvé de filatures et fournisseurs d\'accessoires sur l\'empreinte des sept pays. Nous intégrons tissus et accessoires dans votre collection sans compromis.',
    stats: [['En propre', 'Entrepôt de Shaoxing'], ['200+', 'Filatures partenaires approuvées'], ['GRS', 'Chaîne de traçabilité']],
    href: '/fr/solutions/sourcing-tissus', img: '/assets/images/img-17.png' },
  { num: '04 / 05', name: 'Production en petites séries',
    desc: 'Cinq cents pièces. Même qualité que cinq mille. Notre quantité minimum de commande est de 500 pièces par style. Le même standard qualité audité par les grands distributeurs européens.',
    stats: [['Dès 500', 'Pièces par style'], ['30–60 jours', 'Délai de production'], ['Complète', 'Capacité du réseau']],
    href: '/fr/solutions/production-petite-serie', img: '/assets/images/img-21.png' },
  { num: '05 / 05', name: 'Qualité et conformité',
    desc: "Dix standards d'audit à travers le réseau. amfori BSCI, Higg FSLM, Higg FEM, ISO 14001, GRS, OEKO-TEX, Textile Genesis, SMETA, auto-évaluation trimestrielle et audits distributeurs propriétaires.",
    stats: [['10', "Standards d'audit détenus"], ['8 actifs', 'À notre usine du Vietnam'], ['Sur demande', 'Rapports pour acheteurs vérifiés']],
    href: '/fr/solutions/qualite-conformite', img: '/assets/images/img-04.png' },
];

function HubCards() {
  return (
    <section className="pg-section pg-section--paper" style={{ padding: 0 }}>
      <div className="hub-cards">
        {HUB_CARDS.map((c, i) => (
          <div className="hub-card pg-reveal" key={i}>
            <div className="hub-card-img">
              <img src={c.img} alt={c.name + ' — Market Fit Group'} width="1200" height="960" loading="lazy" decoding="async" />
            </div>
            <div className="hub-card-body">
              <div className="hub-card-num">{c.num}</div>
              <h3 className="hub-card-h">{c.name}</h3>
              <p className="hub-card-desc">{c.desc}</p>
              <div className="hub-card-stats">
                {c.stats.map(([v, l], j) => (
                  <div key={j}>
                    <div className="hub-card-stat-v">{v}</div>
                    <div className="hub-card-stat-l">{l}</div>
                  </div>
                ))}
              </div>
              <a className="hub-card-link" href={c.href}>Voir la capacité <Icon.ArrowRight size={14} /></a>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HubFlow() {
  const steps = [
    ['01', 'Brief'],
    ['02', 'Échantillon'],
    ['03', 'Tissus & accessoires'],
    ['04', 'Production'],
    ['05', 'Qualité & expédition'],
  ];
  return (
    <section className="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Comment cela s'articule</div>
        <h2 className="pg-h2 pg-reveal">Un réseau. Un responsable de programme. <em>Un partenaire responsable.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '52ch' }}>
          La plupart des partenariats de sourcing se fragmentent entre fournisseurs. Nos cinq capacités fonctionnent comme un seul programme, conduit par une seule équipe responsable. Les mêmes personnes qui cadrent le brief échantillonnent vos styles, sourcent votre tissu, auditent vos usines et expédient votre production.
        </p>
        <div className="hub-flow pg-reveal">
          {steps.map(([n, t], i) => (
            <div className="hub-flow-step" key={i}>
              <span className="hub-flow-num">{n}</span>
              <div className="hub-flow-t">{t}</div>
              <div className="hub-flow-arrow" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HubWhere() {
  return (
    <section className="pg-section pg-section--paper">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Où cela se passe</div>
        <h2 className="pg-h2 pg-reveal">À travers notre <em>réseau de 7 pays.</em></h2>
        <div className="pg-where pg-reveal">
          <div className="pg-where-stats">
            <div><div className="pg-where-stat-v">7</div><div className="pg-where-stat-l">Pays de sourcing</div></div>
            <div><div className="pg-where-stat-v">13</div><div className="pg-where-stat-l">Bureaux et usines</div></div>
            <div><div className="pg-where-stat-v">2</div><div className="pg-where-stat-l">Ateliers de production en propre</div></div>
            <div><div className="pg-where-stat-v">52</div><div className="pg-where-stat-l">Années en propriété familiale</div></div>
          </div>
          <div>
            <p className="pg-body" style={{ marginBottom: 'var(--s-5)', maxWidth: '40ch' }}>
              La production passe par Hong Kong, la Chine, le Vietnam, le Bangladesh, le Pakistan, l'Inde et la Turquie. Chaque pays spécialisé par catégorie. Chaque bureau doté de merchandisers, équipes techniques et qualité.
            </p>
            <a href="/fr/notre-reseau" className="hub-card-link">Voir le réseau <Icon.ArrowRight size={14} /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function SolutionsHubApp() {
  const ref = usePgReveal();
  const trail = [{ label: 'Accueil', href: '/fr' }, { label: 'Solutions' }];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="xl" eyebrow="Solutions"
        headline="Cinq capacités," headlineEm="un partenaire responsable."
        sub="ODM et développement design, échantillonnage, sourcing tissus et accessoires, production en petites séries, qualité et conformité. Chaque capacité portée par une équipe spécialiste. Un seul nom sur chaque e-mail."
        img="/assets/images/img-25.jpg" />
      <PgLead eyebrow="Ce que nous faisons"
        text="Market Fit opère cinq capacités intégrées pour les marques de mode contemporaine : ODM et développement design, échantillonnage, sourcing tissus et accessoires, production en petites séries, qualité et conformité. Chaque capacité est portée par une équipe spécialiste au sein du réseau, avec une responsabilité unique sur l’ensemble du programme, du premier croquis au vêtement fini." />
      <HubCards />
      <HubFlow />
      <HubWhere />
      <PgCta headline="Dites-nous ce que" headlineEm="vous construisez."
        sub="Nous répondons sous 24 heures pour échanger sur l’adéquation, la capacité et le calendrier."
        ctaLabel="Engager la conversation" ctaHref="/fr/contact" />
      <Footer />
    </div>
  );
}

// ============================================================
// 2. SUSTAINABILITY
// ============================================================
// REVIEW-REQ : copie à valider par un locuteur natif.
function SustMarks() {
  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="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Les marques que nous détenons</div>
        <h2 className="pg-h2 pg-reveal">Les standards derrière <em>chaque rapport d'audit.</em></h2>
        <div className="mf-certs" style={{ marginTop: 'var(--s-7)' }}>
          {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>
      </div>
    </section>
  );
}

function SustNumbers() {
  const nums = [
    { v: '90 %',    l: "Énergie renouvelable à Tien Giang aujourd'hui" },
    { v: 'T1 2027', l: 'Objectif net zéro à notre usine du Vietnam' },
    { v: '10',      l: "Standards d'audit détenus à travers le réseau" },
    { v: '52',      l: 'Années de propriété familiale ininterrompue' },
  ];
  return (
    <section className="pg-section pg-section--paper">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">En chiffres</div>
        <h2 className="pg-h2 pg-reveal">Le travail, <em>mesuré.</em></h2>
        <div className="pg-numbers-grid pg-reveal" style={{ marginTop: 'var(--s-7)' }}>
          {nums.map((n, i) => (
            <div key={i} className="pg-number">
              <div className="pg-number-value">{n.v}</div>
              <div className="pg-number-label">{n.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SustCerts() {
  const vnStandards = ['amfori BSCI', 'Higg FSLM', 'Higg FEM', 'ISO 14001', 'GRS', 'OEKO-TEX', 'Textile Genesis', 'Auto-évaluation trimestrielle'];
  const cnStandards = ['SMETA', 'GRS', 'amfori BSCI', 'Audits distributeurs propriétaires'];
  return (
    <section className="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Couverture par site</div>
        <h2 className="pg-h2 pg-reveal">Sites différents, <em>combinaisons différentes.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          Les standards détenus aujourd'hui par chaque site. Les rapports d'audit correspondants sont disponibles aux acheteurs vérifiés sur demande.
        </p>
        <div className="pg-sites-grid pg-reveal" style={{ marginTop: 'var(--s-7)' }}>
          <div className="pg-site-card">
            <div className="pg-site-eye">Vietnam · Tien Giang</div>
            <h3 className="pg-site-title">Usine en propre</h3>
            <p className="pg-site-desc">Huit standards d'audit actifs sur le social, l'environnemental et la traçabilité matière. Quatre-vingt-dix pour cent d'énergie renouvelable aujourd'hui, net zéro pour le premier trimestre 2027.</p>
            <ul className="pg-cert-list">
              {vnStandards.map((s) => <li key={s}>{s}</li>)}
            </ul>
          </div>
          <div className="pg-site-card">
            <div className="pg-site-eye">Chine · Réseau</div>
            <h3 className="pg-site-title">Cinq usines spécialistes</h3>
            <p className="pg-site-desc">Suzhou Mupai détient SMETA, GRS, amfori BSCI et les audits distributeurs propriétaires. La couverture pour les quatre autres usines Chine est en cours de confirmation et apparaîtra ici dès la livraison des données.</p>
            <ul className="pg-cert-list">
              {cnStandards.map((s) => <li key={s}>{s}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function SustMaterial() {
  const cols = [
    { h: 'Matériaux certifiés GRS',
      p: 'Coton recyclé, polyester, mélanges. Documentation complète de chaîne de traçabilité pour les allégations consommateurs.' },
    { h: 'Programmes tissus à moindre impact',
      p: 'Coton biologique, Tencel, cachemire recyclé. Sourcés auprès de filatures certifiées.' },
    { h: 'Programmes deadstock et chutes',
      p: 'Capsules en édition limitée construites autour des stocks dormants des filatures. Réduit les déchets, ouvre des gammes de tissus autrement indisponibles en faible MOQ.' },
  ];
  return (
    <section className="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Innovation matériaux</div>
        <h2 className="pg-h2 pg-reveal">Le tissu est là où <em>la durabilité se joue.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          L’essentiel de l’impact environnemental d’un vêtement fini se loge dans le tissu, pas dans l’assemblage. Posséder l’opération de sourcing tissus à Shaoxing nous permet de prendre des décisions matières alignées avec les engagements durabilité d’une marque, documentation de chaîne de traçabilité à l’appui.
        </p>
        <div className="pg-cards-3">
          {cols.map((c, i) => (
            <div className="pg-card pg-reveal" key={i} style={{ transitionDelay: (i * 80) + 'ms' }}>
              <h4>{c.h}</h4>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SustDPP() {
  const ts = [
    ['2026', 'Préparation du DPP. Déclarations volontaires et programmes pilotes sur le marché textile UE.'],
    ['2027', 'Les premières catégories de produits entrent dans le dispositif. Les marques pionnières transmettent leurs données.'],
    ['2028', 'Couverture étendue des catégories. Documentation requise pour les référencements en distribution.'],
    ['2029', 'Application large sur les catégories textiles. Exigences acheteurs alignées sur la réglementation.'],
    ['2030', 'Régime DPP pleinement en vigueur. La traçabilité de bout en bout devient la norme.'],
  ];
  return (
    <section className="pg-section pg-section--paper">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Traçabilité</div>
        <h2 className="pg-h2 pg-reveal">Conçu pour le <em>Passeport Numérique de Produit (DPP) de l’UE.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          Les exigences du Passeport Numérique de Produit (DPP) de l’UE entrent progressivement en vigueur à partir de 2027 pour les produits textiles vendus dans l’UE. Les marques ont besoin de données : composition matière, pays d’origine, site de fabrication, allégations de durabilité, durabilité, instructions de réparation. La documentation de chaîne de traçabilité tissu, l’historique d’audits usines et les certifications matières existants chez Market Fit constituent la base de données pour la conformité DPP.
        </p>
        <div className="pg-timeline pg-reveal">
          {ts.map(([y, d], i) => (
            <div className="pg-timeline-step" key={i}>
              <div className="pg-timeline-y">{y}</div>
              <div className="pg-timeline-d">{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SustFamily() {
  return (
    <section className="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Entreprise familiale, cinquante-deux ans</div>
        <h2 className="pg-h2 pg-reveal">Une propriété qui ne <em>change pas chaque trimestre.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          La plupart des engagements de durabilité ne survivent pas à un changement de DG ou à un actionnariat de private equity. Market Fit est en propriété familiale ininterrompue depuis 1974. La même famille qui a engagé des relations long-terme avec les usines dans les années 1980 prend les décisions durabilité aujourd’hui. Croissance prudente, pas d’investissement extérieur, décisions prises par des personnes qui portent le nom.
        </p>
        <a href="/fr/a-propos" className="hub-card-link pg-reveal" style={{ marginTop: 'var(--s-5)' }}>
          Lire l’histoire de la famille <Icon.ArrowRight size={14} />
        </a>
      </div>
    </section>
  );
}

function SustainabilityApp() {
  const ref = usePgReveal();
  const trail = [{ label: 'Accueil', href: '/fr' }, { label: 'Durabilité' }];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="md" eyebrow="Durabilité"
        headline="La conformité n’est pas négociable." headlineEm="La durabilité, c’est le travail."
        sub="Certifications auditées sur tout le réseau. Innovation matériaux par la maîtrise de la chaîne tissu. Éthique d’entreprise familiale appliquée depuis cinquante-deux ans."
        img="/assets/images/img-09.png" />
      <PgLead eyebrow="Notre position"
        text="Dix standards d'audit à travers le réseau. Notre usine en propre au Vietnam, à Tien Giang, en détient huit actifs ; les autres sont portés par nos usines partenaires en Chine. La répartition complète par site est ci-dessous, accompagnée des engagements concrets qui la sous-tendent."
        links={<>La conformité passe par <a href="/fr/solutions/qualite-conformite">notre programme qualité</a> et s'appuie sur les données venant de <a href="/fr/solutions/sourcing-tissus">notre entrepôt tissus en propre</a>, avec une couverture d'audit sur <a href="/fr/notre-reseau">les sept pays</a> du réseau. <a href="/fr/a-propos">Lisez comment l’approche d’entreprise familiale</a> a façonné tout cela.</>} />
      <SustMarks />
      <SustNumbers />
      <SustCerts />
      <SustMaterial />
      <SustDPP />
      <SustFamily />
      <PgCta headline="Besoin de vérifier" headlineEm="notre conformité ?"
        sub="Les rapports d’audit sont disponibles pour les acheteurs vérifiés sur demande. Parlez-nous de votre programme et de la documentation dont vous avez besoin."
        ctaLabel="Demander l’accès aux audits" ctaHref="/fr/contact" />
      <Footer />
    </div>
  );
}

// ============================================================
// 3. INSIGHTS INDEX
// ============================================================
const INS_CATS = ['Tout', 'Stratégie de sourcing', 'Conformité & durabilité', 'Tissu & accessoires', 'Guides pays', 'Opérationnel'];

// IMPORTANT: Keep this in sync with INS_POSTS in pages.jsx and IP_POSTS in
// insights-data.jsx. Same 6 posts, slightly different shapes.
// Production refactor: unify into a single source of truth.
const INS_POSTS = [
  { slug: 'oem-vs-odm', file: '/fr/insights/oem-vs-odm-fabrication-mode',
    cat: 'Stratégie de sourcing',
    title: "OEM vs ODM en fabrication de mode : quelle différence ?",
    excerpt: "OEM et ODM sont les deux principaux modèles de fabrication mode. Ce guide explique la différence et quand chaque modèle convient.",
    author: 'Hugo Dupont', date: '25 avr. 2026', read: '8 min de lecture',
    img: '/assets/photography/cad-room-mannequin.jpg' },
  { slug: 'moq-explained', file: '/fr/insights/guide-quantite-minimum-commande-mode',
    cat: 'Opérationnel',
    title: 'La quantité minimum de commande (MOQ) expliquée : un guide pour marques de mode',
    excerpt: 'Comment fonctionnent vraiment les MOQ, pourquoi elles varient selon le tissu et la catégorie, et ce que les marques contemporaines peuvent négocier en petites séries.',
    author: 'Rédaction Market Fit', date: '18 avr. 2026', read: '7 min de lecture',
    img: '/assets/photography/sewing-room-wide.jpg' },
  { slug: 'china-plus-one', file: '/fr/insights/strategie-china-plus-one-2026',
    cat: 'Guides pays',
    title: 'China plus one : pourquoi diversifier votre chaîne d’approvisionnement habillement en 2026',
    excerpt: "Pourquoi les marques contemporaines ajoutent un second pays à une chaîne d'approvisionnement pilotée depuis la Chine, et comment l'exécuter concrètement.",
    author: 'Hugo Dupont', date: '10 avr. 2026', read: '10 min de lecture',
    img: '/assets/photography/showroom-overview.jpg' },
  { slug: 'reading-smeta', file: '/fr/insights/guide-rapport-audit-smeta',
    cat: 'Conformité & durabilité',
    title: 'Comment lire un rapport d’audit SMETA (et ce qu’il faut y chercher)',
    excerpt: "Un guide en langage clair des audits SMETA : les quatre piliers, comment lire un rapport, et les signaux d'alerte qui comptent.",
    author: 'Rédaction Market Fit', date: '04 avr. 2026', read: '9 min de lecture',
    img: '/assets/photography/cad-room-mannequin.jpg' },
  { slug: 'grs-explained', file: '/fr/insights/vetements-certifies-grs-explication',
    cat: 'Conformité & durabilité',
    title: 'Vêtement certifié GRS : ce que les marques doivent savoir sur le Global Recycled Standard',
    excerpt: 'Ce que la certification GRS atteste réellement, le fonctionnement de la chaîne de traçabilité, et comment formuler une revendication de contenu recyclé crédible sur un produit fini.',
    author: 'Rédaction Market Fit', date: '28 mars 2026', read: '8 min de lecture',
    img: '/assets/certifications/global-recycled-standard.jpg' },
  { slug: 'sourcing-2026-guide', file: '/fr/insights/guide-sourcing-mode-contemporaine-2026',
    cat: 'Stratégie de sourcing',
    title: 'Sourcing pour les marques de mode contemporaine : guide 2026',
    excerpt: 'Le guide sourcing 2026 pour marques contemporaines : volumes, prix, mix pays et réalités opérationnelles.',
    author: 'Hugo Dupont', date: '21 mars 2026', read: '12 min de lecture',
    img: '/assets/photography/pantone-swatches.jpg' },
];

function InsFeatured({ post }) {
  return (
    <div className="ins-featured">
      <div className="ins-featured-img"><a href={post.file}><img src={post.img} alt="" width="1600" height="960" loading="eager" fetchpriority="high" decoding="async" /></a></div>
      <div>
        <div className="ins-featured-eyebrow">Dernier · {post.cat}</div>
        <h2 className="ins-featured-h"><a href={post.file} style={{ color: 'inherit', textDecoration: 'none' }}>{post.title}</a></h2>
        <div className="ins-featured-meta">{post.author} · {post.date} · {post.read}</div>
        <p className="pg-body" style={{ maxWidth: '44ch' }}>{post.excerpt}</p>
        <a href={post.file} className="hub-card-link" style={{ marginTop: 'var(--s-3)', display: 'inline-block' }}>Lire l’article →</a>
      </div>
    </div>
  );
}

function InsightsApp() {
  const ref = usePgReveal();
  const [cat, setCat] = usePg('Tout');
  const trail = [{ label: 'Accueil', href: '/fr' }, { label: 'Insights' }];
  const filtered = cat === 'Tout' ? INS_POSTS : INS_POSTS.filter((p) => p.cat === cat);
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="md" mod="insights" eyebrow="Insights"
        headline="Sourcing, fabrication" headlineEm="et le travail derrière un vêtement fini."
        sub="Guides pays par pays, analyses approfondies des certifications, tendances tissus et accessoires, et réalités opérationnelles du travail avec les marques contemporaines premium en petites séries."
        img="/assets/insights/hero-insights.jpg"
        imgAlt="Mains en train de coudre à la main un vêtement en lin écru inachevé sur un plan de travail, avec règle en bois, bobine de fil et échantillons de tissu" />
      <PgLead eyebrow="L’éditorial"
        text="Le pôle Insights publie des perspectives long format rédigées par les personnes qui font tourner le réseau. Stratégie de sourcing pratique, explications de certifications en langage clair, tendances tissus et guides pays couvrant chaque marché de notre empreinte. Rédigés par l’équipe Market Fit pour les marques de mode qui construisent des collections contemporaines."
        links={<>Les articles s’appuient sur des programmes réels qui passent par <a href="/fr/notre-reseau">notre réseau de sept pays</a> et les cinq capacités — <a href="/fr/solutions/odm-developpement">ODM</a>, <a href="/fr/solutions/echantillonnage">échantillonnage</a>, <a href="/fr/solutions/sourcing-tissus">tissus</a>, <a href="/fr/solutions/production-petite-serie">production</a> et <a href="/fr/solutions/qualite-conformite">qualité</a>. Abonnez-vous en bas de page, ou <a href="/fr/contact">contactez la rédaction</a> pour suggérer un sujet.</>} />

      <section className="pg-section pg-section--paper" style={{ paddingTop: 0 }}>
        <div className="pg-container">
          <InsFeatured post={INS_POSTS[5]} />
          <div className="ins-controls">
            {INS_CATS.map((c) => (
              <button key={c} className={'ins-cat ' + (cat === c ? 'active' : '')} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <div className="ins-grid">
            {filtered.map((p, i) => (
              <article className="ins-card pg-reveal" key={p.slug} style={{ transitionDelay: (i * 50) + 'ms' }}>
                <div className="ins-card-img"><a href={p.file}><img src={p.img} alt="" width="800" height="600" loading="lazy" decoding="async" /></a></div>
                <div className="ins-card-eyebrow">{p.cat}</div>
                <h3 className="ins-card-h"><a href={p.file}>{p.title}</a></h3>
                <p className="ins-card-excerpt">{p.excerpt}</p>
                <div className="ins-card-meta">{p.author} · {p.date} · {p.read}</div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="pg-newsletter">
        <div className="pg-container">
          <div>
            <h2 className="pg-news-h">Des insights livrés <em>chaque mois.</em></h2>
            <p className="pg-news-p">Un e-mail par mois. Les derniers articles, plus une sélection de lectures de l'industrie. Pas de spam.</p>
          </div>
          <form className="pg-news-form" onSubmit={(e) => { e.preventDefault(); }}>
            <input type="email" placeholder="votre@email" aria-label="Adresse e-mail" />
            <button type="submit">S'abonner</button>
            <p className="pg-news-privacy">Nous respectons votre boîte de réception. Désabonnement à tout moment.</p>
          </form>
        </div>
      </section>

      <Footer />
    </div>
  );
}

// ============================================================
// 4. CONTACT
// ============================================================
// REVIEW-REQ : traduction à valider par un locuteur natif avant mise en ligne.
const CONTACT_ROUTES = {
  vietnam: {
    label: 'Production Vietnam',
    contact: 'Jordan',
    email: 'jordan@market-fit.com',
    blurb: "La production Vietnam tourne sur deux sites. Jordan tient la lecture pour les deux. Envoyez un tech-pack, un échantillon chiffré revient en sept jours.",
    addresses: [
      { eye: 'Bureau et design', lines: ['6th Floor, 14 Phan Ton Street, Da Kao Ward, District 1', 'Hô-Chi-Minh-Ville, Vietnam'] },
      { eye: 'Usine et entrepôt', lines: ['No. 341, Street 30, Quang Tho Hamlet, Tan Thuan Binh Commune, Cho Gao District', 'Province de Tien Giang, Vietnam'] },
    ],
    cta: 'Écrire à Jordan',
  },
  china: {
    label: 'Production Chine',
    contact: 'Tony',
    email: 'tony@market-fit.com',
    blurb: "La production Chine est animée depuis le bureau de Shanghai, avec cinq usines spécialistes en dessous. Tony tient le pays directement.",
    addresses: [
      { eye: 'Bureau sourcing Shanghai', lines: ['Floor 2, Building 8, Qian Yu Creative Park, No 153 Jumen Road', 'Huangpu District, Shanghai 200023, Chine'] },
    ],
    cta: 'Écrire à Tony',
  },
  general: {
    label: 'Demande générale',
    contact: 'Jordan',
    email: 'jordan@market-fit.com',
    blurb: "Pas sûr du pays, ou autre sujet. Jordan prend en premier et oriente derrière.",
    addresses: [
      { eye: 'Siège du groupe', lines: ['Unit 2102, 21/F., Golden Centre, 188 Des Voeux Road Central', 'Hong Kong'] },
    ],
    cta: 'Écrire à Jordan',
  },
};

function ContactRouter() {
  const { useState: useStateRouter, useEffect: useEffectRouter } = React;
  const [route, setRoute] = useStateRouter(null);
  useEffectRouter(() => {
    try {
      const q = new URLSearchParams(window.location.search).get('route');
      if (q && CONTACT_ROUTES[q]) setRoute(q);
    } catch (_) { /* noop */ }
  }, []);
  return (
    <section className="pg-contact-router">
      <div className="pg-container">
        <div className="pg-router-choices pg-reveal">
          {Object.entries(CONTACT_ROUTES).map(([key, r]) => (
            <button
              key={key}
              type="button"
              className={'pg-router-choice' + (route === key ? ' is-active' : '')}
              onClick={() => setRoute(key)}
              aria-pressed={route === key}
            >
              <span className="pg-router-choice-num">{String(Object.keys(CONTACT_ROUTES).indexOf(key) + 1).padStart(2, '0')}</span>
              <span className="pg-router-choice-label">{r.label}</span>
            </button>
          ))}
        </div>

        {route && (
          <div className="pg-router-card" key={route}>
            <p className="pg-router-blurb">{CONTACT_ROUTES[route].blurb}</p>
            <div className="pg-router-line">
              <strong>{CONTACT_ROUTES[route].contact}</strong>
              <span aria-hidden="true"> · </span>
              <a href={`mailto:${CONTACT_ROUTES[route].email}`}>{CONTACT_ROUTES[route].email}</a>
            </div>
            <div className="pg-router-addresses">
              {CONTACT_ROUTES[route].addresses.map((a, i) => (
                <div key={i} className="pg-router-address">
                  <div className="pg-router-address-eye">{a.eye}</div>
                  {a.lines.map((line, li) => <div key={li} className="pg-router-address-line">{line}</div>)}
                </div>
              ))}
            </div>
            <a className="pg-router-cta" href={`mailto:${CONTACT_ROUTES[route].email}`}>
              {CONTACT_ROUTES[route].cta} <Icon.ArrowRight size={14} />
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

function ContactApp() {
  const ref = usePgReveal();
  const trail = [{ label: 'Accueil', href: '/fr' }, { label: 'Contact' }];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="sm" eyebrow="Contact"
        headline="Choisissez l'atelier" headlineEm="qui correspond à votre brief."
        sub="Trois lignes directes. Vietnam, Chine, ou demande générale. Quel que soit votre choix, vous tombez sur une vraie personne qui gère ce volet de l'activité. Pas de formulaire, pas de chatbot, pas de boîte partagée." />

      <ContactRouter />

      <Footer />
    </div>
  );
}

// ============================================================
// 5. CAREERS
// ============================================================
function CareersApp() {
  const ref = usePgReveal();
  const trail = [{ label: 'Accueil', href: '/fr' }, { label: 'Carrières' }];
  const cols = [
    { h: 'Expérience du secteur',
      p: 'La plupart de nos postes bénéficient d\'une expérience préalable dans la mode. Nous recrutons à tous les niveaux, mais ne sommes pas un programme de formation.' },
    { h: 'Flexibilité géographique',
      p: 'Notre réseau s\'étend sur 7 pays. Certains postes sont rattachés à un bureau précis ; d\'autres se déploient à travers le réseau. Soyez clair sur ce que vous recherchez.' },
    { h: 'Vision long terme',
      p: 'Nous sommes une entreprise familiale. Nous prenons des décisions pour la décennie à venir, pas le prochain trimestre. Nous recrutons des personnes qui pensent de la même façon.' },
  ];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="md" eyebrow="Carrières"
        headline="Construisez une chaîne d'approvisionnement mode" headlineEm="qui dure."
        sub="Nous recrutons à travers notre réseau de 7 pays de sourcing. Anciennetés longues. Vraie autonomie. Au rythme d'une entreprise familiale."
        img="/assets/images/img-12.png" />
      <PgLead eyebrow="Notre façon de recruter"
        text="Market Fit recrute dans le design, le merchandising, la technique, la qualité, le sourcing et les opérations à travers notre réseau de 7 pays de sourcing. La majorité de notre équipe senior est dans la maison depuis plus d'une décennie. Nous ne grandissons pas pour grandir. Nous recrutons quand nous avons le bon poste pour quelqu'un — et nous le gardons." />

      <section className="pg-section pg-section--paper">
        <div className="pg-container">
          <div className="pg-eyebrow pg-reveal">Ce que nous recherchons</div>
          <h2 className="pg-h2 pg-reveal">Des personnes qui se soucient <em>du travail.</em></h2>
          <div className="pg-cards-3">
            {cols.map((c, i) => (
              <div className="pg-card pg-reveal" key={i} style={{ transitionDelay: (i * 80) + 'ms' }}>
                <h4>{c.h}</h4>
                <p>{c.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="pg-section pg-section--warm">
        <div className="pg-container">
          <div className="pg-eyebrow pg-reveal">Postes ouverts</div>
          <h2 className="pg-h3 pg-reveal">Les postes pour lesquels <em>nous recrutons.</em></h2>
          <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
            Nous ne diffusons pas de postes spécifiques publiquement pour le moment. La meilleure approche : envoyez-nous votre CV avec une note précisant le bureau qui vous intéresse et ce que vous recherchez. Nous répondons à chaque candidature.
          </p>
        </div>
      </section>

      <section className="pg-section pg-section--paper">
        <div className="pg-container">
          <h2 className="pg-h2 pg-reveal">Comment <em>nous joindre.</em></h2>
          <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
            Envoyez votre CV et une brève lettre de motivation à l'adresse ci-dessous. Précisez le bureau qui vous intéresse (ou « ouvert » si vous êtes flexible) et quelques lignes sur ce que vous recherchez. Nous répondons dans les deux semaines.
          </p>
          <div className="pg-mailto-callout pg-reveal">
            <div className="pg-card-eyebrow" style={{ marginBottom: 0 }}>Postuler</div>
            <a href="mailto:CVApply@market-fit.com">CVApply@market-fit.com</a>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}

Object.assign(window, {
  SolutionsHubApp, SustainabilityApp, InsightsApp, ContactApp, CareersApp,
});