/* global React */
const { useEffect: useEffectAbout, useRef: useRefAbout } = React;

function useRevealAbout() {
  const ref = useRefAbout(null);
  useEffectAbout(() => {
    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;
}

// ============ ABOUT HERO ============
function AboutHero() {
  return (
    <section className="ab-hero">
      <div className="ab-hero-img">
        <img src="/assets/images/img-05.png" alt="Market Fit Group, cinquante-deux ans de mode" width="2400" height="1600" loading="eager" fetchpriority="high" decoding="async" />
        <div className="ab-hero-grain" />
      </div>
      <div className="ab-hero-vignette" />
      <div className="ab-hero-content">
        <Lockup variant="stacked" size="lg" reverse className="ab-hero-lockup mf-reveal" />
        <div className="mf-eyebrow" style={{ color: 'rgba(250,250,247,0.7)' }}>À propos de Market Fit</div>
        <h1 className="ab-hero-h1">Cinquante-deux ans de mode, <em>en famille.</em></h1>
        <p className="ab-hero-lead">
          Market Fit Group est une entreprise familiale, fondée à Istanbul en 1974 par André et Janti Dupont. Cinquante-deux ans plus tard, nous sommes toujours détenus par la famille, avec onze bureaux et usines répartis dans sept pays. Nous avons opéré sans interruption à travers cinq décennies de cycles de mode, en revenant toujours à la même question — comment bien faire cela ?
        </p>
      </div>
    </section>
  );
}

// ============ PULL QUOTE ============
function FounderQuote() {
  return (
    <section className="ab-quote">
      <div className="ab-quote-inner mf-reveal">
        <div className="ab-quote-mark">"</div>
        <blockquote>
          We design, manufacture, and sell fashion garments for international brands by striking the right balance between the seven fundamental pillars.
        </blockquote>
        <div className="ab-quote-attr">A. Dupont, Founder</div>
      </div>
    </section>
  );
}

// ============ NARRATIVE SECTION ============
function NarrativeSection({ eyebrow, headline, headlineEm, paragraphs, links, img, imgCaption, flip, wide }) {
  return (
    <section className={`ab-narr ${flip ? 'flip' : ''} ${wide ? 'ab-narr--wide' : ''}`}>
      <div className="ab-narr-grid">
        <div className="ab-narr-text mf-reveal">
          <div className="mf-eyebrow">{eyebrow}</div>
          <h2 className="ab-narr-h">{headline} {headlineEm && <em>{headlineEm}</em>}</h2>
          {paragraphs.map((p, i) => (
            <p key={i} className="ab-narr-p">{p}</p>
          ))}
          {links ? <p className="ab-narr-p ab-narr-links">{links}</p> : null}
        </div>
        <div className="ab-narr-img mf-reveal">
          <img src={img} alt={imgCaption || ''} width="1600" height="1200" loading="lazy" decoding="async" />
          {imgCaption ? <div className="ab-narr-pending">{imgCaption}</div> : null}
        </div>
      </div>
    </section>
  );
}

// ============ TIMELINE ============
function Timeline() {
  const entries = [
    { year: '1974', loc: 'Istanbul, Turkey',          desc: 'Founded as a leather sourcing business.' },
    { year: '1993', loc: 'Manila, Philippines',        desc: 'First Asian sourcing office.' },
    { year: '1994', loc: 'Jakarta, Indonesia',         desc: 'Indonesian operations begin.' },
    { year: '1999', loc: 'Shanghai, China',            desc: 'Mainland China presence established.' },
    { year: '2002', loc: 'Dhaka, Bangladesh',          desc: 'Bangladesh sourcing office.' },
    { year: '2005', loc: 'New Delhi, India',           desc: 'Indian operations begin.' },
    { year: '2006', loc: 'Lahore, Pakistan',           desc: 'Pakistan sourcing office.' },
    { year: '2009', loc: 'Hong Kong',                  desc: 'Operational headquarters established.' },
    { year: '2010', loc: 'Vietnam',                    desc: 'Network expansion completes.' },
    { year: '2024', loc: 'Suzhou, China',              desc: 'Owned production facility opens.' },
  ];
  return (
    <section className="ab-timeline">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Cinquante-deux ans</div>
          <h2 className="ab-timeline-h">Where we've <em>been.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Ten anchor moments in five decades. Each new country was added the same way Istanbul was built — through factory relationships, not transactional brokerage.
        </p>
      </div>
      <div className="ab-timeline-track">
        <div className="ab-timeline-line" />
        {entries.map((e, i) => (
          <div key={e.year} className="ab-timeline-row mf-reveal" style={{ transitionDelay: `${i * 30}ms` }}>
            <div className="ab-timeline-year">{e.year}</div>
            <div className="ab-timeline-dot">
              <span className="ab-timeline-branch" />
            </div>
            <div className="ab-timeline-info">
              <div className="ab-timeline-loc">{e.loc}</div>
              <div className="ab-timeline-desc">{e.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ SEVEN PILLARS (interactive) ============
// Editorial accordion. Numbered tabs across the top — click or hover to open.
// Body copy is condensed to a single tight paragraph per pillar.
function SevenPillars() {
  const pillars = [
    {
      t: 'Ethical compliance.',
      lede: 'Two layers of audit. One hundred per cent of production in compliant locations.',
      d: 'Layer one is our own compliance team. Layer two is each buyer’s nominated third-party auditor. Every site we use clears both.'
    },
    {
      t: 'Quality.',
      lede: 'Continuous improvement, trained quarterly into the line.',
      d: 'The retail bar keeps rising. We retrain quality and production teams every quarter so the line tracks the standard rather than chasing it.'
    },
    {
      t: 'Price.',
      lede: 'Strategies for absorbing the volatility, short and long.',
      d: 'Raw materials, FX, capacity, labour cost — all move. We offer short-term moves (factory swap, composition change) and long-term ones (new countries) to hold the price line.'
    },
    {
      t: 'Speed.',
      lede: 'Lead times from 15 to 115 days, matched to the brief.',
      d: 'Material, country, and category set the floor. We pick the production schedule and location that gets the right lead time for the order, not a default.'
    },
    {
      t: 'Design.',
      lede: 'Designers working alongside the supply chain, not after it.',
      d: 'The right product at the right time. Our designers work into the supply chain in real time, with input from buyers across markets and access to international trend tools.'
    },
    {
      t: 'Communication.',
      lede: 'A team on the ground in every country we make in.',
      d: 'Issues are inevitable in textiles. The only effective response is people in the country, talking to factories daily, with a process around it.'
    },
    {
      t: 'Capacity.',
      lede: 'Dedicated capacity per category. Built for long-term partners.',
      d: 'We hold capacity in every category we serve, distributed by season and country. For partners with growing volume, we open new capacity to match.'
    },
  ];
  const [active, setActive] = React.useState(0);
  return (
    <section className="ab-pillars">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Les sept piliers</div>
          <h2 className="ab-narr-h">The framework behind <em>every order.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Every brief is a question of striking the right balance between these seven.
        </p>
      </div>

      <div className="ab-pillars-stage mf-reveal">
        <div className="ab-pillars-tabs" role="tablist">
          {pillars.map((p, i) => (
            <button
              key={i}
              role="tab"
              aria-selected={active === i}
              className={`ab-pillar-tab ${active === i ? 'active' : ''}`}
              onClick={() => setActive(i)}
              onMouseEnter={() => setActive(i)}
            >
              <span className="ab-pillar-tab-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="ab-pillar-tab-name">{p.t.replace('.', '')}</span>
            </button>
          ))}
        </div>
        <div className="ab-pillar-panel" key={active}>
          <div className="ab-pillar-panel-num">{String(active + 1).padStart(2, '0')} / 07</div>
          <h3 className="ab-pillar-panel-t">{pillars[active].t}</h3>
          <p className="ab-pillar-panel-lede">{pillars[active].lede}</p>
          <p className="ab-pillar-panel-d">{pillars[active].d}</p>
        </div>
      </div>
    </section>
  );
}

// ============ PRINCIPLES ============
function Principles() {
  const items = [
    { t: 'Family ownership.',         d: 'Decisions are made by people who carry the name. No board, no quarterly investor calls, no externally-set growth targets.' },
    { t: 'Long supplier relationships.', d: 'Most of our factory partners have worked with us for over a decade. We invest in those relationships rather than re-tender every season.' },
    { t: 'Personal accountability.',  d: 'Every order has a named owner. No anonymous handoffs. The person who quoted the work is the person who ships it.' },
    { t: 'Quality before scale.',     d: 'We’ve turned away orders that would have stretched the line. The line we hold is the only thing brands are paying us for.' },
    { t: 'Conservative growth.',      d: 'We’ve never taken external investment. We don’t plan to. The business grows at the pace the family can stand behind.' },
  ];
  return (
    <section className="ab-principles mf-section warm">
      <div className="mf-section-head">
        <div className="mf-reveal">
          <div className="mf-eyebrow">Nos principes</div>
          <h2 className="ab-narr-h">Five things that haven't changed <em>since 1974.</em></h2>
        </div>
        <p className="mf-lead mf-reveal" style={{ transitionDelay: '80ms' }}>
          Markets change. Buyers change. Garment categories change. The way we run the business doesn't.
        </p>
      </div>
      <div className="ab-principle-list">
        {items.map((p, i) => (
          <article key={i} className="ab-principle mf-reveal" style={{ transitionDelay: `${i * 50}ms` }}>
            <div className="ab-principle-num">{String(i + 1).padStart(2, '0')}</div>
            <div className="ab-principle-body">
              <h3 className="ab-principle-t">{p.t}</h3>
              <p className="ab-principle-d">{p.d}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============ CLOSING CTA ============
function ClosingCTA() {
  return (
    <section className="ab-cta">
      <div className="ab-cta-inner mf-reveal">
        <div className="mf-eyebrow" style={{ textAlign: 'center' }}>Suite</div>
        <h2 className="ab-cta-h">Want to <em>work with us?</em></h2>
        <p className="ab-cta-sub">
          Tell us what you're building. We'll tell you whether we're the right partner.
        </p>
        <div className="ab-cta-actions">
          <a href="/fr#contact" className="mf-btn-p">Démarrer une conversation <Icon.ArrowRight /></a>
          <a href="/fr#our-network" className="mf-btn-g">Voir notre réseau <span className="arrow"><Icon.ArrowRight size={16} /></span></a>
        </div>
      </div>
    </section>
  );
}

// ============ ABOUT APP ============
function AboutApp() {
  const ref = useRevealAbout();
  return (
    <div ref={ref}>
      <Nav />
      <AboutHero />
      <NarrativeSection
        eyebrow="Origins · 1974–1990"
        headline="It started with"
        headlineEm="leather."
        paragraphs={[
          'The business opened in Istanbul in 1974 as a leather sourcing operation. Turkey was then, and remains today, one of the world’s leading leather producers. The early operation was small — a sourcing office, a few key supplier relationships, and a commitment to handling every order personally.',
          'Within a decade the business had moved into textiles. The principles transferred cleanly: know your factories, hold the quality line, treat every order as if your name is on the label. Those principles still define how Market Fit operates today.'
        ]}
        img="/assets/images/img-22.png"
        imgCaption="Archives familiales Dupont"
      />
      <NarrativeSection
        flip
        wide
        eyebrow="Expansion · 1990–2010"
        headline="Seven countries,"
        headlineEm="one philosophy."
        paragraphs={[
          'Through the 1990s and 2000s, Market Fit expanded its network across the major garment-producing regions: Bangladesh, China, Pakistan, India, Vietnam. Hong Kong became the operational headquarters in 2009. Each new country was added the same way the original Istanbul operation had been built — through long-term factory relationships, not transactional brokerage.',
          'By 2010 the network covered seven countries and the full range of garment categories. The business had grown, but the family ownership model hadn’t changed. Decisions were still made by people who knew the factories personally.'
        ]}
        img="/assets/images/img-23.png"
        imgCaption="Le réseau de sept pays, ancré à Hong Kong depuis 2009"
      />
      <NarrativeSection
        eyebrow="Today · 2010–Present"
        headline="A specialist network for"
        headlineEm="a different kind of brand."
        paragraphs={[
          'The fashion industry today looks nothing like it did in 1974. Order quantities have shrunk. Sample turnarounds have compressed. Buyers expect supply chain transparency, certified compliance, and design partnership rather than pure manufacturing capacity. Market Fit has restructured to meet these requirements while keeping the family principles intact.',
          'Five specialist factories across China, plus our owned production facility in Suzhou, plus the broader seven-country network. ODM capability from sketch to finished garment. 500-piece minimum orders. Sampling in seven days. The model is built for contemporary premium brands — the kind of brand that cares about every detail. The kind of brand we’d want to be, if we were on the other side of the table.'
        ]}
        links={<>The model today runs on five capabilities — <a href="/fr/solutions/odm-developpement">ODM development</a>, <a href="/fr/solutions/echantillonnage">sampling</a>, <a href="/fr/solutions/sourcing-tissus">fabric sourcing</a>, <a href="/fr/solutions/production-petite-serie">small-batch production</a>, and <a href="/fr/solutions/qualite-conformite">quality and compliance</a> — across <a href="/fr/notre-reseau">seven countries</a>. The same principles still anchor <a href="/fr/durabilite">how we run the business</a>.</>}
        img="/assets/images/img-10.png"
        imgCaption="Atelier d'échantillonnage à Suzhou"
      />
      <Timeline />
      <FounderQuote />
      <SevenPillars />
      <Principles />
      <ClosingCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { AboutApp });