const { Button, Badge, Icon } = window.BeyonddoDesignSystem_2c6c3a;

const NAV = [
  { route: '/chancen', key: 'chancen' },
  { route: '/karriere', key: 'karriere' },
  { route: '/weiterbildung', key: 'weiterbildung' },
  { route: '/ausbildung', key: 'ausbildung' },
  { route: '/jobs', key: 'jobs' },
  { route: '/trust', key: 'trust' },
];

function AnnouncementBar({ t, onDismiss, onCta }) {
  return (
    <div style={{ padding: '0 clamp(1rem, 4vw, 5rem)', margin: 'var(--space-8) 0 var(--space-6)' }}>
      <div style={{ position: 'relative', maxWidth: 'var(--container-site)', margin: '0 auto', background: 'var(--rose-50)', border: '1px solid var(--rose-100)', borderRadius: 'var(--radius-pill)', minHeight: 68, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-4)', padding: '10px var(--space-16)' }}>
        <span style={{ width: 34, height: 34, flex: 'none', borderRadius: 'var(--radius-pill)', background: 'var(--primary)', display: 'grid', placeItems: 'center' }}>
          <Icon name="sparkles" size={17} style={{ color: '#fff' }} />
        </span>
        <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-heading)', fontWeight: 500, textAlign: 'center' }}>{t.text}</span>
        <button onClick={onCta} style={{ flex: 'none', cursor: 'pointer', fontFamily: 'var(--font-core)', fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--text-heading)', background: 'var(--surface)', border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-sm)', borderRadius: 'var(--radius-pill)', height: 44, padding: '0 var(--space-5)' }}>{t.cta}</button>
        <button aria-label={t.close} onClick={onDismiss} style={{ position: 'absolute', right: 'var(--space-6)', top: '50%', transform: 'translateY(-50%)', width: 40, height: 40, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', borderRadius: 'var(--radius-pill)' }}>
          <Icon name="x" size={18} style={{ color: 'var(--ink-500)' }} />
        </button>
      </div>
    </div>
  );
}

function Wordmark({ size = 30, inverse = false }) {
  return (
    <span style={{ fontWeight: 800, fontSize: size, letterSpacing: '-0.035em', color: inverse ? 'var(--sand-50)' : 'var(--ink-900)', lineHeight: 1 }}>
      Beyondd<span style={{ color: 'var(--primary)' }}>o</span>
    </span>
  );
}

const CHROME_CSS = [
  '.bd-sitenav{display:none}',
  '.bd-menubtn{display:grid}',
  '.bd-menuspacer{display:block}',
  '@media(min-width:64rem){.bd-sitenav{display:flex}.bd-menubtn{display:none}.bd-menuspacer{display:none}}',
].join('');

function SiteHeader({ active, onNavigate, locale, onLocale, t }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    if (document.getElementById('bd-chrome-css')) return;
    const el = document.createElement('style');
    el.id = 'bd-chrome-css';
    el.textContent = CHROME_CSS;
    document.head.appendChild(el);
  }, []);
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 20, height: 'var(--header-height)', background: 'var(--glass-surface)', backdropFilter: 'var(--glass-blur)', WebkitBackdropFilter: 'var(--glass-blur)' }}>
      <div style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: '0 clamp(1rem, 4vw, 5rem)', height: '100%', display: 'flex', alignItems: 'center', gap: 'clamp(var(--space-3), 2vw, var(--space-8))', minWidth: 0 }}>
        <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('home'); }} style={{ display: 'flex', alignItems: 'center', flex: 'none', textDecoration: 'none' }}><Wordmark /></a>
        <nav className="bd-sitenav" style={{ gap: 'var(--space-1)', flex: 1, minWidth: 0, flexWrap: 'nowrap', overflow: 'hidden' }}>
          {NAV.map((n) => (
            <a key={n.key} href={n.route} onClick={(e) => { e.preventDefault(); onNavigate(n.key); }}
              aria-current={active === n.key ? 'page' : undefined}
              style={{ padding: '8px 12px', borderRadius: 'var(--radius-sm)', fontSize: 'var(--text-sm)', fontWeight: 500, textDecoration: 'none', color: active === n.key ? 'var(--text-heading)' : 'var(--text-muted)', background: active === n.key ? 'var(--surface-sunken)' : 'transparent' }}>
              {t.nav[n.key]}
            </a>
          ))}
        </nav>
        <button className="bd-menubtn" aria-label={t.nav.menu} aria-expanded={menuOpen} aria-controls="bd-site-menu" onClick={() => setMenuOpen((o) => !o)}
          style={{ placeItems: 'center', width: 44, height: 44, flex: 'none', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', background: menuOpen ? 'var(--surface-sunken)' : 'var(--surface)', cursor: 'pointer' }}>
          <Icon name={menuOpen ? 'x' : 'menu'} size={20} style={{ color: 'var(--ink-700)' }} />
        </button>
        <span className="bd-menuspacer" aria-hidden="true" style={{ flex: 1 }} />
        <nav aria-label={t.nav.switchTo} style={{ display: 'flex', gap: 2 }}>
          {['de', 'en'].map((l) => (
            <button key={l} onClick={() => onLocale(l)} aria-current={locale === l ? 'true' : undefined}
              style={{ border: 0, background: locale === l ? 'var(--surface-sunken)' : 'transparent', color: locale === l ? 'var(--text-heading)' : 'var(--text-muted)', fontFamily: 'var(--font-core)', fontWeight: locale === l ? 600 : 400, fontSize: 'var(--text-xs)', textTransform: 'uppercase', padding: '6px 8px', borderRadius: 'var(--radius-xs)', cursor: 'pointer' }}>
              {l}
            </button>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 'var(--space-2)', flex: 'none' }}>
          <Button variant="ghost" size="sm" onClick={() => onNavigate('login')}>{t.nav.login}</Button>
          <Button size="sm" onClick={() => onNavigate('register')}>{t.nav.register}</Button>
        </div>
      </div>
      {menuOpen ? (
        <div id="bd-site-menu" style={{ position: 'absolute', left: 0, right: 0, top: '100%', background: 'var(--surface)', borderTop: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-overlay)', padding: 'var(--space-4) clamp(1rem, 4vw, 5rem) var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
          {NAV.map((n) => (
            <a key={n.key} href={n.route} onClick={(e) => { e.preventDefault(); setMenuOpen(false); onNavigate(n.key); }}
              aria-current={active === n.key ? 'page' : undefined}
              style={{ display: 'flex', alignItems: 'center', minHeight: 'var(--control-height)', padding: '0 var(--space-3)', borderRadius: 'var(--radius-md)', textDecoration: 'none', fontSize: 'var(--text-body)', fontWeight: active === n.key ? 600 : 400, color: active === n.key ? 'var(--text-heading)' : 'var(--text-body)', background: active === n.key ? 'var(--surface-sunken)' : 'transparent' }}>
              {t.nav[n.key]}
            </a>
          ))}
          <div style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-3)', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)' }}>
            <Button variant="outline" fullWidth onClick={() => { setMenuOpen(false); onNavigate('login'); }}>{t.nav.login}</Button>
            <Button fullWidth onClick={() => { setMenuOpen(false); onNavigate('register'); }}>{t.nav.register}</Button>
          </div>
        </div>
      ) : null}
    </header>
  );
}

function SiteFooter({ t }) {
  return (
    <footer style={{ background: 'var(--surface-inverse)', color: 'var(--sand-300)', padding: 'var(--space-16) clamp(1rem, 4vw, 5rem) var(--space-8)' }}>
      <div style={{ maxWidth: 'var(--container-site)', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 'var(--space-10)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Wordmark size={22} inverse />
            <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--sand-400)', maxWidth: '30ch' }}>
              {t.footer.blurb}
            </p>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--ink-500)' }}>{t.footer.seat}</span>
          </div>
          {t.footer.cols.map(([title, links]) => (
            <div key={title} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <span style={{ fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--sand-500)' }}>{title}</span>
              {links.map((l) => (
                <a key={l} href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 'var(--text-sm)', color: 'var(--sand-200)', textDecoration: 'none' }}>{l}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 'var(--space-12)', paddingTop: 'var(--space-6)', borderTop: '1px solid var(--ink-700)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 'var(--space-4)', fontSize: 'var(--text-xs)', color: 'var(--ink-500)' }}>
          <span>© 2026 Beyonddo</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="shield-check" size={14} style={{ color: 'var(--verified-500)' }} />{t.footer.legal}</span>
        </div>
      </div>
    </footer>
  );
}

function Eyebrow({ children }) {
  return <span style={{ fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--primary)' }}>{children}</span>;
}

function Placeholder({ height = 240, note = 'Bildmaterial folgt' }) {
  return (
    <div style={{ height, borderRadius: 'var(--radius-xl)', background: 'var(--wash-sand)', border: '1px dashed var(--border-default)', display: 'grid', placeItems: 'center', color: 'var(--text-muted)', fontSize: 'var(--text-xs)', fontFamily: 'var(--font-mono)' }}>
      {note} — keine Bilder im Quell-Repository
    </div>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, AnnouncementBar, Wordmark, Eyebrow, Placeholder, NAV });
