// dthas landing — capabilities / stack. Monospace tag grid grouped by domain.
function Capabilities() {
  const { Tag } = window.DesignSystem_aa2f04;
  const { Section, SectionHead } = window;

  const groups = [
    { label: 'Java', tags: ['Spring Boot', 'JavaFX'] },
    { label: 'Python', tags: ['Django', 'FastAPI'] },
    { label: 'JavaScript / TypeScript', tags: ['Angular', 'Vue', 'Node.js'] },
    { label: 'Dart', tags: ['Flutter'] },
    { label: 'PHP', tags: ['Laravel', 'CodeIgniter'] },
    { label: 'C#', tags: ['.NET'] },
    { label: 'Platform & delivery', tags: ['DevOps', 'Git', 'Agile / Scrum'] },
    { label: 'Data', tags: ['MySQL', 'MongoDB', 'Neo4j'] },
    { label: 'Consulting', tags: ['Software consultancy', 'Digital consultancy', 'Strategy Consultancy'] },
  ];

  return (
    <Section id="capabilities">
      <SectionHead
        eyebrow="Capabilities"
        title="A pragmatic, polyglot stack."
        intro="Java and Python at the core, with a broad command of modern web frameworks like Angular, Flutter and more. Chosen to fit the problem, not the other way around."
      />
      <div className="stagger" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(28px, 4vh, 44px)', marginTop: 'clamp(24px, 4vh, 48px)' }}>
        {groups.map((g) => (
          <div key={g.label} className="dthas-cap-row" style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 220px) 1fr',
            gap: 'clamp(16px, 3vw, 48px)', alignItems: 'start',
            paddingTop: '24px', borderTop: '1px solid var(--border-hairline)',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)',
              letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-secondary)',
              paddingTop: '6px',
            }}>{g.label}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
              {g.tags.map((t) => <Tag key={t} interactive>{t}</Tag>)}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Capabilities });