/* HLiD — DSGVO cookie / tracking banner.
   Design principle: site ships with ZERO third-party cookies or trackers by default.
   The only "cookies" are first-party localStorage entries (locale, banner dismissal).
   If Umami is enabled (HLID_UMAMI_SRC), it runs cookieless with data-do-not-track='true'.
   This banner exists for DSGVO transparency and to gate any future optional analytics.
*/

const BANNER_COPY = {
  EN: {
    title: 'We respect your privacy',
    body: 'This site uses only essential first-party storage (your language preference). We don\'t set third-party cookies, track you across sites, or share data. Analytics, if enabled, run cookieless and anonymized.',
    accept: 'Got it',
    more: 'Privacy policy',
  },
  DE: {
    title: 'Wir achten Ihre Privatsphäre',
    body: 'Diese Seite verwendet ausschließlich notwendige First-Party-Speicherung (Ihre Spracheinstellung). Wir setzen keine Drittanbieter-Cookies, verfolgen Sie nicht seitenübergreifend und geben keine Daten weiter. Eine etwaige Statistik läuft cookiefrei und anonymisiert.',
    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 });