// ============================================================
// FACTORY TEMPLATE — shared component for the five facility pages
// Reads FACTORIES + FACTORY_INDEX from window (factory-data.jsx).
// ============================================================

const { useEffect, useRef } = React;

// ---------- reveal hook (scoped to this template) ----------
function useFacReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const els = root.querySelectorAll('.mf-reveal');
    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' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return ref;
}

// ---------- subnav ----------
function FactorySubnav({ activeSlug }) {
  const active = FACTORY_INDEX.find(f => f.slug === activeSlug);
  if (!active) return null;
  const parent = COUNTRY_LABELS[active.country];
  const siblings = FACTORY_INDEX.filter(f => f.country === active.country);
  return (
    <nav className="fac-subnav">
      <div className="fac-subnav-inner">
        <a className="fac-subnav-back" href={parent.href}>← {parent.label} · Notre réseau</a>
        {siblings.length > 1 && (
          <div className="fac-subnav-list">
            {siblings.map((f) => (
              <a
                key={f.slug}
                href={f.href}
                className={'fac-subnav-item' + (f.slug === activeSlug ? ' is-active' : '')}
              >
                <span className="fac-subnav-item-num">{f.num}</span>
                <span>{f.name}</span>
              </a>
            ))}
          </div>
        )}
      </div>
    </nav>
  );
}

// ---------- hero ----------
function FactoryHero({ data }) {
  const heroImg = data.zones?.[0]?.img || '';
  return (
    <header className="fac-hero">
      <div className="fac-hero-img" style={{ backgroundImage: `url(${heroImg})` }} />
      <div className="fac-hero-grid" />
      <div className="fac-hero-content">
        <div className="fac-hero-eye mf-reveal">
          <span className="fac-hero-eye-num">{data.num}</span>
          <span>{data.eye}</span>
        </div>
        <h1 className="fac-hero-title mf-reveal" style={{ transitionDelay: '60ms' }}>
          {data.name}
        </h1>
        <p className="fac-hero-tagline mf-reveal" style={{ transitionDelay: '120ms' }}>
          {data.tagline}
        </p>
        <div className="fac-hero-meta mf-reveal" style={{ transitionDelay: '180ms' }}>
          {data.stats.slice(0, 4).map((s) => (
            <div key={s.label} className="fac-hero-meta-item">
              <span className="fac-hero-meta-label">{s.label}</span>
              <span className="fac-hero-meta-value">{s.value}</span>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

// ---------- about ----------
function FactoryAbout({ data }) {
  return (
    <section className="fac-about">
      <div className="fac-about-inner">
        <div>
          <div className="fac-about-eye mf-reveal">{data.role}</div>
          <h2 className="fac-about-summary mf-reveal" style={{ transitionDelay: '60ms' }}>
            {data.summary}
          </h2>
          <div className="fac-about-paras mf-reveal" style={{ transitionDelay: '120ms' }}>
            {data.paras.map((p, i) => <p key={i}>{p}</p>)}
            {data.links ? <p className="fac-about-links">{data.links}</p> : null}
          </div>
        </div>
        <aside className="fac-sidecar mf-reveal" style={{ transitionDelay: '180ms' }}>
          <div className="fac-sidecar-block">
            <div className="fac-sidecar-label">Entité légale</div>
            <div className="fac-sidecar-value">{data.legal}</div>
          </div>
          <div className="fac-sidecar-block">
            <div className="fac-sidecar-label">Adresse</div>
            <div className="fac-sidecar-value">{data.address}</div>
          </div>
          {data.distances && data.distances.length > 0 && (
            <div className="fac-sidecar-block">
              <div className="fac-sidecar-label">Logistique</div>
              <ul className="fac-sidecar-distances">
                {data.distances.map((d) => <li key={d}>{d}</li>)}
              </ul>
            </div>
          )}
          {data.facts && (
            <div className="fac-sidecar-block">
              <div className="fac-sidecar-label">Site en bref</div>
              <ul className="fac-sidecar-distances">
                {data.facts.size      && <li><strong>Surface :</strong> {data.facts.size}</li>}
                {data.facts.warehouse && <li><strong>Entrepôt :</strong> {data.facts.warehouse}</li>}
                {data.facts.lines     && <li><strong>Lignes :</strong> {data.facts.lines}</li>}
                {data.facts.moq       && <li><strong>MOQ :</strong> {data.facts.moq}</li>}
              </ul>
            </div>
          )}
        </aside>
      </div>
    </section>
  );
}

// ---------- capabilities ----------
function FactoryCapabilities({ data }) {
  return (
    <section className="fac-cap">
      <div className="fac-cap-inner">
        <div className="fac-section-head mf-reveal">
          <div className="fac-section-num">02 — Savoir-faire</div>
          <h2 className="fac-section-title">Ce que produit <em>cet atelier</em></h2>
        </div>
        <div className="fac-cap-grid mf-reveal" style={{ transitionDelay: '80ms' }}>
          {data.capabilities.map((c, i) => (
            <div key={c} className="fac-cap-item">
              <span className="fac-cap-marker">{String(i + 1).padStart(2, '0')}</span>
              <span className="fac-cap-text">{c}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- zones (photo gallery) ----------
function FactoryZones({ data }) {
  if (!data.zones || data.zones.length === 0) return null;
  return (
    <section className="fac-zones">
      <div className="fac-zones-inner">
        <div className="fac-section-head mf-reveal">
          <div className="fac-section-num">03 — À l'intérieur du bâtiment</div>
          <h2 className="fac-section-title">Étage <em>par étage</em></h2>
        </div>
        <div className="fac-zones-grid">
          {data.zones.map((z, i) => (
            <figure
              key={z.title}
              className="fac-zone mf-reveal"
              style={{ transitionDelay: `${(i % 4) * 60}ms` }}
            >
              <div className="fac-zone-img"><img src={z.img} alt={z.title + ' à ' + data.name} width="1600" height="1000" loading="lazy" decoding="async" /></div>
              <figcaption className="fac-zone-cap">
                <span className="fac-zone-cap-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="fac-zone-cap-title">{z.title}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- workforce + equipment tables ----------
function FactoryTables({ data }) {
  const hasWorkforce = data.workforce && data.workforce.length > 0;
  const hasEquipment = data.equipment && data.equipment.length > 0;
  const hasAudits = data.audits && data.audits.length > 0 && data.audits.some(a => a.items.length > 0);
  if (!hasWorkforce && !hasEquipment && !hasAudits) return null;

  return (
    <section className="fac-tables">
      <div className="fac-tables-inner">
        <div className="fac-section-head mf-reveal">
          <div className="fac-section-num">04 — Effectifs, équipement, audits</div>
          <h2 className="fac-section-title">Les <em>détails</em></h2>
        </div>
        <div className="fac-table-wrap">
          {hasWorkforce && (
            <div className="fac-table-block mf-reveal">
              <div className="fac-table-eye">Équipe</div>
              <h3 className="fac-table-title">Répartition de l'équipe</h3>
              <table className="fac-table">
                <tbody>
                  {data.workforce.map((r) => (
                    <tr key={r.label}>
                      <td>{r.label}</td>
                      <td>{r.value}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
          {hasEquipment && (
            <div className="fac-table-block mf-reveal" style={{ transitionDelay: '80ms' }}>
              <div className="fac-table-eye">Équipement</div>
              <h3 className="fac-table-title">Parc machines</h3>
              <table className="fac-table">
                <tbody>
                  {data.equipment.map((r) => (
                    <tr key={r.label}>
                      <td>{r.label}</td>
                      <td>{r.value}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {hasAudits && (
          <div style={{ marginTop: 'var(--s-9)' }} className="mf-reveal">
            <div className="fac-table-eye" style={{ marginBottom: 'var(--s-3)' }}>Audits et certifications</div>
            <div className="fac-audits-grid">
              {data.audits.map((a) => (
                <div key={a.group} className="fac-audit-row">
                  <div className="fac-audit-group">{a.group}</div>
                  <div className="fac-audit-items">
                    {a.items.map((it) => <span key={it} className="fac-chip">{it}</span>)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- portfolio ----------
function FactoryPortfolio({ data }) {
  if (!data.portfolio || data.portfolio.length === 0) return null;
  return (
    <section className="fac-portfolio">
      <div className="fac-portfolio-inner">
        <div className="fac-section-head mf-reveal">
          <div className="fac-section-num">05 — Portfolio produit</div>
          <h2 className="fac-section-title">Productions <em>récentes</em></h2>
        </div>
        <div className="fac-portfolio-grid">
          {data.portfolio.map((src, i) => (
            <a
              key={src}
              className="fac-portfolio-item mf-reveal"
              href={src}
              target="_blank"
              rel="noreferrer"
              style={{ transitionDelay: `${(i % 3) * 50}ms` }}
            >
              <img src={src} alt={'Produit de ' + data.name} width="900" height="1200" loading="lazy" decoding="async" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FactoryFaqs({ data }) {
  if (!data.faqs || data.faqs.length === 0) return null;
  return (
    <section className="fac-faqs">
      <div className="fac-faqs-inner">
        <div className="fac-section-head mf-reveal">
          <div className="fac-section-num">06 — Questions fréquentes</div>
          <h2 className="fac-section-title">Questions <em>courantes</em></h2>
        </div>
        <div className="fac-faqs-list mf-reveal" style={{ transitionDelay: '80ms' }}>
          {data.faqs.map((f, i) => (
            <details key={i} className="fac-faq-item">
              <summary className="fac-faq-q">{f.q}</summary>
              <div className="fac-faq-a">{f.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- other facilities ----------
function FactoryOther({ activeSlug }) {
  const others = FACTORY_INDEX.filter((f) => f.slug !== activeSlug);
  if (others.length === 0) return null;
  return (
    <section className="fac-other">
      <div className="fac-other-inner">
        <div className="fac-other-head mf-reveal">
          <div className="fac-other-num">07 — Autres sites</div>
          <h2 className="fac-other-title">Ailleurs dans <em>le réseau</em></h2>
        </div>
        <div className="fac-other-grid">
          {others.map((f, i) => (
            <a
              key={f.slug}
              href={f.href}
              className="fac-other-card mf-reveal"
              style={{ transitionDelay: `${i * 60}ms` }}
            >
              <div className="fac-other-card-num">{f.num}</div>
              <div className="fac-other-card-name">{f.name}</div>
              <div className="fac-other-card-role">{f.role}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FACTORY APP
// ============================================================
function FactoryApp({ slug }) {
  const data = FACTORIES[slug];
  const ref = useFacReveal();
  if (!data) return <div style={{ padding: 80 }}>Usine inconnue : {slug}</div>;
  const parent = COUNTRY_LABELS[data.country] || { label: 'Chine', href: '/fr/notre-reseau/chine' };
  const trail = [
    { label: 'Accueil', href: '/fr' },
    { label: 'Notre réseau', href: '/fr/notre-reseau' },
    { label: parent.label, href: parent.href },
    { label: data.name },
  ];
  // Factory → 3 most-relevant cross-links (Solutions, complementary factories, country parent).
  const relMap = {
    suzhou:    ['sol-production', 'sol-quality', 'sustain'],
    mupai:     ['sol-production', 'fac-tongxiang', 'sol-fabric'],
    tongxiang: ['sol-sampling', 'fac-mupai', 'sol-fabric'],
    sainty:    ['sol-odm', 'sol-production', 'fac-mupai'],
    hubei:     ['sol-production', 'sol-fabric', 'fac-sainty'],
    vietnam:   ['sol-sampling', 'sol-production', 'sustain'],
  };
  const relatedItems = relatedFor(relMap[slug] || []);
  return (
    <div ref={ref}>
      <Nav />
      <Breadcrumbs trail={trail} />
      <FactorySubnav activeSlug={slug} />
      <FactoryHero data={data} />
      <FactoryAbout data={data} />
      <FactoryCapabilities data={data} />
      <FactoryZones data={data} />
      <FactoryTables data={data} />
      <FactoryPortfolio data={data} />
      <FactoryFaqs data={data} />
      <RelatedContent heading={`Comment ${data.name} s'intègre`} items={relatedItems} />
      <FactoryOther activeSlug={slug} />
      <Footer />
    </div>
  );
}

Object.assign(window, { FactoryApp });