// icons.jsx — small SVG helpers and shared constants
const ICONS = {
  whatsapp: "assets/icons/whatsapp.svg",
  check: "assets/icons/check.svg",
  home: "assets/icons/home.svg",
  road: "assets/icons/road.svg",
  key: "assets/icons/key.svg",
  flame: "assets/icons/flame.svg",
  crest: "assets/icons/crest.svg",
};

// Custom inline icon: chat / personal touch (used for "atendimento pessoal")
function ChatIcon({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="g-chat" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#F2D77A"/>
          <stop offset="1" stopColor="#B8881A"/>
        </linearGradient>
      </defs>
      <path d="M5 10c0-2.2 1.8-4 4-4h14c2.2 0 4 1.8 4 4v8c0 2.2-1.8 4-4 4h-7l-5 5v-5H9c-2.2 0-4-1.8-4-4v-8z"
        stroke="url(#g-chat)" strokeWidth="2" strokeLinejoin="round" fill="rgba(212,160,23,0.08)"/>
      <circle cx="11.5" cy="14" r="1.4" fill="url(#g-chat)"/>
      <circle cx="16" cy="14" r="1.4" fill="url(#g-chat)"/>
      <circle cx="20.5" cy="14" r="1.4" fill="url(#g-chat)"/>
    </svg>
  );
}

// Hook: reveal-on-scroll using IntersectionObserver
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".dc-reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

window.ICONS = ICONS;
window.ChatIcon = ChatIcon;
window.useReveal = useReveal;