// Iconos SVG inline (línea fina, geométricos, estilo boutique)
const I = {
  Search: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />
    </svg>
  ),
  Bag: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 8h14l-1.2 11.4a2 2 0 0 1-2 1.6H8.2a2 2 0 0 1-2-1.6L5 8Z" />
      <path d="M9 8a3 3 0 0 1 6 0" />
    </svg>
  ),
  Heart: ({ size = 18, fill = "none" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z" />
    </svg>
  ),
  User: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="4" /><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7" />
    </svg>
  ),
  Home: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 11.5 12 4l8 7.5V20a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1v-8.5Z" />
    </svg>
  ),
  Compass: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" /><path d="m15 9-2 5-5 2 2-5 5-2Z" />
    </svg>
  ),
  Plus: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
  ),
  Minus: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M5 12h14" /></svg>
  ),
  Close: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M6 6l12 12M18 6 6 18" /></svg>
  ),
  Back: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m14 6-6 6 6 6" /></svg>
  ),
  Star: ({ size = 12, fill = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="none"><path d="m12 3 2.7 5.5 6 .9-4.4 4.2 1 6L12 17l-5.4 2.7 1-6L3.3 9.4l6-.9L12 3Z" /></svg>
  ),
  Sliders: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 6h12M20 6h-2M4 12h6M20 12h-8M4 18h14M20 18h-2" /><circle cx="17" cy="6" r="2" /><circle cx="11" cy="12" r="2" /><circle cx="19" cy="18" r="2" /></svg>
  ),
  Check: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4 10-10" /></svg>
  ),
  CheckBig: ({ size = 36 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4 10-10" /></svg>
  ),
  Bell: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 17h12l-1.4-2.2a3 3 0 0 1-.5-1.6V10a4 4 0 0 0-8.2 0v3.2a3 3 0 0 1-.5 1.6L6 17Z" /><path d="M10 20a2 2 0 0 0 4 0" /></svg>
  ),
  Settings: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.4.8a7 7 0 0 0-2-1.2l-.5-2.5h-4l-.5 2.5a7 7 0 0 0-2 1.2l-2.4-.8-2 3.4 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.4 2.4-.8a7 7 0 0 0 2 1.2l.5 2.5h4l.5-2.5a7 7 0 0 0 2-1.2l2.4.8 2-3.4-2-1.5c.1-.4.1-.8.1-1.2Z" /></svg>
  ),
  Trash: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 7h14M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M7 7l1 13a2 2 0 0 0 2 1.8h4a2 2 0 0 0 2-1.8l1-13" /></svg>
  ),
  Edit: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 5l5 5L9 20H4v-5L14 5Z" /></svg>
  ),
  Upload: ({ size = 26 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 17V4m0 0-4 4m4-4 4 4M5 17v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2" /></svg>
  ),
  ChevR: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6" /></svg>
  ),
  Shop: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 9h16l-1 11.5A1 1 0 0 1 18 21H6a1 1 0 0 1-1-.5L4 9ZM3 9l2-5h14l2 5M9 13v4M15 13v4" /></svg>
  ),
  Empty: ({ size = 32 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 8h14l-1 11a2 2 0 0 1-2 1.8H8A2 2 0 0 1 6 19L5 8Z" /><path d="M9 8a3 3 0 0 1 6 0" /></svg>
  ),
};

// Hojas botánicas SVG (para fondos sutiles)
const Leaf = ({ rot = 0, size = 60, color = "var(--sage-700)", style }) => (
  <svg width={size} height={size} viewBox="0 0 60 60" style={{ ...style, "--rot": rot + "deg", transform: `rotate(${rot}deg)` }}>
    <path d="M30 6c-12 4-20 14-20 26 0 8 4 16 14 18C36 46 50 32 50 14c-6 0-14 0-20 4Z" fill={color} opacity="0.55" />
    <path d="M30 8c0 16 6 30 14 38" stroke={color} strokeWidth="1" fill="none" opacity="0.7" />
  </svg>
);

function getArgentinaSeason(date = new Date()) {
  const month = date.getMonth() + 1;
  if ([12, 1, 2].includes(month)) return "summer";
  if ([3, 4, 5].includes(month)) return "autumn";
  if ([6, 7, 8].includes(month)) return "winter";
  return "spring";
}

const SeasonalAtmosphere = () => {
  const season = getArgentinaSeason();
  return (
    <div className={"season-layer season-" + season} aria-hidden="true">
      <svg className="season-branch" viewBox="0 0 900 260" preserveAspectRatio="xMinYMin meet">
        <path className="branch-line" fill="none" stroke="#7A684F" strokeWidth="3.5" strokeLinecap="round" vectorEffect="non-scaling-stroke" d="M-20 68 C 100 20, 210 44, 320 95 S 560 154, 760 42 C 815 10, 870 8, 920 24" />
        <path className="branch-stem" fill="none" stroke="#7A684F" strokeWidth="2.2" strokeLinecap="round" vectorEffect="non-scaling-stroke" d="M118 42 C 130 72, 126 98, 104 126" />
        <path className="branch-stem" fill="none" stroke="#7A684F" strokeWidth="2.2" strokeLinecap="round" vectorEffect="non-scaling-stroke" d="M252 74 C 268 105, 260 134, 232 164" />
        <path className="branch-stem" fill="none" stroke="#7A684F" strokeWidth="2.2" strokeLinecap="round" vectorEffect="non-scaling-stroke" d="M442 126 C 456 154, 450 178, 424 204" />
        <path className="branch-stem" fill="none" stroke="#7A684F" strokeWidth="2.2" strokeLinecap="round" vectorEffect="non-scaling-stroke" d="M642 92 C 656 122, 650 146, 624 174" />
        <path className="branch-leaf" fill="#A76F4E" d="M83 28 C 54 52, 50 88, 88 112 C 120 90, 126 54, 83 28Z" />
        <path className="branch-leaf" fill="#C9785D" d="M226 50 C 194 76, 190 116, 232 142 C 266 116, 270 78, 226 50Z" />
        <path className="branch-leaf" fill="#60745C" d="M398 106 C 368 132, 366 168, 402 192 C 436 166, 440 130, 398 106Z" />
        <path className="branch-leaf" fill="#B85F47" d="M606 66 C 576 92, 574 128, 610 150 C 642 126, 648 90, 606 66Z" />
      </svg>
      <span className="season-falling-leaf leaf-a" />
      <span className="season-falling-leaf leaf-b" />
      <span className="season-falling-leaf leaf-c" />
      <span className="season-falling-leaf leaf-d" />
    </div>
  );
};

// Format ARS / USD
function formatPrice(amount, currency, rates) {
  const v = amount * (rates[currency] || 1);
  if (currency === "ARS") {
    return "$ " + Math.round(v).toLocaleString("es-AR");
  }
  return "US$ " + v.toFixed(2);
}

// Generate unique product gradient
function productTones(p) {
  return { "--t1": p.tones[0], "--t2": p.tones[1] };
}

window.I = I;
window.Leaf = Leaf;
window.SeasonalAtmosphere = SeasonalAtmosphere;
window.getArgentinaSeason = getArgentinaSeason;
window.formatPrice = formatPrice;
window.productTones = productTones;
