/* global React */
// Shared primitives used across all component files.

const LINKS = {
  instagram: "https://instagram.com/lic.guillerminagomez",
  igHandle: "@lic.guillerminagomez",
  whatsapp: "5492291460596", // país + número, sin + ni espacios
  email: "lic.guillerminagomez@gmail.com",
};

const Icon = {
  arrow: (cls = "arr") =>
    <svg className={cls} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 5l7 7-7 7" /></svg>,
  play: (size = 14) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>,
  leaf: () =>
    <svg className="leaf" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 21c0-8 5-13 13-13 0 8-5 13-13 13Z" /><path d="M3 21l9-9" /></svg>,
  chev: (dir = "right") =>
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ transform: dir === "left" ? "rotate(180deg)" : "none" }}><path d="M9 6l6 6-6 6" /></svg>,
  close: (size = 16) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M6 18L18 6" /></svg>,
  plus: () =>
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" /></svg>,
  check: (size = 16) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>,
  star: (size = 14) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 21.2l1.4-6.8L2.2 9.8l6.9-.7L12 2z" /></svg>,
  ext: (size = 13) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M7 17L17 7M9 7h8v8" /></svg>,
  wa: (size = 24) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.8L2 22l5.4-1.4c1.4.8 2.9 1.2 4.6 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3C4.3 14.9 4 13.5 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8z" /></svg>,
  ig: (size = 18) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><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>,
  mail: (size = 24) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>,
  // service icons
  couples: (size = 26) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="8" r="3" /><circle cx="16" cy="8" r="3" /><path d="M2.5 20a5.5 5.5 0 0 1 9-4.2M12.5 15.8A5.5 5.5 0 0 1 21.5 20" /></svg>,
  person: (size = 26) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3.4" /><path d="M5 20a7 7 0 0 1 14 0" /></svg>,
  cap: (size = 26) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 8l10-4 10 4-10 4L2 8z" /><path d="M6 10v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5" /><path d="M22 8v6" /></svg>,
};

function BrandMark({ size = 36 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" fill="none">
      <g stroke="#7a8a5e" strokeWidth="1.2" strokeLinecap="round" fill="none">
        <path d="M30 12 C 30 28, 30 38, 30 48" />
        <path d="M30 20 C 22 18, 18 22, 16 28 C 22 30, 26 28, 30 24" fill="#a8b58c" fillOpacity=".35" />
        <path d="M30 28 C 38 26, 42 30, 44 36 C 38 38, 34 36, 30 32" fill="#a8b58c" fillOpacity=".35" />
        <path d="M30 36 C 24 35, 21 38, 20 42 C 24 43, 27 42, 30 40" fill="#a8b58c" fillOpacity=".35" />
      </g>
    </svg>);
}

Object.assign(window, { LINKS, Icon, BrandMark });

/* ============== Currency / pricing ============== */
// Cotización de referencia USD → ARS. EDITAR cuando cambie.
const FX = { usdToArs: 1250 };

function formatPrice(usd, cur) {
  if (usd == null) return null;
  if (cur === "ars") {
    // redondeo a los 500 más cercanos para que se vea prolijo
    const raw = usd * FX.usdToArs;
    const rounded = Math.round(raw / 500) * 500;
    return "$" + rounded.toLocaleString("es-AR") + " ARS";
  }
  return "USD " + usd.toLocaleString("en-US");
}

function formatArs(val) {
  return "$" + val.toLocaleString("es-AR") + " ARS";
}

function detectCurrency() {
  try {
    const saved = localStorage.getItem("gg_cur");
    if (saved === "ars" || saved === "usd") return saved;
  } catch (_) {}
  return "ars";
}

Object.assign(window, { FX, formatPrice, formatArs, detectCurrency });
