/* Adult-cute line illustrations — soft, hand-drawn feel */
const ILLO_STROKE = "currentColor";

const Illo = {};

/* Crystal ball (for hero / about) */
Illo.Crystal = ({ size = 120 }) => (
  <svg viewBox="0 0 120 140" width={size} height={size * 1.15} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="60" cy="58" r="36" />
    <ellipse cx="50" cy="48" rx="8" ry="5" opacity="0.5" />
    <path d="M30 92 Q60 102 90 92 L86 108 Q60 116 34 108 Z" />
    <path d="M40 102 L80 102" opacity="0.5" />
    <path d="M52 22 L52 14 M60 18 L60 8 M68 22 L68 14" opacity="0.7" />
    <circle cx="52" cy="14" r="1.2" fill={ILLO_STROKE} stroke="none" />
    <circle cx="60" cy="8" r="1.4" fill={ILLO_STROKE} stroke="none" />
    <circle cx="68" cy="14" r="1.2" fill={ILLO_STROKE} stroke="none" />
    <path d="M22 130 L98 130" opacity="0.4" />
  </svg>
);

/* Moon + stars */
Illo.Moon = ({ size = 90 }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M62 22 A30 30 0 1 0 62 78 A22 22 0 1 1 62 22 Z" />
    <path d="M22 30 L22 22 M18 26 L26 26" opacity="0.7" />
    <path d="M16 70 L16 62 M12 66 L20 66" opacity="0.7" />
    <circle cx="32" cy="50" r="1.2" fill={ILLO_STROKE} stroke="none" />
    <circle cx="86" cy="34" r="1.2" fill={ILLO_STROKE} stroke="none" />
  </svg>
);

/* Sun-flower / bloom */
Illo.Bloom = ({ size = 110 }) => (
  <svg viewBox="0 0 120 120" width={size} height={size} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="60" cy="60" r="11" />
    {[0, 45, 90, 135, 180, 225, 270, 315].map((a, i) => (
      <ellipse key={i} cx="60" cy="32" rx="7" ry="14" transform={`rotate(${a} 60 60)`} />
    ))}
    <circle cx="60" cy="60" r="3" fill={ILLO_STROKE} stroke="none" opacity="0.5" />
  </svg>
);

/* Coffee cup */
Illo.Coffee = ({ size = 90 }) => (
  <svg viewBox="0 0 110 100" width={size} height={size * 0.9} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 38 L22 76 Q22 88 34 88 L66 88 Q78 88 78 76 L78 38 Z" />
    <path d="M78 48 Q92 48 92 60 Q92 72 78 72" />
    <path d="M22 38 L78 38" />
    <path d="M34 18 Q34 12 38 10 M46 18 Q46 12 50 10 M58 18 Q58 12 62 10" opacity="0.6" />
    <path d="M28 96 L72 96" opacity="0.4" />
  </svg>
);

/* Hand mirror / butterfly-ish bow (kawaii touch) */
Illo.Ribbon = ({ size = 100 }) => (
  <svg viewBox="0 0 120 80" width={size} height={size * 0.67} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M60 40 Q30 18 14 28 Q4 36 14 50 Q30 60 60 40 Z" />
    <path d="M60 40 Q90 18 106 28 Q116 36 106 50 Q90 60 60 40 Z" />
    <ellipse cx="60" cy="40" rx="6" ry="9" />
    <path d="M56 50 L48 72 M64 50 L72 72" opacity="0.7" />
  </svg>
);

/* Suit / Travel bag */
Illo.Suitcase = ({ size = 90 }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="18" y="32" width="64" height="50" rx="6" />
    <path d="M40 32 L40 22 Q40 16 46 16 L54 16 Q60 16 60 22 L60 32" />
    <path d="M18 54 L82 54" opacity="0.5" />
    <circle cx="38" cy="54" r="2" fill={ILLO_STROKE} stroke="none" />
    <circle cx="62" cy="54" r="2" fill={ILLO_STROKE} stroke="none" />
    <path d="M30 90 L30 84 M70 90 L70 84" />
  </svg>
);

/* Sparkle cluster */
Illo.Sparkle = ({ size = 60 }) => (
  <svg viewBox="0 0 60 60" width={size} height={size} fill="none" stroke={ILLO_STROKE} strokeWidth="1.1" strokeLinecap="round">
    <path d="M30 6 Q32 26 50 30 Q32 34 30 54 Q28 34 10 30 Q28 26 30 6 Z" />
    <path d="M48 8 Q49 14 54 16 Q49 18 48 24 Q47 18 42 16 Q47 14 48 8 Z" opacity="0.6" />
  </svg>
);

/* Envelope / letter */
Illo.Envelope = ({ size = 90 }) => (
  <svg viewBox="0 0 110 80" width={size} height={size * 0.73} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="10" y="14" width="90" height="58" rx="3" />
    <path d="M10 18 L55 48 L100 18" />
    <path d="M30 60 L18 70 M80 60 L92 70" opacity="0.5" />
    <path d="M55 4 L55 10 M48 8 L62 8" opacity="0.6" />
  </svg>
);

/* Compass — for "direction" theme */
Illo.Compass = ({ size = 110 }) => (
  <svg viewBox="0 0 120 120" width={size} height={size} fill="none" stroke={ILLO_STROKE} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="60" cy="60" r="44" />
    <circle cx="60" cy="60" r="36" opacity="0.5" />
    <path d="M60 22 L60 28 M60 92 L60 98 M22 60 L28 60 M92 60 L98 60" />
    <path d="M60 36 L66 60 L60 84 L54 60 Z" />
    <circle cx="60" cy="60" r="2.5" fill={ILLO_STROKE} stroke="none" />
  </svg>
);

window.Illo = Illo;
