/* global React */
/* Inline lucide-style icons (stroke, 24 grid) */
const Icon = ({ name, size = 20, strokeWidth = 1.5, ...props }) => {
  const paths = {
    lock: <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    heart: <path d="M12 20.5C12 20.5 3.5 15.6 3.5 9.4a4.6 4.6 0 0 1 8.5-2.4 4.6 4.6 0 0 1 8.5 2.4c0 6.2-8.5 11.1-8.5 11.1Z"/>,
    clover: <><path d="M12 12c0-2.2-1-4-3-4a2.6 2.6 0 0 0 0 5.2c2 0 3-1 3-1.2Z"/><path d="M12 12c0-2.2 1-4 3-4a2.6 2.6 0 0 1 0 5.2c-2 0-3-1-3-1.2Z"/><path d="M12 12c-2.2 0-4 1-4 3a2.6 2.6 0 0 0 5.2 0c0-2-1-3-1.2-3Z"/><path d="M12 12c2.2 0 4 1 4 3a2.6 2.6 0 0 1-5.2 0c0-2 1-3 1.2-3Z"/><path d="M13.6 13.6 18 18"/></>,
    droplet: <><path d="M12 3.2 6.6 9.1a7.4 7.4 0 1 0 10.8 0L12 3.2Z"/><path d="M9 14.2a3.2 3.2 0 0 0 2.6 2.6"/></>,
    shield: <><path d="M12 2.5 5 5.4v5.5c0 4.5 3 7.9 7 9.1 4-1.2 7-4.6 7-9.1V5.4L12 2.5Z"/><path d="m9.2 11.5 2 2 3.6-3.8"/></>,
    unlink: <><path d="M9.5 14.5 7 17a3.5 3.5 0 0 1-5-5l2.5-2.5"/><path d="M14.5 9.5 17 7a3.5 3.5 0 0 1 5 5l-2.5 2.5"/><path d="M15 3.5V6M20.5 9H18M3.5 15H6M9 20.5V18"/></>,
    coins: <><ellipse cx="9" cy="6" rx="5.5" ry="2.6"/><path d="M3.5 6v4c0 1.4 2.5 2.6 5.5 2.6s5.5-1.2 5.5-2.6V6"/><path d="M9 12.5c-3 0-5.5-1.2-5.5-2.6"/><path d="M15.5 12.2a5.5 2.6 0 0 1 5 2.4v4c0 1.4-2.5 2.6-5.5 2.6-1.8 0-3.4-.4-4.4-1.1"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></>,
    quote: <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>,
    check: <polyline points="20 6 9 17 4 12"/>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    phone: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9Z"/>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22,6 12,13 2,6"/></>,
    mapPin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    eyeOff: <><path d="M9.9 4.2A9.1 9.1 0 0 1 12 4c7 0 10 8 10 8a13.2 13.2 0 0 1-1.7 2.7M6.6 6.6A13.3 13.3 0 0 0 2 12s3 8 10 8a9.3 9.3 0 0 0 4.5-1.1"/><line x1="2" y1="2" x2="22" y2="22"/></>,
    messageCircle: <path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.8-.8L3 20l1-4.2A8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5Z"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" {...props}>
      {paths[name]}
    </svg>
  );
};

/* scroll reveal hook */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

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