/* global React */
const { useMemo } = React;

// ---------- Light rays / shimmer (hero bg) ----------
function LightRays() {
  const rays = useMemo(() => {
    const r = [];
    for (let i = 0; i < 14; i++) {
      r.push({
        angle: (i * 360 / 14) + Math.random() * 8,
        length: 30 + Math.random() * 25,
        opacity: 0.05 + Math.random() * 0.08,
      });
    }
    return r;
  }, []);
  const specks = useMemo(() => {
    const s = [];
    for (let i = 0; i < 35; i++) {
      s.push({
        cx: Math.random() * 100,
        cy: Math.random() * 100,
        r: Math.random() * 0.18 + 0.05,
        o: Math.random() * 0.35 + 0.15,
      });
    }
    return s;
  }, []);
  return (
    <svg className="hero-rays" viewBox="0 0 100 100" preserveAspectRatio="none">
      <g transform="translate(78 18)">
        {rays.map((r, i) => (
          <line key={i}
            x1="0" y1="0"
            x2={Math.cos(r.angle * Math.PI/180) * r.length}
            y2={Math.sin(r.angle * Math.PI/180) * r.length}
            stroke="#d8b56a"
            strokeWidth="0.12"
            opacity={r.opacity} />
        ))}
        <circle cx="0" cy="0" r="1.2" fill="#f4e3b8" opacity="0.7" />
      </g>
      {specks.map((s, i) => (
        <circle key={i} cx={s.cx} cy={s.cy} r={s.r} fill="#b8883f" opacity={s.o} />
      ))}
    </svg>
  );
}

// ---------- Tree of Life silhouette (echoes logo) ----------
function TreeMark({ size = 36, color = "#b8883f" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="19" stroke={color} strokeWidth="0.5" opacity="0.55" />
      {/* canopy */}
      <circle cx="20" cy="14" r="1" fill={color} opacity="0.7" />
      <circle cx="14" cy="16" r="0.9" fill={color} opacity="0.7" />
      <circle cx="26" cy="16" r="0.9" fill={color} opacity="0.7" />
      <circle cx="11" cy="19" r="0.8" fill={color} opacity="0.6" />
      <circle cx="29" cy="19" r="0.8" fill={color} opacity="0.6" />
      {/* trunk */}
      <path d="M20 15 L20 30" stroke={color} strokeWidth="0.9" />
      <path d="M20 22 L16 26 M20 22 L24 26" stroke={color} strokeWidth="0.5" opacity="0.7" />
      {/* roots */}
      <path d="M20 30 L16 34 M20 30 L24 34 M20 30 L20 35" stroke={color} strokeWidth="0.5" opacity="0.7" />
    </svg>
  );
}

// ---------- Sun ornament (warm gold) ----------
function SunOrnament({ size = 180, color = "#d8b56a", opacity = 0.55 }) {
  const rays = [];
  for (let i = 0; i < 32; i++) {
    const angle = (i * 360) / 32;
    const long = i % 2 === 0;
    rays.push(
      <line key={i}
        x1="50" y1={long ? 6 : 10}
        x2="50" y2={long ? 16 : 14}
        stroke={color}
        strokeWidth="0.5"
        opacity={opacity}
        transform={`rotate(${angle} 50 50)`} />
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
      {rays}
      <circle cx="50" cy="50" r="22" stroke={color} strokeWidth="0.5" opacity={opacity} />
      <circle cx="50" cy="50" r="15" stroke={color} strokeWidth="0.4" opacity={opacity * 0.7} />
      <circle cx="50" cy="50" r="3" fill={color} opacity={opacity} />
    </svg>
  );
}

// ---------- Moon phases divider ----------
function MoonDivider({ color = "#b8883f" }) {
  return (
    <svg width="220" height="24" viewBox="0 0 220 24" fill="none" style={{ display: "block", margin: "0 auto" }}>
      <line x1="0" y1="12" x2="80" y2="12" stroke={color} strokeOpacity="0.5" strokeWidth="0.6" />
      <circle cx="95" cy="12" r="3" fill="none" stroke={color} strokeWidth="0.6" />
      <circle cx="110" cy="12" r="4" fill={color} opacity="0.7" />
      <path d="M 125 8 A 4 4 0 1 1 125 16 A 3 3 0 1 0 125 8 Z" fill={color} opacity="0.85" />
      <line x1="140" y1="12" x2="220" y2="12" stroke={color} strokeOpacity="0.5" strokeWidth="0.6" />
    </svg>
  );
}

// ---------- Service icon set (warm gold) ----------
const ServiceIcon = ({ kind, size = 28, color = "#b8883f" }) => {
  const common = { width: size, height: size, viewBox: "0 0 32 32", fill: "none", stroke: color, strokeWidth: 0.8 };
  if (kind === "eye") return (
    <svg {...common}>
      <path d="M2 16 Q16 5 30 16 Q16 27 2 16 Z" />
      <circle cx="16" cy="16" r="5" />
      <circle cx="16" cy="16" r="1.5" fill={color} />
    </svg>
  );
  if (kind === "angel") return (
    <svg {...common}>
      <path d="M8 12 Q5 8 8 6 Q11 6 12 10" />
      <path d="M24 12 Q27 8 24 6 Q21 6 20 10" />
      <circle cx="16" cy="10" r="2" />
      <path d="M10 22 L22 22 L20 14 L12 14 Z" />
      <path d="M14 22 L14 28 M18 22 L18 28" />
    </svg>
  );
  if (kind === "number") return (
    <svg {...common}>
      <circle cx="16" cy="16" r="12" />
      <text x="16" y="20" fontFamily="Cormorant Garamond, serif" fontSize="12" fontStyle="italic" fill={color} stroke="none" textAnchor="middle">n°</text>
    </svg>
  );
  if (kind === "astro") return (
    <svg {...common}>
      <circle cx="16" cy="16" r="12" />
      <circle cx="16" cy="16" r="8" />
      <line x1="4" y1="16" x2="28" y2="16" />
      <line x1="16" y1="4" x2="16" y2="28" />
      <line x1="7.5" y1="7.5" x2="24.5" y2="24.5" />
      <line x1="24.5" y1="7.5" x2="7.5" y2="24.5" />
      <circle cx="16" cy="16" r="1.5" fill={color} />
    </svg>
  );
  if (kind === "radio") return (
    <svg {...common}>
      <circle cx="16" cy="16" r="3" fill={color} />
      <circle cx="16" cy="16" r="7" />
      <circle cx="16" cy="16" r="11" />
      <circle cx="16" cy="16" r="14" opacity="0.5" />
    </svg>
  );
  if (kind === "infinity") return (
    <svg {...common}>
      <path d="M10 16 Q10 10 14 10 Q18 10 18 16 Q18 22 22 22 Q26 22 26 16 Q26 10 22 10 Q18 10 18 16 Q18 22 14 22 Q10 22 10 16 Z" />
    </svg>
  );
  if (kind === "crystal") return (
    <svg {...common}>
      <path d="M16 4 L24 12 L20 28 L12 28 L8 12 Z" />
      <path d="M8 12 L16 12 L24 12" />
      <path d="M16 4 L16 12 L12 28" />
      <path d="M16 12 L20 28" />
    </svg>
  );
  if (kind === "reiki") return (
    <svg {...common}>
      <circle cx="16" cy="16" r="6" />
      <path d="M16 4 L16 10 M16 22 L16 28 M4 16 L10 16 M22 16 L28 16" />
      <path d="M8 8 L12 12 M20 20 L24 24 M8 24 L12 20 M20 12 L24 8" opacity="0.6" />
    </svg>
  );
  return null;
};

// ---------- Modality icon ----------
function ModalityIcon({ kind, color = "#f4e3b8" }) {
  const size = 44;
  const common = { width: size, height: size, viewBox: "0 0 48 48", fill: "none", stroke: color, strokeWidth: 0.9 };
  if (kind === "in-person") return (
    <svg {...common}>
      <path d="M24 6 L38 14 L38 32 L24 40 L10 32 L10 14 Z" />
      <path d="M18 24 L18 32 L30 32 L30 24" />
      <path d="M16 24 L24 18 L32 24" />
      <rect x="22" y="26" width="4" height="6" />
      <circle cx="24" cy="10" r="1.2" fill={color} />
    </svg>
  );
  if (kind === "online") return (
    <svg {...common}>
      <circle cx="24" cy="24" r="16" />
      <path d="M8 24 L40 24" />
      <path d="M24 8 Q32 16 32 24 Q32 32 24 40 Q16 32 16 24 Q16 16 24 8 Z" />
      <circle cx="24" cy="24" r="2" fill={color} />
    </svg>
  );
  return null;
}

Object.assign(window, { LightRays, TreeMark, SunOrnament, MoonDivider, ServiceIcon, ModalityIcon });