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

const MODES = [
  { src: '/assets/beam-mode-01.png', mode: 'HG 10,10', family: 'Hermite–Gauss' },
  { src: '/assets/beam-mode-ig-8-6.png', mode: 'IG 8,6', family: 'Ince–Gauss' },
  { src: '/assets/beam-mode-lg-3-1.png', mode: 'LG 3,1', family: 'Laguerre–Gauss' },
  { src: '/assets/beam-mode-radial-cvv.png', mode: 'RADIAL CVV', family: 'Vector' },
  { src: '/assets/beam-mode-airy.png', mode: 'AIRY', family: 'Airy' },
  { src: '/assets/beam-mode-poisson-spot.png', mode: 'POISSON', family: 'Poisson spot' },
  { src: '/assets/beam-mode-skyrmion.png', mode: 'SKYRMION', family: 'Skyrmion' },
  { src: '/assets/beam-mode-trefoil-knot.png', mode: 'KNOT', family: 'Optical knot (trefoil)' }
];

// Brochure files live in ui_kits/website/assets/brochures/. Edit titles/files here.
const BROCHURES = [
 {
  "focus": "On-Demand generation",
  "file": "Lightweaver-on-demand.pdf"
 },
 {
  "focus": "OAM/Twisted light",
  "file": "Lightweaver-oam.pdf"
 },
 {
  "focus": "Vector beams",
  "file": "Lightweaver-vector.pdf"
 },
 {
  "focus": "Complex-media",
  "file": "Lightweaver-complex_media.pdf"
 },
 {
  "focus": "Topological light",
  "file": "Lightweaver-topology.pdf"
 }
];

function BrochureRow({ b, first }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={'assets/brochures/' + b.file} download onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)', padding: 'var(--space-md) 0', borderTop: first ? 'none' : '1px solid var(--ink-hairline)', textDecoration: 'none', color: hover ? 'var(--text-primary)' : 'var(--text-secondary)', transition: 'color .15s' }}>
      <span style={{ flex: 1, fontSize: 'var(--type-body-lg-size)', lineHeight: 'var(--type-body-lg-lh)' }}>{b.focus}</span>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>PDF</span>
      <Icon name="download" size={16} />
    </a>
  );
}

function Lightweaver({ onNavigate }) {
  return (
    <div>
      <TopNav base="../../" active="Lightweaver" onNavigate={onNavigate} bordered />
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-void)', borderBottom: '1px solid var(--ink-hairline)' }}>
        <div style={{ position: 'absolute', right: '-6%', top: '-20%', width: '62%', height: '140%', background: "url('/assets/beam-mode-02.png') center/contain no-repeat", opacity: 0.18, filter: 'var(--beam-filter) blur(2px)' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-section) var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-huge)', alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-lg)' }}>
            <div style={{ display: 'flex', gap: 8 }}><Badge variant="laser">Lightweaver</Badge><Badge mono>Generation platform</Badge></div>
            <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'var(--type-display-xl-size)', lineHeight: 'var(--type-display-xl-lh)', letterSpacing: 'var(--type-display-xl-track)', fontWeight: 500, textTransform: 'uppercase', color: 'var(--text-primary)' }}>The Lightweaver</h1>
            <p style={{ margin: 0, maxWidth: '44ch', fontSize: 'var(--type-body-lg-size)', lineHeight: 'var(--type-body-lg-lh)', color: 'var(--text-secondary)' }}>A turn-key generation platform. It creates structured light on demand, at the click of a button, with high-quality repeatable results.</p>
            <div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
              <Button size="lg" onClick={() => onNavigate('Contact')}>Request a quote</Button>
              <Button size="lg" variant="secondary" iconRight={<Icon name="download" size={14} />} onClick={() => { const a = document.createElement('a'); a.href = 'assets/Lightweaver-datasheet.pdf'; a.download = 'Lightweaver-datasheet.pdf'; a.click(); }}>Datasheet</Button>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 380 }}>
            <div style={{ position: 'absolute', width: 380, height: 380, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,32,32,.34) 0%, transparent 66%)', filter: 'var(--beam-filter) blur(22px)' }} />
            <img src="/assets/lightweaver-device.png" alt="Lightweaver" style={{ position: 'relative', width: '100%', maxWidth: 560, filter:  'var(--beam-filter)' }} />
          </div>
        </div>
      </section>
      <section style={{ padding: 'var(--space-section) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <SectionHeading eyebrow="Modes" title="Any profile, on demand" lede="Just a sample of what the platform can do. Switch families in software; the optics stay where they are." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-md)', marginTop: 'var(--space-xxl)' }}>
            {MODES.map((m) => <BeamPlate key={m.mode} src={m.src} caption={m.family} />)}
          </div>
        </div>
      </section>
      <section style={{ padding: 'var(--space-section) 0', borderTop: '1px solid var(--ink-hairline)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-huge)' }}>
          <SectionHeading eyebrow="Brochures" title="Select your entry-point" lede="Check out the brochures for different use cases. But don't worry, one Lightweaver can do it all!" />
          <Card variant="panel">
            {BROCHURES.map((b, i) => <BrochureRow key={b.file} b={b} first={i === 0} />)}
          </Card>
        </div>
      </section>
      <Footer base="../../" />
    </div>
  );
}

window.Lightweaver = Lightweaver;