/* global React */
const { useState: alUseState, useRef: alUseRef, useEffect: alUseEffect } = React;

/* ---------- SPOTLIGHT MANIFESTO ---------- */
/* A dark slab where the cursor is a flashlight revealing hidden copy. */
function Spotlight() {
  const ref = alUseRef(null);
  const [pos, setPos] = alUseState({ x: -1000, y: -1000, has: false });

  alUseEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setPos({ x: e.clientX - r.left, y: e.clientY - r.top, has: true });
    };
    const onLeave = () => setPos((p) => ({ ...p, has: false }));
    const onTouch = (e) => {
      const t = e.touches[0] || e.changedTouches[0];
      if (!t) return;
      const r = el.getBoundingClientRect();
      setPos({ x: t.clientX - r.left, y: t.clientY - r.top, has: true });
    };
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    el.addEventListener("touchstart", onTouch);
    el.addEventListener("touchmove", onTouch);
    return () => {
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("mouseleave", onLeave);
      el.removeEventListener("touchstart", onTouch);
      el.removeEventListener("touchmove", onTouch);
    };
  }, []);

  const maskStyle = pos.has
    ? { WebkitMaskImage: `radial-gradient(circle 240px at ${pos.x}px ${pos.y}px, #000 0%, #000 30%, transparent 75%)`,
                maskImage: `radial-gradient(circle 240px at ${pos.x}px ${pos.y}px, #000 0%, #000 30%, transparent 75%)` }
    : { WebkitMaskImage: "radial-gradient(circle 0px at 50% 50%, #000 0%, transparent 75%)", maskImage: "radial-gradient(circle 0px at 50% 50%, #000 0%, transparent 75%)" };

  return (
    <section className="spotlight" ref={ref} data-cursor="hot" data-label="LOOK CLOSER">
      <div className="spotlight__bg"></div>

      {/* hidden layer — only visible where the cursor is */}
      <div className="spotlight__reveal" style={maskStyle}>
        <div className="wrap">
          <h2 className="spotlight__heading">
            <span>The things</span>
            <span><em>most</em></span>
            <span>studios</span>
            <span>won't</span>
            <span><em>tell you.</em></span>
          </h2>
          <div className="spotlight__grid">
            <p>You'll see <em>two</em> options. Always. The safe one and the loud one. We'll lobby for the loud one.</p>
            <p>We will <em>roast</em> your old website. Kindly. In writing. With timestamps.</p>
            <p>We won't take projects where the answer is already in the brief. That's not design — that's typing.</p>
            <p>Half our work never ships. Some ideas die for a reason. We're okay with that.</p>
            <p>We answer our <em>own</em> emails. There is no junior intern with your strategy deck.</p>
            <p>If we say <em>yes</em>, you are the only client on our table that month. We work in seasons, not sprints.</p>
          </div>
          <div className="spotlight__signature">
            <span className="t-mono">↳ keep moving the light</span>
            <span className="t-serif">— the studio</span>
          </div>
        </div>
      </div>

      {/* the ghost layer underneath — what you see when not pointing */}
      <div className="spotlight__ghost">
        <div className="wrap">
          <span className="eyebrow" style={{ color: "var(--paper)" }}>Move your cursor · reveal</span>
          <h2 className="mega" style={{ marginTop: 18, color: "rgba(244,239,230,0.08)" }}>
            The things<br />
            <span className="t-serif">most</span> studios<br />
            won't <span className="t-serif">tell you.</span>
          </h2>
          <p style={{ color: "rgba(244,239,230,0.4)", maxWidth: 400, marginTop: 24, fontFamily: "var(--f-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em" }}>
            ↳ point the light. read what we whisper.
          </p>
        </div>
      </div>

      {/* the cursor halo */}
      {pos.has && (
        <div
          className="spotlight__halo"
          style={{ left: pos.x, top: pos.y }}
        />
      )}
    </section>
  );
}

/* ---------- STUDIO PULSE — live floating status pill ---------- */
function StudioPulse() {
  const slides = [
    (time) => <><span className="dot dot--mint"></span> <strong>Live in BLR</strong> · {time} IST</>,
    () => <><span className="dot dot--pink"></span> <strong>Now playing</strong> · Sade — <em>Smooth Operator</em></>,
    () => <><span className="dot dot--acid"></span> <strong>This week</strong> · Shipping a brand for a Mumbai fintech</>,
    () => <><span className="dot dot--blue"></span> <strong>Studio temp</strong> · 28°C · the AC is losing</>,
    () => <><span className="dot dot--mint"></span> <strong>Open slots</strong> · 2 left for Q3 2026</>,
    () => <><span className="dot dot--lava"></span> <strong>Currently sketching</strong> · over too much filter coffee</>,
  ];
  const [i, setI] = alUseState(0);
  const [now, setNow] = alUseState("");
  const [open, setOpen] = alUseState(true);

  alUseEffect(() => {
    const fmt = () => {
      const d = new Date();
      const blrOffsetMs = 5.5 * 60 * 60 * 1000;
      const local = new Date(d.getTime() + (d.getTimezoneOffset() * 60000) + blrOffsetMs);
      const hh = String(local.getHours()).padStart(2, "0");
      const mm = String(local.getMinutes()).padStart(2, "0");
      const ss = String(local.getSeconds()).padStart(2, "0");
      setNow(`${hh}:${mm}:${ss}`);
    };
    fmt();
    const t = setInterval(fmt, 1000);
    return () => clearInterval(t);
  }, []);

  alUseEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % slides.length), 3800);
    return () => clearInterval(id);
  }, []);

  if (!open) {
    return (
      <button className="pulse-reopen" onClick={() => setOpen(true)} data-cursor="hot" data-label="OPEN">
        <span className="dot dot--mint"></span> Live
      </button>
    );
  }

  return (
    <div className="pulse" data-cursor="hot" data-label="LIVE">
      <span className="pulse__rec">REC</span>
      <div className="pulse__stage">
        {slides.map((build, idx) => (
          <div key={idx} className={`pulse__slide ${idx === i ? "is-active" : ""}`}>
            {build(now)}
          </div>
        ))}
      </div>
      <button className="pulse__close" onClick={(e) => { e.stopPropagation(); setOpen(false); }} aria-label="Close studio pulse">×</button>
    </div>
  );
}

Object.assign(window, { Spotlight, StudioPulse });