// ====================== SHARED DATA ======================
const CATEGORIES = [
{ id: "escritorio", label: "Materiais de Escritório", short: "DE ESCRITÓRIO", slot: "Foto: material de escritório" },
{ id: "limpeza", label: "Produtos de Limpeza", short: "DE LIMPEZA", slot: "Foto: produtos de limpeza" },
{ id: "copa", label: "Produtos de Copa", short: "DE COPA", slot: "Foto: café / produtos de copa" },
{ id: "descartaveis", label: "Descartáveis", short: "DESCARTÁVEIS", slot: "Foto: copos descartáveis" },
{ id: "equipamentos", label: "Equipamentos", short: "EQUIPAMENTOS", slot: "Foto: cadeira / equipamento" },
{ id: "papelaria", label: "Papelaria", short: "PAPELARIA", slot: "Foto: caderno / papelaria" }];


const EQUIP_SUB = ["Cadeiras de Escritório", "Mesas e Estações", "Bebedouros", "Ventiladores", "Aspiradores", "Carrinhos de Limpeza"];

// URLs das categorias já publicadas (as demais ainda abrem aviso/Home)
const PAGE_URLS = {
  limpeza: "Produtos de Limpeza.html",
  escritorio: "Materiais de Escritorio.html",
  copa: "Copa e Cozinha.html",
};

// só as categorias que já têm página publicada aparecem no site
const VISIBLE_CATEGORIES = CATEGORIES.filter((c) => PAGE_URLS[c.id]);

// ====================== IMAGE PLACEHOLDER ======================
// Striped placeholder with image icon + monospace label, per user request.
function ImgSlot({ label = "Imagem", radius = 8, dark = false, style, iconSize = 26, compact = false }) {
  const fg = dark ? "rgba(255,255,255,.62)" : "#9aa3b5";
  const stripe = dark ? "rgba(255,255,255,.05)" : "rgba(22,41,77,.045)";
  const base = dark ? "rgba(255,255,255,.04)" : "#eef1f6";
  return (
    <div style={{
      position: "relative", width: "100%", height: "100%",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      gap: compact ? 4 : 8, borderRadius: radius, overflow: "hidden",
      background: `repeating-linear-gradient(135deg, ${base} 0 11px, ${stripe} 11px 22px)`,
      border: `1px dashed ${dark ? "rgba(255,255,255,.18)" : "#cdd4e2"}`,
      color: fg, textAlign: "center", padding: 10, ...style
    }}>
      <IconImage size={iconSize} stroke={1.5} />
      {!compact &&
      <span style={{
        fontFamily: "ui-monospace,SFMono-Regular,Menlo,monospace",
        fontSize: 10.5, letterSpacing: ".02em", lineHeight: 1.35, maxWidth: "90%"
      }}>{label}</span>
      }
    </div>);

}

// ====================== JGF LOGO (real brand image) ======================
function Logo({ scale = 1, white = false }) {
  return (
    <img src={white ? "assets/brand/logo_white.png" : "assets/brand/logo_color.png"}
    alt="JGF Distribuidora"
    style={{ ...{ height: 52 * scale, display: "block", width: "200px" }, height: "96px" }} />);

}

// ====================== TOAST SYSTEM ======================
const ToastCtx = React.createContext(() => {});
function ToastProvider({ children }) {
  const [toasts, setToasts] = React.useState([]);
  const push = React.useCallback((msg, kind = "info") => {
    const id = Math.random().toString(36).slice(2);
    setToasts((t) => [...t, { id, msg, kind }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2600);
  }, []);
  return (
    <ToastCtx.Provider value={push}>
      {children}
      <div style={{ position: "fixed", right: 22, bottom: 100, display: "flex", flexDirection: "column", gap: 10, zIndex: 1000 }}>
        {toasts.map((t) =>
        <div key={t.id} style={{
          animation: "toastIn .28s cubic-bezier(.2,.9,.3,1.3) both",
          background: "#16294d", color: "#fff", padding: "13px 17px", borderRadius: 10,
          boxShadow: "0 14px 34px rgba(16,30,60,.32)", display: "flex", alignItems: "center", gap: 11,
          fontSize: 13.5, fontWeight: 600, maxWidth: 340, borderLeft: "4px solid var(--yellow)"
        }}>
            <span style={{ color: "var(--yellow)", display: "flex" }}><IconCheck size={17} /></span>
            {t.msg}
          </div>
        )}
      </div>
    </ToastCtx.Provider>);

}
const useToast = () => React.useContext(ToastCtx);

// ====================== PERSISTENT CART (shared across pages via localStorage) ======================
const CART_KEY = "jgf_cart_v1";
const WHATSAPP_NUMBER = "558173008306"; // <-- número que recebe os pedidos (DDI 55 + DDD 81)

function usePersistentCart() {
  const [cart, setCart] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(CART_KEY) || "[]"); } catch (e) { return []; }
  });
  React.useEffect(() => {
    try { localStorage.setItem(CART_KEY, JSON.stringify(cart)); } catch (e) {}
  }, [cart]);
  // keep multiple open tabs / pages in sync
  React.useEffect(() => {
    const onStorage = (e) => {
      if (e.key === CART_KEY) {
        try { setCart(JSON.parse(e.newValue || "[]")); } catch (err) {}
      }
    };
    window.addEventListener("storage", onStorage);
    return () => window.removeEventListener("storage", onStorage);
  }, []);
  return [cart, setCart];
}

Object.assign(window, { CATEGORIES, VISIBLE_CATEGORIES, EQUIP_SUB, PAGE_URLS, ImgSlot, Logo, ToastProvider, useToast, usePersistentCart, WHATSAPP_NUMBER });