/* KA Tabbar v1 — canonique ka-ui.git/nav/ka-tabbar.js
   Version vanilla (sites sans React : sorti-ka, api-ka, ka-stats…).
   Requiert ka-tabbar.css dans la page. Usage :

     const bar = KaTabbar.mount({
       theme: "light" | "dark",
       accent: "#d6336c",                       // couleur signature
       tabs: [
         { key: "decouvrir", label: "Découvrir", icon: "compass", href: "/" },
         { key: "recherche", label: "Recherche", icon: "search", onPress: () => {…} },
       ],
     });
     bar.setActive("decouvrir");                // pilotage par le routeur du site

   Les <a> reçoivent data-nav pour être interceptés par les routeurs SPA
   maison qui délèguent sur [data-nav]. */
(function () {
  "use strict";

  var ICONS = {
    compass: '<circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2.2 5-4.8 2 2.2-5 4.8-2z"/>',
    search: '<circle cx="11" cy="11" r="7"/><path d="m20.5 20.5-4.2-4.2"/>',
    heart: '<path d="M12 20.5S4.5 15.8 2.6 11.4A5.3 5.3 0 0 1 12 6.6a5.3 5.3 0 0 1 9.4 4.8C19.5 15.8 12 20.5 12 20.5z"/>',
    user: '<circle cx="12" cy="8.2" r="3.7"/><path d="M4.5 20.2a7.5 7.5 0 0 1 15 0"/>',
    map: '<path d="M9 4 3.5 6v14L9 18l6 2 5.5-2V4L15 6 9 4z"/><path d="M9 4v14M15 6v14"/>',
    pin: '<path d="M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/>',
    tag: '<path d="M20.6 13.4 12 22 2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z"/><circle cx="7" cy="7" r="1.6"/>',
    home: '<path d="m3.5 10.5 8.5-7 8.5 7"/><path d="M5.5 9v11h13V9"/>',
    grid: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>',
    store: '<path d="M4.5 9.5 6 4.5h12l1.5 5"/><path d="M5 9.5h14V20H5V9.5z"/><path d="M10 20v-5h4v5"/>',
    basket: '<path d="M4 9h16l-1.6 10a2 2 0 0 1-2 1.7H7.6a2 2 0 0 1-2-1.7L4 9z"/><path d="M8.5 9 12 3l3.5 6"/>',
    target: '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="0.8"/>',
    trendup: '<path d="m3.5 16.5 5.5-5.5 3.5 3.5 7.5-7.5"/><path d="M14.5 7H20v5.5"/>',
    receipt: '<path d="M6 3.5h12V21l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4L6 21V3.5z"/><path d="M9 8h6M9 11.5h6M9 15h4"/>',
    book: '<path d="M12 6.5C10.5 5 8.5 4.5 5.5 4.5H3.5V19h2c3 0 5 .5 6.5 2 1.5-1.5 3.5-2 6.5-2h2V4.5h-2c-3 0-5 .5-6.5 2z"/><path d="M12 6.5V21"/>',
    chart: '<path d="M4 20h16"/><path d="M7.5 20v-6M12 20V9M16.5 20v-4"/>',
    calendar: '<rect x="3.5" y="5" width="17" height="15.5" rx="2"/><path d="M8 3v4M16 3v4M3.5 10h17"/>',
  };

  function svg(name) {
    return (
      '<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
      ' stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
      (ICONS[name] || "") +
      "</svg>"
    );
  }

  window.KaTabbar = {
    mount: function (cfg) {
      var nav = document.createElement("nav");
      nav.className = "ka-tabbar" + (cfg.theme === "dark" ? " ka-tabbar--dark" : "");
      nav.setAttribute("aria-label", "Navigation mobile");
      if (cfg.accent) nav.style.setProperty("--ktb-accent", cfg.accent);
      (cfg.tabs || []).forEach(function (t) {
        var el;
        if (t.onPress) {
          el = document.createElement("button");
          el.type = "button";
          el.addEventListener("click", t.onPress);
        } else {
          el = document.createElement("a");
          el.href = t.href || "#";
          el.setAttribute("data-nav", "");
        }
        el.dataset.tab = t.key || t.label;
        el.innerHTML = svg(t.icon) + t.label;
        nav.appendChild(el);
      });
      document.body.appendChild(nav);
      return {
        el: nav,
        setActive: function (key) {
          nav.querySelectorAll("a,button").forEach(function (b) {
            b.classList.toggle("active", b.dataset.tab === key);
          });
        },
      };
    },
  };
})();