/* Platforms — orbiting tool rings cropped to the right of an editorial column. */
const PLATFORMS = [
  { n: 'WordPress', s: 'wordpress', c: '#21759B' },
  { n: 'WooCommerce', s: 'woocommerce', c: '#96588A' },
  { n: 'Elementor', s: 'elementor', c: '#92003B' },
  { n: 'Divi', s: null, c: '#5A2AE0' },
  { n: 'Shopify', s: 'shopify', c: '#7AB55C' },
  { n: 'Google Ads', s: 'googleads', c: '#4285F4' },
  { n: 'Meta Ads', s: 'meta', c: '#0866FF' },
  { n: 'GA4', s: 'googleanalytics', c: '#E37400' },
  { n: 'Search Console', s: 'googlesearchconsole', c: '#458CF5' },
  { n: 'Ahrefs', s: null, c: '#054ADA' },
  { n: 'Semrush', s: 'semrush', c: '#FF642D' },
  { n: 'Moz', s: null, c: '#209CEE' },
  { n: 'Figma', s: 'figma', c: '#F24E1E' },
];

function PlatformIcon({ p }) {
  const [bad, setBad] = React.useState(!p.s);
  if (bad) return <span className="zx-orbit__ini" style={{ color: p.c }}>{p.n.slice(0, 2)}</span>;
  return <img src={'https://cdn.simpleicons.org/' + p.s} alt="" width="26" height="26" loading="lazy" onError={() => setBad(true)} />;
}

function PlatformOrbit({ go }) {
  const [hover, setHover] = React.useState(null);
  const rings = [PLATFORMS.slice(0, 4), PLATFORMS.slice(4, 9), PLATFORMS.slice(9)];
  return (
    <section className="zx-orbitsec">
      <div className="zx-container">
        <div className="zx-orbit__shell">
          <div className="zx-orbit__copy">
            <span className="zx-orbit__eyebrow">Platforms</span>
            <h2 className="zx-orbit__h2">Built and marketed on the tools your team already uses</h2>
            <p className="zx-orbit__lede">{hover || 'Thirteen platforms, one stack. Hover a logo to see what we use it for.'}</p>
            <div className="zx-orbit__cta">
              <Button onClick={() => go('services')} data-magnetic>Explore Our Services</Button>
              <Button variant="secondary" onClick={() => go('contact')}>Book a Free Consultation</Button>
            </div>
            <ul className="zx-orbit__list">
              {PLATFORMS.map((p) => (
                <li key={p.n} onMouseEnter={() => setHover(p.n + ' — part of our delivery stack.')} onMouseLeave={() => setHover(null)}>{p.n}</li>
              ))}
            </ul>
          </div>
          <div className="zx-orbit__stage" aria-hidden="true">
            <div className="zx-orbit__field">
              <span className="zx-orbit__core">
                <img src={window.ASSETS + 'logo-zavifx-white.png'} alt="" />
              </span>
              {rings.map((set, r) => (
                <div key={r} className="zx-orbit__ring" style={{ '--size': (17 + r * 11) + 'rem', '--spin': (26 + r * 10) + 's' }}>
                  {set.map((p, n) => {
                    const a = (n / set.length) * 2 * Math.PI;
                    return (
                      <span key={p.n} className="zx-orbit__chip"
                        style={{ left: (50 + 50 * Math.cos(a)) + '%', top: (50 + 50 * Math.sin(a)) + '%', '--spin': (26 + r * 10) + 's' }}
                        onMouseEnter={() => setHover(p.n + ' — part of our delivery stack.')} onMouseLeave={() => setHover(null)}>
                        <PlatformIcon p={p} />
                      </span>
                    );
                  })}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { PlatformOrbit, PLATFORMS });