// deGold Pitch Deck — slide components (Part 1: 01-07)

const { useEffect: uE, useState: uS } = React;

// Shared chrome
const SlideChrome = ({num, total=13, section, children, bg="var(--paper)", ink="var(--ink)"}) => (
  <div style={{width:"100%",height:"100%",background:bg,color:ink,fontFamily:"var(--font-sans)",position:"relative",padding:"72px 96px 60px",display:"flex",flexDirection:"column"}}>
    {/* top bar */}
    <div style={{position:"absolute",top:28,left:96,right:96,display:"flex",justifyContent:"space-between",alignItems:"center",fontFamily:"var(--font-mono)",fontSize:14,letterSpacing:".08em",textTransform:"uppercase",color:bg===Colors.ink?"var(--dk-ink-3)":"var(--ink-4)"}}>
      <Wordmark size={22} color={ink}/>
      <span>◆ {section}</span>
      <span>§ {String(num).padStart(2,"0")} / {String(total).padStart(2,"0")}</span>
    </div>
    <div style={{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",paddingTop:24}}>
      {children}
    </div>
    {/* bottom bar */}
    <div style={{position:"absolute",bottom:28,left:96,right:96,display:"flex",justifyContent:"space-between",fontFamily:"var(--font-mono)",fontSize:13,color:bg===Colors.ink?"var(--dk-ink-3)":"var(--ink-5)"}}>
      <span>DGB · pitch · edition 01 · Apr 2026</span>
      <span>degold.capital</span>
      <span>confidential · for discussion</span>
    </div>
  </div>
);

const Colors = { paper:"#F3EFE6", paper2:"#EAE4D6", ink:"#141210", ox:"#7A1F14", pos:"#3B5A2A" };

// ─── Slide 01 · TITLE ─────────────────────────────────────
const S01 = () => (
  <div className="contour" style={{width:"100%",height:"100%",background:Colors.paper,color:Colors.ink,fontFamily:"var(--font-sans)",position:"relative",padding:"72px 96px 60px",display:"flex",flexDirection:"column"}}>
    <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",fontFamily:"var(--font-mono)",fontSize:14,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>
      <Wordmark size={26}/>
      <span>Series Seed · deck · Apr 2026</span>
    </div>
    <div style={{flex:1,display:"grid",gridTemplateColumns:"1.5fr 1fr",gap:80,alignItems:"center"}}>
      <div>
        <div className="mono" style={{fontSize:16,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>a 36-day gold trade, onchain</div>
        <h1 style={{fontSize:172,fontWeight:500,letterSpacing:"-0.06em",lineHeight:0.9,marginTop:24}}>
          Real gold.<br/>Real <span style={{color:Colors.ox}}>yield</span>.
        </h1>
        <p style={{marginTop:40,maxWidth:760,fontSize:24,color:"var(--ink-3)",lineHeight:1.4}}>
          The first onchain vault that pays gold-denominated yield by running a physical bullion arbitrage — Uganda source, Swiss refinery, LBMA exit. Returns in PAXG, every 36 days.
        </p>
      </div>
      <div style={{border:"1px solid var(--ink)",padding:28,fontFamily:"var(--font-mono)",background:"var(--paper-2)"}}>
        <div style={{fontSize:13,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase",borderBottom:"1px solid var(--ink)",paddingBottom:12,marginBottom:16}}>◆ raising</div>
        <div style={{fontSize:64,letterSpacing:"-.03em",lineHeight:1}}>$2.0M</div>
        <div style={{fontSize:14,color:"var(--ink-4)",marginTop:6}}>SAFE · $18M post-cap</div>
        <div style={{marginTop:24,display:"grid",gap:10,fontSize:14}}>
          <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">use · dev</span><span>45%</span></div>
          <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">use · legal</span><span>20%</span></div>
          <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">use · LP seed</span><span>25%</span></div>
          <div style={{display:"flex",justifyContent:"space-between"}}><span className="dim">use · ops</span><span>10%</span></div>
        </div>
      </div>
    </div>
    <div style={{fontFamily:"var(--font-mono)",fontSize:13,color:"var(--ink-5)",display:"flex",justifyContent:"space-between"}}>
      <span>deck · 13 slides · 12 minutes</span>
      <span>◆ for counterparty + investor review</span>
      <span>spv · panama · s.a.</span>
    </div>
  </div>
);

// ─── Slide 02 · PROBLEM ─────────────────────────────────
const S02 = () => (
  <SlideChrome num={2} section="problem">
    <div className="mono" style={{fontSize:16,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>§02 · the problem</div>
    <h2 style={{fontSize:108,fontWeight:500,letterSpacing:"-0.05em",lineHeight:0.95,marginTop:20,maxWidth:1500}}>
      $5B of tokenized gold sits idle — tracking spot, paying <span style={{color:Colors.ox}}>nothing</span>.
    </h2>
    <div style={{marginTop:56,display:"grid",gridTemplateColumns:"repeat(4,1fr)",border:"1px solid var(--ink)"}}>
      {[
        ["PAXG","$2.38B","0% yield","holds bar, tracks spot"],
        ["XAUT","$1.40B","0% yield","same product, Tether issuer"],
        ["Matrixdock XAUm","$430M","0% yield","same product, APAC"],
        ["the rest","$800M+","0% yield","minor issuers"],
      ].map((r,i)=>(
        <div key={i} style={{padding:28,borderRight:i<3?"1px solid var(--ink)":"none",background:i%2?"var(--paper-2)":"var(--paper)"}}>
          <div className="mono" style={{fontSize:13,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>{r[0]}</div>
          <div style={{fontSize:42,fontWeight:500,letterSpacing:"-.02em",marginTop:10}}>{r[1]}</div>
          <div className="mono" style={{fontSize:16,color:Colors.ox,marginTop:4}}>{r[2]}</div>
          <div style={{fontSize:15,color:"var(--ink-3)",marginTop:10,lineHeight:1.4}}>{r[3]}</div>
        </div>
      ))}
    </div>
    <div style={{marginTop:44,display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:32}}>
      {[
        ["Meanwhile, DeFi","pays 4–14% on stables, 8–14% on private credit — none on gold."],
        ["Meanwhile, TradFi","charges 40 bps/yr to hold your gold ETF. GLD pays -0.40%."],
        ["Meanwhile, gold","ran from $2,630 to $5,300 in 15 months. Central banks bought 1,044 t."],
      ].map((c,i)=>(
        <div key={i} style={{borderTop:"1px solid var(--ink)",paddingTop:16}}>
          <div className="mono" style={{fontSize:12,letterSpacing:".08em",textTransform:"uppercase",color:"var(--ink-4)"}}>{c[0]}</div>
          <div style={{fontSize:20,color:"var(--ink-2)",marginTop:8,lineHeight:1.4}}>{c[1]}</div>
        </div>
      ))}
    </div>
  </SlideChrome>
);

// ─── Slide 03 · SOLUTION ─────────────────────────────────
const S03 = () => (
  <SlideChrome num={3} section="solution">
    <div className="mono" style={{fontSize:16,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>§03 · the solution</div>
    <h2 style={{fontSize:108,fontWeight:500,letterSpacing:"-0.05em",lineHeight:0.95,marginTop:20}}>
      A vault that <span style={{color:Colors.ox}}>earns</span> gold,<br/>not one that stores it.
    </h2>
    <p style={{marginTop:32,maxWidth:1300,fontSize:24,color:"var(--ink-3)",lineHeight:1.4}}>
      Deposit USDT. The vault deploys capital into a documented physical arbitrage — the same trade commodities desks have run for decades. Margin returns as PAXG, every epoch. You hold gold exposure <em style={{fontStyle:"normal",color:Colors.ox}}>plus</em> a 12–20% yield, in ounces.
    </p>
    <div style={{marginTop:60,display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0,border:"1px solid var(--ink)"}}>
      {[
        ["ERC-4626","standard vault · composable with Pendle, Morpho, Uniswap"],
        ["Permissionless","no KYC · address-screened onchain · geoblocked US/CN/RU"],
        ["PAXG yield","real ounces · not synthetic · claim or auto-compound"],
        ["36-day epochs","transparent cycle · PoF report per epoch · exit via notice or DEX"],
      ].map((c,i)=>(
        <div key={i} style={{padding:28,borderRight:i<3?"1px solid var(--ink)":"none"}}>
          <div className="mono" style={{fontSize:13,color:Colors.ox,letterSpacing:".08em",textTransform:"uppercase"}}>§ 03.{String(i+1).padStart(2,"0")}</div>
          <div style={{fontSize:30,fontWeight:500,letterSpacing:"-.02em",marginTop:12}}>{c[0]}</div>
          <div style={{fontSize:16,color:"var(--ink-3)",marginTop:10,lineHeight:1.4}}>{c[1]}</div>
        </div>
      ))}
    </div>
  </SlideChrome>
);

// ─── Slide 04 · HOW IT WORKS ─────────────────────────────
const S04 = () => (
  <SlideChrome num={4} section="mechanics">
    <div className="mono" style={{fontSize:16,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>§04 · the cycle</div>
    <h2 style={{fontSize:72,fontWeight:500,letterSpacing:"-0.035em",lineHeight:1,marginTop:16}}>
      Six steps. 36 days. One margin.
    </h2>
    <div style={{marginTop:44,display:"grid",gridTemplateColumns:"repeat(6,1fr)",border:"1px solid var(--ink)"}}>
      {[
        ["01","USDT in","Wallet → vault. 1% auto-routes to Uniswap LP.","day 0"],
        ["02","Deploy","Vault → Panama SPV → Fargo Srl (IT). USDT wire.","day 1–3"],
        ["03","Source","Uganda licensed refinery. -8% to spot. Receipts signed.","day 4–12"],
        ["04","Refine","Argor-Heraeus, Switzerland. LBMA Good Delivery. SN report.","day 13–24"],
        ["05","Place","Standing buyer book. Spot-price exit. Funds to SPV.","day 25–32"],
        ["06","Return","Margin converts to PAXG onchain. Yield distributed.","day 33–36"],
      ].map((s,i)=>(
        <div key={i} style={{padding:24,borderRight:i<5?"1px solid var(--ink)":"none",background:i%2===0?"var(--paper)":"var(--paper-2)",position:"relative"}}>
          <div className="mono" style={{fontSize:14,color:Colors.ox,letterSpacing:".1em"}}>§ {s[0]}</div>
          <div style={{fontSize:26,fontWeight:500,letterSpacing:"-.02em",marginTop:14}}>{s[1]}</div>
          <div style={{fontSize:14,color:"var(--ink-3)",marginTop:10,lineHeight:1.4}}>{s[2]}</div>
          <div className="mono" style={{fontSize:12,color:"var(--ink-5)",marginTop:14,textTransform:"uppercase",letterSpacing:".08em"}}>◆ {s[3]}</div>
        </div>
      ))}
    </div>
    <div style={{marginTop:36,display:"grid",gridTemplateColumns:"1fr 1fr 1fr 1fr",gap:0,border:"1px solid var(--ink)",background:Colors.ink,color:Colors.paper}}>
      {[
        ["Target margin","11–18%","per epoch · gross"],
        ["Operator fee","1.5%","of deployed capital"],
        ["Protocol fee","10%","of realised margin"],
        ["Depositor APY","12–20%","denominated in PAXG"],
      ].map((c,i)=>(
        <div key={i} style={{padding:24,borderRight:i<3?"1px solid var(--dk-line)":"none"}}>
          <div className="mono" style={{fontSize:12,color:"var(--dk-ink-3)",letterSpacing:".08em",textTransform:"uppercase"}}>{c[0]}</div>
          <div style={{fontSize:40,color:"var(--dk-ink)",marginTop:10,fontFamily:"var(--font-mono)",letterSpacing:"-.02em"}}>{c[1]}</div>
          <div className="mono" style={{fontSize:13,color:"var(--dk-ink-3)",marginTop:4}}>{c[2]}</div>
        </div>
      ))}
    </div>
  </SlideChrome>
);

// ─── Slide 05 · MARKET ────────────────────────────────
const S05 = () => (
  <SlideChrome num={5} section="market">
    <div className="mono" style={{fontSize:16,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>§05 · market</div>
    <h2 style={{fontSize:96,fontWeight:500,letterSpacing:"-0.045em",lineHeight:0.95,marginTop:20}}>
      Two charts. One <span style={{color:Colors.ox}}>collision</span>.
    </h2>
    <div style={{marginTop:44,display:"grid",gridTemplateColumns:"1fr 1fr",gap:40}}>
      <div style={{border:"1px solid var(--ink)",padding:28}}>
        <div className="mono" style={{fontSize:13,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>◆ gold · spot · 15 months</div>
        <div style={{fontSize:48,fontWeight:500,marginTop:8,fontFamily:"var(--font-mono)"}}>$5,307 <span style={{color:Colors.pos,fontSize:18}}>+102%</span></div>
        <svg viewBox="0 0 600 200" style={{width:"100%",marginTop:14}}>
          {[1.0,1.1,1.05,1.18,1.3,1.25,1.4,1.5,1.46,1.6,1.72,1.68,1.82,1.92,2.02].map((v,i,a)=>{
            if(i===0)return null;
            const x1=(i-1)/(a.length-1)*600,x2=i/(a.length-1)*600;
            const y1=200-(a[i-1]-1)*180,y2=200-(v-1)*180;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={Colors.ink} strokeWidth="2"/>;
          })}
          <line x1="0" y1="200" x2="600" y2="200" stroke="var(--paper-3)"/>
          <text x="4" y="194" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-4)">Jan '25 · $2,630</text>
          <text x="520" y="14" fontFamily="var(--font-mono)" fontSize="10" fill={Colors.ox}>Apr '26 · $5,307</text>
        </svg>
        <div style={{fontSize:17,color:"var(--ink-3)",marginTop:14,lineHeight:1.4}}>Central banks bought <b>1,044 t</b> in 2024 — the third consecutive year over 1,000 t. Poland (NBP) alone added <b>151 t</b> net.</div>
      </div>
      <div style={{border:"1px solid var(--ink)",padding:28}}>
        <div className="mono" style={{fontSize:13,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>◆ RWA onchain · total</div>
        <div style={{fontSize:48,fontWeight:500,marginTop:8,fontFamily:"var(--font-mono)"}}>$35.8B <span style={{color:Colors.pos,fontSize:18}}>+224% vs '24</span></div>
        <div style={{marginTop:18,display:"grid",gap:10}}>
          {[["Private credit",14.5,"$14.5B"],["Treasuries",7.8,"$7.8B"],["Gold",5.0,"$5.0B"],["Equities",0.7,"$0.7B"],["Other",7.8,"$7.8B"]].map(r=>(
            <div key={r[0]} style={{display:"grid",gridTemplateColumns:"130px 1fr 90px",gap:10,alignItems:"center",fontFamily:"var(--font-mono)",fontSize:14}}>
              <span>{r[0]}</span>
              <div style={{height:16,background:"var(--paper-3)"}}><div style={{height:"100%",width:`${r[1]/15*100}%`,background:r[0]==="Gold"?Colors.ox:Colors.ink}}/></div>
              <span style={{textAlign:"right"}}>{r[2]}</span>
            </div>
          ))}
        </div>
        <div style={{fontSize:17,color:"var(--ink-3)",marginTop:14,lineHeight:1.4}}>Gold is the only top-five category paying <b style={{color:Colors.ox}}>no yield</b>. We are the first product that fixes that.</div>
      </div>
    </div>
    <div className="mono" style={{marginTop:18,fontSize:13,color:"var(--ink-5)"}}>SRC · LBMA Q2 2025, World Gold Council, RWA.xyz (Apr 2026), CoinGecko, CoinMarketCap, State of RWA 2025.</div>
  </SlideChrome>
);

// ─── Slide 06 · WHY NOW ────────────────────────────────
const S06 = () => (
  <SlideChrome num={6} section="why now" bg={Colors.ink} ink={Colors.paper}>
    <div className="mono" style={{fontSize:16,color:"var(--dk-ink-3)",letterSpacing:".08em",textTransform:"uppercase"}}>§06 · why now</div>
    <h2 style={{fontSize:132,fontWeight:500,letterSpacing:"-0.05em",lineHeight:0.9,marginTop:20,color:Colors.paper}}>
      Every window<br/>is open at once.
    </h2>
    <div style={{marginTop:56,display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0,border:"1px solid var(--dk-line)"}}>
      {[
        ["Macro","Gold at all-time highs. CBs net-buying year 3.","$5,307/oz"],
        ["Regulatory","Panama SPV + ERC-4626 · clean precedent.","clear"],
        ["Infra","Pendle, Morpho, Uniswap v4 ready for RWA yield.","live"],
        ["Supply","African refiner discount persists post-sanctions.","-8%"],
      ].map((c,i)=>(
        <div key={i} style={{padding:28,borderRight:i<3?"1px solid var(--dk-line)":"none"}}>
          <div className="mono" style={{fontSize:12,color:"var(--dk-ink-3)",letterSpacing:".08em",textTransform:"uppercase"}}>§ 06.0{i+1} · {c[0]}</div>
          <div style={{fontSize:22,color:Colors.paper,marginTop:14,lineHeight:1.4,fontWeight:500,letterSpacing:"-.02em"}}>{c[1]}</div>
          <div className="mono" style={{fontSize:28,color:"#D8533A",marginTop:14,letterSpacing:"-.02em"}}>{c[2]}</div>
        </div>
      ))}
    </div>
    <p style={{marginTop:40,fontSize:22,color:"var(--dk-ink-2)",maxWidth:1400,lineHeight:1.45}}>
      Every previous tokenized-gold issuer built a custody product. None built a yield product. The window to be <span style={{color:"#D8533A"}}>the first</span> to pay real ounces to onchain capital closes when a major issuer wakes up — 12 to 18 months, we estimate.
    </p>
  </SlideChrome>
);

// ─── Slide 07 · PRODUCT ─────────────────────────────────
const S07 = () => (
  <SlideChrome num={7} section="product">
    <div className="mono" style={{fontSize:16,color:"var(--ink-4)",letterSpacing:".08em",textTransform:"uppercase"}}>§07 · product</div>
    <h2 style={{fontSize:72,fontWeight:500,letterSpacing:"-0.035em",lineHeight:1,marginTop:16}}>
      The vault is already running.
    </h2>
    <div style={{marginTop:32,background:Colors.ink,color:Colors.paper,border:"1px solid var(--ink)",fontFamily:"var(--font-mono)",flex:1}}>
      <div style={{display:"flex",justifyContent:"space-between",padding:"14px 24px",borderBottom:"1px solid var(--dk-line)",fontSize:14,color:"var(--dk-ink-3)"}}>
        <div style={{display:"flex",gap:20}}><span style={{color:Colors.paper}}>◆ deGold · vault</span><span>ETH · 0x45804880…caf78</span><span>block 21,924,114</span></div>
        <div><span style={{color:"#D8533A"}}>●</span> LIVE · testnet epoch 03</div>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",borderBottom:"1px solid var(--dk-line)"}}>
        {[
          ["TVL · testnet","$487K","+3.1% ep"],
          ["APY realised","17.40%","E-03"],
          ["share price","1.0273 PAXG","+0.18%"],
          ["next yield","T-14d 08:12","auto-compound"],
        ].map((c,i)=>(
          <div key={i} style={{padding:"24px 28px",borderRight:i<3?"1px solid var(--dk-line)":"none"}}>
            <div style={{fontSize:13,color:"var(--dk-ink-3)",letterSpacing:".08em",textTransform:"uppercase"}}>{c[0]}</div>
            <div style={{fontSize:44,color:Colors.paper,marginTop:10,letterSpacing:"-.02em"}}>{c[1]}</div>
            <div style={{fontSize:13,color:c[2].startsWith("+")?"#5E8A47":"var(--dk-ink-3)",marginTop:4}}>{c[2]}</div>
          </div>
        ))}
      </div>
      <div style={{padding:28,display:"grid",gridTemplateColumns:"220px 1fr 320px",gap:32,alignItems:"center"}}>
        <svg viewBox="0 0 120 120" width="200">
          <circle cx="60" cy="60" r="52" fill="none" stroke="var(--dk-line)" strokeWidth="8"/>
          <circle cx="60" cy="60" r="52" fill="none" stroke="#D8533A" strokeWidth="8" strokeDasharray={`${2*Math.PI*52*22/36} 999`} transform="rotate(-90 60 60)"/>
          <text x="60" y="58" textAnchor="middle" fill={Colors.paper} fontSize="22" fontFamily="var(--font-mono)">22/36</text>
          <text x="60" y="74" textAnchor="middle" fill="var(--dk-ink-3)" fontSize="9" fontFamily="var(--font-mono)" letterSpacing="1.5">EPOCH 041</text>
        </svg>
        <div>
          <div style={{fontSize:13,color:"var(--dk-ink-3)",textTransform:"uppercase",letterSpacing:".08em"}}>epoch · 041 · physical cycle</div>
          <div style={{fontSize:18,color:"var(--dk-ink-2)",marginTop:10,lineHeight:1.5,maxWidth:640}}>
            Fargo · batch 041-B · 18.4 kg. Refining at Argor-Heraeus · est. out 28 Apr. Market placement scheduled 02–05 May. PoF report due 04 May.
          </div>
        </div>
        <div style={{padding:20,background:"rgba(216,83,58,0.10)",border:"1px solid #D8533A"}}>
          <div style={{fontSize:12,color:"var(--dk-ink-3)",letterSpacing:".08em",textTransform:"uppercase"}}>◆ proof of funds · E-040</div>
          <div style={{fontSize:14,color:"var(--dk-ink-2)",marginTop:8,lineHeight:1.5}}>
            Signed by F. Rinaldi, CFO · Fargo Srl · 14 Apr 2026<br/>
            IPFS · bafy…8h9qa2 · onchain 0xa2…91cc
          </div>
        </div>
      </div>
    </div>
    <div className="mono" style={{marginTop:14,fontSize:13,color:"var(--ink-5)"}}>◆ screenshot · testnet deployment · Sepolia · audited Feb 2026 (Pashov) · mainnet target Q3 2026.</div>
  </SlideChrome>
);

Object.assign(window, { S01, S02, S03, S04, S05, S06, S07, SlideChrome, Colors });
