/* global React */
const { useState, useEffect, useRef } = React;

// ===== Icons =====
const Icon = {
  Logo: (props) => (
    <svg viewBox="0 0 36 44" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <ellipse cx="18" cy="20" rx="13" ry="17" />
      <ellipse cx="18" cy="20" rx="10" ry="14" strokeOpacity="0.5" />
      <path d="M12 18 a6 6 0 0 0 12 0 a4 4 0 0 1 -12 0z" fill="currentColor" fillOpacity="0.15" />
      <circle cx="18" cy="11" r="0.8" fill="currentColor" />
      <path d="M16 11 l1 -2 M20 11 l-1 -2 M18 8 l0 -2" strokeLinecap="round" />
      <path d="M14 26 q4 4 8 0" strokeLinecap="round" strokeOpacity="0.6" />
      <path d="M16 28 l-2 2 M20 28 l2 2" strokeLinecap="round" strokeOpacity="0.4" />
    </svg>
  ),
  Star4: (props) => (
    <svg viewBox="0 0 16 16" fill="currentColor" {...props}>
      <path d="M8 0 L9 7 L16 8 L9 9 L8 16 L7 9 L0 8 L7 7 Z" />
    </svg>
  ),
  Sparkle: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.8" {...props}>
      <path d="M12 2 L13 11 L22 12 L13 13 L12 22 L11 13 L2 12 L11 11 Z" fill="currentColor" />
    </svg>
  ),
  Moon: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <path d="M8 6 a8 8 0 1 0 8 12 a6 6 0 0 1 -8 -12z" />
    </svg>
  ),
  Check: (props) => (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
      <circle cx="8" cy="8" r="7" strokeOpacity="0.3" />
      <path d="M5 8 L7 10 L11 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Heart: (props) => (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <path d="M28 46 C 18 38, 10 30, 10 22 C 10 16, 14 12, 19 12 C 23 12, 26 14, 28 18 C 30 14, 33 12, 37 12 C 42 12, 46 16, 46 22 C 46 30, 38 38, 28 46 Z" />
      <circle cx="28" cy="26" r="2" fill="currentColor" fillOpacity="0.3" />
      <path d="M22 26 q6 4 12 0" strokeOpacity="0.5" />
    </svg>
  ),
  Briefcase: (props) => (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <rect x="10" y="18" width="36" height="28" rx="2" />
      <path d="M22 18 V14 a2 2 0 0 1 2 -2 h8 a2 2 0 0 1 2 2 V18" />
      <path d="M10 28 h36" strokeOpacity="0.5" />
      <circle cx="28" cy="28" r="2" />
      <path d="M28 12 l0 -4 M24 10 l4 4 M32 10 l-4 4" strokeOpacity="0.4" strokeLinecap="round" />
    </svg>
  ),
  Coin: (props) => (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <circle cx="28" cy="28" r="16" />
      <circle cx="28" cy="28" r="12" strokeOpacity="0.5" />
      <path d="M28 20 v16 M24 24 h6 a3 3 0 0 1 0 6 h-6 M24 30 h7 a3 3 0 0 1 0 6 h-7" strokeLinecap="round" />
      <path d="M28 8 l1 3 l3 0 l-2.5 2 l1 3 l-2.5 -2 l-2.5 2 l1 -3 l-2.5 -2 l3 0 z" fill="currentColor" fillOpacity="0.3" stroke="none" />
    </svg>
  ),
  Compass: (props) => (
    <svg viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <circle cx="28" cy="28" r="18" />
      <circle cx="28" cy="28" r="14" strokeOpacity="0.4" />
      <path d="M28 14 L32 28 L28 42 L24 28 Z" fill="currentColor" fillOpacity="0.15" />
      <circle cx="28" cy="28" r="1.5" fill="currentColor" />
      <path d="M28 8 v3 M28 45 v3 M8 28 h3 M45 28 h3" strokeLinecap="round" />
    </svg>
  ),
  Shield: (props) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <path d="M24 6 L40 12 V24 C40 32 33 40 24 42 C15 40 8 32 8 24 V12 Z" />
      <path d="M18 24 L22 28 L30 20" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Hand: (props) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <path d="M16 20 V14 a2 2 0 0 1 4 0 V20 M20 18 V12 a2 2 0 0 1 4 0 V20 M24 18 V14 a2 2 0 0 1 4 0 V22 M28 20 V16 a2 2 0 0 1 4 0 V26" />
      <path d="M16 20 q-4 0 -4 4 q0 8 4 14 h16 q4 -6 4 -14 V18" />
      <circle cx="22" cy="28" r="1" fill="currentColor" />
    </svg>
  ),
  Eye: (props) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <path d="M6 24 Q24 10 42 24 Q24 38 6 24 Z" />
      <circle cx="24" cy="24" r="6" />
      <circle cx="24" cy="24" r="2" fill="currentColor" />
      <path d="M24 14 v-3 M24 37 v3" strokeOpacity="0.5" strokeLinecap="round" />
    </svg>
  ),
  Feather: (props) => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1" {...props}>
      <path d="M38 10 C 26 12, 16 22, 14 34 L 10 38 M 14 34 L 22 26 M 22 26 q 8 0 12 -6 M 22 26 q 6 -2 8 -10 M 22 26 q 4 -4 4 -12" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Quote: (props) => (
    <svg viewBox="0 0 32 24" fill="currentColor" {...props}>
      <path d="M0 24 V12 C 0 5, 4 1, 12 0 V4 C 8 5, 6 8, 6 12 H 12 V24 Z M16 24 V12 C 16 5, 20 1, 28 0 V4 C 24 5, 22 8, 22 12 H 28 V24 Z" />
    </svg>
  ),
  Plus: (props) => (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
      <path d="M3 8h10 M8 3v10" strokeLinecap="round" />
    </svg>
  ),
  Close: (props) => (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...props}>
      <path d="M4 4 L12 12 M12 4 L4 12" strokeLinecap="round" />
    </svg>
  ),
  Instagram: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" {...props}>
      <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.8" fill="currentColor" />
    </svg>
  ),
  Facebook: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" {...props}>
      <path d="M14 8 V6 a2 2 0 0 1 2 -2 h2 V1 h-3 a4 4 0 0 0 -4 4 V8 H8 v3 h3 v10 h3 V11 h3 l1 -3 z" />
    </svg>
  ),
  TikTok: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" {...props}>
      <path d="M14 4 V14 a4 4 0 1 1 -4 -4 M14 4 q1 4 5 4" strokeLinecap="round" />
    </svg>
  ),
  YouTube: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" {...props}>
      <rect x="2" y="6" width="20" height="12" rx="3" />
      <path d="M10 9 L15 12 L10 15 Z" fill="currentColor" />
    </svg>
  ),
};

// ===== Decorative Sun-burst Corner =====
const SunBurst = ({ className = "" }) => (
  <svg className={`corner-burst ${className}`} viewBox="0 0 110 110" fill="none" stroke="currentColor" strokeWidth="0.8">
    <path d="M0 55 L40 55" strokeLinecap="round" />
    <path d="M5 35 L40 50" strokeLinecap="round" strokeOpacity="0.7" />
    <path d="M5 75 L40 60" strokeLinecap="round" strokeOpacity="0.7" />
    <path d="M15 20 L42 48" strokeLinecap="round" strokeOpacity="0.5" />
    <path d="M15 90 L42 62" strokeLinecap="round" strokeOpacity="0.5" />
    <path d="M30 10 L46 45" strokeLinecap="round" strokeOpacity="0.4" />
    <path d="M30 100 L46 65" strokeLinecap="round" strokeOpacity="0.4" />
    <path d="M55 0 L55 38" strokeLinecap="round" strokeOpacity="0.35" />
    <path d="M55 110 L55 72" strokeLinecap="round" strokeOpacity="0.35" />
  </svg>
);

// ===== Tarot card art =====
const TarotArt = () => (
  <svg viewBox="0 0 100 100" width="100" height="100" fill="none" stroke="currentColor" strokeWidth="0.6">
    <circle cx="50" cy="40" r="14" />
    <circle cx="50" cy="40" r="10" strokeOpacity="0.6" />
    <path d="M44 38 a6 6 0 0 0 12 0 a4 4 0 0 1 -12 0z" fill="currentColor" fillOpacity="0.4" stroke="none" />
    <path d="M50 24 l1 6 l5 -3 l-3 5 l6 1 l-6 1 l3 5 l-5 -3 l-1 6 l-1 -6 l-5 3 l3 -5 l-6 -1 l6 -1 l-3 -5 l5 3 z" fill="currentColor" fillOpacity="0.6" stroke="none" />
    <path d="M30 60 q 20 12 40 0" strokeLinecap="round" strokeOpacity="0.6" />
    <path d="M30 65 q 20 8 40 0" strokeLinecap="round" strokeOpacity="0.4" />
    <path d="M28 70 q 22 14 44 0" strokeLinecap="round" strokeOpacity="0.3" />
    <path d="M40 78 l 0 6 M 50 78 l 0 8 M 60 78 l 0 6" strokeLinecap="round" strokeOpacity="0.5" />
    <text x="50" y="92" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="serif" fontSize="6" fontStyle="italic" letterSpacing="2">THE STAR</text>
  </svg>
);

// ===== Decorative leaf/moon divider =====
const CelestialDivider = ({ size = 32 }) => (
  <svg width={size * 3} height={size} viewBox="0 0 96 32" fill="none" stroke="currentColor" strokeWidth="0.7">
    <path d="M30 16 a 8 8 0 1 0 8 -8 a 6 6 0 0 1 -8 8 z" fill="currentColor" fillOpacity="0.08" />
    <path d="M48 16 l 0 -6 M 46 12 l 4 0" strokeLinecap="round" strokeOpacity="0.6" />
    <path d="M58 16 q 6 -2 8 -8 q -8 2 -8 8" strokeLinecap="round" />
    <path d="M58 16 q -6 -2 -8 -8 q 8 2 8 8" strokeLinecap="round" />
    <path d="M0 16 L 26 16" strokeLinecap="round" strokeOpacity="0.5" />
    <path d="M70 16 L 96 16" strokeLinecap="round" strokeOpacity="0.5" />
    <circle cx="2" cy="16" r="1" fill="currentColor" stroke="none" />
    <circle cx="94" cy="16" r="1" fill="currentColor" stroke="none" />
  </svg>
);

// ===== Particles =====
const Particles = ({ count = 14 }) => {
  const particles = React.useMemo(() => Array.from({ length: count }, (_, i) => ({
    left: Math.random() * 100,
    delay: Math.random() * 14,
    duration: 12 + Math.random() * 8,
    size: 1.5 + Math.random() * 2,
    opacity: 0.3 + Math.random() * 0.5,
  })), [count]);

  return (
    <div className="particles">
      {particles.map((p, i) => (
        <div
          key={i}
          className="particle"
          style={{
            left: `${p.left}%`,
            bottom: 0,
            width: `${p.size}px`,
            height: `${p.size}px`,
            animationDelay: `-${p.delay}s`,
            animationDuration: `${p.duration}s`,
          }}
        />
      ))}
    </div>
  );
};

// ===== Scroll reveal hook =====
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const el = ref.current;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

Object.assign(window, { Icon, SunBurst, TarotArt, CelestialDivider, Particles, useReveal });
