/* ============================================================
   SHARED PRIMITIVES — components.jsx
   ============================================================ */
const { useState, useEffect, useRef, useContext, createContext, useCallback, useMemo } = React;

/* ---------- Language ---------- */
const LangContext = createContext({ lang: "en", setLang: () => {} });
function useLang() { return useContext(LangContext); }
// t(en, es) — picks the right string; also accepts a {en,es} object as first arg.
function useT() {
  const { lang } = useLang();
  return useCallback((en, es) => {
    if (React.isValidElement(en)) return lang === "es" ? (es ?? en) : en;
    if (en && typeof en === "object") return en[lang] ?? en.en;
    return lang === "es" ? (es ?? en) : en;
  }, [lang]);
}
// pick a {en,es} object outside hooks
function L(obj, lang) { if (!obj) return ""; return obj[lang] ?? obj.en; }

/* ---------- Lucide icon (React-safe: never lets lucide replace the node) ---------- */
function lucideSvg(name) {
  const pascal = String(name).split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
  const node = window.lucide && window.lucide.icons && window.lucide.icons[pascal];
  if (!node) return "";
  const render = (n) => n.map((part) => {
    const [tag, attrs = {}, children] = part;
    const a = Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(" ");
    return children && children.length ? `<${tag} ${a}>${render(children)}</${tag}>` : `<${tag} ${a} />`;
  }).join("");
  return `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block">${render(node)}</svg>`;
}
function Icon({ name, className = "", style }) {
  const ref = useRef(null);
  useEffect(() => {
    let id;
    const draw = () => { if (ref.current) ref.current.innerHTML = lucideSvg(name); };
    if (window.lucide && window.lucide.icons) draw();
    else { id = setInterval(() => { if (window.lucide && window.lucide.icons) { draw(); clearInterval(id); } }, 120); }
    return () => id && clearInterval(id);
  }, [name]);
  return <i ref={ref} aria-hidden="true" className={className}
    style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", ...style }}></i>;
}
function refreshIcons() { /* no-op: icons self-render inside their own wrapper now */ }

/* ---------- Brand icons (lucide has no social glyphs) ---------- */
const BRAND_PATHS = {
  instagram: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z",
  facebook: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
  youtube: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
  tiktok: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z",
  x: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
  whatsapp: "M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.516 5.262l-.999 3.648 3.742-.961zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.612-.916-2.207-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.71.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z",
};
BRAND_PATHS.twitter = BRAND_PATHS.x;
function BrandIcon({ name, className = "", style }) {
  const d = BRAND_PATHS[name];
  if (!d) return null;
  return (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor" aria-hidden="true"
      className={className} style={{ display: "block", ...style }}><path d={d} /></svg>
  );
}

/* ---------- Scroll reveal ---------- */
function useReveal(dep) {
  useEffect(() => {
    const els = Array.from(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, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    // anything already in view on mount
    requestAnimationFrame(() => {
      els.forEach((el) => { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.92) el.classList.add("in"); });
    });
    return () => io.disconnect();
  }, [dep]);
}

/* ---------- Section eyebrow label ---------- */
function Eyebrow({ children, num, className = "" }) {
  return (
    <div className={"reveal label text-gold flex items-center gap-3 " + className}>
      {num && <span className="text-gold-soft/70">{num}</span>}
      <span>{children}</span>
    </div>
  );
}

/* ---------- Buttons ---------- */
function PrimaryBtn({ children, onClick, href, className = "", icon }) {
  const cls = "gbtn inline-flex items-center justify-center gap-2 bg-coral-deep hover:bg-coral text-white text-[13px] font-bold uppercase tracking-[0.16em] rounded-full px-8 py-4 shadow-lg transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,107,91,.45)] " + className;
  if (href) return <a href={href} onClick={onClick} className={cls}>{children}{icon && <Icon name={icon} className="w-4 h-4" />}</a>;
  return <button onClick={onClick} className={cls}>{children}{icon && <Icon name={icon} className="w-4 h-4" />}</button>;
}
function GhostBtn({ children, onClick, className = "", icon }) {
  return (
    <button onClick={onClick} className={"inline-flex items-center justify-center gap-2 bg-white/[.06] backdrop-blur-md border border-white/25 text-white text-[13px] font-bold uppercase tracking-[0.16em] rounded-full px-8 py-4 hover:border-gold/60 hover:text-gold-soft transition-all duration-300 " + className}>
      {children}{icon && <Icon name={icon} className="w-4 h-4" />}
    </button>
  );
}

/* ---------- Photo with graceful placeholder ---------- */
function Photo({ src, alt, className = "", imgClass = "", placeholder, style }) {
  const [err, setErr] = useState(false);
  const real = (typeof window !== "undefined" && window.__asset) ? window.__asset(src) : src;
  if (placeholder || err || !real) {
    return <div className={"ph-photo " + className} style={style} role="img" aria-label={alt}></div>;
  }
  return (
    <div className={className} style={style}>
      <img src={real} alt={alt} loading="lazy" onError={() => setErr(true)}
        className={"w-full h-full object-cover " + imgClass} />
    </div>
  );
}

/* ---------- Status chip ---------- */
function Chip({ children, color, className = "" }) {
  return (
    <span className={"inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-[0.18em] " + className}
      style={color ? { color, border: `1px solid ${color}55`, background: `${color}14` } : {}}>
      {children}
    </span>
  );
}

/* ---------- Section heading (eyebrow + big title) ---------- */
function Heading({ children, className = "" }) {
  return <h2 className={"reveal text-4xl md:text-6xl font-bold leading-[1.02] " + className} data-d="1">{children}</h2>;
}

Object.assign(window, {
  LangContext, useLang, useT, L,
  Icon, BrandIcon, refreshIcons, useReveal,
  Eyebrow, PrimaryBtn, GhostBtn, Photo, Chip, Heading,
});