const { Icon } = window.WAGMIGlobalDesignSystem_6f9300;

const CAPS = [
  ['kanban', 'Project management', 'Blockchain projects overseen from conception to launch, held to timelines and goals.'],
  ['boxes', 'Protocol development', 'Crypto protocols designed and shipped: stablecoins, games, trading platforms.'],
  ['users', 'Community & social', 'Engaged communities built and run as the growth engine, not the afterthought.'],
  ['megaphone', 'Marketing & growth', 'Positioning, campaigns and content systems that drive real adoption.'],
  ['rocket', 'Startup incubation', 'Guidance, network and resources to take a startup from zero to launch.'],
  ['sparkles', 'AI integration', 'AI and data woven into products for smarter decisions and sharper UX.'],
];

function Capabilities() {
  return (
    <section id="capabilities" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '96px 32px' }}>
        <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--lime-500)', fontWeight: 600 }}>Capabilities</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 46, lineHeight: 1.06, letterSpacing: '-0.015em', margin: '18px 0 44px', maxWidth: 760 }}>Everything a Web3 project needs, under one roof.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--border-subtle)', borderLeft: '1px solid var(--border-subtle)' }}>
          {CAPS.map(([ic, t, d]) => <Cap key={t} ic={ic} t={t} d={d} />)}
        </div>
      </div>
    </section>
  );
}
window.Capabilities = Capabilities;

function Cap({ ic, t, d }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ borderRight: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', padding: 30, background: h ? 'var(--ink-800)' : 'transparent', transition: 'background .2s' }}>
      <div style={{ color: h ? 'var(--lime-500)' : 'var(--violet-400)', transition: 'color .2s' }}><Icon name={ic} size={26} strokeWidth={1.6} /></div>
      <div style={{ marginTop: 20, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20 }}>{t}</div>
      <div style={{ marginTop: 10, fontSize: 14, lineHeight: 1.55, color: 'var(--text-secondary)' }}>{d}</div>
    </div>
  );
}

const MARQUEE = [
  ['arkadiko', 132], ['coti', 96], ['cpchain', 54], ['privex', 150],
  ['panenka', 128], ['mexc', 118], ['nfa', 92],
];

function PartnerMarquee() {
  const row = [...MARQUEE, ...MARQUEE];
  return (
    <section id="record" style={{ borderBottom: '1px solid var(--border-subtle)', background: 'var(--ink-850)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '64px 32px 32px', textAlign: 'center' }}>
        <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--text-muted)', fontWeight: 600 }}>Trusted by founders & teams across Web3 since 2017</div>
      </div>
      <div style={{ overflow: 'hidden', padding: '8px 0 56px', maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 68, whiteSpace: 'nowrap', animation: 'wg-marq 30s linear infinite', width: 'max-content' }}>
          {row.map(([name, w], i) => (
            <img key={i} src={`../assets/clients/${name}.png`} alt={name} style={{ width: w, height: 42, objectFit: 'contain', opacity: 0.7, filter: 'saturate(0)' }} />
          ))}
        </div>
      </div>
      <style>{`@keyframes wg-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}`}</style>
    </section>
  );
}
window.PartnerMarquee = PartnerMarquee;