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

const APPLICATIONS_PAGE_APPS = [
  { title: 'Microscopy & imaging', icon: 'microscope', body: 'Structured illumination, optical trapping and super-resolution methods all depend on shaped beams. The Lightweaver supplies them without a custom bench or an in-house optics team.' },
  { title: 'Optical communication', icon: 'radio-tower', body: 'Create state-of-the-art structured light for communication, including turbulence-resistant and high-density encoding.' },
  { title: 'Optical engineering', icon: 'drafting-compass', body: 'Prototype a mode, test it, change it. Rapid prototyping of structured light shortens the loop between an idea and a measured result.' },
  { title: 'Physics education & teaching labs', icon: 'graduation-cap', body: 'A demonstrable structured-light source for teaching, with modes switched in software rather than rebuilt on the bench.' }
];

function Applications({ onNavigate }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      <TopNav base="../../" active="Applications" onNavigate={onNavigate} bordered />
      <section style={{ padding: 'var(--space-section) 0 var(--space-huge)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <SectionHeading eyebrow="Applications" title="Fields that need shaped light" lede="Research and industry areas that benefit from structured light — most of which have no reason to employ an optics group." level={1} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-md)', marginTop: 'var(--space-xxl)', alignItems: 'start' }}>
            {APPLICATIONS_PAGE_APPS.map((a, i) => <ApplicationTile key={a.title} {...a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />)}
          </div>
        </div>
      </section>
      <section style={{ padding: '0 0 var(--space-section)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-huge)', alignItems: 'center' }}>
          <BeamPlate src="/assets/beam-mode-02.png" ratio="4 / 3" caption="A mode selected in software, not built on a bench." />
          <div>
            <SectionHeading eyebrow="Outsource the setup" title="You do the science" />
            <p style={{ margin: 'var(--space-md) 0 0', maxWidth: '44ch', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-secondary)' }}>Structured-light users can outsource the setting up to us. You tell us the profile you need; the instrument produces it, repeatably, for as long as you need it.</p>
            <div style={{ marginTop: 'var(--space-lg)' }}><Button onClick={() => onNavigate('Contact')}>Discuss your application</Button></div>
          </div>
        </div>
      </section>
      <Footer base="../../" />
    </div>
  );
}

window.Applications = Applications;