// Global store — shared via window.Store
const PRODUCTS = [
  {
    id: 1,
    name: "Grass-Fed Beef Tallow",
    subtitle: "16oz Jar",
    price: 20.00,
    size: "16oz",
    tag: "Most Popular",
    image: "assets/tallow-16oz-1.jpg",
    images: ["assets/tallow-16oz-1.jpg", "assets/tallow-16oz-2.jpg", "assets/tallow-16oz-3.jpg"],
    desc: "Our signature tallow. Golden, nutrient-dense cooking oil, rendered from 100% grass-fed & finished beef suet. No additives, pure tallow the way nature intended.",
    features: ["100% Grass-Fed & Finished", "Golden & Nutrient-Dense", "Rendered from Pure Beef Suet", "No Additives"],
    color: "#F5C400",
  },
  {
    id: 2,
    name: "Grass-Fed Beef Tallow",
    subtitle: "8oz Jar",
    price: 12.00,
    size: "8oz",
    tag: "Great to Try",
    image: "assets/tallow-8oz-1.jpg",
    images: ["assets/tallow-8oz-1.jpg", "assets/tallow-8oz-2.jpg", "assets/tallow-8oz-3.jpg"],
    desc: "Our signature tallow. Golden, nutrient-dense cooking oil, rendered from 100% grass-fed & finished beef suet. No additives, pure tallow the way nature intended.",
    features: ["100% Grass-Fed & Finished", "Golden & Nutrient-Dense", "Rendered from Pure Beef Suet", "No Additives"],
    color: "#F5C400",
  },
  {
    id: 3,
    name: "Whipped Tallow Cream",
    subtitle: "4oz Jar",
    price: 20.00,
    size: "4oz",
    tag: "Skincare",
    optionLabel: "Scents",
    image: "assets/lotion-original-3.jpg",
    images: ["assets/lotion-original-3.jpg", "assets/lotion-original-1.jpg", "assets/lotion-original-2.jpg"],
    variants: [
      { name: "Original",   variantId: "47642746093745", available: true,  images: ["assets/lotion-original-3.jpg", "assets/lotion-original-1.jpg", "assets/lotion-original-2.jpg"] },
      { name: "Vanilla",    variantId: "47642746126513", available: true,  images: ["assets/lotion-original-1.jpg", "assets/lotion-original-2.jpg"] },
      { name: "Lavender",   variantId: "47642746159281", available: true,  images: ["assets/lotion-lavender-3.jpg", "assets/lotion-lavender-1.jpg", "assets/lotion-lavender-2.jpg"] },
      { name: "Eucalyptus", variantId: "47642746192049", available: false, images: ["assets/lotion-original-1.jpg", "assets/lotion-original-2.jpg"] },
    ],
    desc: "A light, whipped tallow cream made from 100% grass-fed & finished tallow, blended with jojoba and vitamin E oil. Deeply nourishing, in your choice of scent.",
    features: ["100% Grass-Fed & Finished", "Light, Whipped Texture", "Jojoba & Vitamin E Oil", "Deeply Nourishing"],
    color: "#F5C400",
  },
  {
    id: 5,
    name: "Honey Lip Balm",
    subtitle: "1oz Tin",
    price: 7.00,
    size: "1oz",
    tag: "Skincare",
    optionLabel: "Flavor",
    image: "assets/lipbalm-honey-1.jpg",
    images: ["assets/lipbalm-honey-1.jpg", "assets/lipbalm-honey-2.jpg"],
    variants: [
      { name: "Original",   variantId: "47642744946865", available: true,  images: ["assets/lipbalm-honey-1.jpg", "assets/lipbalm-honey-2.jpg"] },
      { name: "Peppermint", variantId: "47642744979633", available: true,  images: ["assets/lipbalm-peppermint-1.jpg", "assets/lipbalm-peppermint-2.jpg"] },
      { name: "Vanilla",    variantId: "47642745012401", available: false, images: ["assets/lipbalm-honey-2.jpg"] },
      { name: "Lavender",   variantId: "47642745045169", available: false, images: ["assets/lipbalm-honey-2.jpg"] },
      { name: "Eucalyptus", variantId: "47642745077937", available: false, images: ["assets/lipbalm-honey-2.jpg"] },
    ],
    desc: "A nourishing lip balm crafted with grass-fed and finished tallow, raw honey, and beeswax. Long-lasting with a subtle natural sweetness.",
    features: ["Grass-Fed & Finished Tallow", "Raw Honey & Beeswax", "Long-Lasting Moisture", "Subtle Natural Sweetness"],
    color: "#F5C400",
  },
];

// Variant helpers — a product with `variants` gets one cart line per scent/flavor.
const defaultVariant = (product) =>
  product.variants ? (product.variants.find(v => v.available) || product.variants[0]) : null;

const cartItemFor = (product, variant) => {
  if (!variant) return product;
  return {
    ...product,
    key: `${product.id}:${variant.name}`,
    variantId: variant.variantId,
    subtitle: `${variant.name} · ${product.subtitle}`,
    image: variant.images[0],
    images: variant.images,
  };
};

// ── Shopify checkout config ───────────────────────────────────────────────
// Sends the cart to Shopify's hosted checkout via a cart permalink.
// Fill these in with values from the Shopify account owner (see below).
//   SHOP_DOMAIN     → the store's .myshopify.com domain (or custom checkout domain)
//   SHOPIFY_VARIANTS → each site product id mapped to its Shopify VARIANT ID
const SHOP_DOMAIN = "shop.cleanfatstallow.com"; // Shopify checkout subdomain (apex is GitHub Pages)
// Fallback for cart items saved before scent variants existed (old site product ids).
const SHOPIFY_VARIANTS = {
  1: "45559727620273", // Grass-Fed Beef Tallow (16oz)      ($20)
  2: "47642746814641", // Grass-Fed Beef Tallow (8oz)       ($12)
  3: "47642746093745", // Whipped Tallow Cream — Original   ($20)
  4: "47642746159281", // Whipped Tallow Cream — Lavender   ($20)
  5: "47642744946865", // Honey Lip Balm — Original         ($7)
  6: "47642744979633", // Honey Lip Balm — Peppermint       ($7)
};

// Builds https://SHOP_DOMAIN/cart/VARIANT:QTY,VARIANT:QTY — returns null if not configured.
function buildShopifyCheckoutUrl(cart) {
  if (SHOP_DOMAIN.startsWith("YOUR-STORE")) return null;
  if (cart.some(i => !(i.variantId || SHOPIFY_VARIANTS[i.id]))) return null;
  const items = cart.map(i => `${i.variantId || SHOPIFY_VARIANTS[i.id]}:${i.qty}`).join(",");
  return `https://${SHOP_DOMAIN}/cart/${items}`;
}

function useCartStore() {
  const [cart, setCart] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('cf_cart') || '[]'); } catch { return []; }
  });

  const save = (items) => {
    setCart(items);
    localStorage.setItem('cf_cart', JSON.stringify(items));
  };

  // Cart lines are keyed by `key` (id:variant) so each scent is its own line;
  // items without variants fall back to their product id.
  const keyOf = (i) => i.key || i.id;

  const addToCart = (product, qty = 1) => {
    setCart(prev => {
      const exists = prev.find(i => keyOf(i) === keyOf(product));
      const next = exists
        ? prev.map(i => keyOf(i) === keyOf(product) ? { ...i, qty: i.qty + qty } : i)
        : [...prev, { ...product, qty }];
      localStorage.setItem('cf_cart', JSON.stringify(next));
      return next;
    });
  };

  const removeFromCart = (key) => {
    setCart(prev => {
      const next = prev.filter(i => keyOf(i) !== key);
      localStorage.setItem('cf_cart', JSON.stringify(next));
      return next;
    });
  };

  const updateQty = (key, qty) => {
    if (qty < 1) return removeFromCart(key);
    setCart(prev => {
      const next = prev.map(i => keyOf(i) === key ? { ...i, qty } : i);
      localStorage.setItem('cf_cart', JSON.stringify(next));
      return next;
    });
  };

  const clearCart = () => save([]);

  const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const count = cart.reduce((s, i) => s + i.qty, 0);

  return { cart, addToCart, removeFromCart, updateQty, clearCart, total, count };
}

Object.assign(window, { PRODUCTS, useCartStore, buildShopifyCheckoutUrl, defaultVariant, cartItemFor });