// dthas landing — about. One precise paragraph + studio facts.
function About() {
  const { Section, SectionHead } = window;
  const facts = [
    ['Founded', 'Den Haag, NL'],
    ['Founder', 'Deniz Tan Hasdemir'],
    ['Background', 'TU Delft, Computer Science'],
    ['Model', 'Independent studio'],
  ];
  return (
    <Section id="about">
      <div className="dthas-about" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.5fr) minmax(0, 1fr)',
        gap: 'clamp(32px, 6vw, 96px)', alignItems: 'start',
      }}>
        <div>
          <SectionHead eyebrow="About" title="A TU Delft engineer, running an independent studio." />
          <p style={{
            margin: 0, maxWidth: '52ch',
            fontSize: 'clamp(1.25rem, 1.8vw, 1.625rem)', lineHeight: 1.45,
            letterSpacing: '-0.02em', color: 'var(--text-primary)',
          }}>
            dthas is the practice of a TU Delft Computer Science engineer delivering
            tailored software and consultancy. Small by design: direct access to the
            person building the work, with the rigour of a much larger team.
          </p>
        </div>
        <dl style={{ margin: 0, display: 'flex', flexDirection: 'column' }}>
          {facts.map(([k, v]) => (
            <div key={k} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              gap: '16px', padding: '18px 0', borderTop: '1px solid var(--border-hairline)',
            }}>
              <dt style={{
                fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-caption)',
                letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-secondary)',
              }}>{k}</dt>
              <dd style={{ margin: 0, fontSize: 'var(--fs-small)', textAlign: 'right' }}>{v}</dd>
            </div>
          ))}
        </dl>
      </div>
    </Section>
  );
}

Object.assign(window, { About });