function CookieBanner({ onNavigate, lang }) {
  const [status, setStatus] = React.useState(() => localStorage.getItem('pf-cookie-consent') || null);
  const [details, setDetails] = React.useState(false);
  const [prefs, setPrefs] = React.useState({ necessary: true, analytics: false });

  if (status) return null;

  const save = (value) => {
    localStorage.setItem('pf-cookie-consent', JSON.stringify(value));
    setStatus('set');
  };

  return (
    <div
      style={{
        position: 'fixed',
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 1000,
        background: 'var(--surface-card)',
        borderTop: '1px solid var(--border-subtle)',
        boxShadow: 'var(--shadow-lg)',
        padding: 'var(--space-5) var(--space-6)',
      }}
    >
      <div
        className="cookie-banner-row"
        style={{
          maxWidth: 'var(--container-max)',
          margin: '0 auto',
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 'var(--space-5)',
        }}
      >
        <div style={{ flex: '1 1 420px', minWidth: 260 }}>
          <p style={{ margin: 0, font: 'var(--text-body)', color: 'var(--text-primary)' }}>
            {window.t(lang, 'cookieBanner.text')}{' '}
            <a
              href="#"
              onClick={(e) => { e.preventDefault(); onNavigate && onNavigate('Cookie-Richtlinien'); }}
              style={{ color: 'var(--brand-primary)', textDecoration: 'underline' }}
            >
              {window.t(lang, 'cookieBanner.link')}
            </a>.
          </p>
          {details && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginTop: 'var(--space-4)' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', font: 'var(--text-body)', color: 'var(--text-secondary)' }}>
                <input type="checkbox" checked disabled />
                {window.t(lang, 'cookieBanner.necessary')}
              </label>
              <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', font: 'var(--text-body)', color: 'var(--text-secondary)' }}>
                <input
                  type="checkbox"
                  checked={prefs.analytics}
                  onChange={(e) => setPrefs((p) => ({ ...p, analytics: e.target.checked }))}
                />
                {window.t(lang, 'cookieBanner.analytics')}
              </label>
            </div>
          )}
        </div>
        <div className="cookie-banner-actions" style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-3)', flex: '0 0 auto' }}>
          {!details && (
            <button
              onClick={() => setDetails(true)}
              style={{
                background: 'transparent',
                border: '1px solid var(--border-strong)',
                borderRadius: 'var(--radius-pill)',
                padding: '12px 20px',
                fontFamily: 'var(--font-sans-body)',
                fontSize: '0.8rem',
                letterSpacing: 'var(--tracking-button)',
                textTransform: 'uppercase',
                color: 'var(--text-primary)',
                cursor: 'pointer',
              }}
            >
              {window.t(lang, 'cookieBanner.settings')}
            </button>
          )}
          {details && (
            <button
              onClick={() => save(prefs)}
              style={{
                background: 'transparent',
                border: '1px solid var(--border-strong)',
                borderRadius: 'var(--radius-pill)',
                padding: '12px 20px',
                fontFamily: 'var(--font-sans-body)',
                fontSize: '0.8rem',
                letterSpacing: 'var(--tracking-button)',
                textTransform: 'uppercase',
                color: 'var(--text-primary)',
                cursor: 'pointer',
              }}
            >
              {window.t(lang, 'cookieBanner.save')}
            </button>
          )}
          <button
            onClick={() => save({ necessary: true, analytics: false })}
            style={{
              background: 'transparent',
              border: '1px solid var(--border-strong)',
              borderRadius: 'var(--radius-pill)',
              padding: '12px 20px',
              fontFamily: 'var(--font-sans-body)',
              fontSize: '0.8rem',
              letterSpacing: 'var(--tracking-button)',
              textTransform: 'uppercase',
              color: 'var(--text-primary)',
              cursor: 'pointer',
            }}
          >
            {window.t(lang, 'cookieBanner.decline')}
          </button>
          <button
            onClick={() => save({ necessary: true, analytics: true })}
            style={{
              background: 'var(--cta-bg)',
              color: 'var(--cta-text)',
              border: 'none',
              borderRadius: 'var(--radius-pill)',
              padding: '12px 22px',
              fontFamily: 'var(--font-sans-body)',
              fontSize: '0.8rem',
              fontWeight: 500,
              letterSpacing: 'var(--tracking-button)',
              textTransform: 'uppercase',
              cursor: 'pointer',
            }}
          >
            {window.t(lang, 'cookieBanner.acceptAll')}
          </button>
        </div>
      </div>
    </div>
  );
}