/* global React */
// Integration marquee — two rows of named pills, passive infinite scroll, no logos.
const INT_BOOK_PATH = '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>';

function IntPill({ name }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: '8px',
      padding: '9px 18px', borderRadius: 'var(--radius-full)',
      fontFamily: 'var(--font-sans)', fontSize: '13.5px', fontWeight: 600, color: 'var(--text-strong)',
      flexShrink: 0, whiteSpace: 'nowrap', userSelect: 'none',
    }}>
      {name}
    </span>
  );
}

const ROW1 = ['Xero', 'QuickBooks', 'Sage', 'FreeAgent', 'Wave', 'Zoho Books', 'FreshBooks', 'NetSuite'];
const ROW2 = ['NetSuite', 'FreshBooks', 'Zoho Books', 'Wave', 'FreeAgent', 'Sage', 'QuickBooks', 'Xero'];
// Three copies per row so the loop seam never lands in the viewport at any width.
const row1Track = [...ROW1, ...ROW1, ...ROW1];
const row2Track = [...ROW2, ...ROW2, ...ROW2];

function Integrations() {
  return (
    <section style={{ borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', background: 'var(--surface-card)' }}>
      <style>{`
        @keyframes mqLeft {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-33.333%); }
        }
        @keyframes mqRight {
          0%   { transform: translateX(-33.333%); }
          100% { transform: translateX(0); }
        }
        @media (prefers-reduced-motion: reduce) {
          .mq-track { animation-play-state: paused !important; }
        }
      `}</style>

      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '44px var(--container-pad)', display: 'flex', flexDirection: 'column', gap: '24px' }}>

        {/* Header */}
        <div style={{ textAlign: 'center' }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 700, letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
            Integrations · Coming soon
          </span>
          <p style={{ margin: '6px 0 0', fontFamily: 'var(--font-sans)', fontSize: 'clamp(1.05rem, 2vw, 1.3rem)', fontWeight: 700, color: 'var(--ink-900)', letterSpacing: '-0.02em', lineHeight: 1.2 }}>
            Works with your accounting stack
          </p>
        </div>

        {/* Marquee */}
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          {/* Left fade */}
          <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: '80px', background: 'linear-gradient(to right, var(--surface-card), transparent)', zIndex: 2, pointerEvents: 'none' }} />
          {/* Right fade */}
          <div aria-hidden="true" style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '80px', background: 'linear-gradient(to left, var(--surface-card), transparent)', zIndex: 2, pointerEvents: 'none' }} />

          {/* Row 1 — scrolls left */}
          <div style={{ display: 'flex', marginBottom: '10px' }}>
            <div className="mq-track" style={{ display: 'flex', gap: '10px', animation: 'mqLeft 26s linear infinite', willChange: 'transform' }}>
              {row1Track.map((name, i) => <IntPill key={i} name={name} />)}
            </div>
          </div>

          {/* Row 2 — scrolls right */}
          <div style={{ display: 'flex' }}>
            <div className="mq-track" style={{ display: 'flex', gap: '10px', animation: 'mqRight 32s linear infinite', willChange: 'transform' }}>
              {row2Track.map((name, i) => <IntPill key={i} name={name} />)}
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}
window.Integrations = Integrations;