// doodles.jsx — Hand-drawn decorative SVGs
// Simple line-art doodles in Centro Ki's playful style (sun, rainbow, stars, etc.)

const Sun = ({ size = 80, color = 'currentColor', style }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color}>
      <circle cx="50" cy="50" r="18" />
      <path d="M50 10 L50 22 M50 78 L50 90 M10 50 L22 50 M78 50 L90 50" />
      <path d="M22 22 L31 31 M69 31 L78 22 M22 78 L31 69 M69 69 L78 78" />
    </g>
  </svg>
);

const Rainbow = ({ size = 110, color = 'currentColor', style }) => (
  <svg viewBox="0 0 120 70" width={size} height={size * 70/120} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2.4">
      <path d="M10 60 A50 50 0 0 1 110 60" />
      <path d="M18 60 A42 42 0 0 1 102 60" />
      <path d="M26 60 A34 34 0 0 1 94 60" />
      <path d="M34 60 A26 26 0 0 1 86 60" />
      <circle cx="14" cy="62" r="5" fill={color} stroke="none" />
      <circle cx="106" cy="62" r="5" fill={color} stroke="none" />
    </g>
  </svg>
);

const Star = ({ size = 30, color = 'currentColor', style }) => (
  <svg viewBox="0 0 30 30" width={size} height={size} style={style}>
    <path
      d="M15 3 L18 12 L27 12 L20 18 L23 27 L15 22 L7 27 L10 18 L3 12 L12 12 Z"
      className="doodle-stroke"
      stroke={color}
    />
  </svg>
);

const Squiggle = ({ width = 120, color = 'currentColor', style }) => (
  <svg viewBox="0 0 120 20" width={width} height={width * 20/120} style={style}>
    <path
      d="M2 10 Q12 -2 22 10 T42 10 T62 10 T82 10 T102 10 T118 10"
      className="doodle-stroke"
      stroke={color}
      strokeWidth="2.5"
    />
  </svg>
);

const Heart = ({ size = 32, color = 'currentColor', style }) => (
  <svg viewBox="0 0 32 32" width={size} height={size} style={style}>
    <path
      d="M16 28 C 4 20 2 12 8 7 C 12 4 16 8 16 12 C 16 8 20 4 24 7 C 30 12 28 20 16 28 Z"
      className="doodle-stroke"
      stroke={color}
    />
  </svg>
);

const Cloud = ({ size = 70, color = 'currentColor', style }) => (
  <svg viewBox="0 0 80 50" width={size} height={size * 50/80} style={style}>
    <path
      d="M18 38 Q8 38 8 28 Q8 18 20 20 Q22 8 36 10 Q48 8 50 22 Q64 20 64 32 Q64 40 54 40 Z"
      className="doodle-stroke"
      stroke={color}
    />
  </svg>
);

const Spiral = ({ size = 40, color = 'currentColor', style }) => (
  <svg viewBox="0 0 40 40" width={size} height={size} style={style}>
    <path
      d="M20 20 m-2 0 a2 2 0 1 1 4 0 a4 4 0 1 1 -8 0 a6 6 0 1 1 12 0 a10 10 0 1 1 -16 -2"
      className="doodle-stroke"
      stroke={color}
      strokeWidth="2"
    />
  </svg>
);

const Triangle = ({ size = 30, color = 'currentColor', style }) => (
  <svg viewBox="0 0 30 30" width={size} height={size} style={style}>
    <path d="M15 5 L25 25 L5 25 Z" className="doodle-stroke" stroke={color} />
  </svg>
);

const Flower = ({ size = 50, color = 'currentColor', style }) => (
  <svg viewBox="0 0 50 50" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color}>
      <circle cx="25" cy="25" r="5" />
      <ellipse cx="25" cy="12" rx="5" ry="8" />
      <ellipse cx="25" cy="38" rx="5" ry="8" />
      <ellipse cx="12" cy="25" rx="8" ry="5" />
      <ellipse cx="38" cy="25" rx="8" ry="5" />
    </g>
  </svg>
);

const Sparkle = ({ size = 24, color = 'currentColor', style }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} style={style}>
    <path
      d="M12 2 L13.5 10.5 L22 12 L13.5 13.5 L12 22 L10.5 13.5 L2 12 L10.5 10.5 Z"
      fill={color}
    />
  </svg>
);

// Icon set for services (line icons)
const IconSearch = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <circle cx="12" cy="12" r="7" />
      <path d="M17 17 L23 23" />
    </g>
  </svg>
);

const IconHeart = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <path
      d="M14 24 C 4 17 3 11 7 7 C 11 4 14 7 14 10 C 14 7 17 4 21 7 C 25 11 24 17 14 24 Z"
      className="doodle-stroke" stroke={color} strokeWidth="2"
    />
  </svg>
);

const IconPalette = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <path d="M14 4 C 8 4 4 9 4 14 C 4 19 8 22 12 22 C 13 22 14 21 14 20 C 14 18 16 18 18 18 C 22 18 24 16 24 13 C 24 8 19 4 14 4 Z" />
      <circle cx="9" cy="12" r="1.5" fill={color} />
      <circle cx="14" cy="9" r="1.5" fill={color} />
      <circle cx="19" cy="12" r="1.5" fill={color} />
    </g>
  </svg>
);

const IconTent = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <path d="M3 23 L14 5 L25 23 Z" />
      <path d="M14 5 L14 23" />
      <path d="M11 23 L14 18 L17 23" />
    </g>
  </svg>
);

const IconSchool = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <path d="M2 11 L14 5 L26 11 L14 17 Z" />
      <path d="M7 13 L7 19 C 7 21 10 22 14 22 C 18 22 21 21 21 19 L 21 13" />
      <path d="M24 11 L24 17" />
    </g>
  </svg>
);

const IconCalendar = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <rect x="4" y="6" width="20" height="18" rx="2" />
      <path d="M4 11 L24 11" />
      <path d="M9 4 L9 8 M19 4 L19 8" />
    </g>
  </svg>
);

const IconMap = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <path d="M14 25 C 8 18 5 14 5 10 A 9 9 0 0 1 23 10 C 23 14 20 18 14 25 Z" />
      <circle cx="14" cy="10" r="3" />
    </g>
  </svg>
);

const IconPhone = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <path
      d="M22 19 C 22 22 20 24 17 24 C 9 24 4 19 4 11 C 4 8 6 6 9 6 L 11 11 L 8 13 C 9 16 12 19 15 20 L 17 17 Z"
      className="doodle-stroke" stroke={color} strokeWidth="2"
    />
  </svg>
);

const IconMail = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <rect x="3" y="7" width="22" height="15" rx="2" />
      <path d="M3 9 L14 17 L25 9" />
    </g>
  </svg>
);

const IconCheck = ({ size = 36, color = 'currentColor', style }) => (
  <svg viewBox="0 0 36 36" width={size} height={size} style={style}>
    <path d="M9 18 L15 24 L27 12" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconWhatsapp = ({ size = 24, color = 'currentColor', style }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} style={style} fill={color}>
    <path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5s1.1 2.9 1.3 3.1c.2.2 2.2 3.5 5.4 4.8 2.7 1.1 3.2.9 3.8.8.6 0 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4 0-.1-.3-.2-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.6 0-3-.4-4.3-1.2l-.3-.2-3.1.8.8-3-.2-.3C4.4 15 4 13.5 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8z" />
  </svg>
);

const IconInstagram = ({ size = 22, color = 'currentColor', style }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} style={style}>
    <g fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <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="0.5" fill={color} />
    </g>
  </svg>
);

const IconArrowRight = ({ size = 18, color = 'currentColor', style }) => (
  <svg viewBox="0 0 18 18" width={size} height={size} style={style}>
    <path d="M3 9 L15 9 M10 4 L15 9 L10 14" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconChevronLeft = ({ size = 18, color = 'currentColor' }) => (
  <svg viewBox="0 0 18 18" width={size} height={size}>
    <path d="M11 4 L6 9 L11 14" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconChevronRight = ({ size = 18, color = 'currentColor' }) => (
  <svg viewBox="0 0 18 18" width={size} height={size}>
    <path d="M7 4 L12 9 L7 14" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const IconClock = ({ size = 28, color = 'currentColor', style }) => (
  <svg viewBox="0 0 28 28" width={size} height={size} style={style}>
    <g className="doodle-stroke" stroke={color} strokeWidth="2">
      <circle cx="14" cy="14" r="10" />
      <path d="M14 8 L14 14 L19 17" />
    </g>
  </svg>
);

Object.assign(window, {
  Sun, Rainbow, Star, Squiggle, Heart, Cloud, Spiral, Triangle, Flower, Sparkle,
  IconSearch, IconHeart, IconPalette, IconTent, IconSchool, IconCalendar,
  IconMap, IconPhone, IconMail, IconCheck, IconWhatsapp, IconInstagram,
  IconArrowRight, IconChevronLeft, IconChevronRight, IconClock,
});