/* section-onramp.jsx — Section 3: ETH → Canton onramp
   The direction asymmetry IS the visual. Two large nodes, one decisive arrow
   forward, and a deliberately crossed-out reverse path.
*/

function OnrampNode({ side, chain, token, sub, mobile = false }) {
  const isCanton = side === "right";
  return (
    <div style={{
      flex:1, minWidth:0,
      border:"1px solid " + (isCanton ? "var(--accent-line)" : "var(--line-strong)"),
      background: isCanton ? "linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-elev-2) 100%)" : "var(--bg-elev-2)",
      borderRadius:"var(--r-4)",
      padding: mobile ? "20px" : "28px 28px 24px",
      display:"flex", flexDirection:"column", gap: mobile ? 10 : 14,
      position:"relative",
    }}>
      <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.08em", textTransform:"uppercase" }}>
        {isCanton ? "Destination" : "Source"}
      </div>
      <div style={{ display:"flex", alignItems:"center", gap:12 }}>
        {/* abstract chain glyph */}
        <ChainGlyph kind={isCanton ? "canton" : "ethereum"} />
        <div style={{ display:"flex", flexDirection:"column", gap:2, minWidth:0 }}>
          <div style={{ fontFamily:"var(--font-display)", fontSize: mobile ? 18 : 22, fontWeight:500, color:"var(--text)", letterSpacing:"-0.01em", lineHeight:1.1 }}>
            {chain}
          </div>
          <div className="mono" style={{ fontSize:11, color: isCanton ? "var(--accent)" : "var(--text-2)", letterSpacing:"0.02em" }}>
            {token}
          </div>
        </div>
      </div>
      <div style={{ fontSize: mobile ? 12 : 13, color:"var(--text-3)", lineHeight:1.5 }}>
        {sub}
      </div>
      {isCanton ? (
        <div style={{ marginTop:"auto", paddingTop: mobile ? 8 : 14, borderTop:"1px dashed var(--line-strong)", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <span className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Yields immediately</span>
          <span className="mono" style={{ fontSize:11, color:"var(--accent)" }}>5–9%</span>
        </div>
      ) : (
        <div style={{ marginTop:"auto", paddingTop: mobile ? 8 : 14, borderTop:"1px dashed var(--line-strong)", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <span className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>User signs here</span>
          <span className="mono" style={{ fontSize:11, color:"var(--text-3)" }}>1 transaction</span>
        </div>
      )}
    </div>
  );
}

// ChainGlyph — small abstract geometric mark per chain. Not a real logo;
// placeholder slot for the frontend's licensed assets.
function ChainGlyph({ kind }) {
  if (kind === "ethereum") {
    return (
      <div style={{ width:36, height:36, borderRadius:8, background:"var(--bg-elev-3)", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0, border:"1px solid var(--line-strong)" }}>
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none" stroke="rgba(236,239,244,0.7)" strokeWidth="1">
          <path d="M7 0L0 11l7 4 7-4L7 0z" fill="rgba(236,239,244,0.7)" stroke="none" />
          <path d="M0 13l7 4 7-4-7 9-7-9z" fill="rgba(236,239,244,0.5)" stroke="none" />
        </svg>
      </div>
    );
  }
  return (
    <div style={{ width:36, height:36, borderRadius:8, background:"var(--accent-soft)", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0, border:"1px solid var(--accent-line)" }}>
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="var(--accent)" strokeWidth="1.4">
        <rect x="3" y="3" width="16" height="16" rx="2" />
        <path d="M3 11h16M11 3v16" />
      </svg>
    </div>
  );
}

function OnrampArrow({ mobile = false }) {
  // Decisive forward arrow.
  return (
    <div style={{
      display:"flex", flexDirection:"column", alignItems:"center", gap:6,
      position:"relative",
      minWidth: mobile ? "100%" : 140,
      transform: mobile ? "rotate(90deg)" : "none",
      padding: mobile ? "20px 0" : 0,
    }}>
      <div className="mono" style={{ fontSize:10, color:"var(--accent)", letterSpacing:"0.1em", textTransform:"uppercase" }}>
        Inbound
      </div>
      <svg width={mobile ? 110 : 140} height="18" viewBox="0 0 140 18" fill="none">
        <line x1="0" y1="9" x2="124" y2="9" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="4 3" />
        <path d="M118 3L132 9L118 15" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
      <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.04em" }}>
        Single transaction
      </div>
      {/* No-arrow-back — explicitly crossed out */}
      <div style={{ marginTop: mobile ? 6 : 10, opacity:0.55 }}>
        <svg width={mobile ? 110 : 140} height="18" viewBox="0 0 140 18" fill="none">
          <line x1="14" y1="9" x2="140" y2="9" stroke="var(--text-4)" strokeWidth="1" />
          <path d="M22 3L8 9L22 15" stroke="var(--text-4)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" fill="none" />
          <line x1="50" y1="0" x2="90" y2="18" stroke="var(--danger)" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      </div>
      <div className="mono" style={{ fontSize:9, color:"var(--text-4)", letterSpacing:"0.04em", textTransform:"uppercase" }}>
        No reverse path
      </div>
    </div>
  );
}

function OnrampFeature({ kbd, title, body, mobile = false }) {
  return (
    <div style={{ display:"flex", flexDirection:"column", gap:10, paddingTop:24, borderTop:"1px solid var(--line)" }}>
      <div style={{ display:"flex", alignItems:"center", gap:10 }}>
        <span className="mono" style={{ fontSize:10, color:"var(--accent)", letterSpacing:"0.08em" }}>{kbd}</span>
      </div>
      <div style={{ fontSize: mobile ? 15 : 17, fontWeight:600, color:"var(--text)", letterSpacing:"-0.01em" }}>
        {title}
      </div>
      <div style={{ fontSize: mobile ? 13 : 13, color:"var(--text-2)", lineHeight:1.55, maxWidth:"34ch" }}>
        {body}
      </div>
    </div>
  );
}

function SectionOnramp({ mobile = false }) {
  const features = (
    <>
      <OnrampFeature
        kbd="01"
        title="Single transaction"
        body="User signs once on Ethereum; we settle on Canton. No separate bridge step, no wrapped intermediate."
        mobile={mobile}
      />
      <OnrampFeature
        kbd="02"
        title="Fast settlement"
        body="Solver inventory fronts the user's position immediately; a canonical CCTP-class mint replenishes inventory in the background."
        mobile={mobile}
      />
      <OnrampFeature
        kbd="03"
        title="Inbound only"
        body="Contractually one-way. No off-Canton routing of Canton balances exists in the system, by design."
        mobile={mobile}
      />
    </>
  );

  if (mobile) {
    return (
      <div style={{ padding:"40px var(--gutter-mobile) 48px", display:"flex", flexDirection:"column", gap:28, background:"var(--bg-elev-1)" }}>
        <SectionHeader
          number="03"
          label="Ethereum → Canton onramp"
          heading="Bring USDC from Ethereum to Canton in one transaction."
          body="Channel ETH-side capital into Canton-native yield with no separate bridge step. Capital flows into Canton; never out."
          headingWidth="100%"
        />
        <div style={{ display:"flex", flexDirection:"column", gap:0 }}>
          <OnrampNode side="left"  chain="Ethereum" token="USDC"     sub="Standard ERC-20 on mainnet Ethereum. User signs from any EVM wallet." mobile />
          <OnrampArrow mobile />
          <OnrampNode side="right" chain="Canton"   token="dvUSDCx"  sub="Vault share token, Canton-native. Yields immediately on credit." mobile />
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"1fr", gap:20 }}>
          {features}
        </div>
      </div>
    );
  }

  return (
    <SectionFrame bg="var(--bg-elev-1)" style={{ padding:"96px var(--gutter-desktop)" }}>
      <div style={{ display:"grid", gridTemplateColumns:"minmax(0, 0.85fr) minmax(0, 1.4fr)", gap:"var(--sp-11)", alignItems:"start" }}>
        <SectionHeader
          number="03"
          label="Ethereum → Canton onramp"
          heading={<>Bring USDC from Ethereum to Canton in <span style={{ color:"var(--accent)" }}>one transaction</span>.</>}
          body="Channel ETH-side capital into Canton-native yield with no separate bridge step. Powered by Ditto's existing solver network, extended for EVM→Canton routes. Capital flows into Canton; never out."
          headingWidth="20ch"
        />
        <div style={{ display:"flex", flexDirection:"column", gap:32 }}>
          <div style={{ display:"flex", alignItems:"stretch", gap:0, minHeight:220 }}>
            <OnrampNode side="left"  chain="Ethereum" token="USDC" sub="Standard ERC-20 on mainnet Ethereum. User signs from any EVM wallet." />
            <OnrampArrow />
            <OnrampNode side="right" chain="Canton"   token="dvUSDCx" sub="Vault share token, Canton-native. Yields immediately on credit." />
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:32 }}>
            {features}
          </div>
        </div>
      </div>
    </SectionFrame>
  );
}

Object.assign(window, { SectionOnramp });