function CookieBanner({ lang }) {
  const [visible, setVisible] = React.useState(false);
  const [showDetails, setShowDetails] = React.useState(false);
  const [prefs, setPrefs] = React.useState({ essential: true, analytics: false, marketing: false });

  React.useEffect(() => {
    const consent = localStorage.getItem('gs_cookie_consent');
    if (!consent) setVisible(true);
  }, []);

  const accept = (all) => {
    const choice = all
      ? { essential: true, analytics: true, marketing: true }
      : prefs;
    localStorage.setItem('gs_cookie_consent', JSON.stringify({ ...choice, ts: Date.now() }));
    setVisible(false);
  };

  const reject = () => {
    localStorage.setItem('gs_cookie_consent', JSON.stringify({ essential: true, analytics: false, marketing: false, ts: Date.now() }));
    setVisible(false);
  };

  if (!visible) return null;

  const T = {
    EN: {
      title: 'Your privacy, our responsibility.',
      body: 'We use cookies and similar technologies to operate this website. Some are essential for the site to function; others help us understand how you use it. Under the DSGVO (German Federal Data Protection Act / GDPR), you have the right to choose which cookies we set.',
      essential: 'Essential', essentialNote: 'Always active — required for basic site function.',
      analytics: 'Analytics', analyticsNote: 'Help us understand how visitors interact with the site.',
      marketing: 'Marketing', marketingNote: 'Used to show relevant content and measure campaign effectiveness.',
      acceptAll: 'Accept all', savePrefs: 'Save preferences', rejectAll: 'Essential only',
      details: 'Customise', hideDetails: 'Hide details',
      privacy: 'Privacy Policy', imprint: 'Imprint',
      note: 'You can withdraw or change your consent at any time via the footer.',
    },
    DE: {
      title: 'Ihre Privatsphäre, unsere Verantwortung.',
      body: 'Wir verwenden Cookies und ähnliche Technologien, um diese Website zu betreiben. Einige sind für den Betrieb der Seite notwendig; andere helfen uns zu verstehen, wie Sie die Seite nutzen. Gemäß DSGVO haben Sie das Recht zu wählen, welche Cookies wir setzen.',
      essential: 'Essenziell', essentialNote: 'Immer aktiv – für grundlegende Seitenfunktionen erforderlich.',
      analytics: 'Analyse', analyticsNote: 'Helfen uns zu verstehen, wie Besucher mit der Seite interagieren.',
      marketing: 'Marketing', marketingNote: 'Zur Anzeige relevanter Inhalte und Erfolgsmessung von Kampagnen.',
      acceptAll: 'Alle akzeptieren', savePrefs: 'Einstellungen speichern', rejectAll: 'Nur Essenziell',
      details: 'Anpassen', hideDetails: 'Ausblenden',
      privacy: 'Datenschutzerklärung', imprint: 'Impressum',
      note: 'Sie können Ihre Einwilligung jederzeit über die Fußzeile widerrufen oder ändern.',
    },
  };
  const t = T[lang] || T.EN;

  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000,
      padding: '0 24px 24px',
      display: 'flex', justifyContent: 'center',
      pointerEvents: 'none',
    }}>
      <div style={{
        maxWidth: 860, width: '100%',
        background: '#fff',
        border: '1px solid var(--border)',
        borderRadius: 16,
        boxShadow: '0 24px 64px -12px rgba(10,10,11,0.18), 0 8px 24px -8px rgba(10,10,11,0.10)',
        overflow: 'hidden',
        pointerEvents: 'auto',
      }}>
        {/* Top accent */}
        <div style={{height: 3, background: 'linear-gradient(90deg, var(--accent), #4A5D7E 60%, transparent)'}}/>

        <div style={{padding: '24px 28px 20px'}}>
          <div style={{display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'start'}}>
            <div>
              <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10}}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em',
                  color: 'var(--accent)', textTransform: 'uppercase',
                  padding: '3px 8px', border: '1px solid var(--accent-100)',
                  borderRadius: 4, background: 'var(--accent-soft)',
                }}>DSGVO · GDPR</span>
              </div>
              <h3 style={{
                fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em',
                margin: 0, color: 'var(--gs-900)',
              }}>{t.title}</h3>
              <p style={{
                margin: '8px 0 0', fontSize: 13, lineHeight: 1.6,
                color: 'var(--gs-600)', maxWidth: 580,
              }}>{t.body}</p>
            </div>

            {/* Buttons */}
            <div style={{display: 'flex', flexDirection: 'column', gap: 8, minWidth: 180}}>
              <button onClick={() => accept(true)} style={{
                height: 40, padding: '0 20px', borderRadius: 999,
                background: 'var(--gs-900)', color: '#fff', border: 'none',
                fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
                transition: 'background 160ms',
              }}>{t.acceptAll}</button>
              <button onClick={reject} style={{
                height: 40, padding: '0 20px', borderRadius: 999,
                background: 'transparent', color: 'var(--gs-900)',
                border: '1px solid var(--border-strong)',
                fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
              }}>{t.rejectAll}</button>
              <button onClick={() => setShowDetails(!showDetails)} style={{
                height: 36, padding: '0 20px', borderRadius: 999,
                background: 'transparent', color: 'var(--gs-500)',
                border: '1px solid var(--border)',
                fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
              }}>{showDetails ? t.hideDetails : t.details}</button>
            </div>
          </div>

          {/* Detailed prefs */}
          {showDetails && (
            <div style={{
              marginTop: 20,
              paddingTop: 20,
              borderTop: '1px solid var(--border)',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              {[
                { key: 'essential', label: t.essential, note: t.essentialNote, locked: true },
                { key: 'analytics', label: t.analytics, note: t.analyticsNote, locked: false },
                { key: 'marketing', label: t.marketing, note: t.marketingNote, locked: false },
              ].map((item) => (
                <div key={item.key} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto',
                  alignItems: 'center', gap: 16,
                  padding: '10px 14px',
                  borderRadius: 8,
                  background: item.locked ? 'var(--gs-50)' : (prefs[item.key] ? 'var(--accent-soft)' : 'var(--gs-50)'),
                  border: `1px solid ${item.locked ? 'var(--border)' : (prefs[item.key] ? 'var(--accent-100)' : 'var(--border)')}`,
                  transition: 'all 160ms',
                }}>
                  <div>
                    <div style={{fontSize: 13, fontWeight: 600, color: 'var(--gs-900)'}}>{item.label}</div>
                    <div style={{fontSize: 12, color: 'var(--gs-500)', marginTop: 2}}>{item.note}</div>
                  </div>
                  <div
                    onClick={() => !item.locked && setPrefs(p => ({...p, [item.key]: !p[item.key]}))}
                    style={{
                      width: 44, height: 24, borderRadius: 999,
                      background: (item.locked || prefs[item.key]) ? 'var(--gs-900)' : 'var(--gs-200)',
                      position: 'relative', cursor: item.locked ? 'default' : 'pointer',
                      transition: 'background 200ms', flexShrink: 0,
                    }}>
                    <div style={{
                      position: 'absolute', top: 3,
                      left: (item.locked || prefs[item.key]) ? 23 : 3,
                      width: 18, height: 18, borderRadius: '50%', background: '#fff',
                      transition: 'left 200ms',
                      boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
                    }}/>
                  </div>
                </div>
              ))}
              <button onClick={() => accept(false)} style={{
                alignSelf: 'flex-start',
                height: 38, padding: '0 20px', borderRadius: 999,
                background: 'var(--accent)', color: '#fff', border: 'none',
                fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
              }}>{t.savePrefs}</button>
            </div>
          )}

          {/* Footer links */}
          <div style={{
            marginTop: 16, display: 'flex', gap: 16, alignItems: 'center',
            flexWrap: 'wrap',
          }}>
            <span style={{fontSize: 11, color: 'var(--gs-400)', flex: 1}}>{t.note}</span>
            <a href="about.html" style={{fontSize: 12, color: 'var(--gs-500)'}}>{t.privacy}</a>
            <a href="about.html" style={{fontSize: 12, color: 'var(--gs-500)'}}>{t.imprint}</a>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CookieBanner = CookieBanner;