// components.jsx — shared primitives for Butter Cream Doces
const { useState, useEffect, useRef } = React;

const WA_NUMBER = "5562994198503";
function waLink(msg) {
  const text = encodeURIComponent(msg || "Olá! Gostaria de solicitar um orçamento de doces para meu evento.");
  return `https://wa.me/${WA_NUMBER}?text=${text}`;
}

/* ---------- Icons (stroke, 24x24) ---------- */
const Icon = {
  whatsapp: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path fillRule="evenodd" clipRule="evenodd" d="M20.463 3.488C18.217 1.24 15.231 0 12.05 0 5.495 0 .16 5.333.157 11.892c0 2.096.547 4.14 1.588 5.946L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.333 11.893-11.893a11.821 11.821 0 00-3.48-8.413zm-8.413 18.302h-.004a9.867 9.867 0 01-5.031-1.378l-.361-.214-3.741.981 1-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.889-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.892 6.994c-.003 5.45-4.437 9.884-9.887 9.884zm5.422-7.403c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
  ),
  arrow: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>),
  plus: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>),
  star: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5 20.4l1.4-6.8L1.3 9l6.9-.8L12 2z"/></svg>),
  craft: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M6 21h12M8 21v-4M16 21v-4M5 9h14l-1 8H6L5 9z"/><path d="M9 9V6a3 3 0 0 1 6 0v3"/><path d="M12 3v2"/></svg>),
  leaf: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M11 20A7 7 0 0 1 4 13c0-4 3-8 9-9 0 6-2 9-6 11"/><path d="M4 21c3-6 7-9 12-9"/></svg>),
  heart: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 21s-7-4.6-9.5-9C1 9 2.5 5.5 6 5.5c2 0 3.2 1.2 4 2.4.8-1.2 2-2.4 4-2.4 3.5 0 5 3.5 3.5 6.5C19 16.4 12 21 12 21z"/></svg>),
  box: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 8l-9-5-9 5 9 5 9-5z"/><path d="M3 8v8l9 5 9-5V8M12 13v8"/></svg>),
  chat: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 12a8 8 0 0 1-11.5 7.2L3 21l1.8-6.5A8 8 0 1 1 21 12z"/></svg>),
  taste: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M8 2v7a4 4 0 0 0 8 0V2M12 13v9M9 22h6"/></svg>),
  brush: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9.5 14.5L3 21M14 4l6 6-7 7-6-1-1-6 7-7z"/></svg>),
  truck: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M1 3h13v11H1zM14 7h4l3 3v4h-7"/><circle cx="6" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>),
  pin: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>),
  mail: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>),
  ig: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>),
  menu: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>),
  cake: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 21h16M4 21v-7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7M4 16h16M12 8V5M9 5h6"/></svg>),
};

/* ---------- WhatsApp Button ---------- */
function WaButton({ msg, children, className = "btn-primary", size = "" }) {
  return (
    <a className={`btn ${className} ${size}`} href={waLink(msg)} target="_blank" rel="noreferrer">
      <Icon.whatsapp /> {children}
    </a>
  );
}

/* ---------- Image Placeholder ---------- */
function Ph({ label, dark = false, icon = true, style }) {
  return (
    <div className={`ph ${dark ? "dark" : ""}`} style={style}>
      {icon && <span className="ph-icon"><Icon.cake style={{ width: 26, height: 26 }} /></span>}
      <span className="ph-tag">{label}</span>
    </div>
  );
}

/* ---------- Scroll reveal (survives React re-renders) ---------- */
function useReveal() {
  // Re-assert revealed state synchronously before paint so a React re-render
  // (which rewrites className from JSX) can't wipe the imperatively-added "in".
  React.useLayoutEffect(() => {
    if (window.__revealed) window.__revealed.forEach((el) => { if (el.isConnected) el.classList.add("in"); });
  });
  useEffect(() => {
    if (!window.__revealed) window.__revealed = new Set();
    let io = window.__bcIO;
    if (!io) {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { e.target.classList.add("in"); window.__revealed.add(e.target); }
        });
      }, { threshold: 0.08, rootMargin: "0px 0px -6% 0px" });
      window.__bcIO = io;
    }
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    // safety: if frames never run (throttled/background tab), snap content visible
    // without a transition so it can never get stuck at opacity 0.
    const safety = setTimeout(() => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        if (el.getBoundingClientRect().top < window.innerHeight * 1.05) {
          el.style.transition = "none";
          el.classList.add("in");
          window.__revealed.add(el);
        }
      });
    }, 600);
    return () => clearTimeout(safety);
  });
}

/* ---------- Section eyebrow + heading ---------- */
function SecHead({ eyebrow, title, lead, align = "center" }) {
  return (
    <div className={`sec-head ${align === "left" ? "left" : ""}`}>
      <p className={`eyebrow ${align === "center" ? "center" : ""}`}>{eyebrow}</p>
      <h2 className="display reveal">{title}</h2>
      {lead && <p className="lead reveal d1">{lead}</p>}
    </div>
  );
}

Object.assign(window, { WA_NUMBER, waLink, Icon, WaButton, Ph, useReveal, SecHead });
