/* Documents — formatted compliance report.
 * Click a finding row to inspect the flagged passage.
 */

const DOC_FINDINGS = [
  {
    label: "Indemnity caps below policy floor",
    count: 4, sev: "high",
    contract: "SC-4187", title: "Aksel Aviation Services",
    quote: "\"Supplier's aggregate liability under this Agreement shall not exceed the fees paid in the preceding three (3) months …\"",
    why: "Policy requires at least 12 months. Recommend renegotiation before renewal on 14 Jul.",
  },
  {
    label: "Termination notice shorter than 30 days",
    count: 3, sev: "medium",
    contract: "SC-2904", title: "Pelham Cleaning Services",
    quote: "\"Either party may terminate this Agreement by giving the other ten (10) calendar days' written notice …\"",
    why: "Policy minimum is 30 days. Suggest renegotiating to 60 days at renewal.",
  },
  {
    label: "Renewal auto-renews silently",
    count: 2, sev: "medium",
    contract: "SC-3601", title: "Carmelo Logistics SARL",
    quote: "\"This Agreement shall automatically renew for successive twelve-month terms unless terminated …\"",
    why: "Auto-renewal without notice is forbidden by procurement policy. Suggest adding 60-day opt-out window.",
  },
  {
    label: "Liability transferred to buyer",
    count: 1, sev: "high",
    contract: "SC-4912", title: "Norse Heavy Equipment GmbH",
    quote: "\"Buyer shall indemnify and hold harmless Supplier from any claims arising out of or in connection with the use of the Goods …\"",
    why: "This shifts the risk allocation entirely. Recommend escalation to legal before signature.",
  },
  {
    label: "Payment terms outside 30–60 days",
    count: 1, sev: "low",
    contract: "SC-5108", title: "Halcyon Print Services",
    quote: "\"Invoices issued under this Agreement shall be settled within ninety (90) days of receipt …\"",
    why: "Policy band is 30–60 days. Acceptable with sign-off from CFO.",
  },
  {
    label: "No findings",
    count: 329, sev: "ok",
    contract: null,
    quote: "329 contracts reviewed and cleared against all 18 policy points.",
    why: "Nothing to action. Stored to the compliance archive.",
  },
];

function DocumentsPreview() {
  const [pick, setPick] = React.useState(0);
  const sel = DOC_FINDINGS[pick];

  return (
    <div style={{
      background: "#f3efe6",
      color: "#1c1b18",
      fontFamily: '"Inter", sans-serif',
      borderRadius: 14,
      padding: "40px 48px 44px",
      boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6)",
      maxWidth: 680,
      position: "relative",
    }}>
      {/* paper header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", borderBottom: "1px solid #d4ccb7", paddingBottom: 14 }}>
        <div>
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "#6b6862", textTransform: "uppercase" }}>Supplier compliance · Q1</div>
          <div className="mono" style={{ fontSize: 10.5, color: "#9c988e", marginTop: 4 }}>REPORT-2026-Q1 · INTERNAL</div>
        </div>
        <div className="mono" style={{ fontSize: 10.5, color: "#9c988e", textAlign: "right" }}>
          18 May 2026<br/>v1.0
        </div>
      </div>

      {/* title */}
      <div className="serif" style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 22, lineHeight: 1.15 }}>
        Contract review &amp; risk summary
      </div>
      <div style={{ fontSize: 13, color: "#6b6862", marginTop: 8 }}>
        340 supplier contracts reviewed against the 18-point compliance checklist. 11 issues identified; 4 require immediate attention.
      </div>

      {/* summary table — clickable */}
      <div style={{ marginTop: 22 }}>
        <div style={{ fontSize: 11, letterSpacing: "0.14em", color: "#6b6862", textTransform: "uppercase", marginBottom: 6, display: "flex", justifyContent: "space-between" }}>
          <span>Findings by category</span>
          <span style={{ color: "#9c988e" }}>click a row to inspect</span>
        </div>
        <div>
          {DOC_FINDINGS.map((r, i) => {
            const active = i === pick;
            return (
              <button key={i} onClick={() => setPick(i)} style={{
                width: "100%",
                textAlign: "left",
                display: "grid", gridTemplateColumns: "1fr 50px 90px",
                padding: "10px 8px",
                background: active ? "#ebe2c9" : "transparent",
                borderBottom: "1px solid #e2dcc8",
                cursor: "pointer",
                fontSize: 13,
                color: "#1c1b18",
                boxShadow: active ? "inset 3px 0 0 #d99350" : "none",
              }}>
                <span>{r.label}</span>
                <span style={{ textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{r.count}</span>
                <span style={{ textAlign: "right" }}>
                  <span style={{
                    fontSize: 10.5,
                    padding: "2px 8px",
                    background: r.sev === "high"   ? "#f9d8c4"
                              : r.sev === "medium" ? "#fdeed3"
                              : r.sev === "low"    ? "#ece7d4"
                              : "#dce6db",
                    color:      r.sev === "high"   ? "#9a3a23"
                              : r.sev === "medium" ? "#7d5512"
                              : r.sev === "low"    ? "#5a594e"
                              : "#3a5a43",
                    letterSpacing: "0.05em", textTransform: "uppercase",
                    fontWeight: 600,
                  }}>{r.sev}</span>
                </span>
              </button>
            );
          })}
        </div>
      </div>

      {/* flagged passage — driven by selection */}
      <div style={{
        marginTop: 22,
        background: sel.sev === "ok" ? "#e3edd9" : "#fdeed3",
        borderLeft: "3px solid " + (sel.sev === "ok" ? "#6aa37d" : "#d99350"),
        padding: "14px 18px",
      }}>
        <div style={{
          fontSize: 10.5, fontWeight: 700,
          color: sel.sev === "ok" ? "#3a5a43" : "#7d5512",
          letterSpacing: "0.08em", textTransform: "uppercase"
        }}>
          {sel.contract ? "Flagged · contract " + sel.contract + " · " + sel.title : "Cleared · 329 contracts"}
        </div>
        <div style={{
          fontSize: 12.5, marginTop: 8, color: "#28261f", lineHeight: 1.55,
          fontStyle: sel.contract ? "italic" : "normal",
        }}>
          {sel.quote}
        </div>
        <div style={{
          fontSize: 11.5,
          color: sel.sev === "ok" ? "#3a5a43" : "#7d5512",
          marginTop: 8,
        }}>
          {sel.why}
        </div>
      </div>

      {/* footer meta */}
      <div style={{
        marginTop: 26,
        paddingTop: 16,
        borderTop: "1px solid #d4ccb7",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 11, color: "#9c988e",
      }}>
        <span className="mono">REPORT-2026-Q1 · CONFIDENTIAL</span>
        <span className="mono">12 pages · 340 contracts cited</span>
      </div>
    </div>
  );
}

window.DocumentsPreview = DocumentsPreview;