/* Infinite capability slider with progressive-blur edges and hover slow-down.
   Ported from the InfiniteSlider / ProgressiveBlur pattern onto the ZaviFx token layer. */
const CAPABILITIES = [
  'Digital Strategy', 'Search Engine Optimization', 'WordPress Development', 'UI/UX Design',
  'Graphic Design & Branding', 'Content Marketing', 'Social Media Marketing',
  'Performance Marketing', 'Link Building', 'Website Maintenance', 'Conversion Rate Optimization',
];

function ProgressiveBlur({ side, layers = 6, intensity = 1.4 }) {
  const angle = side === 'left' ? 270 : 90;
  return (
    <span className={'zx-cloud__blur zx-cloud__blur--' + side} aria-hidden="true">
      {Array.from({ length: layers }).map((_, i) => {
        const seg = 1 / (layers + 1);
        const stops = [i * seg, (i + 1) * seg, (i + 2) * seg, (i + 3) * seg]
          .map((p, k) => 'rgba(255,255,255,' + (k === 1 || k === 2 ? 1 : 0) + ') ' + p * 100 + '%')
          .join(', ');
        const grad = 'linear-gradient(' + angle + 'deg, ' + stops + ')';
        return <i key={i} style={{ maskImage: grad, WebkitMaskImage: grad, backdropFilter: 'blur(' + i * intensity + 'px)' }} />;
      })}
    </span>
  );
}

function LogoCloud({ heading = 'Capabilities across the funnel', sub = 'Eleven disciplines, one brief' }) {
  const [slow, setSlow] = React.useState(false);
  return (
    <section className="zx-cloud" data-reveal>
      <div className="zx-container">
        <h2 className="zx-cloud__head">
          <span>{sub}</span>
          <strong>{heading}</strong>
        </h2>
      </div>
      <div className="zx-cloud__rail">
        <span className="zx-cloud__edge" aria-hidden="true" />
        <div className={'zx-cloud__track' + (slow ? ' is-slow' : '')}
          onMouseEnter={() => setSlow(true)} onMouseLeave={() => setSlow(false)}>
          {[0, 1].map((k) => (
            <div className="zx-cloud__set" key={k} aria-hidden={k === 1 ? 'true' : undefined}>
              {CAPABILITIES.map((c) => (
                <span className="zx-cloud__item" key={c + k} tabIndex={k === 0 ? 0 : -1}>
                  <span className="zx-cloud__roll"><b>{c}</b><i aria-hidden="true">{c}</i></span>
                </span>
              ))}
            </div>
          ))}
        </div>
        <span className="zx-cloud__fade zx-cloud__fade--l" aria-hidden="true" />
        <span className="zx-cloud__fade zx-cloud__fade--r" aria-hidden="true" />
        <ProgressiveBlur side="left" />
        <ProgressiveBlur side="right" />
      </div>
    </section>
  );
}
Object.assign(window, { LogoCloud, CAPABILITIES });