const { ServiceCard, SectionHeading } = window.TheVisualsBrothersDesignSystem_fe64e0;

const services = [
  { icon: "clapperboard", title: "Brand Films & Commercials", description: "Storytelling that connects brands with audiences through compelling narratives" },
  { icon: "video", title: "Music Videos", description: "Cinematic music video production with a distinct visual identity" },
  { icon: "sparkles", title: "AI Commercials", description: "Cutting-edge AI-generated commercial content for modern brands" },
  { icon: "tv", title: "Video Editing", description: "Precision editing that shapes raw footage into polished stories" },
  { icon: "clapperboard", title: "Real Production + AI + VFX", description: "Hybrid production combining live action, AI generation, and visual effects" },
];

const sprinkleColors = ["#D97706", "#F59E0B", "#FBBF24", "#EA580C", "#FDE68A"];
const sprinkles = Array.from({ length: 36 }, (_, i) => ({
  left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
  size: Math.round(Math.random() * 4 + 2), color: sprinkleColors[i % sprinkleColors.length],
  dur: `${(Math.random() * 2 + 2).toFixed(1)}s`, delay: `${(Math.random() * 3).toFixed(1)}s`,
}));

function Services() {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const canvas = canvasRef.current, section = canvas.parentElement;
    const ctx = canvas.getContext("2d");
    let w, h, particles, mouse = { x: -9999, y: -9999 };
    function resize() { w = canvas.width = section.offsetWidth; h = canvas.height = section.offsetHeight; }
    function makeParticles() {
      const count = Math.round((w * h) / 14000);
      particles = Array.from({ length: count }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.3, vy: (Math.random() - 0.5) * 0.3,
        r: Math.random() * 2 + 1, color: sprinkleColors[Math.floor(Math.random() * sprinkleColors.length)],
        a: Math.random() * 0.5 + 0.35,
      }));
    }
    resize(); makeParticles();
    window.addEventListener("resize", () => { resize(); makeParticles(); });
    section.addEventListener("mousemove", (e) => {
      const r = section.getBoundingClientRect();
      mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top;
    });
    section.addEventListener("mouseleave", () => { mouse.x = -9999; mouse.y = -9999; });
    let raf = null;
    function tick() {
      ctx.clearRect(0, 0, w, h);
      particles.forEach((p) => {
        const dx = p.x - mouse.x, dy = p.y - mouse.y, dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 130) {
          const f = (130 - dist) / 130;
          p.x += (dx / dist) * f * 2.4; p.y += (dy / dist) * f * 2.4;
        }
        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;
        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 4);
        grad.addColorStop(0, p.color + Math.round(p.a * 255).toString(16).padStart(2, "0"));
        grad.addColorStop(1, p.color + "00");
        ctx.fillStyle = grad;
        ctx.beginPath(); ctx.arc(p.x, p.y, p.r * 4, 0, Math.PI * 2); ctx.fill();
      });
      raf = requestAnimationFrame(tick);
    }
    const io = new IntersectionObserver((entries) => {
      const visible = entries[0].isIntersecting;
      if (visible && raf === null) { raf = requestAnimationFrame(tick); }
      else if (!visible && raf !== null) { cancelAnimationFrame(raf); raf = null; }
    }, { threshold: 0 });
    io.observe(section);
    return () => { cancelAnimationFrame(raf); io.disconnect(); };
  }, []);
  return (
    <section id="services" style={{ padding: "var(--space-section-v) var(--space-section-h)", background: "var(--slate-900)", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", top: "-20%", left: "50%", width: "900px", height: "700px", transform: "translateX(-50%)",
        background: "radial-gradient(circle, rgba(217,119,6,0.16), transparent 65%)",
        filter: "blur(10px)", animation: "vb-glow-pulse 6s ease-in-out infinite", zIndex: 0, pointerEvents: "none",
      }} />
      <canvas ref={canvasRef} style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "auto" }} />
      <img src="site/doodle-cursor.png" alt="" aria-hidden="true" style={{ position: "absolute", top: "-18px", left: "5%", width: "44px", opacity: 0.15, transform: "rotate(-8deg)", zIndex: 0, pointerEvents: "none" }} />
      <img src="site/doodle-star.png" alt="" aria-hidden="true" style={{ position: "absolute", bottom: "-24px", right: "8%", width: "50px", opacity: 0.14, transform: "rotate(7deg)", zIndex: 0, pointerEvents: "none" }} />
      <div style={{ position: "relative", zIndex: 1, marginBottom: "var(--gap-lg)" }}>
        <SectionHeading text="WHAT WE" accent="OFFER" />
      </div>
      <div className="vb-services-grid" style={{ position: "relative", zIndex: 1, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "var(--gap-card)" }}>
        {services.map((s, i) => (
          <div className="vb-reveal" style={{ transitionDelay: `${i * 80}ms` }} key={s.title}>
            <ServiceCard {...s} />
          </div>
        ))}
      </div>
    </section>
  );
}

window.Services = Services;