/* section-marketplace.jsx — Section 4: Tokenized fund marketplace
   KYC-gated. The "gated" character is communicated through subtler color,
   lock-icon-in-heading, and a small accreditation strip rather than a full
   shadowed treatment.
*/

function FundTile({ ticker, partner, partnerSub, category, apy, redemption, mobile = false, featured = false, kicker = null }) {
  if (featured && !mobile) {
    // Featured horizontal layout — wider, denser, distinct from the supporting tiles.
    // Breaks the identical-card-grid pattern without inventing a new visual world.
    return (
      <div className="tile-hover" style={{
        position:"relative",
        border:"1px solid var(--accent-line)",
        background:"linear-gradient(96deg, var(--accent-soft) 0%, var(--bg-elev-2) 70%)",
        borderRadius:"var(--r-4)",
        padding:"24px 26px 22px",
        display:"grid",
        gridTemplateColumns:"minmax(0, 1.4fr) auto auto",
        alignItems:"center",
        gap:32,
      }}>
        {kicker && (
          <div className="mono" style={{ position:"absolute", top:14, right:18, fontSize:10, color:"var(--accent)", letterSpacing:"0.08em", textTransform:"uppercase" }}>
            {kicker}
          </div>
        )}
        <div style={{ display:"flex", flexDirection:"column", gap:6, minWidth:0 }}>
          <PartnerMark name={partner} sub={partnerSub} />
          <div className="mono" style={{ fontSize:32, fontWeight:600, color:"var(--text)", letterSpacing:"-0.022em", lineHeight:0.95, marginTop:8 }}>
            {ticker}
          </div>
          <div className="mono" style={{ fontSize:11, color:"var(--text-3)", letterSpacing:"0.04em" }}>
            {category}
          </div>
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:6, alignItems:"flex-end" }}>
          <div className="mono" style={{ fontSize:9, color:"var(--text-4)", letterSpacing:"0.08em", textTransform:"uppercase" }}>Target APY</div>
          <div className="mono" style={{ fontSize:22, color:"var(--accent)", fontVariantNumeric:"tabular-nums", letterSpacing:"-0.01em" }}>{apy}</div>
          <div className="mono" style={{ fontSize:10, color:"var(--text-3)" }}>{redemption} redemption</div>
        </div>
        <span className="badge" style={{ height:24, padding:"0 8px", fontSize:11, alignSelf:"flex-start" }}>
          <Icon.lock /> KYC
        </span>
      </div>
    );
  }

  return (
    <div className="tile-hover" style={{
      position:"relative",
      border:"1px solid var(--line)",
      background:"var(--bg-elev-2)",
      borderRadius:"var(--r-3)",
      padding: mobile ? "16px" : "20px 20px 18px",
      display:"flex", flexDirection:"column", gap: mobile ? 12 : 16,
    }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:12 }}>
        <PartnerMark name={partner} sub={partnerSub} />
        <span className="badge" style={{ height:20, padding:"0 6px", fontSize:10 }}>
          <Icon.lock /> KYC
        </span>
      </div>

      <div style={{ marginTop:"auto", display:"flex", flexDirection:"column", gap:6 }}>
        <div className="mono" style={{ fontSize: mobile ? 18 : 22, fontWeight:600, color:"var(--text)", letterSpacing:"-0.01em", lineHeight:1 }}>
          {ticker}
        </div>
        <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.04em" }}>
          {category}
        </div>
      </div>

      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, paddingTop:14, borderTop:"1px solid var(--line)" }}>
        <div>
          <div className="mono" style={{ fontSize:9, color:"var(--text-4)", letterSpacing:"0.08em", textTransform:"uppercase", marginBottom:4 }}>Target APY</div>
          <div className="mono" style={{ fontSize:13, color:"var(--text)", fontVariantNumeric:"tabular-nums" }}>{apy}</div>
        </div>
        <div>
          <div className="mono" style={{ fontSize:9, color:"var(--text-4)", letterSpacing:"0.08em", textTransform:"uppercase", marginBottom:4 }}>Redemption</div>
          <div className="mono" style={{ fontSize:13, color:"var(--text)" }}>{redemption}</div>
        </div>
      </div>
    </div>
  );
}

function SectionMarketplace({ mobile = false }) {
  // Launch shelf — sequenced per the build plan: FOBXX first, HQLAX second,
  // DLR third, private-credit-fund SPV fourth (partner TBA). dvTDS (HSBC time
  // deposit) is in the queued ghost-tile row below since we haven't sequenced
  // a partner for it yet.
  const featuredTile = (
    <FundTile featured ticker="dvFOBXX" partner="Franklin Templeton" partnerSub="FOBXX · money-market" category="USD money-market" apy="4.2 – 5.1%" redemption="Daily" kicker="Launch product" mobile={mobile} />
  );
  const supportingTiles = (
    <>
      <FundTile ticker="dvHQLAX"     partner="HQLAX"              partnerSub="HQLA · collateral"      category="Repo collateral" apy="3.9 – 4.6%" redemption="T+1"     mobile={mobile} />
      <FundTile ticker="dvDLR"       partner="Broadridge"         partnerSub="DLR · tri-party repo"   category="Repo"            apy="5.0 – 5.8%" redemption="T+1"     mobile={mobile} />
      <FundTile ticker="dvCredit-A"  partner="Tier-1 SPV"         partnerSub="Private credit · TBA"   category="Private credit"  apy="8.5 – 11%"  redemption="Quarter" mobile={mobile} />
    </>
  );

  if (mobile) {
    return (
      <div style={{ padding:"40px var(--gutter-mobile) 48px", display:"flex", flexDirection:"column", gap:24, background:"var(--bg-gated)", position:"relative" }}>
        <SectionHeader
          number="04"
          label={<><Icon.lock /> &nbsp; Marketplace · accredited</>}
          heading={<>Access tokenized institutional funds. <span style={{ color:"var(--accent)" }}>Accredited investors only.</span></>}
          body="Canton hosts $6T+ of tokenized real-world assets, most issued under per-issuer KYC. Ditto's marketplace tier wraps these via per-fund SPVs."
          headingWidth="100%"
        />
        <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
          {featuredTile}
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
            {supportingTiles}
          </div>
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:10, padding:14, border:"1px solid var(--line)", borderRadius:"var(--r-3)" }}>
          <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>
            <Icon.lock /> &nbsp; One-time accreditation
          </div>
          <div style={{ fontSize:13, color:"var(--text-2)", lineHeight:1.5 }}>
            Persona-verified accreditation unlocks the full marketplace shelf. Per-fund KYC handled inline at first deposit.
          </div>
          <button className="btn btn-secondary" style={{ height:36, fontSize:13 }} onClick={() => window.openWaitlist && window.openWaitlist()}>Request access <Icon.arrow /></button>
        </div>
      </div>
    );
  }

  return (
    <SectionFrame
      bg="var(--bg-gated)"
      gated
      style={{ padding:"96px var(--gutter-desktop)" }}
    >
      {/* Subtle warm tint overlay — signals "gated" without going heavy */}
      <div style={{ position:"absolute", inset:0, background: "var(--gated-tint)", pointerEvents:"none" }} />

      <div style={{ display:"grid", gridTemplateColumns:"minmax(0, 0.92fr) minmax(0, 1.5fr)", gap:"var(--sp-11)", alignItems:"start", position:"relative" }}>
        <div style={{ display:"flex", flexDirection:"column", gap:28, position:"sticky", top:96 }}>
          <SectionHeader
            number="04"
            label={<><Icon.lock /> &nbsp; Marketplace · accredited only</>}
            heading={<>Access tokenized institutional funds. <span style={{ color:"var(--accent)" }}>Accredited investors only.</span></>}
            body="Canton hosts $6T+ of tokenized real-world assets, most issued by institutional issuers under per-issuer KYC. Ditto's marketplace tier wraps these via per-fund SPVs so accredited investors can hold a single dvFundX share representing an interest in the underlying instrument, with NAV attested on-chain by DVN."
            headingWidth="22ch"
          />

          <div style={{ display:"flex", flexDirection:"column", gap:12, padding:"18px 18px 18px", border:"1px solid var(--line)", borderRadius:"var(--r-3)", background:"var(--bg-elev-2)" }}>
            <div style={{ display:"flex", alignItems:"center", gap:8 }}>
              <Icon.lock />
              <span className="mono" style={{ fontSize:11, color:"var(--text-2)", letterSpacing:"0.04em", textTransform:"uppercase" }}>
                One-time accreditation
              </span>
            </div>
            <div style={{ fontSize:13, color:"var(--text-2)", lineHeight:1.6 }}>
              A single Persona-verified accreditation unlocks the full marketplace shelf. Per-fund KYC is handled inline at first deposit on each instrument.
            </div>
            <div style={{ display:"flex", gap:10, marginTop:4 }}>
              <button className="btn btn-secondary" style={{ height:34, fontSize:13 }} onClick={() => window.openWaitlist && window.openWaitlist()}>Request access <Icon.arrow /></button>
              <button className="btn btn-ghost" style={{ height:34, fontSize:13 }}>Read attestation model <Icon.ext /></button>
            </div>
          </div>
        </div>

        <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", paddingBottom:8 }}>
            <div className="eyebrow"><span className="slash">/</span><span>Shelf · launch tier</span></div>
            <div className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.06em" }}>4 of 12 instruments shown</div>
          </div>
          <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
            {featuredTile}
            <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:14 }}>
              {supportingTiles}
            </div>
          </div>
          {/* Coming-soon ghost tiles row */}
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:10, marginTop:6 }}>
            {["BlackRock BUIDL", "DTCC ComposerX", "HSBC TDS", "+ 5 more"].map((n, i) => (
              <div key={i} style={{ border:"1px dashed var(--line)", borderRadius:"var(--r-2)", padding:"10px 12px", color:"var(--text-4)", fontSize:11, fontFamily:"var(--font-mono)", letterSpacing:"0.02em" }}>
                {n}
              </div>
            ))}
          </div>
        </div>
      </div>
    </SectionFrame>
  );
}

Object.assign(window, { SectionMarketplace });