---
import "../styles/global.css";
import { categories } from "../data/categories";
import { defaultLocale, localeMeta, localePrefix, type Locale } from "../i18n/config";
import { useTranslations } from "../i18n/ui";
import LanguageSwitcher from "../components/LanguageSwitcher.astro";
// ClientRouter (Astros eingebaute View-Transitions-Technik) ausschließlich für EIN Ziel aktiviert:
// den Musik-Button unten rechts (siehe transition:persist weiter unten) soll beim Seitenwechsel
// nicht neu erzeugt werden, damit ein einmal gestarteter Spotify-Player weiterläuft, statt bei
// jedem Klick auf einen Link neu zu laden — genau wie beim Dogfather-Universe-Projekt, nur mit
// Astros nativer, offiziell unterstützter Lösung dafür statt eines selbstgebauten PJAX-Systems
// (das mit Astros gebündelten, gehashten Skript-Dateien nicht zuverlässig zusammenspielen würde).
import { ClientRouter } from "astro:transitions";

interface Props {
  title: string;
  description?: string;
  lang?: Locale;
  /** Sprachneutraler Pfad der aktuellen Seite (ohne Sprach-Prefix), z.B. "/shop/". Für den Sprachumschalter. */
  path?: string;
  /** Seite existiert nur auf Deutsch (Rechtstexte) — siehe LanguageSwitcher. */
  legalOnly?: boolean;
  /** Interne Vorschau-/Demoseiten (z.B. /demo-abo/) sollen nie von Suchmaschinen indexiert
   *  werden — setzt zusätzlich zum Sitemap-Ausschluss noch ein robots-Meta. */
  noindex?: boolean;
}
const {
  title,
  description = "Van's DIY & Bastelbedarf – handgemachte Häkelwerke, Plushies, Schmuck und Bastelzubehör mit Liebe gefertigt.",
  lang = defaultLocale,
  path = "/",
  legalOnly = false,
  noindex = false,
} = Astro.props;

const t = useTranslations(lang);
const p = (href: string) => `${localePrefix(lang)}${href}`;
---
<!doctype html>
<html lang={localeMeta[lang].htmlLang}>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Eigenes Logo als Icon — überall (Browser-Tab, Lesezeichen, Installation als App/PWA auf
       PC & Handy) statt eines automatisch generierten Buchstaben-Icons. -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
  <title>{title} · Van's DIY & Bastelbedarf</title>
  <meta name="description" content={description} />
  {noindex && <meta name="robots" content="noindex, nofollow" />}
  <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site ?? "https://vans-diy-bastelbedarf.de").toString()} />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Van's DIY & Bastelbedarf" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta name="theme-color" content="#0a0910" />
  <!-- TODO Phase 2: Fonts self-hosten statt Google-Fonts-CDN (Performance/DSGVO) -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    :root { --font-head-override: "Fraunces", serif; }
  </style>
  <ClientRouter fallback="swap" />
</head>
<body>
  <div class="topbar">🩵 {t.topbar}</div>

  <header class="site-header">
    <div class="container header-inner">
      <a href={p("/")} class="brand">
        <img src="/logo.png" alt="Van's DIY & Bastelbedarf Logo" width="48" height="48" />
        <span>Van's DIY &amp; Bastelbedarf</span>
      </a>

      <nav class="main-nav" aria-label="Hauptnavigation">
        <a href={p("/shop/")}>{t.nav.shop}</a>
        <a href={p("/sale/")}>{t.nav.sale}</a>
        <a href={p("/ueber-die-kreative/")}>{t.nav.creative}</a>
        <a href={p("/faq/")}>{t.nav.faq}</a>
        <a href={p("/kontakt/")}>{t.nav.contact}</a>
      </nav>

      <div class="header-actions">
        <button type="button" id="install-btn" class="install-btn" style="display:none;" title={t.common.installApp}>
          <span class="install-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 3a1 1 0 0 1 1 1v9.6l3-3a1 1 0 1 1 1.4 1.4l-4.7 4.7a1 1 0 0 1-1.4 0L6.6 12a1 1 0 1 1 1.4-1.4l3 3V4a1 1 0 0 1 1-1Zm-7 15a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z"/></svg>
          </span>
          <span class="install-label">{t.common.installAppShort}</span>
        </button>
        <LanguageSwitcher lang={lang} path={path} legalOnly={legalOnly} />
        {/* Zwei Zustände nebeneinander im HTML, per JS umgeschaltet (siehe Script unten) — ohne
            eingebautes Login (Phase 1: nur clientseitig im localStorage, siehe scripts/account.ts)
            weiß der Server beim Rendern nie, ob jemand "angemeldet" ist. Standardmäßig ist nur der
            Anmelden-Link sichtbar; sobald JS geladen hat und ein lokales Konto findet, blendet es
            auf das Konto-Menü um. */}
        <div class="account-area" id="account-area">
          <a href={p("/konto/")} class="account-btn" id="account-login-btn">
            <span class="account-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-9 2.2-9 5v2h18v-2c0-2.8-4.6-5-9-5Z"/></svg>
            </span>
            <span class="account-label">{t.nav.login}</span>
          </a>
          <div class="account-menu" id="account-menu" style="display:none;">
            <button type="button" class="account-menu-btn" id="account-menu-btn" aria-haspopup="true" aria-expanded="false">
              <span class="account-avatar" id="account-avatar" aria-hidden="true"></span>
              <span class="account-username" id="account-username-label"></span>
              <span class="chevron" aria-hidden="true">▼</span>
            </button>
            <div class="account-dropdown" id="account-dropdown" role="menu">
              <a href={p("/konto/angemeldet/")} role="menuitem"><span class="account-dropdown-icon" aria-hidden="true">👤</span>{t.accountMenu.myAccount}</a>
              <button type="button" id="account-logout-btn" role="menuitem"><span class="account-dropdown-icon" aria-hidden="true">🚪</span>{t.accountMenu.logout}</button>
            </div>
          </div>
        </div>
        <a href={p("/warenkorb/")} class="icon-link cart-link" aria-label={t.nav.account}>
          🧺 <span class="cart-count" id="cart-count">0</span>
        </a>
        <button class="hamburger" id="hamburger" aria-label="Menü" aria-expanded="false">☰</button>
      </div>
    </div>
    <nav class="mobile-nav" id="mobile-nav" aria-label="Mobile Navigation">
      <a href={p("/shop/")}>{t.nav.shop}</a>
      <a href={p("/sale/")}>{t.nav.sale}</a>
      <a href={p("/ueber-die-kreative/")}>{t.nav.creative}</a>
      <a href={p("/faq/")}>{t.nav.faq}</a>
      <a href={p("/kontakt/")}>{t.nav.contact}</a>
      <a href={p("/konto/")}>{t.nav.account}</a>
      <span class="mobile-nav-divider">{t.shop.categoryLabel}</span>
      {categories.map((c) => <a href={p(`/shop/${c.slug}/`)}>{c.icon} {c.name[lang]}</a>)}
    </nav>
  </header>

  <nav class="sub-nav" aria-label="Kategorien-Schnellzugriff">
    <div class="container sub-nav-inner">
      {categories.map((c) => (
        <a href={p(`/shop/${c.slug}/`)}>{c.name[lang]}</a>
      ))}
    </div>
  </nav>

  <main>
    <slot />
  </main>

  <footer class="site-footer">
    <div class="container footer-grid">
      <div>
        <a href={p("/")} class="brand">
          <img src="/logo.png" alt="Van's DIY & Bastelbedarf Logo" width="36" height="36" />
          <span>Van's DIY &amp; Bastelbedarf</span>
        </a>
        <p class="small">{t.footer.tagline}</p>
      </div>
      <div>
        <h3>{t.footer.shopHeading}</h3>
        <ul class="footer-list">
          {categories.map((c) => <li><a href={p(`/shop/${c.slug}/`)}>{c.name[lang]}</a></li>)}
        </ul>
      </div>
      <div>
        <h3>{t.footer.serviceHeading}</h3>
        <ul class="footer-list">
          <li><a href={p("/versand-zahlung/")}>{t.footer.shipping}</a></li>
          <li><a href={p("/faq/")}>{t.nav.faq}</a></li>
          <li><a href={p("/kontakt/")}>{t.nav.contact}</a></li>
          <li><a href={p("/konto/")}>{t.footer.account}</a></li>
        </ul>
      </div>
      <div>
        <h3>{t.footer.legalHeading}</h3>
        <ul class="footer-list">
          <li><a href="/impressum/">Impressum</a></li>
          <li><a href="/datenschutz/">Datenschutz</a></li>
          <li><a href="/agb/">AGB</a></li>
          <li><a href="/widerruf/">Widerrufsbelehrung</a></li>
          <li><a href="/muster-widerrufsformular/">Muster-Widerrufsformular</a></li>
        </ul>
        {lang !== "de" && <p class="small legal-note-footer" title={t.footer.legalNoteTitle}>{t.footer.legalNote}</p>}
      </div>
    </div>
    <div class="container">
      <hr class="divider" />
      <p class="small">© {new Date().getFullYear()} Van's DIY & Bastelbedarf · {t.footer.copyright}</p>
    </div>
  </footer>

  {/* Vorschau-Umschalter: nur sichtbar, wenn im Browser ein gültiges Gate-Zugangscookie liegt
      (siehe functions/_middleware.js + public/gate.html) — also nur für uns beide (qciga/vanvan),
      niemals für echte Besucher:innen. Ersetzt die früheren separaten demo-Vorschauseiten: EINE
      schwebende Box, auf JEDER Seite nutzbar, simuliert per Knopfdruck sofort den gewählten
      Konto-Zustand (localStorage) und lädt die aktuelle Seite neu. */}
  <div id="vandiy-preview-switcher" style="display:none;">
    <button type="button" id="vandiy-preview-toggle" aria-expanded="false" aria-label="Vorschau-Ansicht wählen">🎭</button>
    <div id="vandiy-preview-panel">
      <p class="small" id="vandiy-preview-current"></p>
      <button type="button" data-preview="normal">👤 Normaler Besucher</button>
      <button type="button" data-preview="konto">🙋 Angemeldete Kundin</button>
      <button type="button" data-preview="abo">🎫 Abonnentin</button>
    </div>
  </div>

  {/* Musik-Button: schwebt rechts unten auf JEDER Seite, spielt Van-Vans Musik von Spotify
      (genau wie beim Dogfather-Universe-Projekt — gleiche Spotify-Artist-ID, gleiches Grund-
      prinzip). transition:persist sorgt dafür, dass dieses Element (inkl. laufendem Spotify-
      iframe) beim Seitenwechsel NICHT neu erzeugt wird, sondern unverändert in die neue Seite
      übernommen wird — die Musik läuft also beim Klicken durch die Seite einfach weiter, statt
      bei jeder Navigation neu zu starten. Die Farbe des Knopfs passt sich "chamäleonartig" an
      die jeweilige Seite an (siehe adaptMusicColors() im Skript unten). */}
  <div id="vandiy-music-widget" transition:persist transition:name="vandiy-music-widget">
    <div class="music-panel" id="music-panel" hidden>
      <div class="music-panel-head">
        <strong>🎵 Musik von Van-Van</strong>
        <button type="button" class="music-close" id="music-close" aria-label="Musik-Player schließen">✕</button>
      </div>
      <p class="small music-panel-intro">Hör beim Stöbern Van-Vans Musik auf Spotify — läuft einfach weiter, auch wenn du auf der Seite weiterklickst.</p>
      <iframe
        id="music-iframe"
        data-src="https://open.spotify.com/embed/artist/4J9PcKZBkh6V8dVY3CGliw?utm_source=generator&theme=0"
        height="352"
        loading="lazy"
        title="Van-Van auf Spotify"
        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
        allowfullscreen
      ></iframe>
    </div>
    <button type="button" class="music-toggle" id="music-toggle" aria-expanded="false" aria-controls="music-panel" title="Musik von Van-Van">
      <span>🎵</span>
    </button>
  </div>

  <script>
    import { cartCount } from "../scripts/cart";
    import { getAccount, logout, anzeigeName } from "../scripts/account";

    // WICHTIG seit Einführung von <ClientRouter /> (siehe Kopf dieser Datei, nur für den
    // persistenten Musik-Button gedacht): Astro führt dieses Skript bei einem Seitenwechsel NICHT
    // automatisch erneut aus (nur bei einem waschechten ersten Laden) — alles, was auf JEDER
    // Seite neu laufen muss (Warenkorb-Zähler, Konto-Menü, Hamburger, Musik-Farbe …), gehört
    // deshalb in initPage() weiter unten, aufgerufen über das Astro-Ereignis "astro:page-load"
    // (feuert zuverlässig sowohl beim allerersten Laden als auch nach jedem Seitenwechsel).
    // Reines Browser-/Session-Setup (Installations-Prompt, Service Worker) bleibt bewusst AUSSERHALB
    // von initPage(), weil es nur einmal pro Sitzung registriert werden darf.

    function initPreviewSwitcher() {
      const match = document.cookie.match(/(?:^|;\s*)vandiy_gate_role=([^;]+)/);
      const role = match ? decodeURIComponent(match[1]) : null;
      if (!role) return;

      const widget = document.getElementById("vandiy-preview-switcher");
      const toggle = document.getElementById("vandiy-preview-toggle");
      const panel = document.getElementById("vandiy-preview-panel");
      const currentLabel = document.getElementById("vandiy-preview-current");
      if (!widget || !toggle || !panel) return;
      widget.style.display = "block";

      const roleLabel = role === "qciga" ? "qciga" : "VanVan";
      function beschreibeAktuell() {
        try {
          const raw = localStorage.getItem("vandiy_account_v1");
          const a = raw ? JSON.parse(raw) : null;
          if (!a || !a.loggedIn) return "Aktuell: normaler Besucher";
          if (a.abo && a.abo.stufe) return "Aktuell: Abonnentin (" + a.abo.stufe + ")";
          return "Aktuell: angemeldete Kundin";
        } catch {
          return "";
        }
      }
      if (currentLabel) currentLabel.textContent = `${beschreibeAktuell()} · als ${roleLabel} angemeldet`;

      toggle.addEventListener("click", () => {
        const open = panel.classList.toggle("open");
        toggle.setAttribute("aria-expanded", open ? "true" : "false");
      });
      // Kein document.addEventListener hier drin (würde sich bei jedem Seitenwechsel erneut
      // aufaddieren, da #vandiy-preview-switcher zwar bei jeder Seite neu erzeugt wird, `document`
      // selbst aber die ganze Sitzung über bestehen bleibt) — das Schließen bei Klick außerhalb
      // übernimmt stattdessen ein einziger, dauerhafter Listener weiter unten mit Live-Abfrage.

      const heute = new Date().toISOString().slice(0, 10);

      function leeresKonto(zusatz: Record<string, unknown>) {
        return {
          loggedIn: true,
          name: "Vorschau",
          username: roleLabel,
          email: "vorschau@vans-diy-bastelbedarf.de",
          photo: "",
          bewerteteBestellungen: [],
          treueBestellungen: 0,
          treuebonusAktiv: false,
          treuebonusArtikelSlug: null,
          abo: {
            stufe: null, startDatum: null, bezahltBisDatum: null, bezahlteMonate: 0,
            gekuendigt: false, gekuendigtAm: null, kleinTeddyFreigeschaltetGesamt: 0,
            grossTeddyFreigeschaltetGesamt: 0, kleinTeddyEingeloest: 0, grossTeddyEingeloest: 0,
            historie: [],
          },
          benachrichtigungen: [],
          ...zusatz,
        };
      }

      const PRESETS: Record<string, () => void> = {
        normal: () => localStorage.removeItem("vandiy_account_v1"),
        konto: () => localStorage.setItem("vandiy_account_v1", JSON.stringify(leeresKonto({ treueBestellungen: 4 }))),
        abo: () => localStorage.setItem("vandiy_account_v1", JSON.stringify(leeresKonto({
          treueBestellungen: 6,
          abo: {
            stufe: "gross", startDatum: "2025-06-03", bezahltBisDatum: "2026-09-03", bezahlteMonate: 14,
            gekuendigt: false, gekuendigtAm: null, kleinTeddyFreigeschaltetGesamt: 2,
            grossTeddyFreigeschaltetGesamt: 1, kleinTeddyEingeloest: 1, grossTeddyEingeloest: 1,
            historie: [],
          },
          benachrichtigungen: [
            { key: "abo_teddy_klein_frei", datum: heute, gelesen: false },
            { key: "abo_zahlung_erfolgreich", datum: heute, gelesen: true },
            { key: "abo_teddy_gross_eingeloest", datum: heute, gelesen: true },
            { key: "abo_abgeschlossen", datum: "2025-06-03", gelesen: true },
          ],
        }))),
      };

      panel.querySelectorAll<HTMLButtonElement>("[data-preview]").forEach((btn) => {
        btn.addEventListener("click", () => {
          const preset = btn.dataset.preview;
          if (preset && PRESETS[preset]) {
            PRESETS[preset]();
            window.location.reload();
          }
        });
      });
    }

    function updateCount() {
      const el = document.getElementById("cart-count");
      if (el) el.textContent = String(cartCount());
    }

    // Konto-Bereich der Kopfzeile: "Anmelden"-Link vs. Konto-Menü, je nachdem ob auf diesem
    // Gerät gerade ein (Demo-)Konto angemeldet ist (siehe scripts/account.ts). Läuft auf JEDER
    // Seite, weil Layout.astro von allen Seiten eingebunden wird — daher überall konsistent.
    // Fragt Elemente bewusst live per document.getElementById ab (statt sie einmal zu speichern),
    // damit sie sowohl beim erneuten Aufruf aus initPage() als auch aus den dauerhaften
    // window/document-Listenern weiter unten immer die AKTUELLEN (nach Seitenwechsel neuen)
    // Elemente treffen.
    function renderAccountArea() {
      const a = getAccount();
      const loginBtn = document.getElementById("account-login-btn");
      const menu = document.getElementById("account-menu");
      const avatar = document.getElementById("account-avatar");
      const usernameLabel = document.getElementById("account-username-label");
      if (loginBtn) loginBtn.style.display = a.loggedIn ? "none" : "";
      if (menu) menu.style.display = a.loggedIn ? "flex" : "none";
      if (!a.loggedIn) return;
      if (usernameLabel) usernameLabel.textContent = anzeigeName(a) || "Konto";
      if (avatar) {
        if (a.photo) {
          avatar.style.backgroundImage = `url(${a.photo})`;
          avatar.textContent = "";
        } else {
          avatar.style.backgroundImage = "";
          avatar.textContent = (anzeigeName(a) || "?").trim().charAt(0).toUpperCase();
        }
      }
    }
    function closeAccountMenu() {
      document.getElementById("account-menu")?.classList.remove("open");
      document.getElementById("account-menu-btn")?.setAttribute("aria-expanded", "false");
    }
    // Nur das Verdrahten der Listener an die (bei jedem Seitenwechsel neu erzeugten) Kopfzeilen-
    // Elemente selbst — sicher, wiederholt aufzurufen: alte Elemente samt ihren Listenern
    // verschwinden zusammen mit dem Seitenwechsel, keine Ansammlung.
    function initAccountArea() {
      renderAccountArea();
      const menu = document.getElementById("account-menu");
      const menuBtn = document.getElementById("account-menu-btn");
      const logoutBtn = document.getElementById("account-logout-btn");

      menuBtn?.addEventListener("click", (e) => {
        e.stopPropagation();
        const open = menu?.classList.toggle("open");
        menuBtn.setAttribute("aria-expanded", open ? "true" : "false");
      });

      // Öffnet zusätzlich automatisch beim Drüberfahren mit der Maus (Desktop) — kein Klick mehr
      // nötig. Kurze Schließverzögerung beim Verlassen, damit der Wechsel von Button zu Menü nicht
      // sofort wieder zuklappt. Klick bleibt als Fallback für Touch-Geräte/Tastatur erhalten.
      let accountCloseTimer: ReturnType<typeof setTimeout> | null = null;
      menu?.addEventListener("mouseenter", () => {
        if (accountCloseTimer) { clearTimeout(accountCloseTimer); accountCloseTimer = null; }
        menu.classList.add("open");
        menuBtn?.setAttribute("aria-expanded", "true");
      });
      menu?.addEventListener("mouseleave", () => {
        accountCloseTimer = setTimeout(closeAccountMenu, 200);
      });

      logoutBtn?.addEventListener("click", () => {
        logout();
        closeAccountMenu();
      });
    }

    function initHamburger() {
      const hamburger = document.getElementById("hamburger");
      const mobileNav = document.getElementById("mobile-nav");
      hamburger?.addEventListener("click", () => {
        const open = mobileNav?.classList.toggle("open");
        hamburger.setAttribute("aria-expanded", String(!!open));
      });
    }

    // "Auf dem Gerät installieren" — zeigt einen echten Button in der Kopfzeile, sobald der
    // Browser eine Installation anbietet (Chrome/Edge auf PC & Handy), statt sich darauf zu
    // verlassen, dass jemand das winzige Icon im Browser selbst findet. Läuft bereits als
    // installierte App? Dann gibt es sowieso nichts mehr zu installieren — Button bleibt versteckt.
    // installPromptEvent lebt AUSSERHALB von initPage() (Modul-Gültigkeitsbereich, überlebt jeden
    // Seitenwechsel unverändert), weil das Ereignis nur EINMAL pro Sitzung vom Browser kommt, der
    // "Installieren"-Knopf selbst aber auf jeder neu geladenen Seite neu gefunden werden muss.
    let installPromptEvent: any = null;
    function initInstallButton() {
      const installBtn = document.getElementById("install-btn");
      installBtn?.addEventListener("click", async () => {
        if (!installPromptEvent) return;
        installBtn.style.display = "none";
        installPromptEvent.prompt();
        await installPromptEvent.userChoice;
        installPromptEvent = null;
      });
      if (installPromptEvent && installBtn) installBtn.style.display = "flex";
    }

    // Musik-Button: #vandiy-music-widget bleibt dank transition:persist bei jedem Seitenwechsel
    // dasselbe DOM-Element (siehe Markup oben) — der "wired"-Schutz verhindert, dass sich Klick-
    // Listener bei jedem erneuten initPage()-Aufruf aufaddieren, während die Farbanpassung
    // bewusst bei JEDER Seite neu läuft.
    function initMusicWidget() {
      const widget = document.getElementById("vandiy-music-widget");
      const toggle = document.getElementById("music-toggle");
      const panel = document.getElementById("music-panel") as HTMLElement | null;
      const closeBtn = document.getElementById("music-close");
      const iframe = document.getElementById("music-iframe") as HTMLIFrameElement | null;
      if (!widget || !toggle || !panel) return;

      if (!widget.dataset.wired) {
        widget.dataset.wired = "1";
        const openPanel = () => {
          panel.hidden = false;
          widget.classList.add("open");
          toggle.setAttribute("aria-expanded", "true");
          if (iframe && !iframe.getAttribute("src")) {
            const src = iframe.dataset.src;
            if (src) iframe.setAttribute("src", src);
          }
        };
        const closePanel = () => {
          panel.hidden = true;
          widget.classList.remove("open");
          toggle.setAttribute("aria-expanded", "false");
        };
        toggle.addEventListener("click", () => { panel.hidden ? openPanel() : closePanel(); });
        closeBtn?.addEventListener("click", closePanel);
        document.addEventListener("click", (e) => {
          if (!panel.hidden && !widget.contains(e.target as Node)) closePanel();
        });
      }

      adaptMusicColors(toggle);
    }

    // "Chamäleon"-Farblogik: nimmt das erste sinnvolle Bild im Hauptinhalt der aktuellen Seite,
    // liest per Canvas Durchschnitts- und auffälligste Farbe aus und färbt den Musik-Knopf
    // entsprechend ein (siehe --music-c1/--music-c2 im CSS). Fremd-Domain-Bilder oder Seiten ganz
    // ohne passendes Bild (Warenkorb, Konto, Rechtstexte …) fallen sauber auf ein festes, aber je
    // nach URL-Pfad unterschiedliches Markenfarben-Paar zurück.
    async function adaptMusicColors(toggle: HTMLElement) {
      const FALLBACK_PALETTE: [string, string][] = [
        ["#5fd3ec", "#9b7fd6"],
        ["#9b7fd6", "#e3b23c"],
        ["#e3b23c", "#e7879a"],
        ["#e7879a", "#5fd3ec"],
        ["#6ecb8f", "#5fd3ec"],
      ];
      function fallbackColors(): [string, string] {
        let hash = 0;
        const path = location.pathname;
        for (let i = 0; i < path.length; i++) hash = (hash * 31 + path.charCodeAt(i)) >>> 0;
        return FALLBACK_PALETTE[hash % FALLBACK_PALETTE.length];
      }

      let c1: string | null = null;
      let c2: string | null = null;
      const img = document.querySelector<HTMLImageElement>("main img[src]");
      if (img) {
        try {
          if (!img.complete) {
            await new Promise<void>((resolve, reject) => {
              img.addEventListener("load", () => resolve(), { once: true });
              img.addEventListener("error", () => reject(), { once: true });
            });
          }
          const canvas = document.createElement("canvas");
          canvas.width = 24;
          canvas.height = 24;
          const ctx = canvas.getContext("2d");
          if (ctx) {
            ctx.drawImage(img, 0, 0, 24, 24);
            const { data } = ctx.getImageData(0, 0, 24, 24);
            let r = 0, g = 0, b = 0, n = 0;
            let bestSpread = -1, sr = 0, sg = 0, sb = 0;
            for (let i = 0; i < data.length; i += 4) {
              if (data[i + 3] < 40) continue; // durchsichtige Pixel ignorieren
              r += data[i]; g += data[i + 1]; b += data[i + 2]; n++;
              const spread = Math.max(data[i], data[i + 1], data[i + 2]) - Math.min(data[i], data[i + 1], data[i + 2]);
              if (spread > bestSpread) { bestSpread = spread; sr = data[i]; sg = data[i + 1]; sb = data[i + 2]; }
            }
            if (n > 0) {
              c1 = `rgb(${Math.round(r / n)}, ${Math.round(g / n)}, ${Math.round(b / n)})`;
              c2 = `rgb(${sr}, ${sg}, ${sb})`;
            }
          }
        } catch {
          // Fremd-Domain-Bild (CORS) oder Ladefehler -> unten auf Fallback-Palette zurückfallen.
        }
      }
      if (!c1 || !c2) { [c1, c2] = fallbackColors(); }
      toggle.style.setProperty("--music-c1", c1);
      toggle.style.setProperty("--music-c2", c2);
    }

    // Dauerhafte document/window-Listener — bewusst NUR EINMAL registriert (nicht in initPage()),
    // weil `document`/`window` selbst bei einem Seitenwechsel NICHT neu erzeugt werden. Würden
    // diese stattdessen bei jedem astro:page-load neu angehängt, würden sie sich mit jeder
    // Navigation zusätzlich aufaddieren. Fragen die betroffenen Elemente deshalb erst IM
    // Ereignisfall live ab, statt sie beim Registrieren einmalig festzuhalten.
    window.addEventListener("account:changed", renderAccountArea);
    window.addEventListener("storage", renderAccountArea);
    document.addEventListener("click", (e) => {
      closeAccountMenu();
      const previewWidget = document.getElementById("vandiy-preview-switcher");
      const previewPanel = document.getElementById("vandiy-preview-panel");
      if (previewWidget && previewPanel && !previewWidget.contains(e.target as Node)) {
        previewPanel.classList.remove("open");
      }
    });
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") closeAccountMenu();
    });

    // Läuft zuverlässig sowohl beim allerersten Laden als auch nach jedem Seitenwechsel (siehe
    // Kommentar oben) — alles, was auf JEDER Seite frisch eingerichtet werden muss, steht hier.
    document.addEventListener("astro:page-load", () => {
      initPreviewSwitcher();
      updateCount();
      initAccountArea();
      initHamburger();
      initInstallButton();
      initMusicWidget();
    });

    // Reines Browser-/Sitzungs-Setup — läuft nur EINMAL (dieses Skript selbst wird von Astro nur
    // beim allerersten Laden ausgeführt, siehe Kommentar oben), absichtlich AUSSERHALB von
    // initPage(), weil sich diese Ereignisse sonst bei jedem Seitenwechsel erneut registrieren
    // und mehrfach feuern würden.
    const laeuftBereitsAlsApp = window.matchMedia("(display-mode: standalone)").matches;
    if (!laeuftBereitsAlsApp) {
      window.addEventListener("beforeinstallprompt", (e) => {
        e.preventDefault();
        installPromptEvent = e;
        const installBtn = document.getElementById("install-btn");
        if (installBtn) installBtn.style.display = "flex";
      });
    }
    window.addEventListener("appinstalled", () => {
      const installBtn = document.getElementById("install-btn");
      if (installBtn) installBtn.style.display = "none";
    });

    // Service Worker: rein "network-first" (versucht IMMER zuerst das echte Netzwerk, Cache
    // dient nur als Rückfalllösung, wenn wirklich keine Verbindung besteht) — kein Risiko auf
    // veraltete Inhalte im Adminbereich, macht die Seite aber gleichzeitig zu einer "echten" App
    // (Installations-Voraussetzung in den meisten Browsern) und funktioniert notfalls auch kurz
    // offline für bereits besuchte Seiten.
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", () => {
        navigator.serviceWorker.register("/sw.js").catch(() => {});
      });
    }
  </script>

  <style is:global>
    body { font-family: var(--font-body); }
    h1, h2, h3, h4 { font-family: var(--font-head-override, var(--font-head)); }

    .topbar {
      background: linear-gradient(90deg, var(--c-purple), var(--c-purple-deep));
      color: var(--c-text);
      text-align: center;
      font-size: 0.9rem;
      padding: 0.6rem 1rem;
      letter-spacing: 0.01em;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(10, 9, 16, 0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(244, 241, 247, 0.06);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-block: 1rem;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 1.18rem;
    }
    .brand img { border-radius: 50%; }

    .main-nav { display: flex; gap: 1.7rem; flex-shrink: 0; }
    .main-nav a {
      font-size: 1.02rem;
      color: var(--c-text-muted);
      white-space: nowrap;
      transition: color 0.2s var(--ease);
    }
    .main-nav a:hover { color: var(--c-accent); }

    .header-actions { display: flex; align-items: center; gap: 0.8rem; }
    .icon-link { font-size: 1.25rem; position: relative; display: inline-flex; align-items: center; gap: 0.3rem; }

    /* "Auf dem Gerät installieren"-Button — nur sichtbar, wenn der Browser das wirklich anbietet
       (per JS über das beforeinstallprompt-Event ein-/ausgeblendet, siehe Script unten). Damit
       muss niemand erst das kleine, leicht zu übersehende Installations-Icon im Browser selbst
       suchen — der Button ist direkt in der Kopfzeile sichtbar. */
    .install-btn {
      display: flex;
      align-items: center;
      gap: 0.45em;
      padding: 0.5em 0.9em 0.5em 0.7em;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(155, 127, 214, 0.22), rgba(46, 27, 71, 0.4));
      border: 1px solid rgba(155, 127, 214, 0.4);
      color: var(--c-text);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    .install-btn:hover {
      border-color: var(--c-purple-glow);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px -8px rgba(155, 127, 214, 0.5);
    }
    .install-icon { display: flex; }
    @media (max-width: 640px) { .install-btn .install-label { display: none; } .install-btn { padding: 0.5em; } }
    .cart-count {
      background: var(--c-accent);
      color: #08181c;
      font-size: 0.7rem;
      font-weight: 700;
      border-radius: 999px;
      min-width: 1.2em;
      padding: 0 0.35em;
      text-align: center;
    }
    .hamburger {
      display: none;
      background: none;
      border: none;
      color: var(--c-text);
      font-size: 1.4rem;
      cursor: pointer;
    }
    .mobile-nav {
      display: none;
      flex-direction: column;
      padding: 0.5rem 1.5rem 1.2rem;
      gap: 0.9rem;
      border-top: 1px solid rgba(244,241,247,0.06);
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav-divider {
      margin-top: 0.4rem;
      padding-top: 0.9rem;
      border-top: 1px solid rgba(244, 241, 247, 0.08);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--c-accent);
    }

    @media (max-width: 1100px) {
      .main-nav { display: none; }
      .hamburger { display: inline-block; }
    }
    /* Auf schmalen Screens (Handy) reicht der Platz nicht mehr für Logo+Markenname+
       Sprachumschalter-Text+Konto-Icon+Warenkorb+Menü-Button nebeneinander in voller Größe —
       ohne diese Anpassung würde der Menü-Button (☰) rechts aus dem Bildschirm rausgeschoben
       und wäre gar nicht mehr anklickbar. Zeigt auf schmalen Screens nur noch die Icons/Kürzel. */
    @media (max-width: 480px) {
      .brand img { width: 38px; height: 38px; }
      .brand span { font-size: 0.98rem; }
      .lang-switch-btn { padding: 0.35em 0.55em; }
      .lang-switch-btn .lang-label,
      .lang-switch-btn .chevron { display: none; }
    }

    /* Zweite Navigationsleiste: Schnellzugriff auf die 5 Hauptkategorien, direkt unter der
       Hauptnav — gleicher Designstil (dunkler Anthrazit-Streifen, Akzent-Unterstrich bei Hover). */
    .sub-nav {
      background: var(--c-anthracite);
      border-bottom: 1px solid rgba(244, 241, 247, 0.06);
    }
    .sub-nav-inner {
      display: flex;
      gap: clamp(1.1rem, 3vw, 2rem);
      overflow-x: auto;
      padding-block: 0.75rem;
      scrollbar-width: none;
    }
    .sub-nav-inner::-webkit-scrollbar { display: none; }
    .sub-nav-inner a {
      position: relative;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--c-text-muted);
      white-space: nowrap;
      padding-bottom: 3px;
      transition: color 0.2s var(--ease);
    }
    .sub-nav-inner a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--c-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.2s var(--ease);
    }
    .sub-nav-inner a:hover { color: var(--c-accent); }
    .sub-nav-inner a:hover::after { transform: scaleX(1); }
    @media (max-width: 860px) { .sub-nav { display: none; } }

    .site-footer {
      background: var(--c-anthracite);
      margin-top: 4rem;
      padding-top: 3rem;
      padding-bottom: 2rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 2rem;
      margin-bottom: 1rem;
    }
    .footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
    .footer-list a { color: var(--c-text-muted); font-size: 0.9rem; }
    .footer-list a:hover { color: var(--c-accent); }
    .legal-note-footer { margin-top: 0.8rem; font-size: 0.78rem; line-height: 1.5; }
    @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
  </style>
</body>
</html>
