// Atmosphere + helpers shared across landing sections
const { useState, useEffect, useRef, useMemo, useCallback } = React;

function Icon({ name, size = 16, className = "", strokeWidth = 1.6 }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    ref.current.innerHTML = "";
    const pascal = name.split(/[-_]/).map(w => w[0].toUpperCase() + w.slice(1)).join("");
    const svg = window.lucide?.createElement?.(window.lucide.icons?.[pascal] || window.lucide.icons?.[name] || window.lucide.icons?.Circle);
    if (svg) {
      svg.setAttribute("width", size);
      svg.setAttribute("height", size);
      svg.setAttribute("stroke-width", strokeWidth);
      ref.current.appendChild(svg);
    }
  }, [name, size, strokeWidth]);
  return <span ref={ref} className={"inline-flex shrink-0 " + className} style={{ width: size, height: size }} />;
}

// Cinematic background: layered mesh + beams + particles + grid
function Atmosphere() {
  return (
    <div aria-hidden className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
      {/* Deep base */}
      <div className="absolute inset-0" style={{
        background: "radial-gradient(120% 80% at 50% -10%, #0C0F22 0%, #06070F 55%, #04050A 100%)"
      }}/>

      {/* Animated mesh */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="mesh"/>
      </div>

      {/* Light beams */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="beam" style={{left:"-30%"}}/>
        <div className="beam b2" style={{left:"30%"}}/>
      </div>

      {/* Subtle grid */}
      <div className="absolute inset-0 grid-bg"/>

      {/* Static glowing orbs */}
      <div className="absolute -top-40 -left-40 w-[44rem] h-[44rem] rounded-full opacity-50 blur-3xl" style={{
        background:"radial-gradient(circle, rgba(94,231,255,0.32), transparent 60%)",
        animation:"floatY 14s ease-in-out infinite"
      }}/>
      <div className="absolute top-40 -right-32 w-[40rem] h-[40rem] rounded-full opacity-50 blur-3xl" style={{
        background:"radial-gradient(circle, rgba(155,123,255,0.30), transparent 60%)",
        animation:"floatY 18s ease-in-out infinite reverse"
      }}/>
      <div className="absolute bottom-[-12rem] left-1/3 w-[44rem] h-[44rem] rounded-full opacity-40 blur-3xl" style={{
        background:"radial-gradient(circle, rgba(67,87,255,0.30), transparent 60%)",
        animation:"floatY 22s ease-in-out infinite"
      }}/>

      {/* Particles */}
      <Particles count={42}/>

      {/* Noise */}
      <div className="absolute inset-0 opacity-[0.05] mix-blend-overlay" style={{
        backgroundImage:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>\")"
      }}/>

      {/* Vignette */}
      <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%)" }}/>
    </div>
  );
}

function Particles({ count=40 }) {
  const dots = useMemo(()=>Array.from({length:count}).map((_,i)=>({
    x: Math.random()*100, y: Math.random()*100,
    s: Math.random()*1.6 + 0.4,
    d: Math.random()*10 + 8,
    o: Math.random()*0.5 + 0.18,
    delay: -Math.random()*10,
  })),[count]);
  return (
    <div className="absolute inset-0">
      {dots.map((d,i)=>(
        <span key={i} className="absolute rounded-full" style={{
          left: d.x+"%", top: d.y+"%", width: d.s, height: d.s,
          background:"rgba(255,255,255,0.75)",
          boxShadow:"0 0 6px rgba(255,255,255,0.6)",
          opacity:d.o,
          animation: `floatY ${d.d}s ease-in-out infinite`,
          animationDelay: d.delay+"s"
        }}/>
      ))}
    </div>
  );
}

// Reveal-on-scroll wrapper
function Reveal({ children, delay=0, className="", as:Tag="div", ...rest }) {
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{ if (e.isIntersecting) { el.classList.add("in"); io.unobserve(el); }});
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  return <Tag ref={ref} className={"reveal " + (delay?("d"+delay+" "):"") + className} {...rest}>{children}</Tag>;
}

// 3D tilt-on-hover wrapper
function Tilt({ children, intensity=10, className="", ...rest }) {
  const ref = useRef(null);
  const onMove = (e)=>{
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left)/r.width - 0.5;
    const y = (e.clientY - r.top)/r.height - 0.5;
    el.style.transform = `perspective(800px) rotateX(${-y*intensity}deg) rotateY(${x*intensity}deg) translateZ(0)`;
  };
  const reset = ()=>{ const el = ref.current; if (el) el.style.transform = "perspective(800px) rotateX(0) rotateY(0)"; };
  return (
    <div ref={ref} onMouseMove={onMove} onMouseLeave={reset} className={"tilt " + className} {...rest}>
      {children}
    </div>
  );
}

// Logo lockup
function Logo() {
  return (
    <div className="flex items-center gap-2 select-none">
      <svg viewBox="0 0 40 40" fill="none" style={{width:28,height:28}}>
        <defs>
          <linearGradient id="ngnav" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#5EE7FF"/>
            <stop offset="100%" stopColor="#9B7BFF"/>
          </linearGradient>
        </defs>
        <path d="M8 34V6L20 26V6M20 26L32 6V34" stroke="url(#ngnav)" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" fill="none" style={{filter:'drop-shadow(0 0 6px rgba(94,231,255,0.8))'}}/>
        <line x1="26" y1="37" x2="32" y2="37" stroke="#5EE7FF" strokeWidth="3" strokeLinecap="round"/>
      </svg>
      <div className="leading-tight">
        <div className="text-[15px] font-semibold tracking-tight">NovaRise</div>
        <div className="text-[9.5px] uppercase tracking-[0.22em] text-white/45">Trading OS</div>
      </div>
    </div>
  );
}

window.Icon = Icon;
window.Atmosphere = Atmosphere;
window.Reveal = Reveal;
window.Tilt = Tilt;
window.Logo = Logo;