// Landing sections — Trust, Features, Product, Steps, Pricing, CTA, Footer

function TrustStrip() {
  const { t: tr } = useLang();
  const logos = ["FTMO","TopStep","FundedNext","Apex","Earn2Trade","MyForexFunds","FunderPro","Maven","SurgeTrader","City Traders"];
  const stats = [
    { k:tr('trustTraders'), v:"24,300+", c:"#5EE7FF", icon:"users" },
    { k:tr('trustTrades'),  v:"3.2M",    c:"#9B7BFF", icon:"layers" },
    { k:tr('trustWr'),      v:"+9.4%",   c:"#3CFFAE", icon:"trending-up" },
    { k:tr('trustRating'),  v:"4.9 ★",   c:"#FFB46B", icon:"star" },
  ];
  return (
    <section className="relative py-12">
      <div className="max-w-6xl mx-auto px-6">
        <Reveal>
          <div className="text-center">
            <div className="text-[11px] uppercase tracking-[0.24em] text-white/40">{tr('trustHeadline')}</div>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-3">
            {stats.map((s,i)=>(
              <Tilt key={i} intensity={6}>
                <div className="rounded-2xl glass hairline p-4 lift relative overflow-hidden h-full">
                  <div className="absolute -top-12 -right-12 w-28 h-28 rounded-full opacity-50 blur-2xl" style={{background:`radial-gradient(circle, ${s.c}40, transparent 60%)`}}/>
                  <div className="flex items-center gap-2 text-[10px] uppercase tracking-[0.16em] text-white/45">
                    <span className="grid place-items-center w-6 h-6 rounded-md hairline bg-white/[0.03]" style={{color:s.c}}><Icon name={s.icon} size={12}/></span>
                    {s.k}
                  </div>
                  <div className="mt-2 text-[26px] font-semibold tabular tracking-tight">{s.v}</div>
                </div>
              </Tilt>
            ))}
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div className="mt-10 relative overflow-hidden" style={{maskImage:"linear-gradient(90deg, transparent, black 12%, black 88%, transparent)", WebkitMaskImage:"linear-gradient(90deg, transparent, black 12%, black 88%, transparent)"}}>
            <div className="marquee-track flex gap-12 whitespace-nowrap items-center" style={{width:"max-content"}}>
              {[...logos, ...logos].map((l,i)=>(
                <span key={i} className="text-[15px] font-mono tracking-wider text-white/35 hover:text-white/70 transition">{l}</span>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Features() {
  const { t: tr } = useLang();
  const features = [
    { i:"book-open",    title:tr('f1t'), d:tr('f1d'), c:"#5EE7FF", chip:"412 сделок",  spark:_series(20, 31, 0.5, 1) },
    { i:"sparkles",     title:tr('f2t'), d:tr('f2d'), c:"#9B7BFF", chip:"v3.2 · live", spark:_series(20, 32, 0.8, 1.4) },
    { i:"shield-alert", title:tr('f3t'), d:tr('f3d'), c:"#3CFFAE", chip:"SAFE",        spark:_series(20, 33, 0.3, 0.9) },
    { i:"bar-chart-3",  title:tr('f4t'), d:tr('f4d'), c:"#FFB46B", chip:"PF 2.41",     spark:_series(20, 34, 0.6, 1.1) },
    { i:"calendar-days",title:tr('f5t'), d:tr('f5d'), c:"#FF7AA8", chip:"7d streak",   spark:_series(20, 35, 0.4, 1.2) },
    { i:"line-chart",   title:tr('f6t'), d:tr('f6d'), c:"#5EE7FF", chip:"+64 bull",    spark:_series(20, 36, 0.7, 1.3) },
  ];
  return (
    <section id="features" className="relative py-24">
      <div className="max-w-6xl mx-auto px-6">
        <Reveal>
          <div className="max-w-2xl">
            <div className="text-[11px] uppercase tracking-[0.24em] text-white/45">{tr('featEyebrow')}</div>
            <h2 className="display text-[44px] md:text-[56px] mt-3">{tr('featTitle')}</h2>
            <p className="text-white/60 text-[15px] md:text-[16px] mt-4 max-w-xl leading-relaxed">{tr('featSub')}</p>
          </div>
        </Reveal>

        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {features.map((f,i)=>(
            <Reveal key={f.i} delay={(i%3)+1}>
              <Tilt intensity={8}>
                <div className="rounded-2xl glass hairline p-5 lift sweep relative overflow-hidden h-full">
                  <div className="absolute -top-16 -right-16 w-48 h-48 rounded-full opacity-40 blur-3xl" style={{background:`radial-gradient(circle, ${f.c}45, transparent 60%)`}}/>
                  <div className="relative flex items-center gap-2">
                    <span className="w-10 h-10 rounded-xl grid place-items-center hairline" style={{background:`${f.c}15`, color:f.c, boxShadow:`0 0 24px -8px ${f.c}80`}}>
                      <Icon name={f.i} size={18}/>
                    </span>
                    <span className="ml-auto text-[10.5px] font-mono px-2 py-0.5 rounded-md hairline bg-white/[0.03] text-white/65">{f.chip}</span>
                  </div>
                  <div className="relative mt-4 text-[18px] font-medium tracking-tight">{f.title}</div>
                  <div className="relative mt-1.5 text-[13.5px] text-white/60 leading-relaxed">{f.d}</div>
                  <div className="relative mt-4 h-[40px] opacity-80"><MiniSpark values={f.spark} w={300} h={40} up/></div>
                </div>
              </Tilt>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductPreview() {
  const { t: tr } = useLang();
  return (
    <section className="relative py-24">
      <div className="max-w-6xl mx-auto px-6">
        <Reveal>
          <div className="text-center max-w-2xl mx-auto">
            <div className="text-[11px] uppercase tracking-[0.24em] text-white/45">{tr('prodEyebrow')}</div>
            <h2 className="display text-[44px] md:text-[56px] mt-3">{tr('prodTitle')}</h2>
            <p className="text-white/60 text-[15px] md:text-[16px] mt-4 leading-relaxed">{tr('prodSub')}</p>
          </div>
        </Reveal>

        <Reveal delay={2}>
          <div className="relative mt-14">
            <div className="absolute -inset-12 rounded-[40px] opacity-50 blur-3xl pointer-events-none" style={{background:"radial-gradient(closest-side, rgba(94,231,255,0.30), rgba(155,123,255,0.20), transparent 70%)"}}/>

            <div className="relative ring-glow rounded-2xl">
              <BrowserChrome label="novarise.app · dashboard / overview">
                <div className="grid grid-cols-1 lg:grid-cols-[200px_1fr] min-h-[520px]">
                  <div className="border-r border-white/5 p-3 bg-white/[0.015] hidden lg:flex flex-col gap-1">
                    <div className="flex items-center gap-2 px-2 py-1.5">
                      <span className="w-6 h-6 rounded-md" style={{background:"conic-gradient(from 220deg, #5EE7FF, #9B7BFF)"}}/>
                      <div className="leading-tight">
                        <div className="text-[11.5px] font-semibold">NovaRise</div>
                        <div className="text-[8.5px] uppercase tracking-[0.16em] text-white/45">Trading OS</div>
                      </div>
                    </div>
                    <div className="mt-2 hairline rounded-lg flex items-center gap-1.5 px-2 py-1 bg-white/[0.02]">
                      <Icon name="search" size={11} className="text-white/40"/>
                      <span className="text-[10.5px] text-white/45">Поиск</span>
                      <span className="ml-auto text-[8.5px] font-mono text-white/30">⌘K</span>
                    </div>
                    <div className="mt-2 space-y-0.5">
                      {[
                        {i:"layout-dashboard", l:"Главная", active:true},
                        {i:"line-chart", l:"Рынки"},
                        {i:"book-open", l:"Журнал"},
                        {i:"calendar-days", l:"Календарь P&L"},
                        {i:"bar-chart-3", l:"Аналитика"},
                        {i:"shield-alert", l:"Risk"},
                        {i:"target", l:"Планы"},
                        {i:"newspaper", l:"AI Новости"},
                        {i:"sparkles", l:"AI Assistant"},
                      ].map((it,i)=>(
                        <div key={i} className={"flex items-center gap-2 px-2 py-1.5 rounded-md text-[11.5px] transition " + (it.active?"text-white":"text-white/55")} style={it.active?{background:"linear-gradient(180deg, rgba(94,231,255,0.14), rgba(155,123,255,0.08))", boxShadow:"inset 0 0 0 1px rgba(255,255,255,0.08)"}:{}}>
                          <Icon name={it.i} size={12} className={it.active?"text-cyan-glow":""}/> {it.l}
                          {it.active && <span className="ml-auto w-1.5 h-1.5 rounded-full" style={{background:"#5EE7FF", boxShadow:"0 0 8px #5EE7FF"}}/>}
                        </div>
                      ))}
                    </div>
                  </div>

                  <div className="p-4 lg:p-5 space-y-3">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                      <SmallMetric label="Total P&L" value="+$32,041" delta="+27.6%" up icon="trending-up"/>
                      <SmallMetric label="Win Rate" value="68.4%" delta="+2.1%" up icon="target"/>
                      <SmallMetric label="Profit Factor" value="2.41" delta="+0.18" up icon="activity"/>
                      <SmallMetric label="Streak" value="7d" delta="best 11d" up icon="flame"/>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-[1.6fr_1fr] gap-3">
                      <div className="rounded-xl hairline p-4 relative overflow-hidden">
                        <div className="absolute -top-16 -right-10 w-56 h-56 rounded-full opacity-40 blur-3xl pointer-events-none" style={{background:"radial-gradient(circle, rgba(94,231,255,0.4), transparent 60%)"}}/>
                        <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">Equity Curve</div>
                        <div className="mt-1 flex items-end gap-2">
                          <div className="text-[22px] font-semibold tabular">$148,420.<span className="text-white/40 text-[16px]">62</span></div>
                          <div className="mb-1 px-2 py-0.5 rounded-md hairline bg-gain/10 text-gain text-[10.5px] tabular">+27.6%</div>
                        </div>
                        <div className="mt-2 h-[180px]"><MiniArea values={_series(160, 21, 0.7, 1.3)} w={700} h={180}/></div>
                      </div>

                      <div className="rounded-xl hairline p-3">
                        <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">P&L Calendar</div>
                        <div className="mt-2 grid grid-cols-7 gap-1">
                          {Array.from({length:35}).map((_,i)=>{
                            const rng = _rng(i+101)();
                            const has = rng > 0.3;
                            const win = rng > 0.55;
                            const intensity = Math.min(1, rng);
                            const bg = !has ? "rgba(255,255,255,0.03)"
                              : win ? `rgba(60,255,174,${0.18+intensity*0.5})`
                                    : `rgba(255,85,119,${0.18+intensity*0.5})`;
                            return <div key={i} className="aspect-square rounded hairline" style={{background:bg, boxShadow: has?(win?"0 0 8px rgba(60,255,174,0.4)":"0 0 8px rgba(255,85,119,0.4)"):"none"}}/>;
                          })}
                        </div>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                      <div className="rounded-xl hairline p-3">
                        <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">AI News</div>
                        <div className="mt-2 space-y-1.5">
                          {[{t:"BTC reclaims $71K as ETF inflows hit weekly high", s:78, src:"Bloomberg"},{t:"Nvidia raises guidance ahead of GTC keynote", s:82, src:"WSJ"},{t:"ECB hints at June cut amid soft inflation", s:42, src:"FT"}].map((n,i)=>{
                            const c = n.s>=60?"#3CFFAE":n.s>=45?"#5EE7FF":"#FF5577";
                            return (
                              <div key={i} className="text-[11.5px]">
                                <div className="flex items-center text-[9.5px] text-white/40 font-mono uppercase tracking-widest"><span>{n.src}</span><span className="ml-auto" style={{color:c}}>{n.s}</span></div>
                                <div className="text-white/85 leading-snug">{n.t}</div>
                              </div>
                            );
                          })}
                        </div>
                      </div>

                      <div className="rounded-xl hairline p-3">
                        <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">Risk Monitor</div>
                        <div className="mt-2 space-y-2">
                          {[{k:"Daily loss",u:280,m:1000,c:"#3CFFAE"},{k:"Weekly loss",u:1240,m:3000,c:"#5EE7FF"},{k:"Total DD",u:2840,m:5000,c:"#9B7BFF"}].map((it,i)=>(
                            <div key={i}>
                              <div className="flex text-[10.5px] text-white/55"><span>{it.k}</span><span className="ml-auto font-mono">${it.u}/${it.m}</span></div>
                              <div className="mt-0.5 h-1.5 rounded-full bg-white/[0.05] overflow-hidden">
                                <div className="h-full rounded-full" style={{width:(it.u/it.m*100)+"%", background:`linear-gradient(90deg, ${it.c}, ${it.c}80)`, boxShadow:`0 0 8px ${it.c}80`}}/>
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="rounded-xl hairline p-3">
                        <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">Latest Trades</div>
                        <div className="mt-2 space-y-1.5">
                          {[{s:"BTCUSDT",t:"Breakout · Long",p:596,r:2.4,w:true},{s:"NVDA",t:"Momentum · Long",p:260,r:1.8,w:true},{s:"EURUSD",t:"Mean rev · Short",p:120,r:1.2,w:true},{s:"SOLUSDT",t:"Reversal · Long",p:-68,r:-0.9,w:false}].map((trade,i)=>(
                            <div key={i} className="grid grid-cols-[60px_1fr_50px] items-center text-[11px]">
                              <span className="font-mono text-white/85">{trade.s}</span>
                              <span className="text-white/45 truncate">{trade.t}</span>
                              <span className={"text-right font-mono " + (trade.w?"text-gain":"text-loss")}>{(trade.p>0?"+":"")+"$"+Math.abs(trade.p)}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </BrowserChrome>
            </div>

            <div className="hidden md:block absolute -left-6 top-1/3" style={{animation:"floatY 8s ease-in-out infinite"}}><MockAi/></div>
            <div className="hidden md:block absolute -right-6 top-1/4" style={{animation:"floatY 10s ease-in-out infinite reverse"}}><MockRisk/></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HowItWorks() {
  const { t: tr } = useLang();
  const steps = [
    { n:"01", title:tr('s1t'), d:tr('s1d'), i:"link-2",      c:"#5EE7FF" },
    { n:"02", title:tr('s2t'), d:tr('s2d'), i:"book-open",   c:"#9B7BFF" },
    { n:"03", title:tr('s3t'), d:tr('s3d'), i:"sparkles",    c:"#3CFFAE" },
    { n:"04", title:tr('s4t'), d:tr('s4d'), i:"trending-up", c:"#FFB46B" },
  ];
  return (
    <section id="how" className="relative py-24">
      <div className="max-w-6xl mx-auto px-6">
        <Reveal>
          <div className="max-w-2xl">
            <div className="text-[11px] uppercase tracking-[0.24em] text-white/45">{tr('howEyebrow')}</div>
            <h2 className="display text-[44px] md:text-[56px] mt-3">{tr('howTitle')}</h2>
          </div>
        </Reveal>

        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 relative">
          <div className="hidden lg:block absolute top-12 left-[8%] right-[8%] h-px step-line"/>

          {steps.map((s,i)=>(
            <Reveal key={s.n} delay={(i%4)+1}>
              <div className="rounded-2xl glass hairline p-5 lift relative overflow-hidden h-full">
                <div className="absolute -top-20 -right-12 w-44 h-44 rounded-full opacity-40 blur-3xl" style={{background:`radial-gradient(circle, ${s.c}45, transparent 60%)`}}/>
                <div className="flex items-center gap-2">
                  <div className="w-12 h-12 rounded-2xl grid place-items-center hairline relative" style={{background:`${s.c}12`, color:s.c, boxShadow:`0 0 30px -10px ${s.c}80`}}>
                    <Icon name={s.i} size={20}/>
                  </div>
                  <span className="ml-auto font-mono text-[28px] tabular text-white/15 tracking-tight">{s.n}</span>
                </div>
                <div className="mt-4 text-[18px] font-medium tracking-tight">{s.title}</div>
                <div className="mt-1.5 text-[13.5px] text-white/60 leading-relaxed">{s.d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { t: tr } = useLang();
  const tiers = [
    {
      k:tr('tier1'), price:"0", period:"forever",
      d:tr('tier1d'),
      f:["Journal + tags","Basic analytics","P&L Calendar (30 days)","1 MT5 connection"],
      cta:tr('tier1cta'), popular:false, accent:"#5EE7FF", href:"/register.html"
    },
    {
      k:tr('tier2'), price:"19", period:"/mo",
      d:tr('tier2d'),
      f:["Unlimited trades","AI Copilot · Nova v3","Risk Engine + alerts","P&L Calendar · all time","Performance analytics","CSV / HTML import"],
      cta:tr('tier2cta'), popular:true, accent:"#9B7BFF", href:"/register.html"
    },
    {
      k:tr('tier3'), price:"49", period:"/mo",
      d:tr('tier3d'),
      f:["Everything in Pro","Team workspace · up to 10","API + Webhooks","Custom strategies & backtests","Priority support"],
      cta:tr('tier3cta'), popular:false, accent:"#3CFFAE", href:"#"
    },
  ];
  return (
    <section id="pricing" className="relative py-24">
      <div className="max-w-6xl mx-auto px-6">
        <Reveal>
          <div className="text-center max-w-2xl mx-auto">
            <div className="text-[11px] uppercase tracking-[0.24em] text-white/45">{tr('priceEyebrow')}</div>
            <h2 className="display text-[44px] md:text-[56px] mt-3">{tr('priceTitle')}</h2>
            <p className="text-white/60 text-[15px] mt-4">{tr('priceSub')}</p>
          </div>
        </Reveal>

        <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-3 items-stretch">
          {tiers.map((tier,i)=>(
            <Reveal key={i} delay={(i%3)+1}>
              <div className={"relative h-full rounded-2xl p-[1px] " + (tier.popular?"ring-glow":"")}>
                <div className="rounded-2xl glass-strong hairline-strong h-full p-6 relative overflow-hidden flex flex-col">
                  {tier.popular && (
                    <span className="absolute top-4 right-4 text-[10px] uppercase tracking-[0.16em] px-2 py-1 rounded-md" style={{background:"linear-gradient(135deg, #5EE7FF, #9B7BFF)", color:"#06070F", fontWeight:600}}>{tr('popular')}</span>
                  )}
                  <div className="absolute -top-24 -right-24 w-72 h-72 rounded-full opacity-50 blur-3xl pointer-events-none" style={{background:`radial-gradient(circle, ${tier.accent}45, transparent 60%)`}}/>

                  <div className="relative">
                    <div className="text-[12px] uppercase tracking-[0.18em] text-white/55">{tier.k}</div>
                    <div className="mt-3 flex items-baseline gap-1">
                      <span className="text-[11px] text-white/45">$</span>
                      <span className="text-[44px] font-semibold tabular tracking-tight">{tier.price}</span>
                      <span className="text-[12.5px] text-white/45 ml-1">{tier.period}</span>
                    </div>
                    <div className="text-[13px] text-white/60 mt-2 leading-relaxed">{tier.d}</div>
                  </div>

                  <ul className="relative mt-5 space-y-1.5 flex-1">
                    {tier.f.map((feat,j)=>(
                      <li key={j} className="flex items-start gap-2 text-[13px] text-white/80">
                        <span className="mt-0.5 w-4 h-4 rounded-full grid place-items-center shrink-0" style={{background:`${tier.accent}22`, color:tier.accent}}>
                          <Icon name="check" size={10}/>
                        </span>
                        {feat}
                      </li>
                    ))}
                  </ul>

                  <a href={tier.href} className={"relative mt-6 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-[13px] " + (tier.popular?"btn-primary":"hairline btn-ghost text-white")}>
                    {tier.cta} <Icon name="arrow-right" size={13}/>
                  </a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const { t: tr } = useLang();
  return (
    <section className="relative py-24">
      <div className="max-w-5xl mx-auto px-6">
        <Reveal>
          <div className="relative rounded-3xl overflow-hidden p-10 md:p-16 text-center hairline-strong" style={{background:"linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015))"}}>
            <div className="absolute -top-40 left-1/2 -translate-x-1/2 w-[36rem] h-[36rem] rounded-full opacity-50 blur-3xl pointer-events-none" style={{background:"radial-gradient(circle, rgba(94,231,255,0.45), rgba(155,123,255,0.30), transparent 60%)"}}/>
            <div className="absolute inset-0 grid-bg pointer-events-none"/>

            <div className="relative mx-auto w-20 h-20 rounded-full orb" style={{boxShadow:"0 0 80px rgba(94,231,255,0.6), 0 0 120px rgba(155,123,255,0.4)"}}/>
            <div className="relative text-[11px] uppercase tracking-[0.24em] text-white/45 mt-6">{tr('ctaEyebrow')}</div>
            <h2 className="display relative text-[40px] md:text-[60px] mt-3">{tr('ctaTitle')}</h2>
            <p className="relative text-white/65 max-w-xl mx-auto mt-4 text-[15px] leading-relaxed">{tr('ctaSub')}</p>

            <div className="relative mt-7 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('ctaBtn')}
              </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">
                <Icon name="log-in" size={14}/> {tr('ctaBtnSub')}
              </a>
            </div>

            <div className="relative mt-6 flex items-center justify-center gap-5 text-[11px] text-white/45 font-mono">
              <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-gain shadow-glow-gain"/> {tr('ctaLive')}</span>
              <span>·</span>
              <span>{tr('cta14d')}</span>
              <span>·</span>
              <span>{tr('ctaCancel')}</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const { t: tr } = useLang();
  const cols = [
    { heading:tr('ftProduct'),  links:[[tr('ftFeatures'),"#features"],[tr('ftHow'),"#how"],[tr('navPricing'),"#pricing"],[tr('navApp'),"/app.html"]] },
    { heading:tr('ftCompany'),  links:[[tr('ftAbout'),"#"],[tr('ftBlog'),"#"],[tr('ftCareers'),"#"],[tr('ftPress'),"#"]] },
    { heading:tr('ftSupport'),  links:[[tr('ftDocs'),"#"],[tr('ftStatus'),"#"],[tr('ftContact'),"#"],[tr('ftDiscord'),"#"]] },
  ];
  return (
    <footer className="relative pt-16 pb-10">
      <div className="max-w-6xl mx-auto px-6">
        <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
          <div className="col-span-2">
            <Logo/>
            <p className="text-white/55 text-[13px] mt-3 max-w-xs leading-relaxed">{tr('ftDesc')}</p>
            <div className="mt-4 flex gap-2">
              {["twitter","github","youtube","linkedin"].map(s=>(
                <a key={s} href="#" className="w-9 h-9 hairline rounded-lg grid place-items-center text-white/55 hover:text-white hover:bg-white/[0.05] transition"><Icon name={s} size={14}/></a>
              ))}
            </div>
          </div>
          {cols.map(col=>(
            <div key={col.heading}>
              <div className="text-[10.5px] uppercase tracking-[0.2em] text-white/45 mb-3">{col.heading}</div>
              <ul className="space-y-1.5 text-[13px]">
                {col.links.map(([n,h])=><li key={n}><a href={h} className="text-white/65 hover:text-white transition">{n}</a></li>)}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 pt-6 border-t border-white/5 flex flex-wrap items-center gap-3 text-[12px] text-white/40">
          <span>{tr('ftCopy')}</span>
          <span className="ml-auto flex gap-4">
            <a href="#" className="hover:text-white">Terms</a>
            <a href="#" className="hover:text-white">Privacy</a>
            <a href="#" className="hover:text-white">Security</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.TrustStrip = TrustStrip;
window.Features = Features;
window.ProductPreview = ProductPreview;
window.HowItWorks = HowItWorks;
window.Pricing = Pricing;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
window.SmallMetric = SmallMetric;