// Why.jsx — why the loop compounds
const Why = () => {
  const cards = [
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 21c-4.97 0-9-1.79-9-4V7" />
          <path d="M21 7v10c0 2.21-4.03 4-9 4" />
          <ellipse cx="12" cy="7" rx="9" ry="4" />
          <path d="M12 11v4" /><path d="M10 13h4" />
        </svg>
      ),
      title: 'Intent is recorded, not inferred',
      body: 'The ledger stores why each query ran. Two statements with different SQL and the same purpose are the same question.',
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="3" />
          <path d="M12 9V4M12 20v-5M9 12H3M21 12h-6" />
          <circle cx="12" cy="3" r="1.2" /><circle cx="12" cy="21" r="1.2" />
          <circle cx="3" cy="12" r="1.2" /><circle cx="21" cy="12" r="1.2" />
        </svg>
      ),
      title: 'One chokepoint, one memory',
      body: 'Every source sits behind one engine, so a need spanning Postgres, S3 and a SaaS API is visible as one pattern.',
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 11l3 3 8-8" />
          <path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9" />
        </svg>
      ),
      title: 'Promotion is reviewable',
      body: 'The loop produces pipeline YAML you read, diff, edit and revert. Not a learned weight you have to trust.',
    },
  ];

  return (
    <section style={{ padding: '64px 32px', background: '#080f1b', borderTop: '1px solid rgba(125,211,252,0.06)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
            letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
            color: '#2ee89a', marginBottom: 16,
          }}>Why</div>
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.5vw, 54px)', fontWeight: 700,
            letterSpacing: '-0.025em', lineHeight: 1.08, margin: 0,
            color: '#e6eef9', textWrap: 'balance',
          }}>Why it compounds</h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 22,
        }}>
          {cards.map((c) => (
            <div key={c.title} style={{
              padding: '30px 28px',
              borderRadius: 16,
              border: '1px solid rgba(125,211,252,0.1)',
              background: 'rgba(14,26,46,0.5)',
            }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                width: 46, height: 46, borderRadius: 12, marginBottom: 18,
                background: 'rgba(46,232,154,0.08)',
                border: '1px solid rgba(46,232,154,0.2)',
                color: '#2ee89a',
              }}>{c.icon}</div>
              <h3 style={{
                fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 600,
                color: '#e6eef9', margin: '0 0 10px', letterSpacing: '-0.01em',
              }}>{c.title}</h3>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.65,
                color: '#8ea3c0', margin: 0,
              }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Why = Why;
