// Shared nav, footer, scroll reveal + shared styles helper for all pages
const { useEffect: useEffS, useState: useSS, useRef: useRS } = React;

// Scroll reveal HOC
function Reveal({ children, delay = 0, y = 24, as: As = "div", style = {}, className = "" }) {
  const ref = useRS(null);
  const [seen, setSeen] = useSS(false);
  useEffS(() => {
    const o = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); o.disconnect(); }
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    if (ref.current) o.observe(ref.current);
    return () => o.disconnect();
  }, []);
  return (
    <As ref={ref} className={className} style={{
      ...style,
      opacity: seen ? 1 : 0,
      transform: seen ? "none" : `translateY(${y}px)`,
      transition: `opacity .7s cubic-bezier(.2,.9,.3,1) ${delay}ms, transform .7s cubic-bezier(.2,.9,.3,1) ${delay}ms`,
    }}>{children}</As>
  );
}

// Shared Nav (used on every page)
function SiteNav({ current = "landing" }) {
  const [scrolled, setScrolled] = useSS(false);
  const [menuOpen, setMenuOpen] = useSS(false);
  useEffS(() => {
    const on = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", on, { passive: true });
    on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [
    { h:"Landing Page.html", l:"Product",   k:"landing" },
    { h:"Features.html",     l:"Features",  k:"features" },
    { h:"Compare.html",      l:"Compare",   k:"compare" },
    { h:"Pricing.html",      l:"Pricing",   k:"pricing" },
    { h:"Prop Firms.html",   l:"Prop Firms", k:"prop" },
    { h:"Blog.html",         l:"Field Notes", k:"blog" },
  ];
  return (
    <>
      <nav className={"nav " + (scrolled ? "nav-scrolled" : "")}>
        <div className="wrap nav-inner">
          <a href="Landing Page.html" className="logo">
            <div className="logo-mark"><span>N</span><span style={{marginLeft:-2}}>Q</span></div>
            <span style={{fontSize:16}}>NikaQuant</span>
          </a>
          <div className="nav-links desk" style={{position:"absolute",left:"50%",transform:"translateX(-50%)"}}>
            {links.map(l => (
              <a key={l.k} href={l.h} style={{color: l.k===current?"var(--tp)":"var(--ts)"}}>{l.l}</a>
            ))}
          </div>
          <div style={{display:"flex",gap:10,alignItems:"center"}}>
            <a href="#" className="desk" style={{fontSize:14,color:"var(--ts)",padding:"8px 14px"}}>Sign in</a>
            <a href="Onboarding.html" className="btn-primary btn-sm" style={{height:40,fontSize:13,padding:"0 18px"}}>
              Start Free <I.arrowRight size={14}/>
            </a>
            <button className="mob-menu" onClick={()=>setMenuOpen(m=>!m)} aria-label="Menu"
              style={{width:40,height:40,borderRadius:10,border:"1px solid var(--b-sub)",background:"rgba(255,255,255,.03)",color:"var(--tp)",display:"none",alignItems:"center",justifyContent:"center"}}>
              <I.menu size={18}/>
            </button>
          </div>
        </div>
      </nav>
      {menuOpen && (
        <div style={{position:"fixed",top:64,left:0,right:0,background:"rgba(10,11,26,.96)",backdropFilter:"blur(16px)",
          borderBottom:"1px solid var(--b-sub)",padding:"20px",zIndex:49,display:"flex",flexDirection:"column",gap:4}}>
          {links.map(l => (
            <a key={l.k} href={l.h} style={{padding:"14px 8px",fontSize:16,color:l.k===current?"var(--teal)":"var(--tp)",borderBottom:"1px solid var(--b-sub)"}}>{l.l}</a>
          ))}
          <a href="#" style={{padding:"14px 8px",fontSize:15,color:"var(--ts)"}}>Sign in</a>
        </div>
      )}
    </>
  );
}

function SiteFooter() {
  const cols = [
    {h:"Product",l:[["Features","Features.html"],["Verdict","Verdict.html"],["Pricing","Pricing.html"],["Prop Firms","Prop Firms.html"],["Compare · Tradezella","Compare.html"]]},
    {h:"Learn",l:[["Field Notes","Blog.html"],["Case studies","Cases.html"],["Verdict methodology","Verdict.html"],["Changelog","Changelog.html"],["Docs","#"]]},
    {h:"Company",l:[["About · Manifesto","About.html"],["Press kit","Press.html"],["Affiliate program","Affiliate.html"],["Careers","#"],["Contact","mailto:hello@nikaquant.com"]]},
    {h:"Legal",l:[["Terms","#"],["Privacy","#"],["Refund policy","#"],["Security","#"],["Disclosures","#"]]},
  ];
  return (
    <footer style={{borderTop:"1px solid var(--b-sub)",padding:"72px 0 40px",background:"rgba(10,11,26,.7)",position:"relative",zIndex:2}}>
      <div className="wrap">
        <div className="foot-grid" style={{display:"grid",gridTemplateColumns:"1.4fr repeat(4,1fr)",gap:40,marginBottom:48}}>
          <div>
            <div className="logo" style={{marginBottom:14}}>
              <div className="logo-mark"><span>N</span><span style={{marginLeft:-2}}>Q</span></div>
              <span style={{fontSize:17}}>NikaQuant</span>
            </div>
            <div style={{fontSize:14,color:"var(--ts)",lineHeight:1.5,marginBottom:20,maxWidth:280}}>
              The command center for retail traders who stopped guessing.
            </div>
            <div style={{display:"flex",gap:8,marginBottom:20}}>
              <input placeholder="your@email" style={{flex:1,padding:"10px 14px",borderRadius:10,background:"rgba(255,255,255,.03)",border:"1px solid var(--b-sub)",color:"var(--tp)",fontSize:13,fontFamily:"inherit",outline:"none"}}/>
              <button className="btn-primary btn-sm" style={{whiteSpace:"nowrap"}}>Updates</button>
            </div>
            <div style={{display:"flex",gap:10}}>
              {["X","YT","DC"].map((s,i)=>(
                <a key={i} href="#" style={{width:34,height:34,borderRadius:9,border:"1px solid var(--b-sub)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,color:"var(--ts)",fontWeight:700,fontFamily:"Space Grotesk"}}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map((c,i)=>(
            <div key={i}>
              <div style={{fontSize:11,letterSpacing:".2em",textTransform:"uppercase",color:"var(--tm)",fontWeight:600,marginBottom:16}}>{c.h}</div>
              <div style={{display:"flex",flexDirection:"column",gap:10}}>
                {c.l.map(([t,h],li)=>(<a key={li} href={h} style={{fontSize:14,color:"var(--ts)"}}>{t}</a>))}
              </div>
            </div>
          ))}
        </div>
        <div style={{paddingTop:26,borderTop:"1px solid var(--b-sub)",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:16}}>
          <div style={{fontSize:12,color:"var(--tm)"}}>© 2026 NikaQuant.</div>
          <div style={{fontSize:12,color:"var(--tm)",fontStyle:"italic"}}>Not financial advice. Trading involves risk.</div>
        </div>
      </div>
    </footer>
  );
}

window.Reveal = Reveal;
window.SiteNav = SiteNav;
window.SiteFooter = SiteFooter;