// Landing root — Nav, Hero, and section composition

function Nav() {
  const { t: tr } = useLang();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(()=>{
    const onScroll = ()=>setScrolled(window.scrollY > 8);
    onScroll(); window.addEventListener("scroll", onScroll, { passive:true });
    return ()=>window.removeEventListener("scroll", onScroll);
  },[]);
  const items = [
    { l:tr('navFeatures'), h:"#features" },
    { l:tr('navHow'),      h:"#how" },
    { l:tr('navPricing'),  h:"#pricing" },
    { l:tr('navApp'),      h:"/app.html" },
  ];
  return (
    <header className="fixed top-3 left-3 right-3 md:top-4 md:left-1/2 md:right-auto md:-translate-x-1/2 z-40 md:w-[min(1080px,calc(100vw-2rem))]">
      <div className={"rounded-2xl transition-all duration-500 " + (scrolled ? "glass-strong" : "glass") } style={{boxShadow: scrolled?"0 20px 50px -20px rgba(0,0,0,0.6)":"none"}}>
        <div className="px-3 md:px-4 py-2.5 flex items-center gap-2">
          <a href="#" className="flex items-center gap-2 px-1"><Logo/></a>
          <nav className="hidden md:flex items-center gap-1 ml-4">
            {items.map(it=>(
              <a key={it.h} href={it.h} className="px-3 py-1.5 rounded-lg text-[13px] text-white/75 hover:text-white hover:bg-white/[0.05] transition">{it.l}</a>
            ))}
          </nav>
          <div className="ml-auto flex items-center gap-1.5">
            <LangSwitcher/>
            <a href="/login.html" className="hidden sm:inline-flex hairline btn-ghost rounded-xl px-3 py-1.5 text-[12.5px] text-white/85">{tr('navLogin')}</a>
            <a href="/register.html" className="btn-primary rounded-xl px-3.5 py-1.5 text-[12.5px] inline-flex items-center gap-1.5">
              {tr('navCta')} <Icon name="arrow-right" size={12}/>
            </a>
            <button onClick={()=>setOpen(o=>!o)} className="md:hidden ml-1 w-9 h-9 grid place-items-center rounded-lg hairline bg-white/[0.02]">
              <Icon name={open?"x":"menu"} size={15}/>
            </button>
          </div>
        </div>
        {open && (
          <div className="md:hidden border-t border-white/5 p-2 grid grid-cols-2 gap-1">
            {items.map(it=>(
              <a key={it.h} href={it.h} onClick={()=>setOpen(false)} className="px-3 py-2.5 rounded-lg text-[13px] text-white/75 hover:bg-white/5">{it.l}</a>
            ))}
          </div>
        )}
      </div>
    </header>
  );
}

function Hero() {
  const { t: tr } = useLang();
  const heroRef = useRef(null);
  const layer1 = useRef(null);
  const layer2 = useRef(null);
  const layer3 = useRef(null);
  useEffect(()=>{
    const onMove = (e)=>{
      const el = heroRef.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;
      if (layer1.current) layer1.current.style.transform = `translate3d(${x*16}px, ${y*16}px, 0)`;
      if (layer2.current) layer2.current.style.transform = `translate3d(${x*-22}px, ${y*-18}px, 0)`;
      if (layer3.current) layer3.current.style.transform = `translate3d(${x*30}px, ${y*22}px, 0)`;
    };
    window.addEventListener("mousemove", onMove);
    return ()=>window.removeEventListener("mousemove", onMove);
  },[]);

  return (
    <section ref={heroRef} className="relative pt-16 md:pt-40 pb-20">
      <div className="max-w-6xl mx-auto px-6 relative">
        <Reveal>
          <div className="flex justify-center">
            <a href="#features" className="group inline-flex items-center gap-2 px-3 py-1.5 rounded-full hairline bg-white/[0.03] text-[11.5px] text-white/75 backdrop-blur hover:bg-white/[0.06] transition">
              <span className="w-1.5 h-1.5 rounded-full bg-cyan-glow" style={{boxShadow:"0 0 10px #5EE7FF, 0 0 0 3px rgba(94,231,255,0.18)"}}/>
              {tr('heroEyebrow')}
              <Icon name="arrow-right" size={11} className="transition group-hover:translate-x-0.5"/>
            </a>
          </div>
        </Reveal>

        <div style={{display:'flex',justifyContent:'center',marginBottom:40,marginTop:8}}>
          <div style={{position:'relative',width:120,height:120,display:'flex',alignItems:'center',justifyContent:'center'}}>
            <div style={{position:'absolute',width:110,height:110,borderRadius:'50%',border:'1px solid rgba(94,231,255,0.25)',animation:'ring1 5s linear infinite'}}/>
            <div style={{position:'absolute',width:130,height:130,borderRadius:'50%',border:'1px dashed rgba(155,123,255,0.15)',animation:'ring1 8s linear infinite reverse'}}/>
            <svg viewBox="0 0 60 60" fill="none" style={{width:64,height:64,animation:'logoPulse 3s ease-in-out infinite, logoFloat 4s ease-in-out infinite',filter:'drop-shadow(0 0 16px rgba(94,231,255,0.9)) drop-shadow(0 0 32px rgba(94,231,255,0.5))',position:'relative',zIndex:1}}>
              <defs>
                <linearGradient id="ngrad" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stopColor="#5EE7FF"/>
                  <stop offset="50%" stopColor="#7B8FFF"/>
                  <stop offset="100%" stopColor="#9B7BFF"/>
                </linearGradient>
              </defs>
              <path d="M12 48V12L30 38V12M30 38L48 12V48" stroke="url(#ngrad)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
              <line x1="38" y1="52" x2="48" y2="52" stroke="#5EE7FF" strokeWidth="4" strokeLinecap="round"/>
            </svg>
          </div>
        </div>

        <Reveal delay={1}>
          <h1 className="display text-center text-[44px] sm:text-[64px] md:text-[88px] mt-6">
            {tr('heroLine1Pre')}<em>{tr('heroLine1Em')}</em><br/>
            {tr('heroLine2Pre')}<em>{tr('heroLine2Em')}</em>
          </h1>
        </Reveal>

        <Reveal delay={2}>
          <p className="text-center text-white/65 text-[15px] md:text-[17px] max-w-2xl mx-auto mt-6 leading-relaxed">
            {tr('heroSub')}
          </p>
        </Reveal>

        <Reveal delay={3}>
          <div className="mt-8 flex flex-col sm:flex-row justify-center items-stretch sm:items-center gap-3">
            <a href="/register.html" className="btn-primary inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-[14px]">
              <Icon name="rocket" size={15}/> {tr('heroCta')}
            </a>
            <a href="/login.html" className="btn-ghost inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-[14px] hairline text-white/85 bg-white/[0.02]">
              <Icon name="log-in" size={14}/> {tr('heroLogin')}
            </a>
          </div>
        </Reveal>

        <Reveal delay={4}>
          <div className="mt-6 flex items-center justify-center gap-5 text-[11.5px] text-white/45">
            <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-gain shadow-glow-gain"/> {tr('heroNoCard')}</span>
            <span className="hidden sm:flex items-center gap-1.5">{tr('hero14d')}</span>
            <span className="hidden sm:flex items-center gap-1.5">{tr('heroInteg')}</span>
          </div>
        </Reveal>

        <div className="relative mt-16 md:mt-20">
          <div className="absolute -inset-10 rounded-[40px] opacity-60 blur-3xl pointer-events-none" style={{background:"radial-gradient(closest-side, rgba(94,231,255,0.30), rgba(155,123,255,0.25), transparent 70%)"}}/>

          <div/>

          <div ref={layer2} className="hidden md:block absolute left-[2%] top-[15%] transition-transform duration-200 ease-out" style={{animation:"floatY 7s ease-in-out infinite"}}>
            <MockMetric label="Profit Factor" value="2.41" delta="+0.18" up icon="activity"/>
          </div>
          <div ref={layer3} className="hidden md:block absolute right-[2%] top-[26%] transition-transform duration-200 ease-out" style={{animation:"floatY 9s ease-in-out infinite reverse"}}>
            <MockAi/>
          </div>
          <div className="hidden lg:block absolute left-[4%] bottom-[-2%]" style={{animation:"floatY 11s ease-in-out infinite"}}>
            <MockCalendar/>
          </div>
          <div className="hidden lg:block absolute right-[4%] bottom-[2%]" style={{animation:"floatY 13s ease-in-out infinite reverse"}}>
            <MockMetric label="Streak" value="7 days" delta="best 11d" up icon="flame"/>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <LangProvider>
      <Atmosphere/>
      <Nav/>
      <main>
        <Hero/>
        <TrustStrip/>
        <Features/>
        <ProductPreview/>
        <HowItWorks/>
        <Pricing/>
        <FinalCTA/>
      </main>
      <Footer/>
    </LangProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);