const CLIENTS = [
  { name: 'Future Sphere', kind: 'image', img: 'assets/future-sphere-logo.png', color: '#0A2347' },
  { name: 'Accredia',      kind: 'image', img: 'assets/accredia-t.png' },
  { name: 'HSBC',          kind: 'image', img: 'assets/hsbc-t.png' },
  { name: 'Mpower Plus',   kind: 'image', img: 'assets/mpower-t.png' },
  { name: 'Solcom',        kind: 'image', img: 'assets/solcom-t.png' },
  { name: 'SThree',        kind: 'image', img: 'assets/sthree-t.png' },
];

function ClientLogo({ name, kind, img, color }) {
  // Render placeholder logos (geometric mark or stylized wordmark)
  const initials = name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
  if (kind === 'image') {
    return (
      <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
        <img src={img} alt={name + ' logo'} style={{height: 48, maxWidth: 180, objectFit: 'contain'}} />
        {color && (
          <span style={{
            fontFamily: 'var(--font-sans)', fontSize: 22, fontWeight: 500,
            letterSpacing: '-0.02em', color: color,
          }}>{name}</span>
        )}
      </div>
    );
  }
  if (kind === 'mark') {
    return (
      <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
        <svg width="32" height="32" viewBox="0 0 32 32">
          <circle cx="16" cy="16" r="15" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.9"/>
          <circle cx="16" cy="16" r="6" fill="currentColor"/>
        </svg>
        <span style={{
          fontFamily: 'var(--font-sans)', fontSize: 18, fontWeight: 600,
          letterSpacing: '-0.01em', color: 'currentColor',
        }}>{name}</span>
      </div>
    );
  }
  return (
    <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        letterSpacing: '0.14em', padding: '4px 8px',
        border: '1px solid currentColor', borderRadius: 4,
        opacity: 0.85,
      }}>{initials}</span>
      <span style={{
        fontFamily: 'var(--font-sans)', fontSize: 20, fontWeight: 500,
        letterSpacing: '-0.015em', fontStyle: name.includes('ü') || name.includes('ö') ? 'normal' : 'normal',
      }}>{name}</span>
    </div>
  );
}

function Clients() {
  // Duplicate the array for seamless infinite scroll
  const track = [...CLIENTS, ...CLIENTS];
  return (
    <section style={{
      padding: '80px 0', background: 'var(--gs-50)',
      borderTop: '1px solid var(--border)',
      borderBottom: '1px solid var(--border)',
      overflow: 'hidden',
    }}>
      <div style={{maxWidth: 1440, margin: '0 auto', padding: '0 40px 40px'}}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          gap: 32, flexWrap: 'wrap',
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 13,
            letterSpacing: '0.14em', color: 'var(--fg-muted)',
            textTransform: 'uppercase', fontWeight: 700,
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)'}}/>
            Clients · trusted by teams in 14 countries
          </div>
          <div style={{fontSize: 14, color: 'var(--gs-500)'}}>
            From Mittelstand manufacturing to global health networks.
          </div>
        </div>
      </div>

      <div style={{
        position: 'relative',
        overflow: 'hidden',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)',
        maskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)',
      }}>
        <div style={{
          display: 'flex',
          gap: 64,
          width: 'max-content',
          animation: 'logo-marquee 50s linear infinite',
          color: 'var(--gs-700)',
          padding: '12px 0',
        }}>
          {track.map((c, i) => (
            <div key={i} style={{
              flex: '0 0 auto',
              padding: '20px 28px',
              transition: 'color 200ms',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--gs-900)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--gs-700)'}
            >
              <ClientLogo name={c.name} kind={c.kind} img={c.img} color={c.color} />
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes logo-marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
      `}</style>
    </section>
  );
}

window.Clients = Clients;