/* HLiD — DSGVO cookie / tracking banner.
   Design principle: NO cookies for analytics, ever. Reach measurement runs
   cookieless (self-hosted Umami + Plausible; PostHog EU in memory-persistence
   mode — no cookie, no localStorage identifier, no session replay). Error
   logging is Sentry, self-hosted in the EU, errors only. The only browser
   storage is functional localStorage: locale + this banner's dismissal.
   If anything cookie-based or replay-based is ever added, this banner must
   become a real opt-in consent dialog FIRST (TKG 2021 §165 Abs 3).
*/

const BANNER_COPY = {
  EN: {
    title: 'We respect your privacy',
    body: 'This site sets no marketing or tracking cookies. Reach measurement runs cookieless on privacy-preserving tools, and error logging is self-hosted in the EU. Your browser stores only your language preference and this notice. Details are in the privacy policy.',
    accept: 'Got it',
    more: 'Privacy policy',
  },
  DE: {
    title: 'Wir achten Ihre Privatsphäre',
    body: 'Diese Website setzt keine Marketing- oder Tracking-Cookies. Die Reichweitenmessung läuft cookiefrei über datenschutzfreundliche Tools, die Fehlerprotokollierung läuft auf eigener Infrastruktur in der EU. Ihr Browser speichert nur Ihre Sprachwahl und diesen Hinweis. Details in der Datenschutzerklärung.',
    accept: 'Verstanden',
    more: 'Datenschutz',
  },
};

function CookieBanner() {
  const { locale } = useT();
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    try {
      const ack = localStorage.getItem('hlid.privacy.ack');
      if (ack !== '1') setVisible(true);
    } catch { setVisible(true); }
  }, []);

  const accept = () => {
    try { localStorage.setItem('hlid.privacy.ack', '1'); } catch {}
    setVisible(false);
  };

  if (!visible) return null;
  const c = BANNER_COPY[locale] || BANNER_COPY.EN;

  return (
    <div
      role="dialog"
      aria-labelledby="hlid-cookie-title"
      aria-describedby="hlid-cookie-body"
      className="fixed bottom-4 left-4 right-4 md:bottom-6 md:left-6 md:right-auto md:max-w-md z-[60] border border-border bg-bg-elevated/95 backdrop-blur-md rounded-[3px] shadow-2xl"
    >
      <div className="p-5 md:p-6">
        <div id="hlid-cookie-title" className="font-mono text-[10px] uppercase tracking-[0.22em] text-fg-subtle mb-3">
          {c.title}
        </div>
        <p id="hlid-cookie-body" className="text-[13.5px] text-fg-muted leading-relaxed mb-5">
          {c.body}
        </p>
        <div className="flex items-center gap-3">
          <button
            onClick={accept}
            className="inline-flex items-center gap-2 bg-fg text-bg px-5 py-2.5 font-mono text-[11px] uppercase tracking-[0.2em] rounded-[3px] hover:bg-fg/90 transition-colors focus-ring"
          >
            {c.accept}
          </button>
          <a
            href="datenschutz.html"
            className="font-mono text-[11px] uppercase tracking-[0.18em] text-fg-subtle hover:text-fg transition-colors focus-ring"
          >
            {c.more} →
          </a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CookieBanner });