// Cookie-Hinweis-Banner. Kein Consent-Modal, weil wir keine Tracking-/
// Marketing-Cookies setzen — nur ein dezenter Hinweis auf den
// technisch notwendigen Local-Storage-Cache plus Link zur Datenschutz-
// erklärung. Sobald der Nutzer „Okay" klickt (oder die Datenschutzseite
// öffnet), wird's nicht mehr angezeigt.

const COOKIE_CONSENT_KEY = 'wb_cookie_consent_v1';

const CookieBanner = () => {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    let seen = null;
    try {
      seen = typeof localStorage !== 'undefined' ? localStorage.getItem(COOKIE_CONSENT_KEY) : null;
    } catch { /* Storage gesperrt → erst mal anzeigen */ }
    if (!seen) {
      // Klein verzögert einblenden, damit nichts gleichzeitig mit dem Page-Load
      // aufploppt.
      const t = setTimeout(() => setVisible(true), 600);
      return () => clearTimeout(t);
    }
    return undefined;
  }, []);

  const accept = () => {
    try { localStorage.setItem(COOKIE_CONSENT_KEY, String(Date.now())); } catch {}
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div
      role="dialog"
      aria-label="Cookie-Hinweis"
      aria-live="polite"
      style={{
        position: 'fixed',
        bottom: 'clamp(16px, 3vw, 24px)',
        left: 'clamp(16px, 3vw, 24px)',
        right: 'clamp(16px, 3vw, 24px)',
        maxWidth: 520,
        margin: '0 auto',
        background: 'var(--offwhite)',
        border: '1px solid var(--sandstone-border)',
        borderRadius: 14,
        boxShadow: '0 16px 48px rgba(42,34,29,0.18)',
        padding: 'clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 24px)',
        zIndex: 80,
        display: 'flex',
        flexDirection: 'column',
        gap: 14,
        animation: 'wbCookieIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }}
    >
      <style>{`@keyframes wbCookieIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      <p style={{
        fontSize: 14,
        lineHeight: 1.55,
        color: 'var(--ink-70)',
        margin: 0,
      }}>
        Wir setzen <strong style={{ color: 'var(--ink)' }}>keine Tracking- oder Marketing-Cookies</strong>.
        Nur technisch notwendigen Local-Storage-Cache, der die Webseite schneller
        macht. Details in der{' '}
        <a href="Datenschutz.html" style={{ color: 'var(--heather-plum)' }}>
          Datenschutzerklärung
        </a>.
      </p>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <button
          type="button"
          onClick={accept}
          className="btn btn-primary"
          style={{ flex: '1 1 auto', justifyContent: 'center' }}
        >
          Verstanden
        </button>
        <a
          href="Datenschutz.html"
          className="btn btn-secondary"
          style={{ flex: '0 0 auto', textDecoration: 'none' }}
        >
          Mehr erfahren
        </a>
      </div>
    </div>
  );
};

window.CookieBanner = CookieBanner;

// Self-mount in einen eigenen Container, damit jede Seite den Banner nur durch
// Laden dieser Datei bekommt — kein zusätzlicher React-Tree nötig.
(() => {
  if (typeof document === 'undefined' || !document.body) return;
  if (document.getElementById('wb-cookie-banner-root')) return;
  const mount = document.createElement('div');
  mount.id = 'wb-cookie-banner-root';
  document.body.appendChild(mount);
  try {
    ReactDOM.createRoot(mount).render(React.createElement(CookieBanner));
  } catch (e) {
    // Falls Self-Mount fehlschlägt (z.B. weil ReactDOM noch nicht da):
    // Fallback per Microtask.
    queueMicrotask(() => {
      try { ReactDOM.createRoot(mount).render(React.createElement(CookieBanner)); } catch {}
    });
  }
})();