// common.jsx — constantes, ícones SVG, helpers compartilhados
const WA_LINK = "https://api.whatsapp.com/send/?phone=%2B5521986511926&text=Ol%C3%A1%21%20Vim%20pelo%20Site%20e%20gostaria%20de%20saber%20mais%20sobre%20o%20Bronze%20Tere&type=phone_number&app_absent=0&utm_source=site";

const { useState, useEffect, useRef } = React;

function useReveal() {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    if (!('IntersectionObserver' in window)) {
      els.forEach((e) => e.classList.add('in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
      });
    }, { threshold: 0.16, rootMargin: '0px 0px -8% 0px' });
    els.forEach((e) => io.observe(e));
    const t = setTimeout(() => els.forEach((e) => e.classList.add('in')), 2500);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

const Ic = {
  whatsapp: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3a8.96 8.96 0 0 0-7.7 13.6L3 21l4.6-1.2A9 9 0 1 0 12 3Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M8.8 8.4c-.2.5-.3 1.1 0 1.7.7 1.6 2 2.9 3.6 3.6.6.3 1.2.2 1.7 0l.9-.5c.2-.1.2-.4.1-.6l-.7-1c-.1-.2-.4-.3-.6-.2l-.7.3c-.6-.3-1.1-.8-1.4-1.4l.3-.7c.1-.2 0-.5-.2-.6l-1-.7c-.2-.1-.5-.1-.6.1l-.7.7Z" fill="currentColor"/></svg>),
  shield: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3.2 5 6v5.2c0 4.3 3 7.3 7 9.6 4-2.3 7-5.3 7-9.6V6l-7-2.8Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="m9.2 11.8 1.9 1.9 3.7-3.8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  heart: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 20s-7-4.4-9.1-8.4C1.4 8.4 2.8 5.2 6 5.2c1.9 0 3.1 1.1 4 2.4.9-1.3 2.1-2.4 4-2.4 3.2 0 4.6 3.2 3.1 6.4C19 15.6 12 20 12 20Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>),
  drop: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3.5c3 3.6 5.5 6.6 5.5 9.6A5.5 5.5 0 0 1 6.5 13c0-3 2.5-6 5.5-9.5Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M9.4 13.6a2.6 2.6 0 0 0 2.6 2.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  sun: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6"/><path d="M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.4 5.6l-1.6 1.6M7.2 16.8l-1.6 1.6M18.4 18.4l-1.6-1.6M7.2 7.2 5.6 5.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  pin: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 21c4-4.2 6.5-7.4 6.5-10.5A6.5 6.5 0 0 0 5.5 10.5C5.5 13.6 8 16.8 12 21Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><circle cx="12" cy="10.5" r="2.3" stroke="currentColor" strokeWidth="1.6"/></svg>),
  check: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="m5 12.5 4.2 4.2L19 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  plus: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>),
  arrow: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  starFill: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="m12 3.5 2.5 5.4 5.9.6-4.4 4 1.3 5.8L12 16.9 6.7 19.3 8 13.5l-4.4-4 5.9-.6L12 3.5Z"/></svg>),
  google: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M21.6 12.2c0-.7-.06-1.2-.18-1.8H12v3.3h5.4a4.6 4.6 0 0 1-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7Z" fill="#4285F4"/><path d="M12 22c2.7 0 5-.9 6.6-2.4l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1H3.1v2.6A10 10 0 0 0 12 22Z" fill="#34A853"/><path d="M6.4 14c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.4H3.1A10 10 0 0 0 2 12c0 1.6.4 3.2 1.1 4.6L6.4 14Z" fill="#FBBC05"/><path d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.8-2.8A10 10 0 0 0 12 2a10 10 0 0 0-8.9 5.4L6.4 10c.8-2.4 3-4.1 5.6-4.1Z" fill="#EA4335"/></svg>),
};

function WaButton({ children, variant = "wa", className = "", icon = true }) {
  return (
    <a href={WA_LINK} target="_blank" rel="noopener" className={`btn btn-${variant} ${className}`}>
      {icon && Ic.whatsapp()}
      {children}
    </a>
  );
}

Object.assign(window, { WA_LINK, Ic, WaButton, useReveal });
