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

const PILLARS = [
  {
    key: 'Creation',
    icon: 'sun',
    status: 'Available now',
    live: true,
    title: 'Creation',
    line: 'Make any beam you can name.',
    body: 'Scalar and vectorial modes, non-diffracting and accelerating light, vortex and topological beams, and virtual optical elements — lenses, axicons, gratings, aberrations — all generated in software. Mode orders to 20, superpositions of up to 10 modes, switching at up to 1000 Hz.',
    image: '/assets/beam-mode-03.png',
    to: 'Lightweaver'
  },
  {
    key: 'Detection',
    icon: 'scan-eye',
    status: 'In development',
    live: false,
    title: 'Detection & diagnosis',
    line: 'Characterise the amplitude, phase and polarisation of a beam.',
    body: 'Ask to be notified when it launches.',
    image: '/assets/beam-mode-01.png',
    to: 'Contact'
  },
  {
    key: 'Education',
    icon: 'graduation-cap',
    status: 'In development',
    live: false,
    title: 'Education',
    line: 'Teach in an afternoon what would have taken a term to build.',
    body: 'Ask to be notified when it launches.',
    image: '/assets/beam-mode-04.png',
    to: 'Contact'
  }
];

const HOME_APPS = [
  { title: 'Microscopy & imaging', icon: 'microscope', body: 'Structured illumination, optical trapping and super-resolution techniques need shaped beams. We deliver 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 undergraduate and postgraduate teaching, with modes switched from software rather than rebuilt on the bench.' }
];

function Hero({ onNavigate }) {
  return (
    <section style={{ position: 'relative', minHeight: 720, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: "url('/assets/beam-mode-01.png') center/cover no-repeat", opacity: 0.85 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(5,5,6,.84) 60%, var(--ink-canvas) 100%)' }} />
      {window.PolarisationField ? <window.PolarisationField mode="azimuthal" /> : null}
      <div style={{ position: 'relative', zIndex: 2 }}><TopNav base="../../" active="Home" onNavigate={onNavigate} /></div>
      <div style={{ position: 'relative', zIndex: 3, maxWidth: 'var(--container-max)', margin: '0 auto', width: '100%', padding: '10px var(--gutter) 0', display: 'flex', justifyContent: 'flex-end' }}>
        {window.FrequencyPicker ? <window.FrequencyPicker /> : null}
      </div>
      <div style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '80px var(--gutter)' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--type-eyebrow-size)', fontWeight: 600, letterSpacing: 'var(--type-eyebrow-track)', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>Click for light</div>
        <h1 style={{ margin: '24px 0 0', maxWidth: '17ch', fontFamily: 'var(--font-display)', fontSize: 84, lineHeight: 1.02, letterSpacing: '.035em', fontWeight: 500, textTransform: 'uppercase', color: 'var(--text-primary)', textShadow: '0 0 60px rgba(0,0,0,.9)' }}>Light&rsquo;s digital toolkit</h1>
        <p style={{ margin: '26px 0 0', maxWidth: '56ch', fontSize: 22, lineHeight: 1.55, color: 'var(--text-primary)' }}>We make the instruments that create, measure and teach structured light — the ability to shape a laser beam&rsquo;s amplitude, phase and polarisation at will.</p>
        <p style={{ margin: 'var(--space-md) 0 0', maxWidth: '52ch', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-secondary)' }}>Twenty years of laboratory physics, turned into something you operate with a click.</p>
        <div style={{ display: 'flex', gap: 'var(--space-sm)', marginTop: 'var(--space-xl)' }}>
          <Button size="lg" variant="secondary" onClick={() => onNavigate('Structured Light')}>What is structured light?</Button>
          <Button size="lg" onClick={() => onNavigate('Lightweaver')}>Explore Lightweaver</Button>
        </div>
        <div style={{ marginTop: 'var(--space-lg)', fontFamily: 'var(--font-mono)', fontSize: 'var(--type-data-sm-size)', letterSpacing: 'var(--type-data-sm-track)', color: 'var(--text-faint)' }}>MOVE ACROSS THE BEAM TO PROBE ITS POLARISATION</div>
      </div>
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 'var(--container-max)', margin: '0 auto', width: '100%', padding: '0 var(--gutter) var(--space-lg)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 'var(--type-data-sm-size)', letterSpacing: 'var(--type-data-sm-track)', color: 'var(--text-faint)' }}>
        <span>JOHANNESBURG, SOUTH AFRICA</span>
        <span>STRUCTURED LIGHT LABORATORY · WITS</span>
      </div>
    </section>
  );
}

function CyclingWord({ words, interval = 2400 }) {
  const [i, setI] = React.useState(0);
  const [shown, setShown] = React.useState(true);
  React.useEffect(() => {
    let t2;
    const t = setInterval(() => { setShown(false); t2 = setTimeout(() => { setI((n) => (n + 1) % words.length); setShown(true); }, 320); }, interval);
    return () => { clearInterval(t); clearTimeout(t2); };
  }, [words.length, interval]);
  return <span style={{ display: 'inline-block', color: 'var(--laser-red-text)', opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(-0.25em)', filter: shown ? 'none' : 'blur(3px)', transition: 'opacity 320ms var(--ease-standard), transform 320ms var(--ease-standard), filter 320ms var(--ease-standard)' }}>{words[i]}</span>;
}

function Band({ children, style }) {
  return <section style={{ padding: 'var(--space-section) 0', ...style }}><div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>{children}</div></section>;
}

function PillarCard({ p, open, onOpen, onNavigate }) {
  return (
    <div onClick={onOpen} style={{ position: 'relative', cursor: 'pointer', background: 'var(--ink-void)', border: '1px solid ' + (open ? 'var(--laser-red-dim)' : 'var(--ink-hairline)'), borderRadius: 'var(--radius-xs)', overflow: 'hidden', boxShadow: open ? 'var(--glow-red-md)' : 'none', transition: 'border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-glow)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'relative', aspectRatio: '16 / 10', overflow: 'hidden' }}>
        <img src={p.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: open ? 0.92 : 0.5, filter: p.live ? 'var(--beam-filter)' : 'grayscale(.45) var(--beam-filter)' , transition: 'opacity var(--dur-base) var(--ease-standard)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,.94) 4%, rgba(0,0,0,.2) 72%)' }} />
        <div style={{ position: 'absolute', left: 'var(--space-lg)', right: 'var(--space-lg)', top: 'var(--space-md)', display: 'flex', justifyContent: 'flex-end' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '.12em', textTransform: 'uppercase', color: p.live ? 'var(--text-secondary)' : 'var(--text-faint)', border: '1px solid ' + (p.live ? 'var(--ink-hairline)' : 'var(--ink-hairline-soft)'), borderRadius: 'var(--radius-pill)', padding: '3px 9px', background: 'rgba(0,0,0,.55)' }}>{p.status}</span>
        </div>
        <div style={{ position: 'absolute', left: 'var(--space-lg)', right: 'var(--space-lg)', bottom: 'var(--space-md)' }}>
          <span style={{ color: 'var(--laser-red-text)' }}><Icon name={p.icon} size={20} /></span>
          <h3 style={{ margin: '10px 0 0', fontFamily: 'var(--font-display)', fontSize: 27, lineHeight: 1.1, letterSpacing: '.05em', fontWeight: 500, textTransform: 'uppercase', color: 'var(--text-primary)' }}>{p.title}</h3>
          <p style={{ margin: '8px 0 0', fontSize: 15.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{p.line}</p>
        </div>
      </div>
      {open && (
        <div style={{ padding: 'var(--space-lg)', borderTop: '1px solid var(--ink-hairline-soft)', display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
          <p style={{ margin: 0, fontSize: 'var(--type-body-sm-size)', lineHeight: 1.7, color: 'var(--text-secondary)' }}>{p.body}</p>
          <Button variant="ghost" size="sm" iconRight={<Icon name="arrow-right" size={13} />} onClick={(e) => { e.stopPropagation(); if (!p.live) window.__contactTopic = 'notify'; onNavigate(p.to); }} style={{ alignSelf: 'flex-start', padding: 0 }}>{p.live ? 'Find out more' : 'Notify me'}</Button>
        </div>
      )}
    </div>
  );
}

function Split({ eyebrow, title, body, image, flip, cta, onNavigate }) {
  const text = (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)', alignSelf: 'center' }}>
      <SectionHeading eyebrow={eyebrow} title={title} />
      <p style={{ margin: 0, maxWidth: '46ch', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-secondary)' }}>{body}</p>
      {cta && <div><Button variant="ghost" iconRight={<Icon name="arrow-right" size={14} />} onClick={() => onNavigate(cta.to)}>{cta.label}</Button></div>}
    </div>
  );
  const art = <BeamPlate src={image} ratio="4 / 3" />;
  return <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-huge)' }}>{flip ? <>{art}{text}</> : <>{text}{art}</>}</div>;
}

function Home({ onNavigate }) {
  const [open, setOpen] = React.useState(0);
  const [pillar, setPillar] = React.useState(0);
  return (
    <div>
      <Hero onNavigate={onNavigate} />
      <Band style={{ paddingTop: 'var(--space-huge)', paddingBottom: 'var(--space-huge)' }}>
        <SectionHeading eyebrow="What we do" title="Three ways into structured light" lede="Creating it, measuring it, and teaching it. One body of physics, three kinds of instrument." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-md)', marginTop: 'var(--space-xxl)', alignItems: 'start' }}>
          {PILLARS.map((p, i) => <PillarCard key={p.key} p={p} open={pillar === i} onOpen={() => setPillar(pillar === i ? -1 : i)} onNavigate={onNavigate} />)}
        </div>
      </Band>
      <Band style={{ paddingTop: 0 }}>
        <StatBand stats={[
          { value: '20+', label: 'Years of structured-light research', note: 'Behind the technology, from the Structured Light Laboratory' },
          { value: '1000 Hz', label: 'Mode switching rate', note: 'Up to 100 holograms pre-loaded as a sequence*' },
          { value: 'Weeks → hours → seconds', label: 'Setup time', note: 'A two-hour setup, then real-time generation in seconds' }
        ]} />
        <p style={{ margin: 'var(--space-sm) 0 0', fontSize: 12, lineHeight: 1.5, color: 'var(--text-faint)' }}>*Use case dependent. Target, subject to Windows 11 constraints.</p>
      </Band>
      <Band style={{ paddingTop: 0 }}>
        <Split eyebrow="Why we exist" title={<>Structured light is <CyclingWord words={['hard', 'time-consuming', 'expensive', 'demanding', 'intricate']} /> to build</>} body="It takes weeks to specify, source and align a structured-light system — and longer to learn the physics behind it. The result is often over-engineered, unreliable, or both. Most fields that would benefit from shaped light do not have an optics group to build it, so they go without. Even optics groups gain from a turn-key system: less time spent building the bench, more time on the research." image="/assets/beam-mode-skyrmion.png" cta={{ label: 'Read the explainer', to: 'Structured Light' }} onNavigate={onNavigate} />
      </Band>
      <Band style={{ paddingTop: 0 }}>
        <Split flip eyebrow="The instrument" title="One box, any mode" body="The Lightweaver is our creation platform: physics know-how, custom electronics, optics and software in a single turn-key instrument. Choose a mode in software; the device produces it. Think of it as rapid prototyping — the 3D printing of structured light." image="/assets/beam-mode-03.png" cta={{ label: 'See the device', to: 'Lightweaver' }} onNavigate={onNavigate} />
      </Band>
      <Band style={{ background: 'var(--ink-void)', borderTop: '1px solid var(--ink-hairline)', borderBottom: '1px solid var(--ink-hairline)' }}>
        <SectionHeading eyebrow="Applications" title="Who needs shaped light" lede="Fields outside optics that benefit from structured light — without needing the expertise to build it." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-md)', marginTop: 'var(--space-xxl)', alignItems: 'start' }}>
          {HOME_APPS.map((a, i) => <ApplicationTile key={a.title} {...a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />)}
        </div>
      </Band>
      <Band>
        <GlowPanel image="/assets/beam-mode-04.png" intensity={0.2} padding="var(--space-huge)">
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-xxl)', flexWrap: 'wrap' }}>
            <div>
              <SectionHeading eyebrow="Talk to us" title="Tell us what you need the light to do" />
              <p style={{ margin: 'var(--space-md) 0 0', maxWidth: '44ch', fontSize: 'var(--type-body-size)', lineHeight: 'var(--type-body-lh)', color: 'var(--text-secondary)' }}>We will tell you which mode gets you there, and which of our instruments is the right one for it.</p>
            </div>
            <Button size="lg" onClick={() => onNavigate('Contact')}>Contact us</Button>
          </div>
        </GlowPanel>
      </Band>
      <Footer base="../../" />
    </div>
  );
}

window.Home = Home;
window.HomeBand = Band;