// 3D hero — abstract glassy orbs orbiting on a soft horizon.
// No people. Built with CSS 3D transforms + requestAnimationFrame.

const { useEffect: useEffH, useRef: useRefH, useState: useStateH } = React;

// Honor the OS-level "reduce motion" preference. Returns true if the user
// has asked for reduced motion (or if matchMedia is unavailable).
const __prefersReducedMotion = () => {
  try {
    return !!(window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches);
  } catch (_) {
    return false;
  }
};

/* ---------- Variation A: Two orbiting glass spheres on horizon ---------- */
function Hero3D_A({
  motion = true,
  primaryHue = "sage",
  accentHue = "terra",
  orbScale = 1,
  position = "right",
} = {}) {
  const stage = useRefH(null);
  const [t, setT] = useStateH(0);

  useEffH(() => {
    if (!motion || __prefersReducedMotion()) return;
    let raf, start = performance.now();
    const tick = (now) => {
      setT((now - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [motion]);

  const a = t * 0.25;
  const ax = Math.sin(a) * 60;
  const ay = Math.cos(a) * 22;
  const bx = Math.sin(a + Math.PI) * 60;
  const by = Math.cos(a + Math.PI) * 22;

  // Anchor the orbit cluster to one side so the headline isn't covered.
  const anchorX = position === "right" ? "78%" : position === "left" ? "22%" : "50%";

  return (
    <div ref={stage} style={{
      position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none",
    }}>
      {/* horizon glow (kept centered) */}
      <div style={{
        position: "absolute", left: anchorX, top: "55%", width: 1100, height: 1100,
        transform: "translate(-50%, -50%)",
        background: `radial-gradient(closest-side, rgba(132,169,140,0.16), rgba(132,169,140,0) 70%)`,
        filter: "blur(20px)",
      }}></div>
      <div style={{
        position: "absolute", left: anchorX, top: "62%", width: 720, height: 720,
        transform: "translate(-50%, -50%)",
        background: `radial-gradient(closest-side, rgba(212,163,115,0.16), rgba(212,163,115,0) 70%)`,
        filter: "blur(30px)",
      }}></div>

      {/* horizon line */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: "62%",
        height: 1, background: "linear-gradient(90deg, transparent, rgba(47,62,70,0.18), transparent)",
      }}></div>

      {/* orb b (back) */}
      <Orb size={280 * orbScale} x={`calc(${anchorX} + ${bx}px)`} y={`calc(58% + ${by}px)`} hue={primaryHue === "sage" ? "ink" : "sage"} depth={-200} blur={1.5} />
      {/* orb a (front, primary) */}
      <Orb size={420 * orbScale} x={`calc(${anchorX} + ${ax}px)`} y={`calc(58% + ${ay}px)`} hue={primaryHue} depth={0} />
      {/* tiny accent */}
      <Orb size={80 * orbScale} x={`calc(${anchorX} + ${Math.sin(a*2.3)*180}px)`} y={`calc(38% + ${Math.cos(a*2.3)*48}px)`} hue={accentHue} depth={-100} />

      {/* grain */}
      <div style={{
        position: "absolute", inset: 0,
        background: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.24  0 0 0 0 0.27  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>\")",
        opacity: 0.18, mixBlendMode: "multiply", pointerEvents: "none"
      }}></div>
    </div>
  );
}

function Orb({ size, x, y, hue = "ink", depth = 0, blur = 0 }) {
  const palette = {
    ink:   { c: "#2F3E46", hi: "#5b727c", sh: "#0f1518" },
    sage:  { c: "#84A98C", hi: "#bcd4c1", sh: "#3f5f49" },
    terra: { c: "#D4A373", hi: "#ecccab", sh: "#7a4f29" },
  }[hue];

  return (
    <div style={{
      position: "absolute",
      left: x, top: y,
      width: size, height: size,
      transform: `translate(-50%, -50%) translateZ(${depth}px)`,
      filter: blur ? `blur(${blur}px)` : "none",
    }}>
      {/* shadow under orb */}
      <div style={{
        position: "absolute", left: "50%", bottom: -size*0.15,
        transform: "translateX(-50%)",
        width: size * 1.05, height: size * 0.16,
        borderRadius: "50%",
        background: "radial-gradient(closest-side, rgba(15,21,24,0.35), rgba(15,21,24,0) 70%)",
        filter: "blur(10px)",
      }}></div>
      {/* sphere */}
      <div style={{
        position: "absolute", inset: 0,
        borderRadius: "50%",
        background: `radial-gradient(circle at 32% 28%, ${palette.hi} 0%, ${palette.c} 38%, ${palette.sh} 100%)`,
        boxShadow: `inset -${size*0.06}px -${size*0.08}px ${size*0.18}px rgba(0,0,0,0.35),
                    inset ${size*0.04}px ${size*0.05}px ${size*0.12}px rgba(255,255,255,0.18)`
      }}></div>
      {/* specular */}
      <div style={{
        position: "absolute", left: "22%", top: "16%",
        width: size * 0.28, height: size * 0.18,
        borderRadius: "50%",
        background: "radial-gradient(closest-side, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%)",
        filter: "blur(2px)",
      }}></div>
      {/* rim */}
      <div style={{
        position: "absolute", inset: 0, borderRadius: "50%",
        boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.05)`,
      }}></div>
    </div>
  );
}

/* ---------- Variation B: Glass arch / portal ---------- */
function Hero3D_B() {
  const [t, setT] = useStateH(0);
  useEffH(() => {
    if (__prefersReducedMotion()) return;
    let raf, start = performance.now();
    const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const wob = Math.sin(t * 0.6) * 6;

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
      {/* warm horizon */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, #F8F9FA 0%, #f1ede5 60%, #e8dfd0 100%)",
      }}></div>

      {/* arch */}
      <div style={{
        position: "absolute", left: "50%", bottom: 0,
        transform: `translateX(-50%) rotate(${wob*0.15}deg)`,
        width: 560, height: 720,
      }}>
        <svg viewBox="0 0 560 720" width="560" height="720" style={{ filter: "drop-shadow(0 30px 60px rgba(47,62,70,0.18))" }}>
          <defs>
            <linearGradient id="archGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#3a4d57"/>
              <stop offset="50%" stopColor="#2F3E46"/>
              <stop offset="100%" stopColor="#1a262d"/>
            </linearGradient>
            <linearGradient id="archHi" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="rgba(255,255,255,0.4)"/>
              <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
            </linearGradient>
          </defs>
          <path d="M 60 720 L 60 280 A 220 220 0 0 1 500 280 L 500 720 L 420 720 L 420 280 A 140 140 0 0 0 140 280 L 140 720 Z" fill="url(#archGrad)"/>
          <path d="M 64 700 L 64 282 A 216 216 0 0 1 100 200" stroke="url(#archHi)" strokeWidth="2" fill="none" />
        </svg>
      </div>

      {/* sage orb floating in archway */}
      <div style={{
        position: "absolute", left: "50%", top: "52%",
        transform: `translate(-50%, -50%) translateY(${wob}px)`,
      }}>
        <Orb size={220} x="0" y="0" hue="sage" depth={0} />
      </div>

      {/* terra accent */}
      <div style={{
        position: "absolute", right: "14%", top: "30%",
      }}>
        <Orb size={70} x="0" y="0" hue="terra" depth={0} />
      </div>

      {/* grid floor */}
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0, height: "30%",
        background: "linear-gradient(180deg, transparent, rgba(47,62,70,0.06))",
      }}></div>
    </div>
  );
}

/* ---------- Variation C: Editorial typographic + small 3D mark ---------- */
function Hero3D_C() {
  const [t, setT] = useStateH(0);
  useEffH(() => {
    if (__prefersReducedMotion()) return;
    let raf, start = performance.now();
    const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const r = t * 18;

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
      {/* paper */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 50% 30%, #ffffff, #F8F9FA 50%, #ECEAE3 100%)",
      }}></div>
      {/* faint rings */}
      <svg viewBox="0 0 800 800" style={{
        position: "absolute", left: "50%", top: "50%",
        width: 1100, height: 1100,
        transform: `translate(-50%, -50%) rotate(${r*0.1}deg)`,
        opacity: 0.7,
      }}>
        {[...Array(8)].map((_, i) => (
          <circle key={i} cx="400" cy="400" r={120 + i*42}
            fill="none" stroke="rgba(47,62,70,0.08)" strokeWidth="1"
            strokeDasharray={i%2 ? "2 6" : "0"} />
        ))}
      </svg>
    </div>
  );
}

Object.assign(window, { Hero3D_A, Hero3D_B, Hero3D_C, Orb });