/* ============================================================
   Stickers, Confetti, Cursor Trail — small reusable building
   blocks for the Xcela redesign. All exported to window.
   ============================================================ */

/* Inline SVG stickers — friendlier than emoji and palette-aware
   (they pull from CSS custom properties). All keep a chunky
   2px ink stroke matching the rest of the design. */
const Sticker = ({ shape, size = 60, rot = 0, fill, style = {} }) => {
  const s = { width: size, height: size, transform: `rotate(${rot}deg)`, ...style };
  const ink = "var(--ink)";
  const f = fill || "var(--pink)";
  switch (shape) {
    case "star":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          <path d="M32 4 L40 24 L62 26 L45 41 L50 62 L32 51 L14 62 L19 41 L2 26 L24 24 Z"
                fill={f} stroke={ink} strokeWidth="3" strokeLinejoin="round"/>
        </svg>
      );
    case "heart":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          <path d="M32 56 C 8 40 4 22 16 14 C 26 8 32 16 32 22 C 32 16 38 8 48 14 C 60 22 56 40 32 56 Z"
                fill={f} stroke={ink} strokeWidth="3" strokeLinejoin="round"/>
        </svg>
      );
    case "cloud":
      return (
        <svg style={s} viewBox="0 0 80 50" fill="none">
          <path d="M16 40 C 6 40 4 28 14 26 C 14 14 28 12 32 22 C 36 12 52 14 54 26 C 66 24 70 38 60 40 Z"
                fill={f} stroke={ink} strokeWidth="3" strokeLinejoin="round"/>
        </svg>
      );
    case "blob":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          <path d="M32 4 C 50 4 60 20 58 36 C 56 52 40 60 28 58 C 12 56 4 42 6 26 C 8 12 18 4 32 4 Z"
                fill={f} stroke={ink} strokeWidth="3"/>
        </svg>
      );
    case "flower":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          {[0, 60, 120, 180, 240, 300].map((deg) => (
            <ellipse key={deg} cx="32" cy="14" rx="9" ry="14"
              fill={f} stroke={ink} strokeWidth="3"
              transform={`rotate(${deg} 32 32)`} />
          ))}
          <circle cx="32" cy="32" r="8" fill="var(--yellow)" stroke={ink} strokeWidth="3"/>
        </svg>
      );
    case "sun":
      return (
        <svg style={s} viewBox="0 0 80 80" fill="none">
          {[...Array(8)].map((_, i) => {
            const a = (i / 8) * Math.PI * 2;
            const x1 = 40 + Math.cos(a) * 26, y1 = 40 + Math.sin(a) * 26;
            const x2 = 40 + Math.cos(a) * 38, y2 = 40 + Math.sin(a) * 38;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={ink} strokeWidth="4" strokeLinecap="round"/>;
          })}
          <circle cx="40" cy="40" r="20" fill={f} stroke={ink} strokeWidth="3"/>
        </svg>
      );
    case "rainbow":
      return (
        <svg style={s} viewBox="0 0 80 50" fill="none">
          <path d="M8 46 A 32 32 0 0 1 72 46" stroke="var(--pink)" strokeWidth="6" fill="none"/>
          <path d="M16 46 A 24 24 0 0 1 64 46" stroke="var(--yellow)" strokeWidth="6" fill="none"/>
          <path d="M24 46 A 16 16 0 0 1 56 46" stroke="var(--mint)" strokeWidth="6" fill="none"/>
          <path d="M32 46 A 8 8 0 0 1 48 46" stroke="var(--sky)" strokeWidth="6" fill="none"/>
          <path d="M8 46 A 32 32 0 0 1 72 46" stroke={ink} strokeWidth="2" fill="none"/>
        </svg>
      );
    case "spark":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          <path d="M32 4 L36 26 L58 32 L36 38 L32 60 L28 38 L6 32 L28 26 Z"
                fill={f} stroke={ink} strokeWidth="3" strokeLinejoin="round"/>
        </svg>
      );
    case "lollipop":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          <line x1="32" y1="34" x2="32" y2="60" stroke={ink} strokeWidth="4" strokeLinecap="round"/>
          <circle cx="32" cy="22" r="18" fill={f} stroke={ink} strokeWidth="3"/>
          <path d="M22 22 A 10 10 0 0 1 42 22" stroke="var(--paper)" strokeWidth="3" fill="none"/>
          <path d="M26 22 A 6 6 0 0 1 38 22" stroke="var(--paper)" strokeWidth="3" fill="none"/>
        </svg>
      );
    case "balloon":
      return (
        <svg style={s} viewBox="0 0 64 80" fill="none">
          <ellipse cx="32" cy="28" rx="22" ry="26" fill={f} stroke={ink} strokeWidth="3"/>
          <path d="M32 54 L28 60 L36 60 Z" fill={ink}/>
          <path d="M32 60 Q 36 68 30 76" stroke={ink} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </svg>
      );
    case "moon":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          <path d="M44 8 A 28 28 0 1 0 56 44 A 22 22 0 0 1 44 8 Z" fill={f} stroke={ink} strokeWidth="3"/>
        </svg>
      );
    case "smile":
      return (
        <svg style={s} viewBox="0 0 64 64" fill="none">
          <circle cx="32" cy="32" r="28" fill={f} stroke={ink} strokeWidth="3"/>
          <circle cx="22" cy="26" r="3" fill={ink}/>
          <circle cx="42" cy="26" r="3" fill={ink}/>
          <path d="M20 38 Q 32 50 44 38" stroke={ink} strokeWidth="3" strokeLinecap="round" fill="none"/>
        </svg>
      );
    case "zigzag":
      return (
        <svg style={s} viewBox="0 0 80 30" fill="none">
          <path d="M4 22 L 16 8 L 28 22 L 40 8 L 52 22 L 64 8 L 76 22"
                stroke={f} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
        </svg>
      );
    default:
      return null;
  }
};

/* ---------- Confetti burst on enroll click ---------- */
const fireConfetti = (originX, originY) => {
  const canvas = document.getElementById("confetti");
  if (!canvas) return;
  const ctx = canvas.getContext("2d");
  const dpr = window.devicePixelRatio || 1;
  canvas.width = window.innerWidth * dpr;
  canvas.height = window.innerHeight * dpr;
  canvas.style.width = window.innerWidth + "px";
  canvas.style.height = window.innerHeight + "px";
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

  const colors = [
    getCss("--pink"), getCss("--yellow"), getCss("--mint"),
    getCss("--sky"), getCss("--grape"), getCss("--tangerine"),
  ];
  const particles = [];
  const N = 140;
  for (let i = 0; i < N; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = 6 + Math.random() * 9;
    particles.push({
      x: originX, y: originY,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed - 6,
      g: 0.35 + Math.random() * 0.15,
      size: 6 + Math.random() * 8,
      rot: Math.random() * Math.PI,
      vr: (Math.random() - 0.5) * 0.4,
      color: colors[Math.floor(Math.random() * colors.length)],
      shape: Math.random() < 0.5 ? "rect" : "circle",
      life: 1,
    });
  }

  let lastTime = performance.now();
  const step = (now) => {
    const dt = Math.min(40, now - lastTime); lastTime = now;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let alive = false;
    particles.forEach((p) => {
      p.vy += p.g;
      p.x += p.vx; p.y += p.vy;
      p.rot += p.vr;
      p.life -= 0.006;
      if (p.life <= 0 || p.y > window.innerHeight + 30) return;
      alive = true;
      ctx.save();
      ctx.translate(p.x, p.y);
      ctx.rotate(p.rot);
      ctx.fillStyle = p.color;
      ctx.strokeStyle = getCss("--ink");
      ctx.lineWidth = 1.5;
      if (p.shape === "rect") {
        ctx.fillRect(-p.size / 2, -p.size / 3, p.size, p.size * 0.6);
        ctx.strokeRect(-p.size / 2, -p.size / 3, p.size, p.size * 0.6);
      } else {
        ctx.beginPath();
        ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
      }
      ctx.restore();
    });
    if (alive) requestAnimationFrame(step);
    else ctx.clearRect(0, 0, canvas.width, canvas.height);
  };
  requestAnimationFrame(step);
};

const getCss = (name) =>
  getComputedStyle(document.documentElement).getPropertyValue(name).trim() || "#000";

/* ---------- Sparkle cursor trail ---------- */
const initCursorTrail = () => {
  const colors = ["--pink", "--yellow", "--mint", "--sky", "--grape", "--tangerine"];
  let lastTime = 0;
  let i = 0;
  const handler = (e) => {
    const now = performance.now();
    if (now - lastTime < 60) return;
    lastTime = now;
    const dot = document.createElement("div");
    dot.className = "trail-dot";
    dot.style.left = (e.clientX - 7) + "px";
    dot.style.top = (e.clientY - 7) + "px";
    dot.style.background = `var(${colors[i++ % colors.length]})`;
    document.body.appendChild(dot);
    setTimeout(() => dot.remove(), 700);
  };
  window.addEventListener("pointermove", handler);
  return () => window.removeEventListener("pointermove", handler);
};

/* ---------- Reveal-on-scroll observer ---------- */
const initReveal = () => {
  const els = document.querySelectorAll(".reveal");
  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("in");
        io.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12 });
  els.forEach((el) => io.observe(el));
  return () => io.disconnect();
};

/* ---------- Image placeholder (sticker style) ----------
   The original site uses Pixar-style illustrations. We don't
   have those assets, so we render labelled placeholder tiles
   with sticker doodles instead — clearly intentional, never
   trying to fake the real artwork. */
const PlaceholderTile = ({ label, bg, stickers = [] }) => (
  <div className="ph-tile" style={{ background: bg }}>
    <div className="ph-stickers">
      {stickers.map((sk, i) => (
        <div key={i} className={"ph-sticker " + (sk.anim || "bob")}
             style={{ ...sk.pos, "--r": (sk.rot || 0) + "deg" }}>
          <Sticker shape={sk.shape} size={sk.size || 70} rot={sk.rot || 0} fill={sk.fill}/>
        </div>
      ))}
    </div>
    <div className="ph-label">{label}</div>
  </div>
);

Object.assign(window, {
  Sticker, fireConfetti, getCss, initCursorTrail, initReveal, PlaceholderTile,
});