// Shared icon components (inline SVG) and utility pieces
const Icon = ({ name, size = 18, stroke = 2 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (name) {
    case 'arrow-right': return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'clock':       return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'euro':        return <svg {...common}><path d="M18 7a7 7 0 1 0 0 10"/><path d="M5 11h9M5 15h9"/></svg>;
    case 'globe':       return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14 0 18-3-3.5-3-14 0-18z"/></svg>;
    case 'calendar':    return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'location':    return <svg {...common}><path d="M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'sparkles':    return <svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6"/></svg>;
    case 'lightbulb':   return <svg {...common}><path d="M9 18h6M10 22h4M9 15a6 6 0 1 1 6 0c-1 .7-1.5 1.3-1.5 2.5h-3c0-1.2-.5-1.8-1.5-2.5z"/></svg>;
    case 'shield':      return <svg {...common}><path d="M12 3l8 3v6c0 5-4 9-8 10-4-1-8-5-8-10V6l8-3z"/></svg>;
    case 'search':      return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>;
    case 'chart':       return <svg {...common}><path d="M3 3v18h18"/><path d="M7 15l3-3 3 3 5-5"/></svg>;
    case 'image':       return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>;
    case 'video':       return <svg {...common}><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>;
    case 'layers':      return <svg {...common}><path d="M12 2l9 5-9 5-9-5 9-5z"/><path d="M3 12l9 5 9-5"/><path d="M3 17l9 5 9-5"/></svg>;
    case 'check':       return <svg {...common}><path d="M5 13l4 4L19 7"/></svg>;
    case 'plus':        return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':       return <svg {...common}><path d="M5 12h14"/></svg>;
    case 'chevron-down':return <svg {...common}><path d="M6 9l6 6 6-6"/></svg>;
    case 'play':        return <svg {...common} fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>;
    case 'phone':       return <svg {...common}><path d="M4 4h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A18 18 0 0 1 2 6a2 2 0 0 1 2-2z"/></svg>;
    case 'mail':        return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case 'send':        return <svg {...common}><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>;
    case 'certificate': return <svg {...common}><circle cx="12" cy="10" r="5"/><path d="M8.5 13.5L7 21l5-3 5 3-1.5-7.5"/></svg>;
    case 'chat':        return <svg {...common}><path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    case 'slides':      return <svg {...common}><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>;
    case 'folder':      return <svg {...common}><path d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>;
    case 'users':       return <svg {...common}><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><circle cx="17" cy="6" r="3"/><path d="M22 18a5 5 0 0 0-5-5"/></svg>;
    case 'mentor':      return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'question':    return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-1 .5-1 1-1 1.7M12 17h.01"/></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="0.5" fill="currentColor"/></svg>;
    case 'linkedin':    return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-5a2 2 0 0 1 4 0v5M12 17v-7"/></svg>;
    case 'external':    return <svg {...common}><path d="M15 3h6v6M10 14L21 3M21 14v7h-7M3 10v11h11"/></svg>;
    case 'menu':        return <svg {...common}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'x':           return <svg {...common}><path d="M18 6L6 18M6 6l12 12"/></svg>;
    case 'logo-star':   return <svg {...common} fill="currentColor" stroke="none"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z"/></svg>;
    default: return null;
  }
};

// Scroll reveal hook — observes existing AND future .reveal nodes via MutationObserver
const useReveal = () => {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('is-visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });

    const observeAll = () => {
      document.querySelectorAll('.reveal:not(.is-visible)').forEach(el => io.observe(el));
    };

    // Observe now + whenever new .reveal nodes are added
    observeAll();
    const mo = new MutationObserver(() => observeAll());
    mo.observe(document.body, { childList: true, subtree: true });

    // Safety net: after 2s, force-show anything still off-screen-but-ready
    const t = setTimeout(observeAll, 500);

    return () => { io.disconnect(); mo.disconnect(); clearTimeout(t); };
  }, []);
};

Object.assign(window, { Icon, useReveal });