/* ============================================================
   TRAW — UI helpers compartilhados
   Exporta para window (cada <script babel> tem escopo próprio)
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- Ícones (line icons simples) ---------- */
function Icon({ name, size = 22, stroke = 2 }) {
  const p = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
  };
  const paths = {
    arrow:   <path d="M5 12h14M13 6l6 6-6 6" />,
    arrowUR: <><path d="M7 17 17 7" /><path d="M8 7h9v9" /></>,
    check:   <path d="M20 6 9 17l-5-5" />,
    code:    <><path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" /></>,
    layout:  <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9" /></>,
    search:  <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    cart:    <><circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" /><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6" /></>,
    gauge:   <><path d="M12 14 8 9" /><circle cx="12" cy="14" r="9" /><path d="M12 3v2M3.5 9l1.8.7M20.5 9l-1.8.7" /></>,
    wrench:  <path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-2.4 2.6-2.6Z" />,
    spark:   <path d="M12 2v6m0 8v6M4 12H2m20 0h-2M5.6 5.6 4.2 4.2m15.6 1.4 1.4-1.4M5.6 18.4l-1.4 1.4m15.6-1.4 1.4 1.4" />,
    bolt:    <path d="M13 2 4.5 13.5H11l-1 8.5 9-12h-7l1-8Z" />,
    star:    <path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 18.4 6.1 21l1.2-6.5L2.5 9.9l6.6-.9 2.9-6Z" />,
    users:   <><path d="M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9.5" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.9" /></>,
    shield:  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />,
    target:  <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1" /></>,
    phone:   <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2Z" />,
    mail:    <><rect x="2" y="4" width="20" height="16" rx="2" /><path d="m2 7 10 6 10-6" /></>,
    pin:     <><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z" /><circle cx="12" cy="10" r="3" /></>,
    chat:    <path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.9L3 20l1.3-4.1A8.4 8.4 0 0 1 3.6 8 8.5 8.5 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5Z" />,
    insta:   <><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" /></>,
    link:    <><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5" /><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5" /></>,
    rocket:  <path d="M5 16c-1.5 1.3-2 5-2 5s3.7-.5 5-2a2.8 2.8 0 0 0-3-3Zm9.5-1.5L19 10a5 5 0 0 0-5-5l-4.5 4.5M9 15l-3-3 3-6a13 13 0 0 1 9-3 13 13 0 0 1-3 9l-6 3Z" />,
  };
  return <svg {...p} aria-hidden="true">{paths[name]}</svg>;
}

/* ---------- Reveal on scroll ---------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const els = [root, ...root.querySelectorAll('[data-reveal]')].filter(Boolean);
    els.forEach((el) => el.classList.add('reveal'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const delay = e.target.getAttribute('data-delay') || 0;
          e.target.style.transitionDelay = `${delay}ms`;
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.14, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ---------- WhatsApp link helper ---------- */
const WA_NUMBER = "5518997472540";
function waLink(msg) {
  return `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg || "Olá! Gostaria de solicitar um orçamento de site com a Traw.")}`;
}

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