/* Iconos custom, flat con doble color (lima fill + verde stroke) */
/* No type="text/babel" needed inside; loaded as babel script */

const Leaf = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <path
      d="M28 4C28 4 13 5 8 12C3.5 18.3 5 26 5 26C5 26 13.5 27.5 19.5 23C26 18 28 4 28 4Z"
      fill="#A8D85F"
    />
    <path
      d="M28 4C28 4 13 5 8 12C3.5 18.3 5 26 5 26C5 26 13.5 27.5 19.5 23C26 18 28 4 28 4Z"
      stroke="#3A5F1E"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
    <path
      d="M27 5C24 9 18 16 12 21C9 23.5 6 26 6 26"
      stroke="#3A5F1E"
      strokeWidth="1.4"
      strokeLinecap="round"
    />
  </svg>
);

const Basket = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <path
      d="M5 12H27L24.5 25C24.3 26.1 23.4 27 22.3 27H9.7C8.6 27 7.7 26.1 7.5 25L5 12Z"
      fill="#FFC58A"
    />
    <path
      d="M5 12H27L24.5 25C24.3 26.1 23.4 27 22.3 27H9.7C8.6 27 7.7 26.1 7.5 25L5 12Z"
      stroke="#3A5F1E"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
    <path d="M11 12L13 5" stroke="#3A5F1E" strokeWidth="1.6" strokeLinecap="round" />
    <path d="M21 12L19 5" stroke="#3A5F1E" strokeWidth="1.6" strokeLinecap="round" />
    <circle cx="13" cy="19" r="1.4" fill="#3A5F1E" />
    <circle cx="19" cy="19" r="1.4" fill="#3A5F1E" />
  </svg>
);

const Truck = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <path
      d="M3 9C3 8.4 3.4 8 4 8H17C17.6 8 18 8.4 18 9V21H3V9Z"
      fill="#A8D85F"
    />
    <path
      d="M18 13H24L29 18V21H18V13Z"
      fill="#FFC58A"
    />
    <path
      d="M3 9C3 8.4 3.4 8 4 8H17C17.6 8 18 8.4 18 9V21H3V9Z"
      stroke="#3A5F1E"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
    <path
      d="M18 13H24L29 18V21H18V13Z"
      stroke="#3A5F1E"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
    <circle cx="9" cy="22" r="2.5" fill="#FFFFFF" stroke="#3A5F1E" strokeWidth="1.6" />
    <circle cx="23" cy="22" r="2.5" fill="#FFFFFF" stroke="#3A5F1E" strokeWidth="1.6" />
    {/* Speed lines */}
    <path d="M2 12H6" stroke="#FF8C42" strokeWidth="1.4" strokeLinecap="round" />
    <path d="M1 16H4" stroke="#FF8C42" strokeWidth="1.4" strokeLinecap="round" />
  </svg>
);

const Heart = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <path
      d="M16 27C16 27 4 20 4 12.5C4 8.4 7.1 5.5 10.7 5.5C13 5.5 14.8 6.7 16 8.5C17.2 6.7 19 5.5 21.3 5.5C24.9 5.5 28 8.4 28 12.5C28 20 16 27 16 27Z"
      fill="#FFB199"
    />
    <path
      d="M16 27C16 27 4 20 4 12.5C4 8.4 7.1 5.5 10.7 5.5C13 5.5 14.8 6.7 16 8.5C17.2 6.7 19 5.5 21.3 5.5C24.9 5.5 28 8.4 28 12.5C28 20 16 27 16 27Z"
      stroke="#3A5F1E"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
    <path
      d="M9 12C9 10.5 10 9.5 11.5 9.5"
      stroke="#FFFFFF"
      strokeWidth="1.6"
      strokeLinecap="round"
    />
  </svg>
);

const Sparkle = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <path
      d="M16 4L18.5 13.5L28 16L18.5 18.5L16 28L13.5 18.5L4 16L13.5 13.5L16 4Z"
      fill="#FFC58A"
    />
    <path
      d="M16 4L18.5 13.5L28 16L18.5 18.5L16 28L13.5 18.5L4 16L13.5 13.5L16 4Z"
      stroke="#3A5F1E"
      strokeWidth="1.6"
      strokeLinejoin="round"
    />
    <circle cx="25" cy="7" r="1.5" fill="#A8D85F" stroke="#3A5F1E" strokeWidth="1.2" />
    <circle cx="6" cy="25" r="1.2" fill="#A8D85F" stroke="#3A5F1E" strokeWidth="1.2" />
  </svg>
);

const InstagramGlyph = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8" />
    <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8" />
    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
  </svg>
);

const ArrowRight = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path
      d="M5 12H19M19 12L13 6M19 12L13 18"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

/* Decorative leaf for backgrounds */
const LeafDeco = ({ size = 60, color = "#A8D85F", rotate = 0 }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 60 60"
    fill="none"
    style={{ transform: `rotate(${rotate}deg)` }}
  >
    <path
      d="M52 8C52 8 26 10 16 22C8 32 10 48 10 48C10 48 25 50 35 42C46 34 52 8 52 8Z"
      fill={color}
      opacity="0.85"
    />
    <path
      d="M50 10C44 18 33 30 22 38"
      stroke="#3A5F1E"
      strokeWidth="1.4"
      strokeLinecap="round"
      opacity="0.4"
    />
  </svg>
);

window.LogoIcons = { Leaf, Basket, Truck, Heart, Sparkle, InstagramGlyph, ArrowRight, LeafDeco };
