// Shared chrome: nav (mega-menu), footer, page wrapper.

function NavBar({ theme = 'light', lang = 'de', onLang, variant = 'default' }) {
  const [open, setOpen] = React.useState(null); // which menu is open
  const t = COPY.nav[lang];
  const isDark = theme === 'dark';
  const fg = isDark ? '#fff' : CSG.blau;
  const subtle = isDark ? 'rgba(255,255,255,0.7)' : CSG.schiefergrau;
  const border = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,58,112,0.10)';

  const items = [
    { key: 'whoweare', label: t.whoweare, sub: COPY.menu.whoweare },
    { key: 'services', label: t.services, sub: COPY.menu.services },
    { key: 'studies',  label: t.studies,  sub: COPY.menu.studies },
    { key: 'sectors',  label: t.sectors,  sub: COPY.menu.sectors },
  ];

  return (
    <header style={{ position: 'relative', zIndex: 20, color: fg, padding: '20px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${border}` }}>
      <a style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <span style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1, color: fg }}>CSG</span>
        <span style={{ fontSize: 13, color: subtle, letterSpacing: '0.01em' }}>Clinische Studien Gesellschaft</span>
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        {items.map(it => (
          <div key={it.key} style={{ position: 'relative' }} onMouseEnter={() => setOpen(it.key)} onMouseLeave={() => setOpen(null)}>
            <button style={{ background: 'transparent', border: 0, color: fg, fontFamily: 'inherit', fontSize: 14, fontWeight: 500, padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>
              {it.label}
              <span style={{ fontSize: 9, opacity: 0.6 }}>▼</span>
            </button>
            {open === it.key && (
              <div style={{ position: 'absolute', top: '100%', left: 0, minWidth: 240, background: isDark ? '#062b50' : '#fff', boxShadow: '0 20px 60px rgba(0,30,80,0.18)', padding: '14px 8px', borderTop: `2px solid ${CSG.cyan}` }}>
                {it.sub.map(s => (
                  <a key={s} style={{ display: 'block', padding: '10px 16px', fontSize: 14, color: isDark ? '#fff' : CSG.blau, cursor: 'pointer' }}
                     onMouseEnter={e => e.currentTarget.style.background = isDark ? 'rgba(0,180,199,0.15)' : CSG.lichtgrau}
                     onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    {s}
                  </a>
                ))}
              </div>
            )}
          </div>
        ))}
        <a style={{ padding: '10px 16px', fontSize: 14, color: fg, fontWeight: 500, cursor: 'pointer' }}>{t.contact}</a>
        <div style={{ width: 1, height: 20, background: border, margin: '0 12px' }}></div>
        <button onClick={() => onLang && onLang(lang === 'de' ? 'en' : 'de')}
          style={{ background: 'transparent', border: `1px solid ${border}`, color: fg, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, padding: '6px 10px', cursor: 'pointer', letterSpacing: '0.1em' }}>
          {lang.toUpperCase()} / {lang === 'de' ? 'EN' : 'DE'}
        </button>
        <button className="csg-btn csg-btn--cyan" style={{ marginLeft: 8, padding: '10px 16px', fontSize: 13 }}>{t.cta} →</button>
      </nav>
    </header>
  );
}

function Footer({ minimal = false }) {
  return (
    <footer style={{ background: CSG.blau, color: '#fff', padding: '64px 56px 32px', position: 'relative', overflow: 'hidden' }}>
      <SignatureCurve color="rgba(0,180,199,0.25)" stroke={1.5} style={{ position: 'absolute', right: -40, top: -20, width: 600, height: 240 }} variant="swoop" />
      <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 40, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
        <div>
          <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em' }}>CSG</div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>Clinische Studien Gesellschaft</div>
          <p style={{ marginTop: 24, fontSize: 14, color: 'rgba(255,255,255,0.75)', maxWidth: 320 }}>
            Embedded clinical research.<br />Part of the athagoras Group.
          </p>
          <div style={{ marginTop: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 1.7 }}>
            Clinische Studiengesellschaft mbH<br/>Berlin · Germany<br/>www.csg-germany.com
          </div>
        </div>
        {[
          ['Über uns', COPY.menu.whoweare],
          ['Kernleistungen', COPY.menu.services],
          ['Leistungsspektrum', COPY.menu.studies],
          ['Ecosystem', COPY.menu.sectors],
        ].map(([title, items]) => (
          <div key={title}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: CSG.cyan, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>{title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(i => <li key={i} style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)', cursor: 'pointer' }}>{i}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ position: 'relative', zIndex: 1, paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'rgba(255,255,255,0.5)', fontSize: 12 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace' }}>© 2026 CSG mbH</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a>Impressum</a><a>Datenschutz</a><a>AGB</a><a>EN</a>
        </div>
      </div>
    </footer>
  );
}

// Reusable section header with eyebrow + title + signature curve detail
function SectionHead({ eyebrow, title, kicker, align = 'left', dark = false, style = {} }) {
  return (
    <div style={{ textAlign: align, color: dark ? '#fff' : CSG.anthrazit, ...style }}>
      <div className="csg-eyebrow">{eyebrow}</div>
      <h2 style={{ fontSize: 'clamp(36px, 4vw, 56px)', fontWeight: 600, lineHeight: 1.05, marginTop: 16, letterSpacing: '-0.02em' }}>{title}</h2>
      {kicker && <p style={{ fontSize: 18, color: dark ? 'rgba(255,255,255,0.75)' : CSG.schiefergrau, marginTop: 16, maxWidth: 640 }}>{kicker}</p>}
    </div>
  );
}

Object.assign(window, { NavBar, Footer, SectionHead });