// ───────── Primitives & shared bits ─────────
const CAL_LINK = "#book"; // CALENDLY_LINK_HERE placeholder

const ArrowRight = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14" />
    <path d="m13 5 7 7-7 7" />
  </svg>
);

const PrimaryCTA = ({ label = "Book a Discovery Call", className = "" }) => (
  <a className={`btn btn-primary ${className}`} href={CAL_LINK}>
    <span>{label}</span>
    <ArrowRight />
  </a>
);

const GhostCTA = ({ label, href = "#systems", className = "" }) => (
  <a className={`btn btn-ghost ${className}`} href={href}>
    <span>{label}</span>
    <ArrowRight />
  </a>
);

// ── Icons (small line-style, no slop) ──
const Icon = ({ name, size = 22 }) => {
  const stroke = "currentColor";
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "automation": return (<svg {...props}><circle cx="6" cy="6" r="2.2"/><circle cx="18" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="18" r="2.2"/><path d="M8 6h8M6 8v8M18 8v8M8 18h8"/></svg>);
    case "agent": return (<svg {...props}><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>);
    case "google": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "meta": return (<svg {...props}><path d="M3 16c0-7 4-10 7-10 2 0 3 1.2 4 3 1-1.8 3-5 6-5 2.5 0 4 2.5 1 8-2.5 4.5-4.5 8-7 8-1.7 0-3-1.4-4-3-1 1.7-2.3 3-4 3-2 0-3-1.8-3-4Z"/></svg>);
    case "tiktok": return (<svg {...props}><path d="M10 4v10.5a3 3 0 1 1-3-3"/><path d="M14 4c.7 2.5 3 4 5 4"/></svg>);
    case "pinterest": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M11.5 7v0c2 0 4 1.5 4 4s-1.5 3.5-3.5 3.5c-1 0-1.7-.5-2-1l-.7 3.2c-.2 1-1 2-1 2"/></svg>);
    case "seo": return (<svg {...props}><circle cx="10.5" cy="10.5" r="6"/><path d="m20 20-5.2-5.2M7 10.5h7M10.5 7v7" opacity=".7"/></svg>);
    case "social": return (<svg {...props}><path d="M21 11.5a8.5 8.5 0 0 1-12.5 7.5L3 21l2-5.5A8.5 8.5 0 1 1 21 11.5z"/></svg>);
    case "mail": return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 7 9-7"/></svg>);
    case "clock": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "miss": return (<svg {...props}><path d="M12 21s-7-4-7-11a7 7 0 0 1 14 0c0 1.5-.3 2.8-.8 4"/><path d="M16 16l5 5M21 16l-5 5"/></svg>);
    case "disconnect": return (<svg {...props}><path d="M9 6V4M15 6V4M9 20v-2M15 20v-2M6 9H4M6 15H4M20 9h-2M20 15h-2"/><rect x="7" y="7" width="10" height="10" rx="2"/></svg>);
    case "spark": return (<svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>);
    case "bot": return (<svg {...props}><rect x="4" y="7" width="16" height="12" rx="3"/><circle cx="9" cy="13" r="1"/><circle cx="15" cy="13" r="1"/><path d="M12 3v4M9 7h6"/></svg>);
    case "speed": return (<svg {...props}><path d="M12 21a9 9 0 1 1 9-9"/><path d="m12 12 6-3"/></svg>);
    case "scale": return (<svg {...props}><path d="M3 17V7M3 17h10M7 21V11M7 21h14M11 21V15"/></svg>);
    case "link": return (<svg {...props}><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 1 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 1 0 7 7l1-1"/></svg>);
    case "chart": return (<svg {...props}><path d="M3 3v18h18"/><path d="m7 15 4-4 3 3 6-7"/></svg>);
    case "check": return (<svg {...props}><path d="m5 12 4 4L19 7"/></svg>);
    case "arrow": return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "menu": return (<svg {...props}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case "close": return (<svg {...props}><path d="M6 6l12 12M18 6 6 18"/></svg>);
    case "lead": return (<svg {...props}><path d="M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>);
    case "support": return (<svg {...props}><path d="M21 12a9 9 0 1 0-18 0v3a2 2 0 0 0 2 2h2v-6H5"/><path d="M19 17h-2v-6h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2Z"/></svg>);
    case "report": return (<svg {...props}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>);
    case "sales": return (<svg {...props}><path d="M3 12c2-4 5-6 9-6s7 2 9 6c-2 4-5 6-9 6s-7-2-9-6Z"/><circle cx="12" cy="12" r="2.5"/></svg>);
    case "content": return (<svg {...props}><path d="M4 6h12M4 12h16M4 18h10"/></svg>);
    case "shop": return (<svg {...props}><path d="M4 7h16l-1.5 11a2 2 0 0 1-2 1.8H7.5a2 2 0 0 1-2-1.8L4 7Z"/><path d="M9 11V5a3 3 0 0 1 6 0v6"/></svg>);
    case "star": return (<svg {...props}><path d="M12 3l2.6 5.6 6.1.8-4.5 4.2 1.2 6.1L12 16.9 6.6 19.7l1.2-6.1L3.3 9.4l6.1-.8L12 3Z"/></svg>);
    case "perf": return (<svg {...props}><path d="M12 21V10"/><path d="M5 14l7-7 7 7"/><circle cx="12" cy="4" r="1.5"/></svg>);
    default: return null;
  }
};

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

// ── Particle field (canvas) ──
const Particles = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current; if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 1.5);
    const isMobile = window.matchMedia("(max-width: 768px)").matches;
    const COUNT = isMobile ? 28 : 72;
    let pts = [];
    const resize = () => {
      w = canvas.clientWidth; h = canvas.clientHeight;
      canvas.width = w * dpr; canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    const init = () => {
      pts = Array.from({ length: COUNT }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.15,
        vy: (Math.random() - 0.5) * 0.15,
        r: Math.random() * 1.2 + 0.4,
        a: Math.random() * 0.5 + 0.2,
        c: Math.random() > 0.5 ? [77,139,255] : [168,85,247],
      }));
    };
    let raf;
    const tick = () => {
      ctx.clearRect(0, 0, w, h);
      for (const p of pts) {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0) p.x = w; if (p.x > w) p.x = 0;
        if (p.y < 0) p.y = h; if (p.y > h) p.y = 0;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${p.c[0]},${p.c[1]},${p.c[2]},${p.a})`;
        ctx.fill();
      }
      raf = requestAnimationFrame(tick);
    };
    resize(); init(); tick();
    const onResize = () => { resize(); init(); };
    window.addEventListener("resize", onResize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", onResize); };
  }, []);
  return <canvas ref={ref} id="particles" aria-hidden="true" />;
};

const Atmosphere = () => (
  <div className="bg-atmosphere" aria-hidden="true">
    <div className="bg-grid"></div>
    <div className="bg-blob b1"></div>
    <div className="bg-blob b2"></div>
    <div className="bg-blob b3"></div>
    <Particles />
  </div>
);

Object.assign(window, { PrimaryCTA, GhostCTA, ArrowRight, Icon, useReveal, Atmosphere, CAL_LINK });