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

function HeroError({ 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.55 }} />     
      <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="radial" /> : null}
      <div style={{display: 'flex', alignItems:'center',    flexDirection: 'row',    alignContent: 'space-between',    justifyContent:'space-between'}}>
      <div style={{ position: 'relative', zIndex: 2 ,padding:'10px'}}><Logo height='90px' /></div>
      <div style={{ position: 'relative', zIndex: 3, maxWidth: 'var(--container-max)', margin: '0 10px', padding: '10px var(--gutter) 0', display: 'flex', justifyContent: 'flex-end' }}>
        {window.FrequencyPicker ? <window.FrequencyPicker /> : null}
      </div>
    </div>
      <div style={{ position: 'relative', zIndex: 2, flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '20px 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)' }}>ERROR 404: We can generate a lot, but not that page!</div>
        <h1 style={{ margin: '24px 0 0', maxWidth: '17ch', fontFamily: 'var(--font-display)', fontSize: 68, lineHeight: 1.02, letterSpacing: '.035em', fontWeight: 500, textTransform: 'uppercase', color: 'var(--text-primary)', textShadow: '0 0 60px rgba(0,0,0,.9)' }}>Page does not exist.</h1>
        <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-secondary)' }}>MOVE ACROSS THE BEAM TO PROBE ITS POLARISATION. AND CHANGE ITS FREQUENCY</div>
        <div style={{ marginTop: 'var(--space-xl)' }}><Button size="lg" href="/index.html">Back to homepage</Button></div>

      </div>
          </section>
  );
}

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 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 ErrorPage({ onNavigate }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      <HeroError onNavigate={onNavigate} />
    </div>
  );
}

window.ErrorPage = ErrorPage;
window.ErrorBand = Band;