// Icon components — inline SVGs, no deps
const { useEffect, useRef, useState, useCallback, useMemo } = React;

function Icon({ name, size = 22, stroke = 1.6 }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow':   return <svg {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'phone':   return <svg {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case 'mail':    return <svg {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7 12 13 2 7"/></svg>;
    case 'pin':     return <svg {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case 'menu':    return <svg {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'close':   return <svg {...p}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case 'check':   return <svg {...p}><path d="M20 6 9 17l-5-5"/></svg>;
    case 'hardhat': return <svg {...p}><path d="M2 18h20M4 18a8 8 0 0 1 16 0M8 14V8a4 4 0 0 1 8 0v6"/></svg>;
    case 'kitchen': return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 10h18M8 3v7M16 14v3M12 14v3"/></svg>;
    case 'bath':    return <svg {...p}><path d="M4 12h16v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-4zM7 12V6a2 2 0 0 1 2-2h2M7 8h4"/></svg>;
    case 'building':return <svg {...p}><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 8h.01M15 8h.01M9 12h.01M15 12h.01M9 16h.01M15 16h.01"/></svg>;
    case 'roof':    return <svg {...p}><path d="M3 13 12 4l9 9M5 11v9h14v-9M10 20v-5h4v5"/></svg>;
    case 'drop':    return <svg {...p}><path d="M12 2s7 7.58 7 13a7 7 0 1 1-14 0c0-5.42 7-13 7-13z"/></svg>;
    case 'bolt':    return <svg {...p}><path d="M13 2 3 14h8l-1 8 10-12h-8l1-8z"/></svg>;
    case 'leaf':    return <svg {...p}><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.5 2c1 5 .45 10.4-3 13.5-1.7 1.5-4 2.5-5.5 2.5zM2 21c5-3 6-9 13-11"/></svg>;
    case 'layers':  return <svg {...p}><path d="m12 2 10 5-10 5-10-5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>;
    default:        return null;
  }
}
window.Icon = Icon;

// Intersection-based reveal hook
function useReveal(options = {}) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (el.classList.contains('in')) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); }});
    }, { threshold: options.threshold ?? 0.15, rootMargin: options.rootMargin ?? '0px 0px -60px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}
window.useReveal = useReveal;

// Animated counter — ticks up when visible
function Counter({ to, suffix = '', duration = 1600 }) {
  const [v, setV] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setV(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{v}{suffix}</span>;
}
window.Counter = Counter;

// Eyebrow label
function Eyebrow({ children }) { return <span className="eyebrow">{children}</span>; }
window.Eyebrow = Eyebrow;

// Reveal wrapper
function Reveal({ children, as = 'div', className = '', stagger = false, ...rest }) {
  const ref = useReveal();
  const cls = `${stagger ? 'reveal-stagger' : 'reveal'} ${className}`.trim();
  return React.createElement(as, { ref, className: cls, ...rest }, children);
}
window.Reveal = Reveal;