// Furnishfy — shared UI primitives
const { useState, useEffect, useRef, useCallback } = React;

// ---------- money ----------
function money(n) {
  return "$" + n.toLocaleString("en-US");
}

// ---------- tiny icon set ----------
function Icon({ name, size = 20, stroke = 1.4, style }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style };
  switch (name) {
    case "bag":    return (<svg {...p}><path d="M6 8h12l-1 12H7L6 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>);
    case "search": return (<svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></svg>);
    case "menu":   return (<svg {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>);
    case "close":  return (<svg {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>);
    case "arrow":  return (<svg {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "arrowL": return (<svg {...p}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>);
    case "plus":   return (<svg {...p}><path d="M12 5v14M5 12h14"/></svg>);
    case "minus":  return (<svg {...p}><path d="M5 12h14"/></svg>);
    case "star":   return (<svg {...p} fill="currentColor" stroke="none"><path d="m12 3 2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 16.9 6.7 19.6l1-5.8L3.5 9.7l5.9-.9L12 3Z"/></svg>);
    case "check":  return (<svg {...p}><path d="m5 13 4 4L19 7"/></svg>);
    case "truck":  return (<svg {...p}><path d="M3 7h11v8H3zM14 10h4l3 3v2h-7"/><circle cx="7" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg>);
    case "leaf":   return (<svg {...p}><path d="M11 20c-4 0-7-3-7-8 0-1 0-2 .5-3 6 0 11 2 11 9 0 1 0 1-.3 2"/><path d="M9 16c2-3 5-5 8-6"/></svg>);
    case "shield": return (<svg {...p}><path d="M12 3 5 6v5c0 4 3 7 7 9 4-2 7-5 7-9V6l-7-3Z"/></svg>);
    case "globe":  return (<svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"/></svg>);
    default: return null;
  }
}

// ---------- placeholder imagery ----------
function Placeholder({ hue = 40, name, label = "product shot", style, className = "" }) {
  return (
    <div className={"ph " + className} style={{ "--h": hue, ...style }}>
      {name && <div className="ph-name">{name}</div>}
      <div className="ph-label">{label}</div>
    </div>
  );
}

// ---------- stars ----------
function Stars({ n = 5, size = 13 }) {
  return (
    <span style={{ display: "inline-flex", gap: 2, color: "var(--gold)" }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <Icon key={i} name="star" size={size} style={{ opacity: i < n ? 1 : 0.25 }} />
      ))}
    </span>
  );
}

// ---------- reveal on scroll ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

// ---------- product card ----------
function ProductCard({ p, go, index = 0 }) {
  const hasImg = p.thumbnail && !p.thumbnail.includes('no-product');
  return (
    <div className="pcard reveal" style={{ transitionDelay: (index % 4) * 70 + "ms" }} onClick={() => go("product", p.id)}>
      <div className="pcard-img">
        {hasImg
          ? <img src={p.thumbnail} alt={p.en} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          : <Placeholder hue={p.hue} label={p.cat} style={{ position: "absolute", inset: 0 }} />
        }
        {p.badge && (
          <span className="pcard-badge">{p.badge.en}</span>
        )}
        <div className="pcard-hover">
          <button className="btn btn--solid" style={{ width: "100%", padding: "13px 20px" }}>
            <span>View piece</span>
          </button>
        </div>
      </div>
      <div style={{ paddingTop: 16, display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1.15 }}>{p.en}</div>
          <div style={{ color: "var(--faint)", fontSize: 12.5, marginTop: 4 }}>{p.material.en}</div>
        </div>
        <div style={{ textAlign: "right", flexShrink: 0 }}>
          <div style={{ color: "var(--gold)", fontSize: 17, fontFamily: "var(--font-display)" }}>{money(p.price)}</div>
          {p.old && <div style={{ color: "var(--faint)", fontSize: 12.5, textDecoration: "line-through" }}>{money(p.old)}</div>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { money, Icon, Placeholder, Stars, useReveal, ProductCard,
  useState, useEffect, useRef, useCallback });