/* 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, fifty-two years in fashion" 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)' }}>About Market Fit</div>
        <h1 className="ab-hero-h1">Fifty-two years of fashion, <em>in one family.</em></h1>
        <p className="ab-hero-lead">
          Market Fit Group is a family business, founded in Istanbul in 1974 by André and Janti Dupont. Fifty-two years on, we are still family-owned, with twelve offices and factories across seven countries. We have operated continuously through five decades of fashion cycles, always returning to the same question — how do we make this well?
        </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">Fifty-two years</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">The seven pillars</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">Our principles</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' }}>Next</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="/#contact" className="mf-btn-p">Start a conversation <Icon.ArrowRight /></a>
          <a href="/#our-network" className="mf-btn-g">See our network <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="From the Dupont family archive"
      />
      <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="The seven-country network, anchored in Hong Kong since 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={<>Five capabilities, seven countries, one family. <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> — connected by the same principles we started with in 1974.</>}
        img="/assets/images/img-10.png"
        imgCaption="Inside our Suzhou sample room"
      />
      <Timeline />
      <FounderQuote />
      <SevenPillars />
      <Principles />
      <ClosingCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { AboutApp });