const { Icon } = window.WAGMIGlobalDesignSystem_6f9300;

const DIFF = [
  ['Operators, not advisors', 'We embed as an extension of your team and own outcomes, not slide decks. If it needs building, we build it.'],
  ['Skin in the game', 'We back the projects we believe in and stay through launch and scale. Your milestones are our milestones.'],
  ['One integrated team', 'Strategy, product, protocol, growth and community under one roof, with no hand-offs, no finger-pointing and no gaps.'],
];

function Approach() {
  return (
    <section id="approach" style={{ borderBottom: '1px solid var(--border-subtle)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 90% at 20% 0%, rgba(118,92,255,0.14), transparent 60%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '96px 32px' }}>
        <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--lime-500)', fontWeight: 600 }}>The WAGMI difference</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 46, lineHeight: 1.06, letterSpacing: '-0.015em', margin: '20px 0 0', maxWidth: 860 }}>
          A studio, not a consultancy. We put builders where other firms send a report.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 56 }}>
          {DIFF.map(([t, d], i) => (
            <div key={t}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--violet-400)', fontWeight: 600 }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{ height: 1, background: 'var(--border-default)', margin: '16px 0 20px' }} />
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22 }}>{t}</div>
              <div style={{ marginTop: 12, fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Approach = Approach;

const PHASES = [
  ['crosshair', 'Discover', 'We pressure-test the thesis, map the market and align on where the real leverage is.'],
  ['git-branch-plus', 'Define', 'Positioning, tokenomics, product scope and protocol architecture: the plan that de-risks everything after.'],
  ['boxes', 'Build', 'We execute with precision: product, smart contracts, brand and go-to-market, shipped on a real timeline.'],
  ['rocket', 'Launch', 'Coordinated launch across product, markets and community, with activation that actually converts.'],
  ['trending-up', 'Scale', 'Ongoing operations, growth loops and partnerships that compound momentum long after day one.'],
];

function OperatingModel() {
  return (
    <section style={{ borderBottom: '1px solid var(--border-subtle)', background: 'var(--ink-850)' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '96px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.16em', color: 'var(--lime-500)', fontWeight: 600 }}>How we operate</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 46, lineHeight: 1.06, letterSpacing: '-0.015em', marginTop: 18 }}>From first block to global scale.</h2>
          </div>
          <div style={{ fontSize: 14, color: 'var(--text-muted)', maxWidth: 300 }}>One operating model, run end-to-end, so you can engage at any phase.</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 52, position: 'relative' }}>
          <div style={{ position: 'absolute', left: 0, right: 0, top: 23, height: 1, background: 'linear-gradient(90deg, var(--violet-500), var(--lime-500))', opacity: 0.5 }} />
          {PHASES.map(([ic, t, d], i) => (
            <div key={t} style={{ position: 'relative' }}>
              <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--ink-900)', border: `1.5px solid ${i === PHASES.length - 1 ? 'var(--lime-500)' : 'var(--violet-500)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: i === PHASES.length - 1 ? 'var(--lime-500)' : 'var(--violet-400)' }}>
                <Icon name={ic} size={22} strokeWidth={1.6} />
              </div>
              <div style={{ marginTop: 22, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{ marginTop: 6, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19 }}>{t}</div>
              <div style={{ marginTop: 10, fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.OperatingModel = OperatingModel;