// deGold Landing — sections (Hero/Nav/Trust + Mechanics/Calc + FAQ/CTA/Footer)

const { useState: uLS, useEffect: uLE, useRef: uLR, useMemo: uLM } = React;

// ─── Sticky top nav ─────────────────────────────────────
const NavBar = ({onOpen}) => {
  const [scrolled, setScrolled] = uLS(false);
  uLE(()=>{
    const f = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll",f); return ()=>window.removeEventListener("scroll",f);
  },[]);
  return (
    <div style={{position:"sticky",top:0,zIndex:50,background:scrolled?"rgba(243,239,230,0.92)":"var(--paper)",backdropFilter:scrolled?"blur(10px)":"none",borderBottom:scrolled?"1px solid var(--ink)":"1px solid transparent",transition:"border 200ms, background 200ms"}}>
      <div className="wrap" style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"16px 48px"}}>
        <a href="#top" style={{display:"inline-flex",alignItems:"center",textDecoration:"none"}}><Wordmark size={24}/></a>
        <nav className="lp-nav-links" style={{display:"flex",gap:28,fontFamily:"var(--font-mono)",fontSize:12,textTransform:"uppercase",letterSpacing:".08em",color:"var(--ink-4)",whiteSpace:"nowrap"}}>
          <a href="#how">How it works</a>
          <a href="#yield">Yield</a>
          <a href="#proof">Proof of Funds</a>
          <a href="#faq">FAQ</a>
          <a href="#docs" style={{color:"var(--ink)"}}>Docs →</a>
        </nav>
        <div className="lp-nav-cta" style={{display:"flex",gap:10,alignItems:"center"}}>
          <span className="mono lp-nav-meta" style={{fontSize:11,color:"var(--ink-4)"}}><span style={{color:Colors.ox}}>●</span> E-041 · 17.40% APY</span>
          <button onClick={onOpen} style={{padding:"10px 18px",background:"var(--ink)",color:"var(--paper)",border:"none",fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:".08em",textTransform:"uppercase",cursor:"pointer"}}>Enter vault →</button>
        </div>
      </div>
    </div>
  );
};

// ─── HERO ──────────────────────────────────────────────
const LHero = ({onOpen}) => {
  const [t,setT] = uLS(0);
  uLE(()=>{ const i = setInterval(()=>setT(x=>x+1),1000); return ()=>clearInterval(i); },[]);
  // countdown 14d 08:12:04 ticking down
  const remaining = (14*24*3600 + 8*3600 + 12*60 + 4) - t;
  const d = Math.floor(remaining/86400), h = Math.floor(remaining%86400/3600), m = Math.floor(remaining%3600/60), s = remaining%60;
  return (
    <section id="top" className="contour" style={{borderBottom:"1px solid var(--ink)",padding:"60px 0 80px"}}>
      <div className="wrap" style={{padding:"0 48px"}}>
        <div className="mono" style={{fontSize:12,letterSpacing:".1em",textTransform:"uppercase",color:"var(--ink-4)",display:"flex",gap:10,alignItems:"center"}}>
          <span style={{color:Colors.ox}}>●</span> a 36-day gold trade, onchain
          <span>·</span>
          <span>epoch 041 · live on mainnet</span>
        </div>
        <div className="lp-hero-grid" style={{display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:64,alignItems:"start",marginTop:40}}>
          <div>
            <h1 className="lp-h1" style={{fontSize:104,fontWeight:500,letterSpacing:"-0.055em",lineHeight:0.92,maxWidth:860}}>
              Earn <span style={{color:Colors.ox}}>real gold</span>,<br/>
              every 36 days.
            </h1>
            <p style={{marginTop:28,maxWidth:560,fontSize:19,color:"var(--ink-3)",lineHeight:1.5}}>
              Deposit USDT. The vault runs a physical gold arbitrage — Uganda source, Swiss refinery, LBMA exit — and pays yield in PAXG. Target APY <b style={{color:"var(--ink)"}}>12–20%</b>, realised, not promised.
            </p>

            <div style={{display:"flex",gap:14,marginTop:36,flexWrap:"wrap"}}>
              <button onClick={onOpen} style={{padding:"16px 22px",background:Colors.ox,color:"var(--paper)",border:"none",fontFamily:"var(--font-mono)",fontSize:13,letterSpacing:".08em",textTransform:"uppercase",cursor:"pointer"}}>Deposit USDT →</button>
              <a href="#proof" style={{padding:"16px 22px",border:"1px solid var(--ink)",color:"var(--ink)",fontFamily:"var(--font-mono)",fontSize:13,letterSpacing:".08em",textTransform:"uppercase"}}>Read Proof of Funds</a>
            </div>

            <div style={{marginTop:28,display:"flex",gap:22,flexWrap:"wrap",fontFamily:"var(--font-mono)",fontSize:12,color:"var(--ink-4)"}}>
              <span>◆ No KYC</span>
              <span>◆ Non-custodial · ERC-4626</span>
              <span>◆ Audited · Pashov Feb ’26</span>
              <span style={{color:Colors.ox}}>◆ US/CN/RU geoblocked</span>
            </div>
          </div>

          {/* Live vault card */}
          <div style={{border:"1px solid var(--ink)",background:"var(--paper-2)",padding:0,fontFamily:"var(--font-mono)"}}>
            <div style={{padding:"14px 20px",borderBottom:"1px solid var(--ink)",display:"flex",justifyContent:"space-between",fontSize:11,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>
              <span>◆ vault · live</span>
              <span><span style={{color:Colors.ox}}>●</span> block 21,924,114</span>
            </div>
            <div style={{padding:"24px 24px 8px"}}>
              <div style={{fontSize:13,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>current APY · realised</div>
              <div className="lp-apy-num" style={{fontSize:72,letterSpacing:"-.03em",lineHeight:1,marginTop:6}}>17.40<span style={{fontSize:22,color:"var(--ink-4)"}}>%</span></div>
              <div style={{fontSize:13,color:Colors.ox,marginTop:4}}>denominated in PAXG · epoch 041</div>
            </div>
            <div style={{padding:"14px 24px 0",display:"grid",gap:10,fontSize:13,borderTop:"1px solid var(--paper-3)",margin:"14px 24px 0 24px",paddingLeft:0,paddingRight:0}}>
              <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">share price</span><span>1.0273 PAXG</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">TVL</span><span>$4.82M <span style={{color:"var(--ink-5)"}}>/ $5.00M cap</span></span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">next yield</span><span style={{color:Colors.ox}}>{String(d).padStart(2,"0")}d {String(h).padStart(2,"0")}h {String(m).padStart(2,"0")}m {String(s).padStart(2,"0")}s</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">epoch</span><span>22 / 36 days</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">discount to spot</span><span style={{color:Colors.ox}}>-7.9%</span></div>
            </div>
            {/* capacity bar */}
            <div style={{padding:"16px 24px 0"}}>
              <div style={{height:8,background:"var(--paper-3)",position:"relative"}}>
                <div style={{height:"100%",width:"96.4%",background:"var(--ink)"}}/>
              </div>
              <div style={{display:"flex",justifyContent:"space-between",fontSize:11,color:"var(--ink-4)",marginTop:6}}>
                <span>capacity · 96.4% full</span><span style={{color:Colors.ox}}>$180K remaining</span>
              </div>
            </div>
            <button onClick={onOpen} style={{width:"100%",padding:"16px",marginTop:20,background:"var(--ink)",color:"var(--paper)",border:"none",fontFamily:"var(--font-mono)",fontSize:12,letterSpacing:".08em",textTransform:"uppercase",cursor:"pointer"}}>Connect wallet &amp; deposit →</button>
          </div>
        </div>
      </div>

      <div style={{marginTop:60}}>
        <Ticker items={[
          {label:"XAU", value:"$5,307.14 /oz", delta:"+0.42%"},
          {label:"PAXG", value:"$4,689.63", delta:"-1.00%"},
          {label:"vault.share", value:"1.0273 PAXG", delta:"+0.18%"},
          {label:"APY", value:"17.40%"},
          {label:"TVL", value:"$4.82M"},
          {label:"last PoF", value:"E-040 · 14 Apr 2026"},
          {label:"audit", value:"Pashov · clean"},
          {label:"LBMA", value:"8,776 t · $927.5B"},
          {label:"CBs '24", value:"+1,044 t"},
        ]}/>
      </div>
    </section>
  );
};

// ─── Trust bar ────────────────────────────────────────
const TrustBar = () => (
  <section style={{borderBottom:"1px solid var(--ink)",background:"var(--paper)",padding:"28px 0"}}>
    <div className="wrap lp-trust-wrap" style={{padding:"0 48px",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:20}}>
      <div className="mono" style={{fontSize:11,color:"var(--ink-4)",letterSpacing:".1em",textTransform:"uppercase"}}>◆ backed by the infrastructure you already trust</div>
      <div className="lp-trust-logos" style={{display:"flex",gap:48,alignItems:"center",flexWrap:"wrap"}}>
        {[
          ["paxos","Paxos",28],
          ["paxg","PAXG",26],
          ["lbma","LBMA",32],
          ["argor","Argor-Heraeus",24],
          ["fargo","Fargo Srl",36],
          ["pendle","Pendle",24],
        ].map(([f,alt,h])=>(
          <img key={f} src={`assets/logos/${f}.png`} alt={alt} style={{height:h,width:"auto",objectFit:"contain",filter:"grayscale(1) brightness(0.4) contrast(1.2)",opacity:0.8}}/>
        ))}
      </div>
    </div>
  </section>
);

// ─── Why this vault ────────────────────────────────
const Why = () => (
  <section style={{borderBottom:"1px solid var(--ink)",padding:"96px 0"}}>
    <div className="wrap" style={{padding:"0 48px"}}>
      <div className="lp-why-grid" style={{display:"grid",gridTemplateColumns:"1fr 1.6fr",gap:80}}>
        <div>
          <div className="mono" style={{fontSize:12,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>§ why deGold</div>
          <h2 className="lp-h2" style={{fontSize:64,fontWeight:500,letterSpacing:"-0.04em",lineHeight:1,marginTop:14}}>
            Gold, finally <span style={{color:Colors.ox}}>yielding</span>.
          </h2>
          <p style={{marginTop:24,fontSize:16,color:"var(--ink-3)",lineHeight:1.5}}>
            Your PAXG and XAUT hold bars and pay nothing. Your GLD ETF costs 40bps a year just to sit there. We built the only vault that earns gold-denominated yield off a real, physical trade.
          </p>
        </div>
        <div className="lp-why-cards" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:0,border:"1px solid var(--ink)"}}>
          {[
            ["Real physical backing","Every bar is LBMA Good Delivery, serial-listed in the Proof of Funds report.","◆ 995.0 fine"],
            ["Yield in ounces, not dollars","Compounding in PAXG means you’re long gold even if the dollar moves.","◆ PAXG-denom"],
            ["Exit when you need","40-day notice or sell gVault on Uniswap / Pendle any block.","◆ no lockup"],
            ["Documented, every epoch","PoF report signed by the operator’s CFO, onchain + IPFS.","◆ 14 Apr '26"],
          ].map((c,i)=>(
            <div key={i} style={{padding:28,borderRight:i%2===0?"1px solid var(--ink)":"none",borderBottom:i<2?"1px solid var(--ink)":"none"}}>
              <div style={{fontSize:24,fontWeight:500,letterSpacing:"-.02em"}}>{c[0]}</div>
              <div style={{fontSize:14,color:"var(--ink-3)",marginTop:10,lineHeight:1.5}}>{c[1]}</div>
              <div className="mono" style={{fontSize:11,color:Colors.ox,marginTop:14,letterSpacing:".08em",textTransform:"uppercase"}}>{c[2]}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ─── How it works ────────────────────────────────
const HowItWorks = () => (
  <section id="how" style={{borderBottom:"1px solid var(--ink)",padding:"96px 0",background:"var(--paper-2)"}}>
    <div className="wrap" style={{padding:"0 48px"}}>
      <div className="mono" style={{fontSize:12,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>§ how it works</div>
      <h2 className="lp-h2" style={{fontSize:64,fontWeight:500,letterSpacing:"-0.04em",lineHeight:1,marginTop:14,maxWidth:1000}}>
        Your USDT runs the oldest arbitrage in commodities.
      </h2>
      <div className="lp-steps-grid" style={{marginTop:40,display:"grid",gridTemplateColumns:"repeat(6,1fr)",border:"1px solid var(--ink)"}}>
        {[
          ["01","USDT in","You deposit. 1% auto-seeds Uniswap LP for instant exit liquidity.","day 0"],
          ["02","Deploy","Panama SPV wires USDT to Fargo (Milan).","day 1–3"],
          ["03","Source","Licensed Uganda refiner sells at ≈8% discount to spot.","day 4–12"],
          ["04","Refine","Argor-Heraeus (CH) → LBMA Good Delivery bar, serial-stamped.","day 13–24"],
          ["05","Place","Sold to standing buyer book at spot — locked before shipment.","day 25–32"],
          ["06","Return","Margin swapped to PAXG onchain. Yield credited.","day 33–36"],
        ].map((s,i)=>(
          <div key={i} style={{padding:22,borderRight:i<5?"1px solid var(--ink)":"none",background:i%2?"var(--paper-3)":"var(--paper-2)",position:"relative"}}>
            <div className="mono" style={{fontSize:11,color:Colors.ox,letterSpacing:".12em"}}>§ {s[0]}</div>
            <div style={{fontSize:20,fontWeight:500,letterSpacing:"-.02em",marginTop:10}}>{s[1]}</div>
            <div style={{fontSize:13,color:"var(--ink-3)",marginTop:8,lineHeight:1.45}}>{s[2]}</div>
            <div className="mono" style={{fontSize:10,color:"var(--ink-5)",marginTop:14,textTransform:"uppercase",letterSpacing:".1em"}}>◆ {s[3]}</div>
          </div>
        ))}
      </div>
      <div className="mono" style={{fontSize:11,color:"var(--ink-4)",marginTop:14}}>First epoch runs 39 days — 3d deployment + 36d cycle. Every subsequent epoch is 36 days flat.</div>
    </div>
  </section>
);

// ─── Deposit simulator ────────────────────────────────
const Calc = ({onOpen}) => {
  const [amt,setAmt] = uLS(10000);
  const [apy,setApy] = uLS(17.4);
  const [epochs,setEpochs] = uLS(10);
  const epochGain = amt * (apy/100) / (365/36);
  const total = amt * Math.pow(1 + (apy/100)/(365/36), epochs);
  const gain = total - amt;
  return (
    <section id="yield" style={{borderBottom:"1px solid var(--ink)",padding:"96px 0"}}>
      <div className="wrap" style={{padding:"0 48px"}}>
        <div className="mono" style={{fontSize:12,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>§ simulator</div>
        <h2 className="lp-h2" style={{fontSize:64,fontWeight:500,letterSpacing:"-0.04em",lineHeight:1,marginTop:14,maxWidth:1100}}>
          See what <span style={{color:Colors.ox}}>your deposit</span> does.
        </h2>
        <div className="lp-calc-grid" style={{marginTop:48,display:"grid",gridTemplateColumns:"1fr 1.2fr",gap:48}}>
          {/* Controls */}
          <div style={{border:"1px solid var(--ink)",padding:32}}>
            <div style={{marginBottom:28}}>
              <div style={{display:"flex",justifyContent:"space-between",fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>
                <span>deposit · USDT</span><span>${amt.toLocaleString("en-US")}</span>
              </div>
              <input type="range" min="1000" max="500000" step="1000" value={amt} onChange={e=>setAmt(+e.target.value)} style={{width:"100%",marginTop:12,accentColor:Colors.ox}}/>
              <div style={{display:"flex",justifyContent:"space-between",fontFamily:"var(--font-mono)",fontSize:11,color:"var(--ink-5)",marginTop:6}}>
                <span>$1K</span><span>$500K</span>
              </div>
            </div>
            <div style={{marginBottom:28}}>
              <div style={{display:"flex",justifyContent:"space-between",fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>
                <span>APY scenario</span><span>{apy.toFixed(1)}%</span>
              </div>
              <input type="range" min="8" max="22" step="0.5" value={apy} onChange={e=>setApy(+e.target.value)} style={{width:"100%",marginTop:12,accentColor:Colors.ox}}/>
              <div style={{display:"flex",justifyContent:"space-between",fontFamily:"var(--font-mono)",fontSize:11,color:"var(--ink-5)",marginTop:6}}>
                <span>pessimistic 8%</span><span style={{color:Colors.ox}}>current · 17.40%</span><span>bull 22%</span>
              </div>
            </div>
            <div>
              <div style={{display:"flex",justifyContent:"space-between",fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>
                <span>epochs · 36d each</span><span>{epochs} · {(epochs*36/365*12).toFixed(0)} mo</span>
              </div>
              <input type="range" min="1" max="30" step="1" value={epochs} onChange={e=>setEpochs(+e.target.value)} style={{width:"100%",marginTop:12,accentColor:Colors.ox}}/>
              <div style={{display:"flex",justifyContent:"space-between",fontFamily:"var(--font-mono)",fontSize:11,color:"var(--ink-5)",marginTop:6}}>
                <span>1 epoch</span><span>30 · ≈3 yrs</span>
              </div>
            </div>
            <div className="mono" style={{fontSize:11,color:"var(--ink-4)",marginTop:28,paddingTop:20,borderTop:"1px solid var(--paper-3)",lineHeight:1.6}}>
              Auto-compound is default. Returns are paid in PAXG, so your USD value moves with gold price (+ or -). Historical APY: E-01 16.2% · E-02 17.9% · E-03 17.4%.
            </div>
          </div>

          {/* Output */}
          <div style={{background:Colors.ink,color:Colors.paper,border:"1px solid var(--ink)",padding:32,fontFamily:"var(--font-mono)"}}>
            <div style={{fontSize:11,letterSpacing:".08em",textTransform:"uppercase",color:"var(--dk-ink-3)"}}>◆ projected outcome · after {epochs} epochs</div>
            <div className="lp-calc-num" style={{fontSize:84,letterSpacing:"-.04em",lineHeight:1,marginTop:16}}>${total.toLocaleString(undefined,{maximumFractionDigits:0})}</div>
            <div style={{fontSize:22,color:"#D8533A",marginTop:6}}>+${gain.toLocaleString(undefined,{maximumFractionDigits:0})} <span style={{color:"var(--dk-ink-3)"}}>· {(gain/amt*100).toFixed(1)}% total</span></div>

            <div style={{marginTop:32,borderTop:"1px solid var(--dk-line)",paddingTop:20,display:"grid",gap:12,fontSize:14}}>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--dk-ink-3)"}}>per epoch</span><span>+${epochGain.toLocaleString(undefined,{maximumFractionDigits:0})}</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--dk-ink-3)"}}>PAXG at claim</span><span>{(total/4689.63).toFixed(3)} oz</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--dk-ink-3)"}}>fees paid</span><span>${(gain*0.1).toLocaleString(undefined,{maximumFractionDigits:0})} <span style={{color:"var(--dk-ink-3)"}}>· 10% of margin</span></span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--dk-ink-3)"}}>exit notice</span><span>40 days · or DEX any block</span></div>
            </div>

            <button onClick={onOpen} style={{width:"100%",marginTop:32,padding:"18px",background:"#D8533A",color:"#0F0D0B",border:"none",fontFamily:"var(--font-mono)",fontSize:13,letterSpacing:".1em",textTransform:"uppercase",cursor:"pointer",fontWeight:500}}>Deposit ${amt.toLocaleString("en-US")} USDT →</button>
            <div className="mono" style={{fontSize:10,color:"var(--dk-ink-3)",marginTop:12,textAlign:"center"}}>indicative only · not a guarantee · see §11 risks below</div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { NavBar, LHero, TrustBar, Why, HowItWorks, Calc });
