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

const FAMILIES = {
  'Hermite–Gauss': { src: '/assets/beam-mode-01.png', mode: 'HG 10,10', body: 'Rectangular symmetry: a grid of lobes set by two indices. Used where a separable, cartesian mode basis matters — mode-division multiplexing, alignment references, beam-quality tests.' },
  'Ince–Gauss': { src: '/assets/beam-mode-ig-8-6.png', mode: 'IG 8,6', body: 'Elliptic coordinates bridge the Hermite and Laguerre families, giving a continuous transition between rectangular and circular symmetry. Useful when a mode has to be tuned rather than chosen.' },
  'Laguerre–Gauss': { src: '/assets/beam-mode-lg-3-1.png', mode: 'LG 3,1', body: 'Circular symmetry with an azimuthal phase winding — the doughnut modes that carry orbital angular momentum. Used in optical trapping, micro-rotation and high-capacity optical links.' },
  'Vector': { src: '/assets/beam-mode-radial-cvv.png', mode: 'RADIAL CVV', body: 'Shown: a radially polarised cylindrical vector vortex beam. Polarisation varies across the beam rather than being uniform. Radial and azimuthal fields focus more tightly than scalar beams — valuable in microscopy and materials processing.' },
  'Airy': { src: '/assets/beam-mode-airy.png', mode: 'AIRY', body: 'A beam that bends as it travels and heals itself after an obstruction. Its main lobe follows a curved path without spreading — used in light-sheet microscopy, particle clearing and curved-path machining.' },
  'Skyrmion': { src: '/assets/beam-mode-skyrmion.png', mode: 'SKYRMION', body: 'The polarisation wraps across the beam so every state appears exactly once — circular at the centre, linear around a ring, opposite-handed at the edge. A topologically protected texture, studied for robust information encoding.' },
  'Optical knot': { src: '/assets/beam-mode-trefoil-knot.png', mode: 'KNOT', body: 'Lines of darkness inside the beam tied into a trefoil knot as it propagates. Shown is the focal-plane intensity of the superposition that carries the knot — a demonstration of how far light can be sculpted in three dimensions.' }
};

function StructuredLight({ onNavigate }) {
  const [tab, setTab] = React.useState('Hermite–Gauss');
  const f = FAMILIES[tab];
  return (
    <div>
      <TopNav base="../../" active="Structured Light" 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="Structured light" title="Sculpting a laser beam" level={1} />
          <p style={{ margin: 'var(--space-lg) 0 0', fontSize: 22, lineHeight: 1.6, color: 'var(--text-secondary)' }}>Structured light is the ability to transform simple laser beams into rich electromagnetic fields with sculpted phase, amplitude and polarisation.</p>
          <p style={{ margin: 'var(--space-lg) 0 0', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-muted)' }}>A laser out of the box gives you one profile. Structured light gives you a choice of profile — and with it, control over how the light interacts with whatever you point it at. The physics is well understood. Building the instrument that does it is the hard part.</p>
        </div>
      </section>
      <section style={{ padding: '0 0 var(--space-section)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <TabBar tabs={Object.keys(FAMILIES)} active={tab} onChange={setTab} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-huge)', marginTop: 'var(--space-xxl)', alignItems: 'center' }}>
            <BeamPlate src={f.src} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'var(--type-display-md-size)', letterSpacing: 'var(--type-display-md-track)', fontWeight: 500, color: 'var(--text-primary)' }}>{tab}</h3>
              <p style={{ margin: 0, maxWidth: '46ch', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-secondary)' }}>{f.body}</p>
              <div><Button variant="ghost" iconRight={<Icon name="arrow-right" size={14} />} onClick={() => onNavigate('Lightweaver')}>Generate this mode</Button></div>
            </div>
          </div>
        </div>
      </section>
      <section 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)' }}>
          <SectionHeading eyebrow="The barrier" title="Why it is hard for most labs to get there" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-md)', marginTop: 'var(--space-xxl)' }}>
            {[
              { icon: 'clock', t: 'Time', b: 'Weeks of specifying, sourcing and aligning components before a single measurement.' },
              { icon: 'book-open', t: 'Know-how', b: 'The physics, the software and the electronics all have to be learned before they can be trusted.' },
              { icon: 'triangle-alert', t: 'Reliability', b: 'Bench-built systems end up over- or under-engineered, and drift between sessions.' },
              { icon: 'package', t: 'Cost', b: 'The components are all on the market, but sourcing and integrating them separately adds up. We package everything into one instrument, at a lower total cost.' }
            ].map((c) => (
              <Card key={c.t} variant="hairline">
                <span style={{ color: 'var(--laser-red-text)' }}><Icon name={c.icon} size={20} /></span>
                <h4 style={{ margin: 'var(--space-md) 0 var(--space-xs)', fontFamily: 'var(--font-display)', fontSize: 'var(--type-title-lg-size)', fontWeight: 600, color: 'var(--text-primary)' }}>{c.t}</h4>
                <p style={{ margin: 0, fontSize: 'var(--type-body-sm-size)', lineHeight: 1.7, color: 'var(--text-secondary)' }}>{c.b}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>
      <Footer base="../../" />
    </div>
  );
}

window.StructuredLight = StructuredLight;