/* global React */
/* solutions.jsx — shared components + data for the 5 Solutions sub-pages.
   Each page's HTML loads this file and renders <SolutionApp slug="odm" /> etc. */

const { useEffect: useEffectSol, useRef: useRefSol } = React;

// ============ DATA ============
const SOLUTIONS_INDEX = [
  { slug: 'odm',        num: '01', name: 'ODM & Development',     file: '/fr/solutions/odm-developpement' },
  { slug: 'sampling',   num: '02', name: 'Sampling',              file: '/fr/solutions/echantillonnage' },
  { slug: 'fabric',     num: '03', name: 'Fabric & Trim',         file: '/fr/solutions/sourcing-tissus' },
  { slug: 'production', num: '04', name: 'Small-batch Production',file: '/fr/solutions/production-petite-serie' },
  { slug: 'quality',    num: '05', name: 'Quality & Compliance',  file: '/fr/solutions/qualite-conformite' },
];

const FACTORIES = {
  'mf-suzhou':  { name: 'Market Fit Suzhou',    eye: 'Suzhou, China · Owned since 2024', spec: 'Internal production and factory inspection.', img: '/assets/photography/cad-room-mannequin.jpg' },
  'tongxiang':  { name: 'Tongxiang Yinshi',     eye: 'Tongxiang, China · Since 1997',     spec: 'Dresses, blouses, tops. Light-woven specialist.', img: '/assets/photography/hand-finishing-green-blouse.jpg' },
  'mupai':      { name: 'Suzhou Mupai',         eye: 'Suzhou, China · Since 1997',        spec: 'Outerwear specialist. Padded and tailored coats.', img: '/assets/photography/sewing-room-wide.jpg' },
  'suho':       { name: 'Suho Fashion Nanjing', eye: 'Nanjing, China · Since 1994',       spec: 'Suits, coats, shirts, workwear, casual.', img: '/assets/photography/seamstress-jack-machine.jpg' },
  'hubei':      { name: 'Hubei facility',       eye: 'Hubei, China · Since 2011',         spec: 'Light-woven capacity for higher-volume programs.', img: '/assets/photography/cad-digital-cutter.jpg' },
};

const SOLUTIONS = {
  // -------- 01 ODM --------
  odm: {
    num: '01',
    name: 'ODM & Development',
    hero: {
      headline: 'From sketch to', headlineEm: 'production-ready garment.',
      sub: "Market Fit's in-house design and technical teams take your concept from first reference to a finished tech pack ready for sampling. Forty years of muscle memory, applied to your collection.",
      img: '/assets/images/img-06.png',
    },
    anchor: { num: '50+', label: 'Styles in active development each month',
      ctx: 'Our development teams in Shanghai and Suzhou run multiple programs in parallel. Most clients have between three and twelve styles in active development at any one time.' },
    what: {
      eyebrow: 'What it is',
      h: 'More than', hEm: 'pattern-cutting.',
      paras: [
        "ODM stands for Original Design Manufacturing. As an ODM partner, we don't just take your tech pack and make it. We start earlier — at concept, mood, fabric direction, silhouette — and bring you a finished, production-ready garment that's ready to sample. Forty years of muscle memory, applied to your collection.",
        "For most contemporary brands the bottleneck isn't manufacturing capacity. It's design development time. The hours spent translating a creative director's vision into a production-ready specification. We do that work.",
        "Our development teams have worked across the full range of contemporary categories: dresses, blouses, outerwear, tailoring, casual. The same process applies whether you're a three-year-old DTC brand or a fifty-year-old retailer.",
      ],
      img: '/assets/images/img-14.png',
    },
    links: <>Most ODM programmes flow from this work into <a href="/fr/solutions/echantillonnage">our seven-day sampling cycle</a>, with fabric placed through <a href="/fr/solutions/sourcing-tissus">our owned warehouse in Shaoxing</a>. The development teams sit alongside the sample room at <a href="/fr/notre-reseau/chine/market-fit-suzhou">Market Fit Suzhou</a>, our owned facility — same building, same brief.</>,
    steps: [
      { t: 'Brief and reference review', d: 'We start with whatever you have. A reference garment, a mood image, a sketch, or a finished tech pack.' },
      { t: 'Fabric direction and sampling', d: 'We propose three to five fabric options per style, drawn from our owned warehouse in Shaoxing or sourced through our trim partners.' },
      { t: 'Pattern development', d: 'Patterns drafted in our CAD room, fitted against your size specification, adjusted as needed.' },
      { t: 'First prototype', d: 'A first physical sample, made by our development team, ready for review.' },
      { t: 'Tech pack handoff', d: 'Once approved, we produce a complete tech pack ready for production sampling.' },
    ],
    cap: {
      lead: 'Our development capability is the engine behind everything else we do. The same teams that build your tech pack will brief the sampling and production teams. No handoffs to outside agencies. No translation losses.',
      stats: [
        ['50+', 'Active development programs per month'],
        ['12', 'Years average tenure of senior development staff'],
        ['100%', 'Tech packs produced in-house'],
      ],
    },
    outputs: [
      ['Tech pack', 'Complete construction specification, ready for production.'],
      ['First prototype', 'Physical sample of the developed style.'],
      ['Fabric recommendations', 'Three to five fabric options per style with sourcing notes.'],
      ['Costing estimate', 'Transparent breakdown of fabric, trim, labor, and overhead.'],
    ],
    factories: ['mf-suzhou', 'tongxiang', 'suho'],
    related: ['fac-tongxiang', 'fac-suho', 'sol-sampling', 'sol-fabric'],
    cta: 'Want to develop a collection', ctaEm: 'with us?',
    faqs: [
      { q: "What's the difference between OEM and ODM?",
        a: "OEM (Original Equipment Manufacturing) means the factory produces a garment to the buyer's complete specification — pattern, fabric, trim, construction. ODM (Original Design Manufacturing) means the factory contributes design and development work, taking a concept and developing it into a production-ready garment. Market Fit operates as an ODM partner, taking your reference and producing a finished tech pack." },
      { q: "How long does the ODM development process take?",
        a: "A typical ODM development cycle takes 4–6 weeks from brief to approved tech pack. The first prototype lands within 2 weeks. Revisions and fabric finalisation occupy weeks 3–5. Final tech pack is delivered in week 6. Faster turnarounds are possible for known categories with established fabric direction." },
      { q: "What information do I need to provide to start ODM development?",
        a: "Reference imagery, mood direction, target retail price point, intended size run, and target delivery date. A finished tech pack is welcome but not required. Where you have only a sketch or a reference garment, our team handles the translation to a production-ready specification." },
      { q: "Do you do ODM for menswear and kidswear, or only womenswear?",
        a: "Both. The bulk of our ODM work is contemporary womenswear, but we have active programmes across menswear, kidswear, and newborn. Each category routes to the relevant specialist factory in the network." },
      { q: "Who owns the design IP from ODM development?",
        a: "You do. Market Fit develops designs to your specification and brief. The intellectual property in the resulting garments and tech packs sits with you. Market Fit retains the right to use the design as a reference for our own portfolio, anonymised and with your consent." },
    ],
  },

  // -------- 02 Sampling --------
  sampling: {
    num: '02',
    name: 'Sampling',
    hero: {
      headline: 'Seven days from brief', headlineEm: 'to sample.',
      sub: 'Our owned sample room runs 500 styles a month. Whatever you brief in on Monday is on your desk the following Monday.',
      img: '/assets/images/img-24.jpg',
    },
    anchor: { num: '7', label: 'Days from brief to sample',
      ctx: "Most sourcing partners quote 14–21 days for a first sample. We've built our development and sampling teams under one roof to compress that to seven. For a contemporary brand running fast collections, that compression is the difference between a season landed and a season missed." },
    what: {
      eyebrow: 'What it is',
      h: 'The fastest sample turnaround', hEm: 'in the network.',
      paras: [
        "Sampling is where most sourcing partnerships fall apart. The brief gets misread. The wrong fabric gets used. The first sample lands two weeks late and three weeks of revision follow. We've built the sample room to remove every one of those failure points.",
        "Five hundred styles a month. Seven-day turnaround. Direct line between your designer and our sample team. The sample room sits inside the same building as the development team, so questions get answered in minutes, not days.",
        "Sample quality is held to the same line as production. The garment that lands on your desk is the garment your customer will wear, just made by our most experienced hands.",
      ],
      img: '/assets/images/img-20.png',
    },
    links: <>The sample room is co-located with <a href="/fr/solutions/odm-developpement">our development teams</a> at <a href="/fr/notre-reseau/chine/market-fit-suzhou">Market Fit Suzhou</a>, so questions on construction or fabric get answered in minutes. Approved samples flow directly into <a href="/fr/solutions/production-petite-serie">small-batch production</a>.</>,
    steps: [
      { t: 'Brief received', d: 'Tech pack, fabric direction, and target measurements lock the brief.' },
      { t: 'Fabric pulled', d: 'From our owned Shaoxing warehouse where possible. Sourced fast where not.' },
      { t: 'Pattern cut and assembled', d: 'In our CAD room and sample sewing line, by senior staff only.' },
      { t: 'Quality check', d: 'Internal review against the tech pack before anything ships.' },
      { t: 'Sample delivered', d: 'Couriered to your studio, with notes on any deviations from the original brief.' },
    ],
    cap: {
      lead: "Sampling capacity is one of our hardest-won numbers. Five hundred styles a month means we can carry multiple clients without any of them being deprioritized. Most sourcing partners can't sustain that pace without quality drops.",
      stats: [
        ['500', 'Styles sampled per month'],
        ['7', 'Days standard turnaround'],
        ['95%', 'Samples approved on first review'],
      ],
    },
    outputs: [
      ['First prototype', 'A physical garment matching the brief.'],
      ['Construction notes', 'Any deviations from the tech pack flagged with reasoning.'],
      ['Fabric documentation', 'Composition, weight, source, and remaining yardage.'],
      ['Revision options', 'Up to two free revisions before re-quote.'],
    ],
    factories: ['mf-suzhou', 'tongxiang'],
    related: ['fac-mf-suzhou', 'sol-odm', 'sol-production'],
    cta: 'Need a sample by', ctaEm: 'next week?',
    faqs: [
      { q: "How fast can you turn around a fashion sample?",
        a: "7 days from approved brief to sample on your desk is the standard turnaround. The 7-day clock starts when the tech pack, fabric direction, and target measurements are locked. Faster turnarounds are possible for known categories with available fabric." },
      { q: "What's your monthly sample capacity?",
        a: "500 styles per month across the network. Most clients have 5–15 active samples in development at any one time, with no client deprioritised when others have peak demand." },
      { q: "How many revisions are included in the sampling fee?",
        a: "Up to two revisions are included in the standard sampling cycle. Beyond two revisions, samples are re-quoted. In practice, 95% of samples are approved on first or second review." },
      { q: "Can you sample with our own fabric?",
        a: "Yes. You can ship fabric to our sample room, or we source the fabric on your behalf. Most clients prefer the second option because it taps into our owned warehouse and mill network for faster turnaround." },
      { q: "Do samples reflect production quality?",
        a: "Yes. Samples are made by senior staff in our owned sample room and held to the same quality standard as bulk production. The garment that lands on your desk is the garment your customer will wear." },
    ],
  },

  // -------- 03 Fabric --------
  fabric: {
    num: '03',
    name: 'Fabric & Trim',
    hero: {
      headline: 'Fabric is where most', headlineEm: 'collections fail.',
      sub: 'Our owned warehouse in Shaoxing, plus a vetted network of mills and trim suppliers across the seven-country footprint, means we can place fabric and trim into your collection without compromise.',
      img: '/assets/images/img-17.png',
    },
    anchor: { num: '8,000+', label: 'Fabric options in active stock',
      ctx: 'Our owned warehouse in Shaoxing carries over eight thousand active fabric options across woven, knit, and specialty categories. New fabrics added every month. Discontinued fabrics flagged before they cause production issues.' },
    what: {
      eyebrow: 'What it is',
      h: 'Owned warehouse.', hEm: 'Vetted network.',
      paras: [
        "Fabric is the most important decision in any garment program. It defines hand-feel, drape, durability, sustainability profile, and a meaningful share of the cost. Most sourcing partners outsource fabric sourcing to a third party. We do it ourselves, from an owned warehouse in Shaoxing and a vetted mill network across Asia.",
        "Our owned warehouse in Shaoxing — the heart of the Chinese textile industry — carries over eight thousand active fabric options. Woven, knit, denim, silk, technical, recycled. Where the warehouse doesn't have what you need, our mill network across Vietnam, India, Bangladesh, Pakistan, Turkey, and beyond fills the gap.",
        "Trim is the other half of the equation. Buttons, zippers, labels, hangtags, packaging — we source and inspect everything in one place. One accountable partner for every component on the garment.",
      ],
      img: '/assets/images/img-19.png',
    },
    links: <>Fabric placed for dresses and blouses runs through <a href="/fr/notre-reseau/chine/tongxiang-yinshi">Tongxiang Yinshi</a>, our light-woven specialist. For cotton, our <a href="/fr/notre-reseau/pakistan">Pakistan office in Karachi</a> sits inside the country's textile hub. Every roll is logged into the chain-of-custody documentation that supports <a href="/fr/solutions/qualite-conformite">GRS and SMETA reporting</a>.</>,
    steps: [
      { t: 'Direction set', d: 'Fabric brief locked alongside the design brief.' },
      { t: 'Options proposed', d: 'Three to five fabric options per style, swatches sent to your studio.' },
      { t: 'Approval', d: 'Final fabric chosen, yardage reserved, GRS or other certifications confirmed.' },
      { t: 'Inspection', d: 'Every roll inspected at our Shaoxing warehouse before release to production.' },
      { t: 'Trim packaged', d: 'All trim components consolidated and shipped to the production factory.' },
    ],
    cap: {
      lead: "We've spent decades building fabric and trim relationships across the network. Most are mills we've worked with for over fifteen years. The relationships translate into faster MOQs, better pricing, and access to deadstock and limited runs.",
      stats: [
        ['8,000+', 'Active fabric options'],
        ['200+', 'Vetted mill and trim partners'],
        ['100%', 'Fabric inspected before production release'],
      ],
    },
    outputs: [
      ['Fabric proposals', 'Curated options per style with composition, weight, source, lead time.'],
      ['Swatches and lab dips', 'Physical references for approval before bulk.'],
      ['GRS certification', 'Where applicable, full chain-of-custody documentation.'],
      ['Trim consolidation', 'All components inspected and packaged together.'],
    ],
    factories: ['tongxiang', 'mupai', 'suho'],
    related: ['fac-tongxiang', 'net-pakistan', 'sol-quality'],
    cta: 'Looking for the right', ctaEm: 'fabric?',
    faqs: [
      { q: "What's an MOQ for fabric sourcing?",
        a: "Most mill MOQs sit at 500–1,000 metres per fabric, depending on the fibre and finish. Our owned warehouse in Shaoxing carries fabric in smaller quantities for sampling and small-batch production, with MOQs as low as 50–100 metres for certain ranges." },
      { q: "Can you source GRS-certified fabric?",
        a: "Yes. Many of our mill partners are GRS-certified, and our owned warehouse maintains a GRS-certified inventory across cotton, polyester, and blends. We provide the full chain-of-custody documentation required for your finished garments to carry the GRS claim." },
      { q: "How long does fabric sourcing take?",
        a: "1–3 weeks for fabric in our warehouse stock. 3–6 weeks for new mill production. Lead times depend on the fabric specification, certification requirements, and seasonal capacity at the mill." },
      { q: "Can you source fabric outside China?",
        a: "Yes. Mill relationships across Vietnam, India, Bangladesh, Pakistan, and Turkey extend the sourcing footprint beyond China. Italian and Portuguese fabric is sourced through partner agents where required." },
      { q: "Do you handle trim sourcing as well as fabric?",
        a: "Yes. All trim components — buttons, zippers, labels, hangtags, packaging — are sourced and inspected through the same operation. One accountable partner for every component on the garment." },
    ],
  },

  // -------- 04 Production --------
  production: {
    num: '04',
    name: 'Small-batch Production',
    hero: {
      headline: 'Five hundred pieces.', headlineEm: 'Same quality as five thousand.',
      sub: 'Our minimum order quantity is 500 pieces per style. Our quality line is the same one major European retailers audit against.',
      img: '/assets/images/img-21.png',
    },
    anchor: { num: '500', label: 'Piece MOQ per style',
      ctx: "Most Asian production partners quote 1,000 to 2,500 piece MOQs. The economics of small-batch production are difficult, but the contemporary fashion market has structurally shifted toward smaller runs and more styles. We've restructured our production planning to meet that reality." },
    what: {
      eyebrow: 'What it is',
      h: 'Built for', hEm: 'contemporary volumes.',
      paras: [
        "Small-batch fashion production is harder than large-batch production. Setup costs are amortised across fewer pieces. Quality control gets relatively more expensive. Most factories quietly refuse runs under 1,000 pieces. We've made small-batch the spine of how we operate, with a 500-piece minimum and the same audited factories that supply major European retailers.",
        "Five hundred pieces per style is our minimum. Most clients run programs of 1,000 to 5,000 pieces per style across multiple SKUs. The structure works for emerging contemporary brands and for established brands launching capsule collections without the overhead of a full production run.",
        "The quality bar does not change with volume. The same audited factories. The same compliance certifications. The same finishing standards. The same final inspection process.",
      ],
      img: '/assets/images/img-11.png',
    },
    links: <>Production routes by category: outerwear to <a href="/fr/notre-reseau/chine/suzhou-mupai">Suzhou Mupai</a>, tailoring to <a href="/fr/notre-reseau/chine/suho-fashion-nanjing">Suho Fashion Nanjing</a>, sensitive programmes to <a href="/fr/notre-reseau/chine/market-fit-suzhou">Market Fit Suzhou</a>. Every shipment carries a full <a href="/fr/solutions/qualite-conformite">compliance pack</a> — audit history, material certifications, inspection records.</>,
    steps: [
      { t: 'Production plan locked', d: 'Tech pack, fabric, trim, target delivery date.' },
      { t: 'Factory matched', d: 'The right factory for the category and volume — outerwear at Mupai, dresses at Tongxiang, tailoring at Suho, casual at Hubei, internal at Market Fit Suzhou.' },
      { t: 'Bulk fabric and trim consolidated', d: 'Inspected at our warehouse before production begins.' },
      { t: 'Production runs', d: 'Daily progress reporting from the factory floor.' },
      { t: 'Final inspection and shipping', d: 'Every garment inspected, packed, and shipped to your warehouse or third-party logistics.' },
    ],
    cap: {
      lead: "Production planning is the unsexy heart of what we do. Matching the right factory to the right program. Holding the timeline. Catching problems before they ship. The work is invisible when it's done well.",
      stats: [
        ['500', 'Piece minimum order quantity'],
        ['30–60', 'Days standard production lead time'],
        ['98%', 'On-time delivery rate'],
      ],
    },
    outputs: [
      ['Production schedule', 'Locked timeline with weekly milestones.'],
      ['Daily progress reports', 'Photos and notes from the factory floor.'],
      ['Final inspection report', 'Every garment checked against tech pack and fabric specification.'],
      ['Logistics handoff', 'Shipping documentation, customs paperwork, delivery to your nominated warehouse.'],
    ],
    factories: ['mf-suzhou', 'tongxiang', 'mupai', 'suho', 'hubei'],
    related: ['fac-mupai', 'fac-suho', 'fac-mf-suzhou', 'sol-quality'],
    cta: 'Want to plan a', ctaEm: 'production run?',
    faqs: [
      { q: "What's your MOQ?",
        a: "500 pieces per style is the network minimum. Some categories and fabrics carry higher mill-driven MOQs, but 500 pieces is the floor for most contemporary womenswear programmes." },
      { q: "How long does production take?",
        a: "30–60 days from approved sample and locked materials to shipment. The exact lead time depends on the category, complexity, and fabric availability. Outerwear and tailoring run longer than dresses and casual." },
      { q: "Where does production happen?",
        a: "Production routes to the relevant specialist factory: outerwear at Suzhou Mupai, dresses and blouses at Tongxiang Yinshi, tailoring at Suho Fashion Nanjing, casual and higher-volume light-woven at the Hubei facility, and sensitive programmes at our owned Market Fit Suzhou facility." },
      { q: "Do you handle shipping and logistics?",
        a: "Yes. Shipping documentation, customs paperwork, and delivery to your nominated warehouse or 3PL is included. We work with established freight forwarders for both ocean and air freight, with shipment tracking provided." },
      { q: "What's your on-time delivery rate?",
        a: "98% on-time delivery across the network. The 2% miss is typically driven by external factors (port delays, fabric mill slippage upstream) flagged with the client in advance." },
    ],
  },

  // -------- 05 Quality --------
  quality: {
    num: '05',
    name: 'Quality & Compliance',
    hero: {
      headline: 'Audited to the standard', headlineEm: 'that matters.',
      sub: 'GRS 4.0. SMETA four-pillar. amfori BSCI. Plus proprietary retailer audits passed for major European retailers. The same standards a major retailer holds you to.',
      img: '/assets/images/img-04.png',
    },
    anchor: { num: '100%', label: 'Of factories SMETA-audited',
      ctx: 'Every factory in our network — owned and partner — carries an active SMETA four-pillar audit covering labor standards, health and safety, environment, and business ethics. Most carry GRS and amfori BSCI alongside.' },
    what: {
      eyebrow: 'What it is',
      h: 'Compliance is', hEm: 'non-negotiable.',
      paras: [
        "The contemporary premium fashion market has the highest compliance bar in the industry. Buyers expect their suppliers to be audited against multiple international standards — GRS 4.0, SMETA four-pillar, amfori BSCI. Customers expect supply chain transparency. Regulators expect documentation. Compliance is non-negotiable, and we've made it a structural part of how we operate.",
        "We've made compliance a structural part of how we operate. Every factory is audited before joining the network. Audits are renewed annually. Non-conforming factories are dropped, not coached for years.",
        "Beyond third-party audits, we operate our own quality team. Pre-production reviews. In-line inspection during production. Final inspection before shipping. The audited factory is the floor, not the ceiling.",
      ],
      img: '/assets/images/img-16.png',
    },
    links: <>Compliance is the structural backbone of <a href="/fr/durabilite">our sustainability work</a>. The fabric chain-of-custody data flows from <a href="/fr/solutions/sourcing-tissus">our owned warehouse</a>; the audit history flows from every factory in the network, including <a href="/fr/notre-reseau/chine/market-fit-suzhou">our owned Market Fit Suzhou facility</a>.</>,
    steps: [
      { t: 'Audit verification', d: "Every factory's certifications confirmed before any program begins." },
      { t: 'Pre-production review', d: 'Tech pack, fabric, and trim cleared by our QC team before production.' },
      { t: 'In-line inspection', d: 'Random checks during production, fed back to the factory for correction.' },
      { t: 'Final inspection', d: 'Every garment checked against tech pack, fabric, and finishing standards.' },
      { t: 'Documentation', d: 'Full compliance pack provided alongside shipment, including audit reports and material certifications.' },
    ],
    cap: {
      lead: 'Compliance is one of those subjects where most sourcing partners say the right things and document none of it. We document everything. Audit reports are available to clients on request, with the same level of detail a major retailer would receive.',
      stats: [
        ['100%', 'Network factories SMETA-audited'],
        ['6', 'Major audit standards held across the network'],
        ['0', 'Outstanding non-conformances at network level'],
      ],
    },
    outputs: [
      ['Compliance documentation', 'Full audit pack per factory.'],
      ['Material certifications', 'GRS chain-of-custody, OEKO-TEX where applicable, sustainability claims.'],
      ['Inspection reports', 'Pre-production, in-line, and final inspection records.'],
      ['Audit access', 'Direct introduction to factory compliance officers on request.'],
    ],
    factories: ['mf-suzhou', 'tongxiang', 'mupai', 'suho', 'hubei'],
    related: ['sustain', 'fac-mf-suzhou', 'sol-fabric'],
    cta: 'Need to verify our', ctaEm: 'compliance?',
    faqs: [
      { q: "What audits and certifications does Market Fit hold?",
        a: "GRS 4.0 (Global Recycled Standard), SMETA four-pillar (Sedex Members Ethical Trade Audit), and amfori BSCI (Business Social Compliance Initiative) across the network. Plus proprietary supplier audits passed for major European retailers." },
      { q: "How often are factories re-audited?",
        a: "SMETA and BSCI audits are renewed annually. GRS audits run on the certifying body's schedule, typically every 12–18 months. Internal Market Fit audits run quarterly across the network." },
      { q: "Can I see the audit reports?",
        a: "Yes, on request. Buyers are granted access to the relevant audit reports for the factories handling their programmes, including SMETA scoring across the four pillars and any non-conformance findings." },
      { q: "What happens if a factory fails an audit?",
        a: "Non-conforming factories are dropped from the network, not coached for years. Where minor non-conformances are flagged, corrective action plans are agreed with the certifying body and progress is tracked monthly until closure." },
      { q: "Are you ready for the EU Digital Product Passport requirements?",
        a: "Yes. The DPP requirements are being phased in for the EU market. Market Fit's existing fabric chain-of-custody documentation, factory audit history, and material certifications form the data foundation for DPP compliance. Implementation work is underway with our EU clients." },
    ],
  },
};

// ============ REVEAL ============
function useRevealSol() {
  const ref = useRefSol(null);
  useEffectSol(() => {
    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;
}

// ============ HERO ============
function SolHero({ data, num }) {
  return (
    <section className="sol-hero">
      <div className="sol-hero-img">
        <img src={data.img} alt={data.title + ' — Market Fit Group'} width="2400" height="1600" loading="eager" fetchpriority="high" decoding="async" />
      </div>
      <div className="sol-hero-veil" />
      <div className="sol-hero-grain" />
      <div className="sol-hero-content">
        <div className="sol-hero-eyebrow mf-reveal">Solutions · {num} / 05</div>
        <h1 className="sol-hero-h1 mf-reveal" style={{ transitionDelay: '60ms' }}>
          {data.headline} <em>{data.headlineEm}</em>
        </h1>
        <p className="sol-hero-sub mf-reveal" style={{ transitionDelay: '120ms' }}>{data.sub}</p>
      </div>
    </section>
  );
}

// ============ ANCHOR STAT ============
function SolAnchor({ data }) {
  return (
    <section className="sol-anchor">
      <div className="sol-anchor-grid">
        <div className="mf-reveal">
          <div className="sol-anchor-num">{data.num}</div>
          <div className="sol-anchor-label">{data.label}</div>
        </div>
        <p className="sol-anchor-context mf-reveal" style={{ transitionDelay: '80ms' }}>{data.ctx}</p>
      </div>
    </section>
  );
}

// ============ WHAT IT IS ============
function SolWhat({ data }) {
  return (
    <section className="sol-narr">
      <div className="sol-narr-grid">
        <div className="sol-narr-text mf-reveal">
          <div className="mf-eyebrow">{data.eyebrow}</div>
          <h2 className="sol-narr-h">{data.h} <em>{data.hEm}</em></h2>
          {data.paras.map((p, i) => <p key={i} className="sol-narr-p">{p}</p>)}
          {data.links ? (
            <p className="sol-narr-p sol-narr-links">{data.links}</p>
          ) : null}
        </div>
        <div className="sol-narr-img mf-reveal" style={{ transitionDelay: '100ms' }}>
          <img src={data.img} alt="" width="1600" height="1200" loading="lazy" decoding="async" />
        </div>
      </div>
    </section>
  );
}

// ============ HOW IT WORKS ============
function SolSteps({ steps }) {
  return (
    <section className="sol-steps">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Comment ça marche</div>
          <h2 className="sol-narr-h">A linear process. <em>No surprises.</em></h2>
        </div>
      </div>
      <div className="sol-steps-list">
        {steps.map((s, i) => (
          <article key={i} className="sol-step mf-reveal" style={{ transitionDelay: `${i * 60}ms` }}>
            <div className="sol-step-num">{String(i + 1).padStart(2, '0')}</div>
            <div className="sol-step-body">
              <h3 className="sol-step-t">{s.t}</h3>
              <p className="sol-step-d">{s.d}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============ CAPABILITY ============
function SolCapability({ data }) {
  return (
    <section className="sol-cap">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Capacité</div>
          <h2 className="sol-narr-h">What we hold <em>at scale.</em></h2>
        </div>
      </div>
      <div className="sol-cap-grid">
        <p className="sol-cap-lead mf-reveal">{data.lead}</p>
        <div className="sol-cap-stats mf-reveal" style={{ transitionDelay: '100ms' }}>
          {data.stats.map(([n, l], i) => (
            <div key={i} className="sol-cap-stat">
              <div className="sol-cap-stat-num">{n}</div>
              <div className="sol-cap-stat-label">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ OUTPUTS ============
function SolOutputs({ outputs }) {
  return (
    <section className="sol-outputs">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Livrables</div>
          <h2 className="sol-narr-h">What you <em>get.</em></h2>
        </div>
      </div>
      <div className="sol-outputs-grid">
        {outputs.map(([t, d], i) => (
          <div key={i} className="sol-output mf-reveal" style={{ transitionDelay: `${i * 50}ms` }}>
            <h3 className="sol-output-t">{t}</h3>
            <p className="sol-output-d">{d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ LINKED FACTORIES ============
function SolFactories({ keys }) {
  const FACTORY_HREF = {
    'mf-suzhou': '/fr/notre-reseau/chine/market-fit-suzhou',
    'tongxiang': '/fr/notre-reseau/chine/tongxiang-yinshi',
    'mupai': '/fr/notre-reseau/chine/suzhou-mupai',
    'suho': '/fr/notre-reseau/chine/suho-fashion-nanjing',
    'hubei': '/fr/notre-reseau/chine/hubei',
  };
  // For "all five" pages, show the first three for a tighter card grid.
  const display = keys.slice(0, 3);
  return (
    <section className="sol-factories">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Usines impliquées</div>
          <h2 className="sol-narr-h">Where this <em>happens.</em></h2>
        </div>
      </div>
      <div className="sol-factories-grid">
        {display.map((k, i) => {
          const f = FACTORIES[k];
          const href = FACTORY_HREF[k] || '/fr/notre-reseau';
          return (
            <article key={k} className="sol-fact mf-reveal" style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="sol-fact-img"><img src={f.img} alt={f.name} width="1200" height="900" loading="lazy" decoding="async" /></div>
              <div className="sol-fact-body">
                <div className="sol-fact-eye">{f.eye}</div>
                <h3 className="sol-fact-name">{f.name}</h3>
                <p className="sol-fact-spec">{f.spec}</p>
                <a href={href} className="sol-fact-link">Voir l'usine →</a>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// ============ CTA ============
function SolCTA({ headline, headlineEm }) {
  return (
    <section className="sol-cta">
      <div className="sol-cta-inner mf-reveal">
        <h2 className="sol-cta-h">{headline} <em>{headlineEm}</em></h2>
        <p className="sol-cta-sub">Tell us what you're building. We'll tell you whether we're the right partner.</p>
        <a href="/#contact" className="mf-btn-p">Start a conversation <Icon.ArrowRight /></a>
      </div>
    </section>
  );
}

// ============ LATERAL NAV ============
function SolLateral({ activeSlug }) {
  return (
    <nav className="sol-lateral" aria-label="Other Solutions">
      <div className="sol-lateral-inner">
        {SOLUTIONS_INDEX.map((s) => (
          <a
            key={s.slug}
            href={s.file}
            className={`sol-lat-item ${s.slug === activeSlug ? 'active' : ''}`}
          >
            <div className="sol-lat-num">Solutions · {s.num}</div>
            <div className="sol-lat-name">{s.name}</div>
          </a>
        ))}
      </div>
    </nav>
  );
}

// ============ APP ============
function SolutionApp({ slug }) {
  const data = SOLUTIONS[slug];
  const ref = useRevealSol();
  if (!data) return <div style={{ padding: 48 }}>Solution inconnue : {slug}</div>;
  const trail = [
    { label: 'Accueil', href: '/fr' },
    { label: 'Solutions', href: '/fr/solutions' },
    { label: data.name },
  ];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <SolHero data={data.hero} num={data.num} />
      <SolAnchor data={data.anchor} />
      <SolWhat data={data.what} />
      <SolSteps steps={data.steps} />
      <SolCapability data={data.cap} />
      <SolOutputs outputs={data.outputs} />
      <SolFactories keys={data.factories} />
      <Faq items={data.faqs} eyebrow={`Solutions · ${data.num}`} heading="Questions" headingEm="fréquentes." />
      <SolCTA headline={data.cta} headlineEm={data.ctaEm} />
      <RelatedContent heading="Lié à ce travail" items={relatedFor(data.related || [])} />
      <SolLateral activeSlug={slug} />
      <Footer />
    </div>
  );
}

Object.assign(window, { SolutionApp, SOLUTIONS_INDEX });