// Capabilities — editorial numbered layout with staggered fade-in on scroll
const Capabilities = () => {
  const listRef = React.useRef(null);
  React.useEffect(() => {
    const el = listRef.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 items = [
    {
      n: '01',
      kicker: 'Capital deployment',
      title: 'Strategic Capital Deployment.',
      body: [
        'We deploy institutional capital to acquire high-volume premium assets, transforming complex global inventory into seamless liquidity.',
        'Rather than transactional trading, we engineer sophisticated supply-chain frameworks that align financial structuring with precise market demands, ensuring long-term value creation.',
      ],
      meta: ['Asset acquisition', 'Liquidity optimization', 'Financial structuring'],
    },
    {
      n: '02',
      kicker: 'Free-trade infrastructure',
      title: 'Hong Kong as the APAC Operations Hub.',
      body: [
        'Our Hong Kong free-trade infrastructure serves as the regional operations hub for APAC. Functioning under strict institutional compliance, this hub manages secure transit, inventory orchestration, and audit-ready documentation.',
        'We ensure absolute supply chain integrity before assets enter our proprietary distribution corridors.',
      ],
      meta: ['Free-trade zone', 'Secure transit', 'Audit-ready compliance'],
    },
    {
      n: '03',
      kicker: 'Institutional placement',
      title: 'Tier-1 Market Placement.',
      body: [
        'We execute highly disciplined asset placement across our closed-loop APAC trade lanes — spanning North Asia, South East Asia, and Oceania. Every allocation, from volume to pricing, is governed by rigid, institutional-grade contract frameworks.',
        'This absolute channel control insulates the market and fiercely protects each brand’s premium positioning at the point of sale.',
      ],
      meta: ['Channel governance', 'Brand equity protection', 'Disciplined allocation'],
    },
  ];

  return (
    <section className="gb-section gb-cap2" id="capabilities">
      <div className="gb-container">

        <div className="gb-cap2__head">
          <span className="gb-her2__eyebrow gb-cap2__eyebrow">— II. CAPABILITIES</span>
          <h2 className="gb-cap2__title">
            Core capabilities — <em>architecting global liquidity</em> for the world&rsquo;s
            premium brands.
          </h2>
        </div>

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

        <div className="gb-cap2__list" ref={listRef}>
          {items.map((it) => (
            <article key={it.n} className={"gb-cap2__row" + (it.n === '02' ? ' gb-cap2__row--alt' : '')}>
              <div className="gb-cap2__num">{it.n}</div>
              <div className="gb-cap2__kicker">
                <span className="gb-her2__eyebrow">— {it.kicker}</span>
              </div>
              <div className="gb-cap2__copy">
                <h3 className="gb-cap2__rowtitle">{it.title}</h3>
                {it.body.map((p, i) => <p key={i} className="gb-cap2__p">{p}</p>)}
              </div>
              <div className="gb-cap2__meta">
                {it.meta.map((m, i) => (
                  <div key={i} className="gb-cap2__meta-row">
                    <span className="gb-cap2__meta-dot"></span>
                    <span className="gb-cap2__meta-t">{m}</span>
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Capabilities = Capabilities;