// PolicyRail — the right-rail policy & compliance card, plus an "actions"
// shortcut tile above it. Lives only at desktop (≥1280px) per Section 7.

const PolicySpec = ({ label, value, address }) => (
  <div style={{
    padding: "12px 0",
    borderTop: "1px solid var(--border)",
  }}>
    <div style={{
      font: '400 11px/14px "Inter", sans-serif',
      color: "var(--fg-subtle)",
      marginBottom: 4,
    }}>{label}</div>
    <div style={{
      font: '400 14px/20px "Inter", sans-serif',
      color: "var(--fg)",
      marginBottom: address ? 2 : 0,
    }}>{value}</div>
    {address && (
      <MonoAddr full={address} />
    )}
  </div>
);

const GateTile = ({ label, value, icon }) => (
  <div style={{
    padding: 12,
    background: "var(--bg-alt)",
    borderRadius: 8,
    display: "flex", flexDirection: "column", gap: 4,
  }}>
    <div style={{
      display: "flex", alignItems: "center", gap: 6,
      font: '400 11px/14px "Inter", sans-serif',
      color: "var(--fg-subtle)",
    }}>
      <Icon name={icon} size={12} stroke={1.6}/>
      {label}
    </div>
    <div className="tnum" style={{
      font: '600 14px/20px "Inter", sans-serif',
      color: "var(--fg)",
    }}>{value}</div>
  </div>
);

const PolicyCard = ({ policy }) => (
  <section className="card policy-rail" style={{
    position: "sticky", top: 24, alignSelf: "flex-start",
    padding: 28,
  }} aria-labelledby="policy-heading" data-annot-note="C-4 hierarchy · C-5 verbatim copy">
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ color: "var(--fg-subtle)" }}><Icon name="shield" size={13} stroke={1.5} /></span>
        <Eyebrow>Policy &amp; compliance</Eyebrow>
      </div>
      <h2 id="policy-heading" className="section-heading" style={{
        marginTop: 6, fontSize: 22, lineHeight: "28px",
      }}>
        Compliance spine
      </h2>
      <div style={{
        font: 'italic 400 13px/20px "Literata", serif',
        color: "var(--fg-subtle)", marginTop: 6,
      }}>
        Bound at deploy · read-only · to change, redeploy
      </div>
    </div>

    <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
      <span className="chip chip--info" style={{ padding: "2px 8px" }}>
        <Icon name="handshake" size={11} stroke={1.6}/>
        Shared with {policy.sharedCount} facilities
      </span>
    </div>

    <div style={{ marginTop: 12 }}>
      <PolicySpec label="Identity registry" value={policy.registry} />
      <PolicySpec label="Jurisdiction filter" value={policy.jurisdiction} />
      <PolicySpec label="Trusted issuer" value={policy.issuerName} address={policy.issuerAddress} />
      <PolicySpec label="Compliance module" value={policy.moduleName} address={policy.moduleAddress} />
    </div>

    <div style={{ marginTop: 20 }}>
      <Eyebrow>Runtime gates</Eyebrow>
      <div style={{
        marginTop: 8,
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 8,
      }}>
        {policy.gates.map((g, i) => (
          <GateTile key={i} label={g.label} value={g.value} icon={g.icon} />
        ))}
      </div>
      <div style={{
        marginTop: 12,
        font: 'italic 400 12px/18px "Literata", serif',
        color: "var(--fg-subtle)",
      }}>
        Evaluated on every borrow, deposit, withdraw, transfer
      </div>
    </div>
  </section>
);

window.PolicyCard = PolicyCard;