const WA_NUMBER = "628212472568";
const VARIANTS = [
  { id: "coffee", label: "Coffee", swatch: "var(--case-coffee)", photo: (window.__resources&&window.__resources.caseCoffee)||"assets/coffee.jpeg", note: "Deepest of the three — a near-black espresso brown." },
  { id: "taupe", label: "Taupe", swatch: "var(--case-taupe)", photo: (window.__resources&&window.__resources.caseTaupe)||"assets/taupe.jpg", note: "A soft grey-brown that sits between the two." },
  { id: "oatmeal", label: "Oatmeal", swatch: "var(--case-oatmeal)", photo: (window.__resources&&window.__resources.caseOatmeal)||"assets/oatmeal.jpeg", note: "The lightest — warm cream, closest to the house parchment." }
];
const CURRENCIES = [
  { id: "IDR", label: "IDR", amount: "359,000" },
  { id: "SGD", label: "SGD", amount: "35" },
  { id: "MYR", label: "MYR", amount: "120" }
];
const cleanInitials = v => v.replace(/[^a-zA-Z]/g, "").toUpperCase().slice(0, 4);
const priceOf = code => { const c = CURRENCIES.find(x => x.id === code); return c.id + " " + c.amount; };

function waLink(order) {
  const v = VARIANTS.find(x => x.id === order.variant);
  const lines = [
    "Hello Le Vault — I would like to order a custom vanity case.",
    "",
    "COLOURWAY: " + v.label,
    "MONOGRAM: " + (order.initials || "—"),
    "PRICE: " + priceOf(order.currency),
    "",
    "NAME: " + order.name,
    "PHONE: " + order.phone,
    "ADDRESS: " + order.address
  ];
  if (order.notes && order.notes.trim()) lines.push("", "NOTES: " + order.notes.trim());
  return "https://wa.me/" + WA_NUMBER + "?text=" + encodeURIComponent(lines.join("\n"));
}

function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce || !("IntersectionObserver" in window)) { setSeen(true); return; }
    let done = false;
    const show = () => { if (done) return; done = true; setSeen(true); cleanup(); };
    const near = () => {
      const r = el.getBoundingClientRect();
      if (r.top < (window.innerHeight || 0) * 0.98 && r.bottom > 0) show();
    };
    const io = new IntersectionObserver(e => { if (e[0].isIntersecting) show(); }, { threshold: 0, rootMargin: "0px 0px -6% 0px" });
    io.observe(el);
    const timer = setTimeout(show, 1400);
    function cleanup() { io.disconnect(); clearTimeout(timer); window.removeEventListener("scroll", near); window.removeEventListener("resize", near); }
    window.addEventListener("scroll", near, { passive: true });
    window.addEventListener("resize", near, { passive: true });
    near();
    return cleanup;
  }, []);
  return React.createElement(As, { ref, className: "rv " + (seen ? "in " : "") + className, style: { transitionDelay: delay + "ms" }, ...rest }, children);
}

function SectionHead({ eyebrow, title, script, children }) {
  return (
    <div style={{ marginBottom: "var(--space-10)" }}>
      {eyebrow ? <Reveal className="eyebrow" as="p" style={{ margin: "0 0 var(--space-5)" }}>{eyebrow}</Reveal> : null}
      <Reveal delay={60}>
        <h2 style={{ font: "var(--type-h1)", fontFamily: "var(--font-display)", fontWeight: 400 }}>
          {title}{script ? <> <em className="script" style={{ fontSize: "1.15em", fontStyle: "normal" }}>{script}</em></> : null}
        </h2>
      </Reveal>
      {children ? <Reveal delay={120} className="prose" style={{ marginTop: "var(--space-6)" }}>{children}</Reveal> : null}
    </div>
  );
}

Object.assign(window, { WA_NUMBER, VARIANTS, CURRENCIES, cleanInitials, priceOf, waLink, Reveal, SectionHead });