// Compliance — institutional risk-mitigation block, paper background, monospace metric column
const Compliance = () => {
  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.2 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const tenets = [
    { k: '01', t: 'Capital Transparency',
      d: 'Every transaction is structured under Australian-led private capital with audit-ready treasury records.' },
    { k: '02', t: 'Channel Segregation',
      d: 'Strict territorial ring-fencing and controlled bonded transit — proactively preventing channel conflict and protecting primary market stability.' },
    { k: '03', t: 'Downstream Governance',
      d: 'Institutional contract frameworks and strict pricing guardrails enforced across all independent placements.' },
    { k: '04', t: 'Regulatory Posture',
      d: 'Continuous adherence to HK SAR free-trade ordinances, AU export controls, and country-of-destination duties.' },
  ];

  return (
    <section className="gb-section gb-cmp" id="compliance">
      <div className="gb-container">

        <div className="gb-cmp__head">
          <span className="gb-her2__eyebrow gb-cmp__eyebrow">— V. COMPLIANCE</span>
          <h2 className="gb-cmp__title">
            Institutional compliance &amp; <em>risk mitigation</em>.
          </h2>
        </div>

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

        <div className="gb-cmp__grid">
          <div className="gb-cmp__lede">
            <p>
              Our competitive edge is built on uncompromising legal and financial frameworks.
              Goodbrand Group engineers robust risk-mitigation protocols, ensuring total
              supply-chain integrity, capital transparency, and strategic market insulation.
            </p>
            <p className="gb-cmp__quiet">
              We navigate complex cross-border regulations with audit-ready precision —
              meticulously protecting our partners&rsquo; brand equity and global pricing
              architectures in every transaction.
            </p>

            <div className="gb-cmp__seal">
              <div className="gb-cmp__seal-rule"></div>
              <div className="gb-cmp__seal-row">
                <span className="gb-cmp__seal-l">Operating jurisdictions</span>
                <span className="gb-cmp__seal-r">AU · HK SAR</span>
              </div>
              <div className="gb-cmp__seal-row">
                <span className="gb-cmp__seal-l">Audit cadence</span>
                <span className="gb-cmp__seal-r">Bi-annual · External</span>
              </div>
              <div className="gb-cmp__seal-row">
                <span className="gb-cmp__seal-l">Confidentiality</span>
                <span className="gb-cmp__seal-r">NDA · Mutual</span>
              </div>
            </div>
          </div>

          <div className="gb-cmp__list" ref={listRef}>
            {tenets.map((it) => (
              <div key={it.k} className="gb-cmp__item">
                <div className="gb-cmp__item-k">{it.k}</div>
                <div className="gb-cmp__item-body">
                  <h4 className="gb-cmp__item-t">{it.t}</h4>
                  <p className="gb-cmp__item-d">{it.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
window.Compliance = Compliance;