// ============ Icons ============
const Icon = ({ name, size = 22, stroke = "currentColor", sw = 1.6, style }) => {
  const c = { width:size, height:size, viewBox:"0 0 24 24", fill:"none", stroke, strokeWidth:sw, strokeLinecap:"round", strokeLinejoin:"round", style };
  switch(name){
    case "bolt": return (<svg {...c}><path d="M13 3L4 14h7l-1 7 9-11h-7z"/></svg>);
    case "chat": return (<svg {...c}><path d="M4 5h16v11H9l-4 3v-3H4z"/><path d="M8 10h.01M12 10h.01M16 10h.01"/></svg>);
    case "calendar": return (<svg {...c}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/><path d="M9 14l2 2 4-4"/></svg>);
    case "clock": return (<svg {...c}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "whatsapp": return (<svg {...c}><path d="M4 20l1.6-4.4A8 8 0 1 1 9 19.4L4 20Z"/><path d="M9 10.5c.3 1.4 1.6 2.7 3 3l1.3-1c.9.4 1.6.6 2.2.7 0 .8-.4 1.6-1.1 1.9-2.6.9-6.2-2.6-5.3-5.3.3-.7 1.1-1.1 1.9-1.1.1.6.3 1.3.7 2.2l-.7 1Z"/></svg>);
    case "instagram": return (<svg {...c}><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="1" fill="currentColor" stroke="none"/></svg>);
    case "spark": return (<svg {...c}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/><path d="M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg>);
    case "shield": return (<svg {...c}><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>);
    case "heart": return (<svg {...c}><path d="M12 20s-7-4.5-9-9a4.5 4.5 0 0 1 9-2 4.5 4.5 0 0 1 9 2c-2 4.5-9 9-9 9z"/></svg>);
    case "target": return (<svg {...c}><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.5"/></svg>);
    case "brain": return (<svg {...c}><path d="M9 4a3 3 0 0 0-3 3 3 3 0 0 0-1 5 3 3 0 0 0 2 4 3 3 0 0 0 3 2V4z"/><path d="M15 4a3 3 0 0 1 3 3 3 3 0 0 1 1 5 3 3 0 0 1-2 4 3 3 0 0 1-3 2V4z"/></svg>);
    case "plug": return (<svg {...c}><path d="M9 3v6M15 3v6M7 9h10v2a5 5 0 0 1-10 0z"/><path d="M12 16v5"/></svg>);
    case "graph": return (<svg {...c}><path d="M4 19V5M4 19h16"/><path d="M8 16l3-4 3 2 4-6"/></svg>);
    case "play": return (<svg {...c}><path d="M8 5l11 7-11 7z" fill="currentColor" stroke="none"/></svg>);
    case "arrow": return (<svg {...c}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "check": return (<svg {...c}><path d="M5 13l4 4 10-10"/></svg>);
    case "plus": return (<svg {...c}><path d="M12 5v14M5 12h14"/></svg>);
    case "mail": return (<svg {...c}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M4 7l8 6 8-6"/></svg>);
    case "pin": return (<svg {...c}><path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>);
    case "phone": return (<svg {...c}><path d="M5 4h4l2 5-3 2a11 11 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>);
    case "globe": return (<svg {...c}><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>);
    case "users": return (<svg {...c}><circle cx="9" cy="8" r="3"/><path d="M3 19a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.4"/><path d="M15 19a4 4 0 0 1 6.5-3"/></svg>);
    case "star": return (<svg {...c}><path d="M12 3l2.6 5.6L21 9.3l-4.5 4.3 1.1 6.4L12 17l-5.6 3 1.1-6.4L3 9.3l6.4-.7z" fill="currentColor" stroke="none"/></svg>);
    case "infinity": return (<svg {...c}><path d="M7 9a3 3 0 1 0 0 6c2.5 0 3.5-6 6-6a3 3 0 1 1 0 6c-2.5 0-3.5-6-6-6z"/></svg>);
    case "logo": return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        <circle cx="16" cy="16" r="13" stroke="url(#lg)" strokeWidth="2.4"/>
        <circle cx="16" cy="16" r="4.4" fill="#00CEC9"/>
        <circle cx="16" cy="3.2" r="2" fill="#FF6B35"/>
        <defs><linearGradient id="lg" x1="3" y1="3" x2="29" y2="29"><stop stopColor="#FF6B35"/><stop offset="1" stopColor="#00CEC9"/></linearGradient></defs>
      </svg>
    );
    default: return null;
  }
};

// ============ Reveal hook (IntersectionObserver) ============
function useRevealRoot() {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll("[data-reveal]"));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting){ e.target.classList.add("in"); io.unobserve(e.target);} });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// ============ Lightweight smooth scroll (Lenis-style) ============
function useSmoothScroll() {
  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let target = window.scrollY, current = window.scrollY, raf;
    let active = false;
    const ease = 0.085;
    const onWheel = (e) => {
      // let inner scrollers handle their own wheel
      if (e.target.closest("[data-native-scroll]")) return;
      e.preventDefault();
      target = Math.max(0, Math.min(target + e.deltaY, document.body.scrollHeight - window.innerHeight));
      if (!active){ active = true; loop(); }
    };
    const loop = () => {
      current += (target - current) * ease;
      if (Math.abs(target - current) < 0.4){ current = target; active = false; window.scrollTo(0, current); return; }
      window.scrollTo(0, current);
      raf = requestAnimationFrame(loop);
    };
    const onResize = () => { target = current = window.scrollY; };
    window.addEventListener("wheel", onWheel, { passive:false });
    window.addEventListener("resize", onResize);
    return () => { window.removeEventListener("wheel", onWheel); window.removeEventListener("resize", onResize); cancelAnimationFrame(raf); };
  }, []);
}

// parallax helper: returns ref; element translates on scroll
function useParallax(speed = 0.15) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let raf;
    const update = () => {
      const el = ref.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const center = r.top + r.height/2 - window.innerHeight/2;
      el.style.transform = `translateY(${center * -speed}px)`;
      raf = requestAnimationFrame(update);
    };
    raf = requestAnimationFrame(update);
    return () => cancelAnimationFrame(raf);
  }, [speed]);
  return ref;
}

Object.assign(window, { Icon, useRevealRoot, useSmoothScroll, useParallax });