const { TopNav, Footer, Button, Card, Icon, SectionHeading, Badge } = window[Object.keys(window).find(k => k.startsWith('DesignSystem_'))];

function About({ onNavigate }) {
  return (
    <div>
      <TopNav base="../../" active="About" onNavigate={onNavigate} bordered />
      <section style={{ padding: 'var(--space-section) 0 var(--space-huge)' }}>
        <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <SectionHeading eyebrow="About us" title="A spin-out of the Structured Light Laboratory" level={1} />
          <p style={{ margin: 'var(--space-lg) 0 0', fontSize: 20, lineHeight: 1.6, color: 'var(--text-secondary)' }}>Button Optics is a tech-based spin-out from the Structured Light Laboratory at the Wits School of Physics.</p>
          <p style={{ margin: 'var(--space-lg) 0 0', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-muted)' }}>Our business is built on cutting-edge development of versatile, fast and compact systems for the generation and diagnosis of structured light. We use that to build the turn-key solution the field has been missing: a reliable generator that produces structured light at the click of a button.</p>
        </div>
      </section>
      <section style={{ padding: '0 0 var(--space-section)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-md)' }}>
            {[
              { t: 'Origin', b: 'Structured Light Laboratory, Wits School of Physics, Johannesburg.' },
              { t: 'What we make', b: 'Custom electronics, optics and software, integrated into one instrument.' },
              { t: 'What is next', b: 'A diagnostics product line, with applications across industry.' }
            ].map((c) => (
              <Card key={c.t} variant="panel">
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 600, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{c.t}</div>
                <p style={{ margin: 'var(--space-sm) 0 0', fontSize: 'var(--type-body-sm-size)', lineHeight: 1.7, color: 'var(--text-secondary)' }}>{c.b}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>
      <section id="contact" style={{ padding: 'var(--space-section) 0', background: 'var(--ink-void)', borderTop: '1px solid var(--ink-hairline)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--space-xl)' }}>
          <div>
            <SectionHeading eyebrow="Contact" title="Tell us what you need the light to do" />
            <p style={{ margin: 'var(--space-md) 0 0', maxWidth: '40ch', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-secondary)' }}>Have a question, or need help working out what you need? Get in touch and we will point you in the right direction.</p>
          </div>
          <div>
            <Button size="lg" iconRight={<Icon name="arrow-right" size={14} />} onClick={() => onNavigate('Contact')}>Send an enquiry</Button>
          </div>
        </div>
      </section>
      <Footer base="../../" />
    </div>
  );
}

window.About = About;