/* 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 and Design Development',
    desc: 'From sketch to production-ready garment. In-house design and technical teams running development programmes for contemporary fashion brands across the network.',
    stats: [['50', 'Styles in active development monthly'], ['In-house', 'Design and technical teams'], ['Complete', 'Tech pack delivery']],
    href: '/solutions/odm', img: '/assets/images/img-06.png' },
  { num: '02 / 05', name: 'Sampling',
    desc: 'Seven days from approved brief to sample on your desk. Our owned sample room runs 500 styles a month. Whatever you brief in on Monday is on your desk the following Monday.',
    stats: [['7 days', 'Standard turnaround'], ['500 / month', 'Sample capacity'], ['2 free', 'Included revisions']],
    href: '/solutions/sampling', img: '/assets/images/img-24.jpg' },
  { num: '03 / 05', name: 'Fabric and Trim Sourcing',
    desc: 'Owned warehouse in Shaoxing, plus a vetted network of mills and trim suppliers across the seven-country footprint. We can place fabric and trim into your collection without compromise.',
    stats: [['Owned', 'Shaoxing warehouse'], ['200+', 'Vetted mill partners'], ['GRS', 'Chain-of-custody']],
    href: '/solutions/fabric', img: '/assets/images/img-17.png' },
  { num: '04 / 05', name: 'Small-batch Production',
    desc: 'Five hundred pieces. Same quality as five thousand. Our minimum order quantity is 500 pieces per style. The same quality line major European retailers audit against.',
    stats: [['From 500', 'Pieces per style'], ['30–60 days', 'Production lead time'], ['Full', 'Network capacity']],
    href: '/solutions/production', img: '/assets/images/img-21.png' },
  { num: '05 / 05', name: 'Quality and Compliance',
    desc: 'Ten audit standards across the network. amfori BSCI, Higg FSLM, Higg FEM, ISO 14001, GRS, OEKO-TEX, Textile Genesis, SMETA, quarterly self-assessment, and proprietary retailer audits.',
    stats: [['10', 'Audit standards held'], ['8 live', 'At our Vietnam factory'], ['On request', 'Reports for verified buyers']],
    href: '/solutions/quality', 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}>See capability <Icon.ArrowRight size={14} /></a>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HubFlow() {
  const steps = [
    ['01', 'Brief'],
    ['02', 'Sample'],
    ['03', 'Fabric & Trim'],
    ['04', 'Production'],
    ['05', 'Quality & Ship'],
  ];
  return (
    <section className="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">How it fits together</div>
        <h2 className="pg-h2 pg-reveal">One network. One programme owner. <em>One accountable partner.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '52ch' }}>
          Most sourcing partnerships fragment across vendors. Our five capabilities operate as one programme, run by one accountable team. The same people who scope the brief sample your styles, source your fabric, audit your factories, and ship your 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">Where it happens</div>
        <h2 className="pg-h2 pg-reveal">Across our <em>7-country network.</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">Sourcing countries</div></div>
            <div><div className="pg-where-stat-v">13</div><div className="pg-where-stat-l">Offices and factories</div></div>
            <div><div className="pg-where-stat-v">2</div><div className="pg-where-stat-l">Wholly-owned production floors</div></div>
            <div><div className="pg-where-stat-v">52</div><div className="pg-where-stat-l">Years family-owned</div></div>
          </div>
          <div>
            <p className="pg-body" style={{ marginBottom: 'var(--s-5)', maxWidth: '40ch' }}>
              Production routes through Hong Kong, China, Vietnam, Bangladesh, Pakistan, India, and Turkey. Each country specialised by category. Each office staffed with merchandisers, technical, and quality.
            </p>
            <a href="/our-network" className="hub-card-link">See the network <Icon.ArrowRight size={14} /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function SolutionsHubApp() {
  const ref = usePgReveal();
  const trail = [{ label: 'Home', href: '/' }, { label: 'Solutions' }];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="xl" eyebrow="Solutions"
        headline="Five capabilities," headlineEm="one accountable partner."
        sub="ODM and design development, sampling, fabric and trim sourcing, small-batch production, quality and compliance. Each capability delivered by a specialist team. One name on every email."
        img="/assets/images/img-25.jpg" />
      <PgLead eyebrow="What we do"
        text="Market Fit operates five integrated capabilities for contemporary fashion brands: ODM and design development, sampling, fabric and trim sourcing, small-batch production, and quality and compliance. Each capability is delivered by a specialist team within the network, with single-point accountability across the full programme from first sketch to finished garment." />
      <HubCards />
      <HubFlow />
      <HubWhere />
      <PgCta headline="Tell us what you're" headlineEm="building."
        sub="We respond within 24 hours with a conversation about fit, capacity, and timeline."
        ctaLabel="Start a conversation" ctaHref="/contact" />
      <Footer />
    </div>
  );
}

// ============================================================
// 2. SUSTAINABILITY
// ============================================================
function SustMarks() {
  // Mirrors the homepage compliance marks row. Same five logos, same
  // mix-blend-mode treatment via the shared .mf-certs / .mf-cert classes.
  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">The marks we hold</div>
        <h2 className="pg-h2 pg-reveal">The standards behind <em>every audit report.</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> across the network.</p>
      </div>
    </section>
  );
}

function SustNumbers() {
  const nums = [
    { v: '90%',     l: 'Renewable energy at Tien Giang today' },
    { v: 'Q1 2027', l: 'Net zero target at our Vietnam factory' },
    { v: '10',      l: 'Audit standards held across the network' },
    { v: '52',      l: 'Years of continuous family ownership' },
  ];
  return (
    <section className="pg-section pg-section--paper">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">By the numbers</div>
        <h2 className="pg-h2 pg-reveal">The work, <em>measured.</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() {
  // Per-site coverage. No emojis, no repetition. One card per site.
  const vnStandards = ['amfori BSCI', 'Higg FSLM', 'Higg FEM', 'ISO 14001', 'GRS', 'OEKO-TEX', 'Textile Genesis', 'Quarterly self-assessment'];
  const cnStandards = ['SMETA', 'GRS', 'amfori BSCI', 'Proprietary retailer audits'];
  return (
    <section className="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Per-site coverage</div>
        <h2 className="pg-h2 pg-reveal">Different sites, <em>different combinations.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          The standards each site holds today. Audit reports for any of the below are available to verified buyers on request.
        </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">Wholly-owned factory</h3>
            <p className="pg-site-desc">Eight live audit standards across social, environmental, and material traceability. Ninety per cent renewable today, net zero by Q1 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">China · Network</div>
            <h3 className="pg-site-title">Five specialist factories</h3>
            <p className="pg-site-desc">Suzhou Mupai holds SMETA, GRS, amfori BSCI, and proprietary retailer audits. Coverage for the other four China factories is being confirmed and will land here as soon as the audit data is in.</p>
            <ul className="pg-cert-list">
              {cnStandards.map((s) => <li key={s}>{s}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function SustMaterial() {
  const cols = [
    { h: 'GRS-certified materials',
      p: 'Recycled cotton, polyester, blends. Full chain-of-custody documentation for retail-facing claims.' },
    { h: 'Lower-impact fabric programmes',
      p: 'Organic cotton, Tencel, recycled cashmere. Sourced through certified mills.' },
    { h: 'Deadstock and remnant programmes',
      p: 'Limited-edition capsule programmes built around mill deadstock. Reduces waste, opens fabric ranges otherwise unavailable at low MOQ.' },
  ];
  return (
    <section className="pg-section pg-section--warm">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Material innovation</div>
        <h2 className="pg-h2 pg-reveal">Fabric is where <em>sustainability lives.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          Most environmental impact in a finished garment lives in the fabric, not the assembly. Owning the fabric sourcing operation in Shaoxing means we can make material decisions that align with a brand's sustainability claims, with the chain-of-custody documentation to back them.
        </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', 'DPP groundwork. Voluntary disclosures and pilot programmes across the EU textile market.'],
    ['2027', 'Phase-one product categories enter the regime. Early-mover brands transmit data.'],
    ['2028', 'Expanded category coverage. Documentation required for retail listings.'],
    ['2029', 'Broad enforcement across textile categories. Buyer requirements aligned with regulation.'],
    ['2030', 'Full DPP regime in effect. End-to-end traceability is the new normal.'],
  ];
  return (
    <section className="pg-section pg-section--paper">
      <div className="pg-container">
        <div className="pg-eyebrow pg-reveal">Traceability</div>
        <h2 className="pg-h2 pg-reveal">Built for the <em>EU Digital Product Passport.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          The EU Digital Product Passport requirements come into force progressively from 2027 for textile products sold in the EU. Brands need data: material composition, country of origin, manufacturing facility, sustainability claims, durability, repair instructions. Market Fit's existing fabric chain-of-custody documentation, factory audit history, and material certifications form the data foundation for DPP compliance.
        </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">Family business, fifty-two years</div>
        <h2 className="pg-h2 pg-reveal">Ownership that doesn't <em>change every quarter.</em></h2>
        <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
          Most sustainability commitments don't survive a change in CEO or PE ownership. Market Fit has been continuously family-owned since 1974. The same family that committed to long-term factory relationships in the 1980s makes sustainability decisions today. Conservative growth, no external investment, decisions made by people who carry the name.
        </p>
        <a href="/about" className="hub-card-link pg-reveal" style={{ marginTop: 'var(--s-5)' }}>
          Read the family story <Icon.ArrowRight size={14} />
        </a>
      </div>
    </section>
  );
}

function SustainabilityApp() {
  const ref = usePgReveal();
  const trail = [{ label: 'Home', href: '/' }, { label: 'Sustainability' }];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="md" eyebrow="Sustainability"
        headline="Compliance is non-negotiable." headlineEm="Sustainability is the work."
        sub="Audited certifications across the network. Material innovation through fabric chain ownership. Family-business ethics applied for fifty-two years."
        img="/assets/images/img-09.png" />
      <PgLead eyebrow="Where we stand"
        text="Ten audit standards across the network. Our wholly-owned Vietnam factory in Tien Giang holds eight of them live, the others sit with our partner factories in China. The full per-site breakdown is below, alongside the concrete commitments behind it."
        links={<>Compliance runs through <a href="/solutions/quality">our quality programme</a> and is sourced through <a href="/solutions/fabric">our owned fabric warehouse</a>, with audit coverage across all <a href="/our-network">seven countries</a>. Read how <a href="/about">the family business</a> shaped that.</>} />
      <SustMarks />
      <SustNumbers />
      <SustCerts />
      <SustMaterial />
      <SustDPP />
      <SustFamily />
      <PgCta headline="Need to verify" headlineEm="our compliance?"
        sub="Audit reports are available to verified buyers on request. Tell us about your programme and what documentation you need."
        ctaLabel="Request audit access" ctaHref="/contact" />
      <Footer />
    </div>
  );
}

// ============================================================
// 3. INSIGHTS INDEX
// ============================================================
const INS_CATS = ['All', 'Sourcing strategy', 'Compliance & sustainability', 'Fabric & trim', 'Country guides', 'Operational'];

// IMPORTANT: Keep this in sync with IP_POSTS in insights-data.jsx and the
// FR INS_POSTS in pages-fr.jsx. Same 6 posts, slightly different shapes.
// Production refactor: unify into a single source of truth.
const INS_POSTS = [
  { slug: 'oem-vs-odm-fashion-manufacturing', file: '/insights/oem-vs-odm-fashion-manufacturing',
    cat: 'Sourcing strategy',
    title: "OEM vs ODM in fashion manufacturing: what's the difference?",
    excerpt: "OEM and ODM are the main fashion manufacturing models. OEM means you provide the design. ODM means the factory contributes development. Here's how to choose.",
    author: 'Market Fit', date: '25 Apr 2026', read: '10 min read',
    img: '/assets/insights/oem-vs-odm-fashion-manufacturing/hero.jpg' },
  { slug: 'fashion-moq-minimum-order-quantity-guide', file: '/insights/fashion-moq-minimum-order-quantity-guide',
    cat: 'Operational',
    title: 'Fashion MOQ: a guide to minimum order quantity in 2026',
    excerpt: 'Fashion MOQs typically run 1,000 to 2,500 pieces per style. Contemporary brands need 500 or lower. This guide covers MOQ benchmarks and how to negotiate.',
    author: 'Market Fit', date: '25 Apr 2026', read: '10 min read',
    img: '/assets/insights/fashion-moq-minimum-order-quantity-guide/hero.jpg' },
  { slug: 'china-plus-one-apparel-sourcing-2026', file: '/insights/china-plus-one-apparel-sourcing-2026',
    cat: 'Country guides',
    title: 'China plus one in 2026: diversifying apparel sourcing',
    excerpt: "China plus one is a fashion sourcing strategy that adds production capacity outside China. Here's what changed in 2026 with new tariffs and where to source.",
    author: 'Market Fit', date: '25 Apr 2026', read: '12 min read',
    img: '/assets/insights/china-plus-one-apparel-sourcing-2026/hero.jpg' },
  { slug: 'smeta-audit-report-guide', file: '/insights/smeta-audit-report-guide',
    cat: 'Compliance & sustainability',
    title: 'How to read a SMETA audit report (and what to look for)',
    excerpt: "SMETA is the world's most widely used social compliance audit, with 280,000+ conducted globally. This guide explains the four pillars and what to look for.",
    author: 'Market Fit', date: '25 Apr 2026', read: '11 min read',
    img: '/assets/insights/smeta-audit-report-guide/hero.jpg' },
  { slug: 'grs-certified-clothing-explained', file: '/insights/grs-certified-clothing-explained',
    cat: 'Compliance & sustainability',
    title: 'GRS certified clothing: what brands need to know',
    excerpt: 'GRS (Global Recycled Standard) verifies recycled content and chain of custody in fashion. Products need 20% for B2B claims, 50% for consumer labelling.',
    author: 'Market Fit', date: '25 Apr 2026', read: '11 min read',
    img: '/assets/insights/grs-certified-clothing-explained/hero.jpg' },
  { slug: 'contemporary-fashion-sourcing-2026-guide', file: '/insights/contemporary-fashion-sourcing-2026-guide',
    cat: 'Sourcing strategy',
    title: 'Contemporary fashion sourcing in 2026: the complete guide',
    excerpt: 'Contemporary fashion sourcing in 2026 demands five integrated capabilities, certified compliance, and multi-country flexibility. The complete guide.',
    author: 'Market Fit', date: '25 Apr 2026', read: '14 min read',
    img: '/assets/insights/contemporary-fashion-sourcing-2026-guide/hero.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">Latest · {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' }}>Read the article →</a>
      </div>
    </div>
  );
}

function InsightsApp() {
  const ref = usePgReveal();
  const [cat, setCat] = usePg('All');
  const trail = [{ label: 'Home', href: '/' }, { label: 'Insights' }];
  const filtered = cat === 'All' ? 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, manufacturing," headlineEm="and the work behind a finished garment."
        sub="Country-by-country guides, certification deep-dives, fabric and trim trends, and the operational realities of working with contemporary premium brands at small-batch volumes."
        img="/assets/insights/hero-insights.jpg"
        imgAlt="Hands hand-stitching an unfinished cream linen garment on a worktable with a wooden ruler, thread spool, and fabric swatches" />
      <PgLead eyebrow="The editorial"
        text="The Insights desk publishes long-form perspectives from people who run the network. Practical sourcing strategy, plain-language certification explainers, fabric trend reports, and country guides covering every market in our footprint. Written by the Market Fit team for fashion brands building contemporary collections."
        links={<>Written from inside the network. <a href="/our-network">Seven countries</a> · <a href="/solutions/odm">ODM</a> · <a href="/solutions/sampling">sampling</a> · <a href="/solutions/fabric">fabric</a> · <a href="/solutions/production">production</a> · <a href="/solutions/quality">quality</a>. Subscribe below, or <a href="/contact">send the editorial desk</a> a topic.</>} />

      <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">Insights delivered <em>monthly.</em></h2>
            <p className="pg-news-p">One email a month. The latest pieces, plus curated reading from across the industry. No spam.</p>
          </div>
          <form className="pg-news-form" onSubmit={(e) => { e.preventDefault(); }}>
            <input type="email" placeholder="your@email" aria-label="Email address" />
            <button type="submit">Subscribe</button>
            <p className="pg-news-privacy">We respect your inbox. Unsubscribe anytime.</p>
          </form>
        </div>
      </section>

      <Footer />
    </div>
  );
}

// ============================================================
// 4. CONTACT
// ============================================================
const CONTACT_ROUTES = {
  vietnam: {
    label: 'Vietnam production',
    contact: 'Jordan',
    email: 'jordan@market-fit.com',
    blurb: "Vietnam production runs out of two sites. Jordan handles the read-through for both. Send a tech-pack and a costed sample comes back in seven days.",
    addresses: [
      { eye: 'Office and design', lines: ['6th Floor, 14 Phan Ton Street, Da Kao Ward, District 1', 'Ho Chi Minh City, Vietnam'] },
      { eye: 'Factory and warehouse', lines: ['No. 341, Street 30, Quang Tho Hamlet, Tan Thuan Binh Commune, Cho Gao District', 'Tien Giang Province, Vietnam'] },
    ],
    cta: 'Write to Jordan',
  },
  china: {
    label: 'China production',
    contact: 'Tony',
    email: 'tony@market-fit.com',
    blurb: "China production is run out of the Shanghai office, with five specialist factories under it. Tony handles the country directly.",
    addresses: [
      { eye: 'Shanghai sourcing office', lines: ['Floor 2, Building 8, Qian Yu Creative Park, No 153 Jumen Road', 'Huangpu District, Shanghai 200023, China'] },
    ],
    cta: 'Write to Tony',
  },
  general: {
    label: 'General enquiry',
    contact: 'Jordan',
    email: 'jordan@market-fit.com',
    blurb: "Not sure which country fits, or asking about something else. Jordan picks this up first and routes from there.",
    addresses: [
      { eye: 'Group HQ', lines: ['Unit 2102, 21/F., Golden Centre, 188 Des Voeux Road Central', 'Hong Kong'] },
    ],
    cta: 'Write to 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: 'Home', href: '/' }, { label: 'Contact' }];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="sm" eyebrow="Contact"
        headline="Pick the floor" headlineEm="that fits your brief."
        sub="Three direct lines. Vietnam, China, or a general enquiry. Whichever you pick, you reach a real person who runs that part of the business. No forms, no chatbots, no shared inboxes." />

      <ContactRouter />

      <Footer />
    </div>
  );
}

// ============================================================
// 5. CAREERS
// ============================================================
function CareersApp() {
  const ref = usePgReveal();
  const trail = [{ label: 'Home', href: '/' }, { label: 'Careers' }];
  const cols = [
    { h: 'Industry experience',
      p: 'Most of our roles benefit from prior fashion industry work. We hire across all levels but we are not a training programme.' },
    { h: 'Geographic flexibility',
      p: 'Our network spans 7 countries. Some roles are office-specific; others travel across the network. Be clear about what you are looking for.' },
    { h: 'Long-term mindset',
      p: 'We are a family business. We make decisions for the next decade, not the next quarter. We hire people who think the same way.' },
  ];
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <PgHero size="md" eyebrow="Careers"
        headline="Build a fashion supply chain" headlineEm="that lasts."
        sub="We hire across our network of 7 sourcing countries. Long tenures. Real ownership. Family-business pace."
        img="/assets/images/img-12.png" />
      <PgLead eyebrow="How we hire"
        text="Market Fit hires across design, merchandising, technical, quality, sourcing, and operations roles across our network of 7 sourcing countries. Most of our senior team has been with the company for over a decade. We don't grow for growth's sake. We hire when we have someone the right job for, and we keep them." />

      <section className="pg-section pg-section--paper">
        <div className="pg-container">
          <div className="pg-eyebrow pg-reveal">What we look for</div>
          <h2 className="pg-h2 pg-reveal">People who care about <em>the work.</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">Current openings</div>
          <h2 className="pg-h3 pg-reveal">Roles we're actively <em>hiring for.</em></h2>
          <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
            We're not currently advertising specific roles publicly. The best way to reach us is to send your CV with a note about which office you'd like to work in and what you're looking for. We respond to every application.
          </p>
        </div>
      </section>

      <section className="pg-section pg-section--paper">
        <div className="pg-container">
          <h2 className="pg-h2 pg-reveal">How to <em>reach us.</em></h2>
          <p className="pg-body pg-reveal" style={{ marginTop: 'var(--s-5)', maxWidth: '60ch' }}>
            Send your CV and a short cover letter to the address below. Include the office you'd like to work in (or "open" if you're flexible) and a couple of paragraphs about what you're looking for. We respond within two weeks.
          </p>
          <div className="pg-mailto-callout pg-reveal">
            <div className="pg-card-eyebrow" style={{ marginBottom: 0 }}>Apply</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,
});