// BOSQE — Componentes compartidos

const BosqeLogo = ({ size = 28, color = "currentColor" }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    {/* Árbol estilizado: tronco + copa orgánica */}
    <path d="M32 60 V 38" />
    <path d="M32 38 C 32 22, 18 22, 18 14 C 18 8, 24 6, 32 12 C 40 6, 46 8, 46 14 C 46 22, 32 22, 32 38 Z" fill={color} fillOpacity="0.08" />
    <path d="M22 32 L 32 38 L 42 32" />
    <path d="M26 25 L 32 30 L 38 25" opacity="0.6" />
  </svg>
);

const LeafSVG = ({ className }) => (
  <svg className={className} viewBox="0 0 200 200" fill="currentColor">
    <path d="M100 10 Q 30 50 30 130 Q 30 180 100 190 Q 100 100 100 10 Z M100 30 Q 50 70 50 130 M100 50 Q 65 85 65 130 M100 70 Q 75 95 75 130" stroke="currentColor" strokeWidth="2" fill="none" />
    <path d="M100 10 Q 30 50 30 130 Q 30 180 100 190 Q 170 180 170 130 Q 170 50 100 10 Z" />
  </svg>
);

const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12 H 19 M 13 6 L 19 12 L 13 18" />
  </svg>
);

// Iconos de valores
const IconLeaf = () => (
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10 34 C 10 18, 22 8, 36 8 C 36 22, 26 34, 10 34 Z" />
    <path d="M10 34 L 30 14" />
  </svg>
);
const IconDrop = () => (
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 8 C 14 18, 10 24, 10 30 A 12 12 0 0 0 34 30 C 34 24, 30 18, 22 8 Z" />
    <path d="M16 28 A 6 6 0 0 0 22 34" />
  </svg>
);
const IconHand = () => (
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14 22 V 12 A 2 2 0 0 1 18 12 V 22" />
    <path d="M18 22 V 9 A 2 2 0 0 1 22 9 V 22" />
    <path d="M22 22 V 11 A 2 2 0 0 1 26 11 V 22" />
    <path d="M26 22 V 14 A 2 2 0 0 1 30 14 V 26" />
    <path d="M14 22 C 14 22, 10 22, 10 26 C 10 32, 14 38, 22 38 C 30 38, 30 32, 30 26 V 18" />
  </svg>
);
const IconRecycle = () => (
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10 26 L 14 32 L 22 32 L 26 26" />
    <path d="M18 14 L 22 8 L 26 14" />
    <path d="M22 8 V 22" />
    <path d="M34 18 L 30 12 L 22 12" />
    <path d="M30 32 L 34 26" />
  </svg>
);

Object.assign(window, { BosqeLogo, LeafSVG, Arrow, IconLeaf, IconDrop, IconHand, IconRecycle });
