/* section-dvn.jsx — Section 5: Ditto Verification Network
   Stats + 16-operator grid + quote treatment.
*/

function OperatorCell({ index, region, active }) {
  return (
    <div title={`Operator ${String(index).padStart(2, "0")} · ${region}`} style={{
      position:"relative",
      border:"1px solid " + (active ? "var(--accent-line)" : "var(--line)"),
      background: active ? "var(--accent-soft)" : "var(--bg-elev-2)",
      borderRadius:"var(--r-2)",
      padding:"10px 8px",
      display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:4,
    }}>
      <div className="mono" style={{ fontSize:9, color: active ? "var(--accent)" : "var(--text-4)", letterSpacing:"0.06em", textTransform:"uppercase" }}>
        OP {String(index).padStart(2, "0")}
      </div>
      <div style={{ width:5, height:5, borderRadius:"50%", background: active ? "var(--accent)" : "var(--text-4)" }} />
      <div className="mono" style={{ fontSize:8, color:"var(--text-4)", letterSpacing:"0.04em" }}>
        {region}
      </div>
    </div>
  );
}

function OperatorGrid({ mobile = false }) {
  const regions = ["FRA", "AMS", "SIN", "TKY", "LON", "NYC", "SFO", "ZUR", "STK", "DUB", "HKG", "SYD", "BER", "PAR", "TOR", "SEO"];
  return (
    <div style={{
      border:"1px solid var(--line)",
      borderRadius:"var(--r-4)",
      padding: mobile ? 16 : 24,
      background:"var(--bg-elev-1)",
      display:"flex", flexDirection:"column", gap: mobile ? 14 : 20,
    }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
        <div className="eyebrow"><span className="slash">/</span><span>DVN operator set · live</span></div>
        <div style={{ display:"flex", alignItems:"center", gap:6 }}>
          <span style={{ width:6, height:6, borderRadius:"50%", background:"var(--accent)", boxShadow:"0 0 6px var(--accent)" }} />
          <span className="mono" style={{ fontSize:10, color:"var(--accent)" }}>16/16 attesting</span>
        </div>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:`repeat(${mobile ? 4 : 8}, 1fr)`, gap:8 }}>
        {regions.map((r, i) => (
          <OperatorCell key={i} index={i + 1} region={r} active />
        ))}
      </div>
      <div style={{ display:"grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: mobile ? 10 : 16, paddingTop:14, borderTop:"1px solid var(--line)" }}>
        {[
          ["Spot prices",         "USDCx · ETH · BTC"],
          ["Protocol state",      "Alpend · Cantex"],
          ["RWA NAV",             "dvFOBXX · dvHQLAX"],
          ["Cross-chain finality","CCTP · onramp"],
        ].map(([label, sub], i) => (
          <div key={i} style={{ display:"flex", flexDirection:"column", gap:4 }}>
            <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>{label}</div>
            <div className="mono" style={{ fontSize:11, color:"var(--text-2)" }}>{sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SectionDVN({ mobile = false }) {
  const stats = [
    { value: "16",       label: "Node operators" },
    { value: <>$200M<span style={{ fontSize:18, color:"var(--text-3)" }}>+</span></>, label: "TVL secured" },
    { value: "2",        label: "Restaking sets" },
    { value: "4",        label: "Feed types" },
  ];

  if (mobile) {
    return (
      <div style={{ padding:"40px var(--gutter-mobile) 48px", display:"flex", flexDirection:"column", gap:24 }}>
        <SectionHeader
          number="05"
          label="Ditto Verification Network"
          heading="The verification layer for Canton DeFi."
          body="Canton today has no native Chainlink/Pyth equivalent. Ditto's 16-operator restaking set is repurposed as a quorum-attested feed for the Canton ecosystem."
          headingWidth="100%"
        />
        <StatRow items={stats} mobile />
        <OperatorGrid mobile />
        <figure style={{ margin:0, padding:"22px 20px 20px", border:"1px solid var(--accent-line)", borderRadius:"var(--r-3)", background:"var(--accent-soft)" }}>
          <blockquote style={{ margin:0, fontFamily:"var(--font-display)", fontSize:16, fontWeight:500, color:"var(--text)", letterSpacing:"-0.01em", lineHeight:1.5 }}>
            Ditto's role in Canton DeFi is not just to operate a vault. It is to provide the verification layer that lets vaults, lending markets, DEXes, and tokenized fund products price assets, state, and NAV safely on Canton.
          </blockquote>
        </figure>
      </div>
    );
  }

  return (
    <SectionFrame style={{ padding:"96px var(--gutter-desktop)" }}>
      <div style={{ display:"grid", gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1.35fr)", gap:"var(--sp-11)", alignItems:"start" }}>
        <div style={{ display:"flex", flexDirection:"column", gap:32 }}>
          <SectionHeader
            number="05"
            label="Ditto Verification Network (DVN)"
            heading={<>The verification layer for <span style={{ color:"var(--accent)" }}>Canton DeFi</span>.</>}
            body="Canton today has no native price oracle equivalent of Chainlink or Pyth. Ditto Network's 16-operator restaking set, already securing $200M+ TVL across Eigenlayer and Symbiotic, is repurposed as a quorum-attested price, state, NAV, and cross-chain finality feed for the Canton ecosystem."
            headingWidth="22ch"
          />
          <StatRow items={stats} />

          {/* Aspirational quote — full border + accent-soft fill (no side-stripe) */}
          <figure style={{
            position:"relative", margin:0,
            padding:"28px 32px 26px",
            border:"1px solid var(--accent-line)",
            borderRadius:"var(--r-4)",
            background:"var(--accent-soft)",
          }}>
            <blockquote style={{
              margin:0,
              fontFamily:"var(--font-display)", fontSize:20, fontWeight:500,
              letterSpacing:"-0.012em", lineHeight:1.45, color:"var(--text)",
              textWrap:"pretty",
            }}>
              Ditto's role in Canton DeFi is not just to operate a vault. It is to provide the verification layer that lets vaults, lending markets, DEXes, and tokenized fund products price assets, state, and NAV safely on Canton.
            </blockquote>
          </figure>
        </div>
        <div>
          <OperatorGrid />
        </div>
      </div>
    </SectionFrame>
  );
}

Object.assign(window, { SectionDVN });