/* section-vault.jsx — Section 2: dvUSDCx-CORE
   Canton-native vault. Left: copy + stats. Right: strategy-flow diagram.
*/

// Strategy flow node — one box in the four-strategy column
function StrategyNode({ name, venue, type, share, mobile = false }) {
  return (
    <div style={{
      position:"relative",
      border:"1px solid var(--line)",
      background:"var(--bg-elev-2)",
      borderRadius:"var(--r-3)",
      padding: mobile ? "10px 12px" : "12px 14px",
      display:"flex", alignItems:"center", justifyContent:"space-between", gap:12,
    }}>
      <div style={{ display:"flex", flexDirection:"column", gap:3, minWidth:0 }}>
        <div style={{ fontSize:13, fontWeight:600, color:"var(--text)", letterSpacing:"-0.005em" }}>{name}</div>
        <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.04em" }}>
          {venue} · {type}
        </div>
      </div>
      <div className="mono" style={{ fontSize:11, color:"var(--accent)", flexShrink:0, fontVariantNumeric:"tabular-nums" }}>
        {share}
      </div>
    </div>
  );
}

// Pipeline column — labeled box with vertical hairlines for the strategy graph
function FlowColumn({ label, children, width = 1, accent = false, mobile = false }) {
  return (
    <div style={{ display:"flex", flexDirection:"column", gap:10, flex: width, minWidth:0 }}>
      <div className="mono" style={{ fontSize:10, color: accent ? "var(--accent)" : "var(--text-4)", letterSpacing:"0.08em", textTransform:"uppercase", textAlign:"center" }}>
        {label}
      </div>
      <div style={{ display:"flex", flexDirection:"column", gap: mobile ? 8 : 10, flex:1 }}>
        {children}
      </div>
    </div>
  );
}

function VaultDiagram({ mobile = false }) {
  return (
    <div style={{
      border:"1px solid var(--line)",
      borderRadius:"var(--r-4)",
      background:"var(--bg-elev-1)",
      padding: mobile ? "16px" : "24px 24px 22px",
      position:"relative",
    }}>
      <div className="hairgrid hairgrid-h" />

      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom: mobile ? 14 : 20, gap:8 }}>
        <div className="eyebrow"><span className="slash">/</span><span>dvUSDCx-CORE · capital flow</span></div>
        <div className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.06em" }}>target weights · 10% buffer</div>
      </div>

      <div style={{ display:"flex", alignItems:"stretch", gap: mobile ? 10 : 18, position:"relative" }}>
        {/* DEPOSIT */}
        <FlowColumn label="Deposit" mobile={mobile}>
          <div style={{
            border:"1px solid var(--accent-line)", background:"var(--accent-soft)", color:"var(--accent)",
            borderRadius:"var(--r-3)", padding: mobile ? "12px 10px" : "16px 14px",
            display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:6, flex:1, textAlign:"center",
          }}>
            <span className="mono" style={{ fontSize: mobile ? 13 : 15, fontWeight:600 }}>USDCx</span>
            <span className="mono" style={{ fontSize:10, color:"var(--accent)", opacity:0.7 }}>canton-native</span>
          </div>
        </FlowColumn>

        {/* Arrow */}
        {!mobile && <div style={{ display:"flex", alignItems:"center", color:"var(--text-3)" }}><Icon.arrowLong /></div>}

        {/* ROUTER */}
        <FlowColumn label="Strategy router" mobile={mobile} width={mobile ? 1 : 1.1}>
          <div style={{
            border:"1px solid var(--line-strong)", background:"var(--bg-elev-2)",
            borderRadius:"var(--r-3)", padding: mobile ? "10px" : "14px",
            display:"flex", flexDirection:"column", gap:8, flex:1, justifyContent:"center",
          }}>
            <div style={{ fontSize: mobile ? 12 : 13, fontWeight:600, color:"var(--text)" }}>Allocator</div>
            <div className="mono" style={{ fontSize:10, color:"var(--text-3)", lineHeight:1.5 }}>
              risk-budgeted<br/>quorum-attested<br/>rebalance: 4h
            </div>
          </div>
        </FlowColumn>

        {!mobile && <div style={{ display:"flex", alignItems:"center", color:"var(--text-3)" }}><Icon.arrowLong /></div>}

        {/* STRATEGIES */}
        <FlowColumn label="4 strategy legs" mobile={mobile} width={mobile ? 1.6 : 1.6}>
          <StrategyNode name="Alpend Passive"      venue="Alpend" type="lending"      share="45%" mobile={mobile} />
          <StrategyNode name="Alpend Looped"       venue="Alpend" type="lending · 3x" share="15%" mobile={mobile} />
          <StrategyNode name="Cantex Δ-hedged LP"  venue="Cantex" type="DEX · hedged" share="20%" mobile={mobile} />
          <StrategyNode name="Cantex Naked LP"     venue="Cantex" type="DEX · naked"  share="10%" mobile={mobile} />
        </FlowColumn>

        {!mobile && <div style={{ display:"flex", alignItems:"center", color:"var(--text-3)" }}><Icon.arrowLong /></div>}

        {/* SHARES OUT */}
        <FlowColumn label="Share token" mobile={mobile}>
          <div style={{
            border:"1px solid var(--line-strong)", background:"var(--bg-elev-2)",
            borderRadius:"var(--r-3)", padding: mobile ? "12px 10px" : "16px 14px",
            display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:6, flex:1, textAlign:"center",
          }}>
            <span className="mono" style={{ fontSize: mobile ? 13 : 15, fontWeight:600, color:"var(--text)" }}>dvUSDCx</span>
            <span className="mono" style={{ fontSize:10, color:"var(--text-3)" }}>NAV: 1.0274</span>
          </div>
        </FlowColumn>
      </div>

      <div style={{ marginTop: mobile ? 12 : 18, paddingTop: mobile ? 10 : 14, borderTop:"1px dashed var(--line)", display:"flex", justifyContent:"space-between", alignItems:"center", gap:8, flexWrap:"wrap" }}>
        <span className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.08em", textTransform:"uppercase" }}>
          Yield path · entirely on-Canton · no off-Canton custody
        </span>
        <span className="mono" style={{ fontSize:10, color:"var(--text-3)" }}>
          attested by <span style={{ color:"var(--accent)" }}>DVN</span>
        </span>
      </div>
    </div>
  );
}

function SectionVault({ mobile = false }) {
  const stats = [
    { value: <>5<span className="mono" style={{ fontSize:18, color:"var(--text-3)" }}>–</span>9<span style={{ fontSize:18, color:"var(--text-3)" }}>%</span></>, label: "Target APY" },
    { value: "Daily",            label: "Liquidity" },
    { value: <>1.5<span style={{ fontSize:14, color:"var(--text-3)" }}>%</span><span className="mono" style={{ fontSize:14, color:"var(--text-3)", margin:"0 6px" }}>·</span>10<span style={{ fontSize:14, color:"var(--text-3)" }}>%</span></>, label: "Mgmt · carry" },
    { value: <>100<span style={{ fontSize:18, color:"var(--text-3)" }}>%</span></>, label: "On-Canton yield" },
  ];

  if (mobile) {
    return (
      <div style={{ padding:"40px var(--gutter-mobile) 48px", display:"flex", flexDirection:"column", gap:24, position:"relative", background:"var(--bg)" }}>
        <SectionHeader
          number="02"
          label="Canton-native vault"
          heading={<>dvUSDCx-CORE: <span style={{ color:"var(--accent)" }}>Canton-native yield</span>, daily-liquid.</>}
          body="USDCx deposits allocated across Alpend (lending) and Cantex (DEX) via four mechanically distinct strategy legs. Yield is generated entirely inside Canton."
          headingWidth="100%"
        />
        <StatRow items={stats} mobile />
        <VaultDiagram mobile />
        <div style={{ display:"flex", gap:10 }}>
          <a className="btn btn-secondary" href="https://github.com/dittonetwork/ditto-ccvault/blob/main/STRATEGIES.md" target="_blank" rel="noopener noreferrer" style={{ flex:1, textDecoration:"none" }}>View strategy <Icon.ext /></a>
          <button className="btn btn-primary" style={{ flex:1 }} onClick={() => window.openWaitlist && window.openWaitlist()}>Join waitlist</button>
        </div>
      </div>
    );
  }

  return (
    <SectionFrame style={{ padding:"96px var(--gutter-desktop)" }}>
      <div style={{ display:"grid", gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1.45fr)", gap:"var(--sp-11)", alignItems:"start" }}>
        <div style={{ display:"flex", flexDirection:"column", gap:32, position:"sticky", top:96 }}>
          <SectionHeader
            number="02"
            label="Canton-native vault · v1.0"
            heading={<>dvUSDCx-CORE: <span style={{ color:"var(--accent)" }}>Canton-native yield</span>, daily-liquid.</>}
            body="USDCx deposits allocated across Alpend (Canton-native lending) and Cantex (Canton-native DEX) via four mechanically distinct strategy legs. Daily liquidity, target APY 5 to 9%. Yield is generated entirely inside Canton, with no off-Canton custody."
            headingWidth="22ch"
          />
          <StatRow items={stats} />
          <div style={{ display:"flex", gap:12 }}>
            <a className="btn btn-secondary" href="https://github.com/dittonetwork/ditto-ccvault/blob/main/STRATEGIES.md" target="_blank" rel="noopener noreferrer" style={{ textDecoration:"none" }}>View strategy paper <Icon.ext /></a>
            <button className="btn btn-ghost" onClick={() => window.openWaitlist && window.openWaitlist()}>Subscribe to vault updates <Icon.arrow /></button>
          </div>
        </div>
        <div>
          <VaultDiagram />
        </div>
      </div>
    </SectionFrame>
  );
}

Object.assign(window, { SectionVault });