// Lumina Mind Studio — icons & shared decorative components
// Exports to window for cross-script availability.

const { useState, useEffect, useRef } = React;

// ─────────── Icons ───────────
const Icon = ({ name, size = 20, stroke = 1.7, className = "" }) => {
  const s = size;
  const sw = stroke;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", className };
  switch (name) {
    case "arrow-right": return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "arrow-up-right": return <svg {...common}><path d="M7 17 17 7M8 7h9v9"/></svg>;
    case "calendar": return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case "menu": return <svg {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case "close": return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "plus": return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "check": return <svg {...common}><path d="M4 12l5 5L20 6"/></svg>;
    case "chevron-left": return <svg {...common}><path d="M15 6l-6 6 6 6"/></svg>;
    case "chevron-right": return <svg {...common}><path d="M9 6l6 6-6 6"/></svg>;
    case "star": return <svg {...common} fill="currentColor" stroke="none"><path d="M12 2l2.95 6.36L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14 2 9.27l7.05-.91L12 2z"/></svg>;
    case "shield": return <svg {...common}><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
    case "lock": return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 1 1 8 0v3"/></svg>;
    case "user-heart": return <svg {...common}><circle cx="12" cy="8" r="3.5"/><path d="M5 21c0-3.5 3-6 7-6s7 2.5 7 6"/></svg>;
    case "sparkle": return <svg {...common} fill="currentColor" stroke="none"><path d="M12 2l1.5 5.5L19 9l-5.5 1.5L12 16l-1.5-5.5L5 9l5.5-1.5z"/></svg>;
    case "heart": return <svg {...common} fill="currentColor" stroke="none"><path d="M12 21s-7-4.5-9-9.5C1.5 7.5 4 4 7.5 4c2 0 3.5 1 4.5 2.5C13 5 14.5 4 16.5 4 20 4 22.5 7.5 21 11.5c-2 5-9 9.5-9 9.5z"/></svg>;
    case "instagram": return <svg {...common}><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=".8" fill="currentColor"/></svg>;
    case "facebook": return <svg {...common}><path d="M14 6h3V3h-3a4 4 0 0 0-4 4v3H7v3h3v8h3v-8h3l1-3h-4V7a1 1 0 0 1 1-1z"/></svg>;
    case "linkedin": return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"/></svg>;
    case "twitter": return <svg {...common}><path d="M22 5.8c-.7.3-1.5.6-2.3.7.8-.5 1.5-1.3 1.8-2.2-.8.5-1.7.8-2.6 1A4 4 0 0 0 12 9c0 .3 0 .6.1.9-3.3-.2-6.3-1.8-8.3-4.3a4 4 0 0 0 1.2 5.3c-.6 0-1.2-.2-1.8-.5v.1a4 4 0 0 0 3.2 4c-.5.2-1.1.2-1.7.1a4 4 0 0 0 3.8 2.8A8 8 0 0 1 2 18.6 11.3 11.3 0 0 0 8.1 20c7.3 0 11.3-6 11.3-11.3v-.5c.8-.6 1.5-1.3 2-2.1z"/></svg>;
    case "mail": return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="3"/><path d="m3 7 9 7 9-7"/></svg>;
    case "phone": return <svg {...common}><path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case "map": return <svg {...common}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case "clock": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    // Service icons
    case "leaf-mind": return <svg {...common}><path d="M9 17c-3 0-5-2-5-5 0-4 4-8 8-8 4 0 8 4 8 8 0 3-2 5-5 5"/><path d="M9 17c0 2 1.5 4 3 4s3-2 3-4M12 11v10"/></svg>;
    case "hands": return <svg {...common}><path d="M6 10c0-3 4-6 6-6s6 3 6 6"/><path d="M4 13c0-1.5 1-3 2-3s2 1.5 2 3v5"/><path d="M20 13c0-1.5-1-3-2-3s-2 1.5-2 3v5"/><path d="M9 14h6"/></svg>;
    case "compass": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="m15 9-4 2-2 4 4-2z"/></svg>;
    case "bloom": return <svg {...common}><circle cx="12" cy="12" r="2"/><path d="M12 12c0-3-2-5-5-5M12 12c3 0 5-2 5-5M12 12c-3 0-5 2-5 5M12 12c0 3 2 5 5 5"/></svg>;
    case "video": return <svg {...common}><rect x="3" y="6" width="13" height="12" rx="3"/><path d="m16 10 5-3v10l-5-3z"/></svg>;
    case "globe": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg>;
    default: return null;
  }
};

// ─────────── Logo ───────────
const Logo = ({ inverted = false }) => (
  <a href="#home" className="logo" aria-label="Lumina Mind Studio home">
    <span className="logo-mark" aria-hidden="true">
      <svg viewBox="0 0 44 44" width="44" height="44">
        <defs>
          <linearGradient id="lg-a" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#A88BFF"/><stop offset="1" stopColor="#5B3FD6"/>
          </linearGradient>
          <linearGradient id="lg-b" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#66D1C2"/><stop offset="1" stopColor="#2DAFA0"/>
          </linearGradient>
          <linearGradient id="lg-c" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#FFB5A8"/><stop offset="1" stopColor="#FF8B7E"/>
          </linearGradient>
        </defs>
        <circle cx="14" cy="16" r="10" fill="url(#lg-a)" opacity=".88"/>
        <circle cx="30" cy="16" r="10" fill="url(#lg-b)" opacity=".88"/>
        <circle cx="22" cy="30" r="10" fill="url(#lg-c)" opacity=".88"/>
        <circle cx="22" cy="20" r="3.2" fill="#FFD25E"/>
      </svg>
    </span>
    <span className="logo-text">
      <b style={inverted ? { color: "#fff" } : null}>Lumina Mind</b>
      <span>CBT Studio · Kensington</span>
    </span>
  </a>
);

// ─────────── Doodles ───────────
const HeartDoodle = ({ style }) => (
  <svg className="doodle heart-d" style={style} width="28" height="26" viewBox="0 0 28 26" fill="none">
    <path d="M14 23S3 16 3 9c0-3.3 2.7-6 6-6 2 0 3.8 1 5 2.6C15.2 4 17 3 19 3c3.3 0 6 2.7 6 6 0 7-11 14-11 14z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
  </svg>
);
const SparkleDoodle = ({ style }) => (
  <svg className="doodle sparkle-d" style={style} width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
    <path d="M11 1l1.6 6L19 8.6 13 11l-2 7-2-7-6-2.4L9 7z"/>
  </svg>
);
const SwirlDoodle = ({ style, color = "#7E5BEF" }) => (
  <svg className="doodle" style={style} width="42" height="22" viewBox="0 0 42 22" fill="none">
    <path d="M2 18C8 4 16 4 21 14s12 8 19-6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
  </svg>
);
const Underline = ({ color = "#FFD25E" }) => (
  <span className="scribble">
    <svg viewBox="0 0 200 14" preserveAspectRatio="none" aria-hidden="true">
      <path d="M3 9 C 40 3, 80 13, 120 7 S 180 5, 197 9" stroke={color} strokeWidth="5" strokeLinecap="round" fill="none"/>
    </svg>
  </span>
);

// ─────────── In-view hook ───────────
function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, seen];
}

Object.assign(window, { Icon, Logo, HeartDoodle, SparkleDoodle, SwirlDoodle, Underline, useInView });