// bg-ui.jsx — animated background, glass icons, device frames, reveal/glow hooks
const { useEffect, useRef, useState, useCallback } = React;

/* ----------------------------------------------------------------
   Animated multi-mesh gradient background
----------------------------------------------------------------- */
function Background(){
  return (
    React.createElement(React.Fragment, null,
      React.createElement("div", { className: "bg-root" },
        React.createElement("div", { className: "bg-blob b1" }),
        React.createElement("div", { className: "bg-blob b2" }),
        React.createElement("div", { className: "bg-blob b3" }),
        React.createElement("div", { className: "bg-blob b4" }),
      ),
      React.createElement("div", { className: "bg-vignette" }),
      React.createElement("div", { className: "bg-grain" }),
    )
  );
}

/* ----------------------------------------------------------------
   Reveal-on-scroll hook (IntersectionObserver)
----------------------------------------------------------------- */
function useReveal(){
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting){ e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.14, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ----------------------------------------------------------------
   Cursor-follow glow — attach to a .glow-card element
----------------------------------------------------------------- */
function glowMove(e){
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty("--mx", ((e.clientX - r.left) / r.width * 100) + "%");
  e.currentTarget.style.setProperty("--my", ((e.clientY - r.top) / r.height * 100) + "%");
}

/* ----------------------------------------------------------------
   Glass icon tile — chunky, 3D-ish, with glowing blob behind glyph
   glyphs are built from simple geometric shapes (no clip-art)
----------------------------------------------------------------- */
const GLYPHS = {
  web: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("rect", { x: 3, y: 6, width: 28, height: 22, rx: 4, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("line", { x1: 3, y1: 13, x2: 31, y2: 13, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("circle", { cx: 7.5, cy: 9.5, r: 1.2, fill: "#fff" }),
      React.createElement("circle", { cx: 11.5, cy: 9.5, r: 1.2, fill: "#fff" }),
    )
  ),
  mobile: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("rect", { x: 9, y: 3, width: 16, height: 28, rx: 4, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("line", { x1: 14, y1: 27, x2: 20, y2: 27, stroke: "#fff", strokeWidth: 2, strokeLinecap: "round" }),
    )
  ),
  desktop: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("rect", { x: 3, y: 5, width: 28, height: 18, rx: 3, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("line", { x1: 12, y1: 28, x2: 22, y2: 28, stroke: "#fff", strokeWidth: 2, strokeLinecap: "round" }),
      React.createElement("line", { x1: 17, y1: 23, x2: 17, y2: 28, stroke: "#fff", strokeWidth: 2 }),
    )
  ),
  link: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("circle", { cx: 11, cy: 11, r: 6, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("circle", { cx: 23, cy: 23, r: 6, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("line", { x1: 15, y1: 15, x2: 19, y2: 19, stroke: "#fff", strokeWidth: 2, strokeLinecap: "round" }),
    )
  ),
  bars: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("rect", { x: 5, y: 18, width: 6, height: 11, rx: 1.5, fill: "#fff" }),
      React.createElement("rect", { x: 14, y: 11, width: 6, height: 18, rx: 1.5, fill: "#fff" }),
      React.createElement("rect", { x: 23, y: 5, width: 6, height: 24, rx: 1.5, fill: "#fff" }),
    )
  ),
  spark: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("path", { d: "M17 3 L20 14 L31 17 L20 20 L17 31 L14 20 L3 17 L14 14 Z", fill: "#fff" }),
    )
  ),
  bolt: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("path", { d: "M19 3 L8 19 H16 L14 31 L26 14 H18 Z", fill: "#fff" }),
    )
  ),
  grid: (
    React.createElement("svg", { width: 34, height: 34, viewBox: "0 0 34 34", fill: "none" },
      React.createElement("rect", { x: 4, y: 4, width: 11, height: 11, rx: 3, fill: "#fff" }),
      React.createElement("rect", { x: 19, y: 4, width: 11, height: 11, rx: 3, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("rect", { x: 4, y: 19, width: 11, height: 11, rx: 3, stroke: "#fff", strokeWidth: 2 }),
      React.createElement("rect", { x: 19, y: 19, width: 11, height: 11, rx: 3, fill: "#fff" }),
    )
  ),
};

function GlassIcon({ glyph = "web", tint = "var(--primary)", size = 72 }){
  return (
    React.createElement("div", { className: "gicon", style: { width: size, height: size } },
      React.createElement("span", { className: "blob", style: { background: tint } }),
      React.createElement("span", { className: "glyph" }, GLYPHS[glyph]),
    )
  );
}

Object.assign(window, { Background, useReveal, glowMove, GlassIcon, GLYPHS });