// Partners — anonymized institutional partner profiles with staggered fade-in
const Partners = () => {
  const gridRef = React.useRef(null);
  React.useEffect(() => {
    const el = gridRef.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          el.classList.add('is-visible');
          io.disconnect();
        }
      });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const partners = [
    { tier: 'I',   region: 'EUROPE · WESTERN',       title: 'Heritage Maison',
      desc: 'Soft luxury · Leather goods · Atelier-grade craftsmanship · Multi-decade lineage.' },
    { tier: 'II',  region: 'EUROPE · MEDITERRANEAN', title: 'Couture Group',
      desc: 'Ready-to-wear · Multi-marque holding · Vertically integrated atelier production.' },
    { tier: 'III', region: 'NORTH AMERICA',          title: 'Performance Athleisure',
      desc: 'Technical apparel · Premium footwear · Listed parent · Global retail footprint.' },
    { tier: 'IV',  region: 'APAC · NORTH ASIA',      title: 'Skincare & Cosmetics',
      desc: 'Cult-status premium beauty · Heritage formulations · Pan-regional licensing.' },
    { tier: 'V',   region: 'OCEANIA',                title: 'Wines & Spirits Estate',
      desc: 'Single-vineyard provenance · Heritage labels · Regulated export licences.' },
    { tier: 'VI',  region: 'APAC · PAN-REGIONAL',    title: 'Lifestyle Conglomerate',
      desc: 'Wellness · Home · Accessories · Multi-brand institutional inventory programme.' },
  ];

  return (
    <section className="gb-section gb-prt" id="partners">
      <div className="gb-container">

        <div className="gb-prt__head">
          <span className="gb-her2__eyebrow gb-prt__eyebrow">— IV. PARTNERS</span>
          <div>
            <h2 className="gb-prt__title">
              Strategic <em>brand portfolios</em>.
            </h2>
            <p className="gb-prt__lead">
              We operate as the trusted distribution engine for globally recognized
              brand houses. Aligned with our institutional B2B frameworks, the
              profiles below represent the core categories and asset classes
              currently moving through our APAC supply chain.
            </p>
          </div>
        </div>

        <div className="gb-prt__rule"></div>

        <div className="gb-prt__grid" ref={gridRef}>
          {partners.map((p) => (
            <article key={p.tier} className="gb-prt__card">
              <div className="gb-prt__card-meta">
                <span className="gb-prt__card-tier">— {p.tier}</span>
                <span className="gb-prt__card-region">{p.region}</span>
              </div>
              <h3 className="gb-prt__card-title">{p.title}</h3>
              <p className="gb-prt__card-desc">{p.desc}</p>
            </article>
          ))}
        </div>

        <div className="gb-prt__seal">
          <span className="gb-prt__seal-label">— Institutional Portfolio</span>
          <span className="gb-prt__seal-line"></span>
          <span className="gb-prt__seal-label">B2B · Distribution</span>
        </div>
      </div>
    </section>
  );
};
window.Partners = Partners;