const CAP_ICONS = {
  workflow: <><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></>,
  grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
  cycle: <><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></>,
  users: <><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></>,
  brain: <><path d="M9 3a3 3 0 00-3 3v.5A2.5 2.5 0 005 11a2.5 2.5 0 001 4.5V18a3 3 0 003 3V3z"/><path d="M15 3a3 3 0 013 3v.5a2.5 2.5 0 011 4.5 2.5 2.5 0 01-1 4.5V18a3 3 0 01-3 3V3z"/></>,
  layers: <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
  chart: <><path d="M3 3v18h18"/><path d="M7 14l4-4 4 3 5-7"/></>,
  system: <><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7 6h10M6 8l5 8M18 8l-5 8"/></>,
};

function Capabilities() {
  const { t } = window.useT();
  const CAPS = [
    { code: 'C-01', icon: 'workflow', name: t('cap.1.name'), desc: t('cap.1.desc') },
    { code: 'C-02', icon: 'grid',     name: t('cap.2.name'), desc: t('cap.2.desc') },
    { code: 'C-03', icon: 'cycle',    name: t('cap.3.name'), desc: t('cap.3.desc') },
    { code: 'C-04', icon: 'users',    name: t('cap.4.name'), desc: t('cap.4.desc') },
    { code: 'C-05', icon: 'brain',    name: t('cap.5.name'), desc: t('cap.5.desc') },
    { code: 'C-06', icon: 'layers',   name: t('cap.6.name'), desc: t('cap.6.desc') },
    { code: 'C-07', icon: 'chart',    name: t('cap.7.name'), desc: t('cap.7.desc') },
    { code: 'C-08', icon: 'system',   name: t('cap.8.name'), desc: t('cap.8.desc') },
  ];

  return (
    <section style={capStyles.wrap} id="capabilities">
      <div style={capStyles.inner}>
        <div style={capStyles.header}>
          <div style={capStyles.eyebrow}>{t('cap.eyebrow')}</div>
          <h2 style={capStyles.h2}>{t('cap.h2')}</h2>
          <p style={capStyles.lede}>{t('cap.lede')}</p>
        </div>

        <div style={capStyles.grid}>
          {CAPS.map((c, i) => (
            <div key={c.code} style={{...capStyles.card, ...(i === 7 ? capStyles.cardFeatured : {})}}>
              <div style={capStyles.cardTop}>
                <div style={capStyles.iconBox}>
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="none"
                       stroke={i === 7 ? '#FFD13A' : '#2DCEFF'} strokeWidth="1.5"
                       strokeLinecap="round" strokeLinejoin="round">
                    {CAP_ICONS[c.icon]}
                  </svg>
                </div>
                <span style={capStyles.code}>{c.code}</span>
              </div>
              <div style={capStyles.name}>{c.name}</div>
              <div style={capStyles.desc}>{c.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const capStyles = {
  wrap: { padding: '96px 32px', background: 'var(--ink-950)' },
  inner: { maxWidth: 1240, margin: '0 auto' },
  header: { display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 56, maxWidth: 720 },
  eyebrow: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)', letterSpacing: '0.14em', textTransform: 'uppercase' },
  h2: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--fg-1)', margin: 0 },
  lede: { fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 },
  card: {
    background: 'var(--ink-900)', border: '1px solid var(--border-default)',
    borderRadius: 12, padding: 24, display: 'flex', flexDirection: 'column', gap: 14,
    minHeight: 200,
    transition: 'border-color 220ms, background 220ms',
  },
  cardFeatured: { background: 'var(--ink-800)', borderColor: 'rgba(255,209,58,0.30)' },
  cardTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  iconBox: {
    width: 40, height: 40, borderRadius: 10,
    background: 'var(--ink-800)', border: '1px solid var(--border-default)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  code: { fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em' },
  name: { fontFamily: 'Montserrat', fontWeight: 600, fontSize: 16, color: 'var(--fg-1)', letterSpacing: '-0.005em' },
  desc: { fontFamily: 'Inter', fontSize: 13, lineHeight: 1.55, color: 'var(--fg-3)' },
};