// Shared small components for Clog Busterz site
const { useState, useEffect, useRef, useMemo } = React;
const D = window.CB_DATA;

// ---------- AnimatedCount ----------
function AnimatedCount({ to, duration = 1200, suffix = "", prefix = "" }) {
  const [n, setN] = useState(to);
  const ref = useRef(null);
  useEffect(() => {
    let raf, start;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && start == null) {
          setN(0);
          start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(Math.round(to * eased));
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => { obs.disconnect(); if (raf) cancelAnimationFrame(raf); };
  }, [to, duration]);
  return <span ref={ref}>{prefix}{n.toLocaleString()}{suffix}</span>;
}

// ---------- StatStrip ----------
function StatStrip() {
  const stats = [
    { n: 10, suf: "+", label: "Years in business", since: "Since 2016" },
    { n: 5000, suf: "+", label: "Drains busted", since: "And counting" },
    { n: 23, suf: "", label: "Cities served", since: "Central Kentucky" },
    { n: 24, suf: "/7", label: "Emergency line", since: "Always on" },
  ];
  return (
    <div className="stat-strip">
      {stats.map((s, i) => (
        <div key={i} className="stat-cell">
          <div className="stat-num"><AnimatedCount to={s.n} suffix={s.suf} /></div>
          <div className="stat-label">{s.label}</div>
          <div className="stat-sub">{s.since}</div>
        </div>
      ))}
    </div>
  );
}

// ---------- Marquee ----------
function Marquee({ items }) {
  const row = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((t, i) => (
          <span key={i} className="marquee-item">
            <span className="marquee-dot">●</span> {t}
          </span>
        ))}
      </div>
    </div>
  );
}

// ---------- ServiceCard ----------
function ServiceCard({ svc, onClick, onHover }) {
  return (
    <button
      className="svc-card"
      onClick={() => onClick && onClick(svc)}
      onMouseEnter={() => onHover && onHover(svc)}
      data-screen-label={`svc-${svc.id}`}>
      <div className="svc-code">{svc.code}</div>
      <div className="svc-name">{svc.name}</div>
      <div className="svc-blurb">{svc.blurb}</div>
      <div className="svc-arrow">
        <span>DISPATCH</span>
        <svg width="20" height="12" viewBox="0 0 20 12" fill="none"><path d="M0 6 H18 M14 1 L19 6 L14 11" stroke="currentColor" strokeWidth="1.5"/></svg>
      </div>
    </button>
  );
}

// ---------- BadgeRow (trust) ----------
function BadgeRow() {
  const items = [
    { k: "LICENSED", v: "M7707" },
    { k: "INSURED", v: "FULL" },
    { k: "FAMILY", v: "OWNED" },
    { k: "UPFRONT", v: "PRICING" },
    { k: "SAME-DAY", v: "SERVICE" },
    { k: "WARRANTY", v: "BACKED" },
  ];
  return (
    <div className="badge-row">
      {items.map((b, i) => (
        <div key={i} className="badge">
          <div className="badge-k">{b.k}</div>
          <div className="badge-v">{b.v}</div>
        </div>
      ))}
    </div>
  );
}

// ---------- StarRow ----------
function StarRow({ n = 5 }) {
  return (
    <div className="stars">
      {Array.from({ length: n }).map((_, i) => (
        <svg key={i} width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 0l1.8 4.5L13.5 5l-3.4 3 1 4.6L7 10.3 2.9 12.6l1-4.6L.5 5l4.7-.5z"/></svg>
      ))}
    </div>
  );
}

Object.assign(window, { AnimatedCount, StatStrip, Marquee, ServiceCard, BadgeRow, StarRow });