// One-Pager + Solution Brief companion mocks
// Patterns: /One-pager---Name-Here---Template, /One-Pager---Industry/ResourceImage-Tech-One-pager,
// /One-Pager---Industry/LP---FinServ---One-pager---Feb-2026, /Solution-Brief-RegML-Compliance-at-the-Speed-of-AI/LP-Whitepaper-RegML
// /Solution-Brief-Trust-and-Resilience-at-the-Core-RegScale-s-A/LP-Whitepaper-Trust-and-Resilience-at-the-Core-RegScale-s-Ap

const { useState: useStateCB, useRef: useRefCB, useEffect: useEffectCB } = React;

// ── Reusable: scaled frame (mirrors campaign-mocks ScaledFrame but isolated to avoid name collisions)
function CBScaledFrame({ width, height, label, sublabel, children, dark = true }) {
  const [scale, setScale] = useStateCB(1);
  const ref = useRefCB(null);
  useEffectCB(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver(() => {
      const cw = el.clientWidth;
      setScale(Math.min(1, cw / width));
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, [width]);
  return (
    <div ref={ref} style={{ width: "100%" }}>
      <div style={{
        width: "100%",
        height: height * scale,
        position: "relative",
        background: dark ? "var(--rs-bg)" : "var(--rs-surface)",
        border: "1px solid var(--rs-border)",
        borderRadius: 8,
        overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", left: 0, top: 0,
          transform: `scale(${scale})`, transformOrigin: "0 0",
        }}>
          {children}
        </div>
      </div>
      <div style={{
        marginTop: 8,
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--rs-text-muted)",
      }}>
        <span style={{ fontWeight: 700, color: "var(--rs-text)", fontFamily: "Montserrat", fontSize: 13 }}>{label}</span>
        <span>{sublabel || `${width} × ${height}`}</span>
      </div>
    </div>
  );
}

// ── White RegScale wordmark used on dark gradients ────────────────────────
function WhiteWordmark({ width = 489 }) {
  const h = width * 0.333;
  return (
    <div style={{ width, height: h, display: "flex", alignItems: "center", gap: width * 0.04 }}>
      <div style={{
        width: h, height: h, flexShrink: 0,
        background: "url(./assets/regscale-symbol-color.png) center/contain no-repeat",
      }} />
      <div style={{
        fontFamily: "Montserrat", fontWeight: 800,
        fontSize: h * 0.55, lineHeight: 1, letterSpacing: "-0.02em",
        color: "#fff",
      }}>
        Reg<span style={{ color: "var(--rs-light-blue)" }}>Scale</span>
      </div>
    </div>
  );
}

// ── 1600×900 Landing-page resource preview (cover + gradient + wordmark)
function LPResourcePreview({ title, gradient, coverNode }) {
  return (
    <div style={{
      position: "relative", width: 1600, height: 900, overflow: "hidden",
      background: gradient,
      boxShadow: "0 30px 80px rgba(46,48,145,0.25)",
      borderRadius: 4,
    }}>
      {/* Optional pattern accent — RegScale "Component1" is a swirling brand graphic positioned right.
          Approximated via a soft blob + diagonal stripe overlay. */}
      <svg style={{ position: "absolute", right: -120, top: -180, width: 1100, height: 900, opacity: 0.18 }}
        viewBox="0 0 800 800">
        <defs>
          <radialGradient id="lpres-blob" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.9" />
            <stop offset="80%" stopColor="#fff" stopOpacity="0" />
          </radialGradient>
        </defs>
        <ellipse cx="400" cy="400" rx="380" ry="380" fill="url(#lpres-blob)" />
      </svg>
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, mixBlendMode: "overlay", opacity: 0.18 }}>
        <defs>
          <pattern id="lpres-stripes" width="22" height="22" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
            <line x1="0" y1="0" x2="0" y2="22" stroke="#000" strokeWidth="8" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#lpres-stripes)" />
      </svg>

      {/* Cover (portrait page) — left-anchored, with shadow per the Figma source */}
      <div style={{
        position: "absolute", left: 46, top: 32,
        width: 1068, height: 1358, // 8.5x11 ratio at this scale, oversized so it bleeds bottom
      }}>
        <div style={{
          position: "absolute", left: 25, top: 25,
          width: 979, height: 1270,
          background: "#fff",
          boxShadow: "12px 12px 18px rgba(0,0,0,0.4)",
        }}>
          {coverNode}
        </div>
      </div>

      {/* RegScale white wordmark — bottom-right, per source coordinates */}
      <div style={{ position: "absolute", left: 1123, top: 736, width: 489 }}>
        <WhiteWordmark width={489} />
      </div>
    </div>
  );
}

// ── 8.5 × 11 ONE-PAGER COVER ──────────────────────────────────────────────
// Designed from scratch using our verified design tokens.
const CONTENT_ONEPAGER = {
  pretitle: "INDUSTRY ONE-PAGER",
  title: "Mature Your Legacy GRC Program for Financial Services",
  subtitle: "How RegScale's Continuous Controls Monitoring platform helps banks, insurers, and capital-markets firms automate compliance across SOX, PCI DSS, FFIEC, and DORA.",
  challengeTitle: "The Challenge",
  challenge: "Financial-services GRC teams maintain 200+ overlapping controls across 12+ frameworks. Audit prep alone consumes 30–45% of compliance staff time. Spreadsheet-based evidence collection means audit findings surface weeks after the issue occurred — not in real time.",
  pillars: [
    { kicker: "01", title: "Automated Control Mapping", body: "Map a single control once; reuse across SOX, PCI DSS, FFIEC, DORA, ISO 27001, and NIST CSF 2.0. Reduce framework duplication by 70%." },
    { kicker: "02", title: "Real-Time Evidence", body: "Native integrations with AWS, Azure, GCP, ServiceNow, Splunk, and Jira pull evidence on a continuous schedule — not at audit time." },
    { kicker: "03", title: "Audit-Ready Always", body: "Auditor-grade exports in OSCAL, JSON, and PDF. Cut audit prep time from 6 weeks to 4 days." },
  ],
  outcomes: [
    { stat: "70%", label: "Less framework duplication" },
    { stat: "85%", label: "Faster audit cycles" },
    { stat: "30%", label: "Lower compliance TCO" },
  ],
  cta: "Schedule a demo",
  url: "regscale.com/finserv",
};

function OnePagerCover({ content = CONTENT_ONEPAGER }) {
  // 8.5 × 11 at 96 DPI = 816 × 1056. We'll render at 1100x1422 for crispness,
  // then scale-fit via parent. This is the *cover page* of the one-pager.
  const W = 1100, H = 1422;
  return (
    <div style={{
      position: "relative", width: W, height: H, overflow: "hidden",
      background: "#fff", color: "#15172E", fontFamily: "Roboto, sans-serif",
      boxShadow: "0 20px 60px rgba(0,0,0,0.18)",
    }}>
      {/* Top hero band — Compliance Blue → Mid Blue gradient */}
      <div style={{
        position: "absolute", left: 0, top: 0, width: "100%", height: 540,
        background: "linear-gradient(135deg, #2E3091 0%, #0070BD 65%, #29ABE3 100%)",
        overflow: "hidden",
      }}>
        {/* Stripe overlay */}
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, mixBlendMode: "overlay", opacity: 0.22 }}>
          <defs>
            <pattern id="op-stripes" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
              <line x1="0" y1="0" x2="0" y2="20" stroke="#000" strokeWidth="7" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#op-stripes)" />
        </svg>
        {/* Magenta diagonal accent — signature RegScale photo treatment */}
        <div style={{
          position: "absolute", right: -60, top: -100, width: 700, height: 700,
          background: "radial-gradient(ellipse at center, rgba(157,31,96,0.65) 0%, rgba(157,31,96,0) 60%)",
        }} />

        {/* Logo top-left */}
        <div style={{ position: "absolute", left: 64, top: 56 }}>
          <WhiteWordmark width={300} />
        </div>

        {/* Pretitle pill — uses webinar key style but smaller */}
        <div style={{ position: "absolute", right: 64, top: 64, display: "inline-flex", alignItems: "center", gap: 8 }}>
          <div style={{
            background: "var(--rs-light-blue)", color: "#fff",
            border: "3px solid #fff", borderRadius: 999,
            padding: "10px 22px",
            fontFamily: "Montserrat", fontWeight: 700, fontSize: 16,
            letterSpacing: "0.10em", textTransform: "uppercase",
          }}>{content.pretitle}</div>
        </div>

        {/* Title */}
        <div style={{
          position: "absolute", left: 64, top: 200, right: 64,
          fontFamily: "Montserrat", fontWeight: 800, fontSize: 64,
          lineHeight: 1.05, letterSpacing: "-0.01em", color: "#fff",
          textShadow: "0 6px 8px rgba(0,0,0,0.18)", textWrap: "balance",
        }}>
          {content.title}
        </div>

        {/* Subtitle */}
        <div style={{
          position: "absolute", left: 64, top: 410, right: 64,
          fontFamily: "Roboto", fontWeight: 400, fontSize: 22,
          lineHeight: 1.45, color: "rgba(255,255,255,0.95)",
        }}>
          {content.subtitle}
        </div>
      </div>

      {/* Body — Challenge */}
      <div style={{ position: "absolute", left: 64, top: 580, right: 64 }}>
        <div style={{
          fontFamily: "Montserrat", fontWeight: 800, fontSize: 14,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--rs-cyber-orange)", marginBottom: 12,
        }}>
          {content.challengeTitle}
        </div>
        <div style={{
          fontFamily: "Roboto", fontWeight: 400, fontSize: 18,
          lineHeight: 1.55, color: "#33323A",
        }}>
          {content.challenge}
        </div>
      </div>

      {/* Pillars — 3 columns */}
      <div style={{
        position: "absolute", left: 64, top: 800, right: 64,
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32,
      }}>
        {content.pillars.map((p, i) => (
          <div key={i} style={{
            borderTop: "4px solid var(--rs-light-blue)",
            paddingTop: 18,
          }}>
            <div style={{
              fontFamily: "Montserrat", fontWeight: 800, fontSize: 14,
              color: "var(--rs-light-blue)", letterSpacing: "0.1em",
              marginBottom: 6,
            }}>{p.kicker}</div>
            <div style={{
              fontFamily: "Montserrat", fontWeight: 700, fontSize: 22,
              lineHeight: 1.15, color: "#15172E", marginBottom: 10,
              letterSpacing: "-0.01em",
            }}>{p.title}</div>
            <div style={{
              fontFamily: "Roboto", fontWeight: 400, fontSize: 14,
              lineHeight: 1.55, color: "#33323A",
            }}>{p.body}</div>
          </div>
        ))}
      </div>

      {/* Outcomes strip — Slate Blue band */}
      <div style={{
        position: "absolute", left: 0, bottom: 130, width: "100%", height: 130,
        background: "linear-gradient(90deg, #2E3091 0%, #0070BD 100%)",
        display: "flex", alignItems: "center", justifyContent: "space-around",
        padding: "0 64px",
      }}>
        {content.outcomes.map((o, i) => (
          <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 14, color: "#fff" }}>
            <div style={{
              fontFamily: "Montserrat", fontWeight: 800, fontSize: 56,
              letterSpacing: "-0.02em", color: "var(--rs-light-blue)",
              lineHeight: 1,
            }}>{o.stat}</div>
            <div style={{
              fontFamily: "Roboto", fontWeight: 500, fontSize: 16,
              maxWidth: 200, lineHeight: 1.3,
            }}>{o.label}</div>
          </div>
        ))}
      </div>

      {/* Footer — CTA + URL */}
      <div style={{
        position: "absolute", left: 0, bottom: 0, width: "100%", height: 130,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 64px", background: "#fff",
      }}>
        <button style={{
          background: "var(--rs-cyber-orange)", color: "#fff",
          border: "3px solid #fff", borderRadius: 999,
          fontFamily: "Roboto", fontWeight: 700, fontSize: 18,
          letterSpacing: "0.08em", textTransform: "uppercase",
          padding: "16px 36px", boxShadow: "0 8px 24px rgba(242,89,36,0.4)",
          cursor: "pointer",
        }}>{content.cta} →</button>
        <div style={{
          fontFamily: "Montserrat", fontWeight: 700, fontSize: 18,
          color: "#2E3091", letterSpacing: "0.04em",
        }}>{content.url}</div>
      </div>
    </div>
  );
}

// ── SOLUTION BRIEF — multi-page (cover + interior) ────────────────────────
const CONTENT_BRIEF = {
  pretitle: "SOLUTION BRIEF",
  title: "Continuous Controls Monitoring at the Speed of AI",
  subtitle: "RegML transforms compliance from a quarterly snapshot into a continuous, evidence-driven control plane — purpose-built for highly regulated AI systems.",
  intro: "Traditional GRC programs were built for an era when controls changed slowly and audit cycles ran annually. AI deployments compress that cycle to weeks. RegML is RegScale's purpose-built compliance engine for AI workloads — automating control mapping, evidence collection, and risk attestation across NIST AI RMF, ISO 42001, EU AI Act, and your enterprise framework of record.",
  sections: [
    { kicker: "Problem", title: "The compliance gap in AI",
      body: "AI systems pose a unique compliance challenge. Models retrain weekly, training data shifts daily, and inference workloads scale to thousands of API calls per second. Yet most organizations evaluate AI controls quarterly using point-in-time spreadsheets. The result: security and compliance teams operate with stale evidence and limited visibility into the live posture of production AI systems. Internal audit findings surface 60–90 days after the actual control failure.",
      bullets: [
        "Model drift goes undetected between audit windows",
        "Training data lineage is captured manually, inconsistently",
        "Risk owners can't attest to controls they can't see in real time",
      ]
    },
    { kicker: "Solution", title: "RegML connects controls to live AI workloads",
      body: "RegML pulls live telemetry from your model registry, training pipeline, vector store, and inference layer — then maps each signal to the relevant NIST AI RMF, ISO 42001, and EU AI Act control. Every control has continuous evidence backing it. Every change to your AI system updates the control state in real time.",
      bullets: [
        "Native integrations: Databricks MLflow, SageMaker, Azure ML, Vertex AI, Weights & Biases",
        "Pre-mapped controls: NIST AI RMF, ISO 42001, EU AI Act, OWASP LLM Top 10",
        "Auditor-grade exports: OSCAL, JSON, PDF, custom CSV",
      ]
    },
    { kicker: "Outcome", title: "From quarterly audits to always audit-ready",
      body: "Customers running RegML close their AI compliance gaps in weeks, not quarters. The platform replaces 80–90% of manual evidence collection. Internal audit cycles compress from 6 weeks of prep to 4 days. Risk owners attest to controls based on real-time signal, not stale spreadsheets.",
      bullets: [
        "Compliance teams reclaim 30–45% of staff capacity",
        "Audit findings surface in days, not quarters",
        "Risk attestations backed by live evidence",
      ]
    },
  ],
  outcomes: [
    { stat: "85%", label: "Faster audit cycles" },
    { stat: "70%", label: "Less manual evidence work" },
    { stat: "40+", label: "Pre-mapped AI controls" },
    { stat: "4 days", label: "From 6-week audit prep" },
  ],
  cta: "Talk to RegScale",
  url: "regscale.com/regml",
};

function BriefCover({ content = CONTENT_BRIEF }) {
  // Same dimensions as one-pager. More restrained — matches the "Whitepaper" cover style.
  const W = 1100, H = 1422;
  return (
    <div style={{
      position: "relative", width: W, height: H, overflow: "hidden",
      background: "#fff", boxShadow: "0 20px 60px rgba(0,0,0,0.18)",
      fontFamily: "Roboto, sans-serif",
    }}>
      {/* Full-bleed gradient — RegML/AI direction (Secure Teal → Cloud Blue) */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(135deg, #00D6AB 0%, #15C0DE 50%, #0070BD 100%)",
      }}>
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, mixBlendMode: "overlay", opacity: 0.22 }}>
          <defs>
            <pattern id="bc-stripes" width="22" height="22" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
              <line x1="0" y1="0" x2="0" y2="22" stroke="#000" strokeWidth="8" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#bc-stripes)" />
        </svg>
        {/* Magenta corner accent */}
        <div style={{
          position: "absolute", left: -200, bottom: -300, width: 800, height: 800,
          background: "radial-gradient(ellipse at center, rgba(157,31,96,0.55) 0%, rgba(157,31,96,0) 60%)",
        }} />
      </div>

      {/* Logo top-left */}
      <div style={{ position: "absolute", left: 64, top: 64 }}>
        <WhiteWordmark width={300} />
      </div>

      {/* Pretitle */}
      <div style={{
        position: "absolute", left: 64, top: 200,
        color: "#fff",
        fontFamily: "Montserrat", fontWeight: 700, fontSize: 16,
        letterSpacing: "0.20em", textTransform: "uppercase",
      }}>
        {content.pretitle}
      </div>
      <div style={{
        position: "absolute", left: 64, top: 234,
        width: 80, height: 4, background: "var(--rs-cyber-orange)",
      }} />

      {/* Title */}
      <div style={{
        position: "absolute", left: 64, top: 280, right: 64,
        fontFamily: "Montserrat", fontWeight: 800, fontSize: 84,
        lineHeight: 1.0, letterSpacing: "-0.02em", color: "#fff",
        textShadow: "0 8px 12px rgba(0,0,0,0.22)", textWrap: "balance",
      }}>
        {content.title}
      </div>

      {/* Subtitle */}
      <div style={{
        position: "absolute", left: 64, top: 600, right: 200,
        fontFamily: "Roboto", fontWeight: 400, fontSize: 26,
        lineHeight: 1.45, color: "rgba(255,255,255,0.95)",
      }}>
        {content.subtitle}
      </div>

      {/* Big numeric anchor — outcomes preview */}
      <div style={{
        position: "absolute", left: 64, bottom: 220, right: 64,
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18,
      }}>
        {content.outcomes.map((o, i) => (
          <div key={i} style={{ color: "#fff" }}>
            <div style={{
              fontFamily: "Montserrat", fontWeight: 800, fontSize: 56,
              letterSpacing: "-0.02em", lineHeight: 1, color: "#fff",
            }}>{o.stat}</div>
            <div style={{
              marginTop: 8, paddingTop: 10,
              borderTop: "2px solid rgba(255,255,255,0.4)",
              fontFamily: "Roboto", fontWeight: 500, fontSize: 13,
              lineHeight: 1.35,
            }}>{o.label}</div>
          </div>
        ))}
      </div>

      {/* Footer band */}
      <div style={{
        position: "absolute", left: 0, bottom: 0, width: "100%", height: 130,
        background: "rgba(21,23,46,0.85)", backdropFilter: "blur(8px)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 64px",
      }}>
        <div style={{
          fontFamily: "Montserrat", fontWeight: 700, fontSize: 14,
          color: "rgba(255,255,255,0.7)", letterSpacing: "0.18em", textTransform: "uppercase",
        }}>RegScale · Compliance as Code</div>
        <div style={{
          fontFamily: "Montserrat", fontWeight: 700, fontSize: 18,
          color: "#fff", letterSpacing: "0.04em",
        }}>{content.url}</div>
      </div>
    </div>
  );
}

function BriefInterior({ content = CONTENT_BRIEF }) {
  const W = 1100, H = 1422;
  return (
    <div style={{
      position: "relative", width: W, height: H, overflow: "hidden",
      background: "#fff", color: "#15172E", fontFamily: "Roboto, sans-serif",
      boxShadow: "0 20px 60px rgba(0,0,0,0.18)",
    }}>
      {/* Header band */}
      <div style={{
        position: "absolute", left: 0, top: 0, width: "100%", height: 60,
        background: "var(--rs-compliance-blue)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 64px",
      }}>
        <WhiteWordmark width={140} />
        <div style={{
          color: "rgba(255,255,255,0.85)",
          fontFamily: "Montserrat", fontWeight: 700, fontSize: 11,
          letterSpacing: "0.18em", textTransform: "uppercase",
        }}>{content.pretitle} · RegML</div>
      </div>

      {/* Intro */}
      <div style={{ position: "absolute", left: 64, top: 110, right: 64 }}>
        <div style={{
          fontFamily: "Montserrat", fontWeight: 800, fontSize: 38,
          lineHeight: 1.1, letterSpacing: "-0.01em",
          color: "#15172E", marginBottom: 16,
        }}>The Compliance Operating System for AI</div>
        <div style={{
          fontFamily: "Roboto", fontWeight: 400, fontSize: 16,
          lineHeight: 1.55, color: "#33323A",
          maxWidth: 900,
        }}>{content.intro}</div>
      </div>

      {/* Three sections */}
      <div style={{ position: "absolute", left: 64, top: 320, right: 64, display: "flex", flexDirection: "column", gap: 36 }}>
        {content.sections.map((s, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "120px 1fr", gap: 28,
            paddingBottom: 32,
            borderBottom: i < content.sections.length - 1 ? "1px solid rgba(0,0,0,0.08)" : "none",
          }}>
            <div>
              <div style={{
                fontFamily: "Montserrat", fontWeight: 800, fontSize: 12,
                letterSpacing: "0.18em", textTransform: "uppercase",
                color: "var(--rs-cyber-orange)",
              }}>{s.kicker}</div>
              <div style={{ width: 36, height: 3, background: "var(--rs-cyber-orange)", marginTop: 8 }} />
            </div>
            <div>
              <div style={{
                fontFamily: "Montserrat", fontWeight: 700, fontSize: 26,
                lineHeight: 1.15, letterSpacing: "-0.01em",
                color: "#15172E", marginBottom: 12,
              }}>{s.title}</div>
              <div style={{
                fontFamily: "Roboto", fontWeight: 400, fontSize: 14,
                lineHeight: 1.6, color: "#33323A", marginBottom: 14,
              }}>{s.body}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                {s.bullets.map((b, j) => (
                  <li key={j} style={{
                    display: "flex", gap: 12, alignItems: "flex-start",
                    fontFamily: "Roboto", fontWeight: 500, fontSize: 13.5,
                    lineHeight: 1.5, color: "#15172E", marginBottom: 8,
                  }}>
                    <svg width="20" height="20" viewBox="0 0 20 20" style={{ flexShrink: 0, marginTop: 2 }}>
                      <circle cx="10" cy="10" r="9" fill="var(--rs-secure-teal)" />
                      <path d="M5.5 10.5 l3 3 l6.5 -7" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>

      {/* Footer CTA */}
      <div style={{
        position: "absolute", left: 0, bottom: 0, width: "100%", height: 110,
        background: "linear-gradient(90deg, #2E3091 0%, #0070BD 100%)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 64px",
      }}>
        <div>
          <div style={{
            fontFamily: "Montserrat", fontWeight: 700, fontSize: 22,
            color: "#fff", letterSpacing: "-0.01em",
          }}>Ready to operationalize AI compliance?</div>
          <div style={{
            fontFamily: "Roboto", fontWeight: 400, fontSize: 14,
            color: "rgba(255,255,255,0.85)", marginTop: 2,
          }}>Book a 30-minute working session with a RegScale solutions architect.</div>
        </div>
        <button style={{
          background: "var(--rs-cyber-orange)", color: "#fff",
          border: "3px solid #fff", borderRadius: 999,
          fontFamily: "Roboto", fontWeight: 700, fontSize: 16,
          letterSpacing: "0.08em", textTransform: "uppercase",
          padding: "14px 28px", boxShadow: "0 8px 24px rgba(242,89,36,0.4)",
          cursor: "pointer", whiteSpace: "nowrap",
        }}>{content.cta} →</button>
      </div>
    </div>
  );
}

// ── Tiny cover thumbnail used inside the LP-resource preview frame ────────
function CoverThumb({ which = "onepager" }) {
  // Fits inside the 979×1270 placeholder; we scale our 1100×1422 cover into it.
  const W = 979, H = 1270;
  const sx = W / 1100, sy = H / 1422;
  const s = Math.min(sx, sy);
  const Cover = which === "brief" ? BriefCover : OnePagerCover;
  return (
    <div style={{ width: W, height: H, overflow: "hidden", background: "#fff" }}>
      <div style={{ transform: `scale(${s})`, transformOrigin: "0 0" }}>
        <Cover />
      </div>
    </div>
  );
}

// ── Pages ─────────────────────────────────────────────────────────────────

function OnePagerPage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Reference · Sales enablement" title="One-Pager — Industry brief"
        lede="Single-page sales artifact for industry vertical conversations. Cover designed using the verified RegScale brand system; LP/Resource preview wraps the cover in the canonical 1600×900 graphic with gradient and white wordmark."
        provenance={{ level: "verified", note: "1600×900 LP composition matches /One-Pager---Industry/LP---FinServ---One-pager---Feb-2026 (figma node 980:152) and /One-Pager---Industry/ResourceImage-Tech-One-pager (node 724:755). White wordmark placement (left:1123, top:736, width:489) matches the source. Cover content is original, designed against verified brand tokens." }} />

      <H2 sub="Portrait, 8.5×11. Cover only — body pages would extend to a 4-page leave-behind.">Cover — One-pager</H2>
      <CBScaledFrame width={1100} height={1422} label="One-pager cover" sublabel="8.5 × 11 in (portrait)">
        <OnePagerCover />
      </CBScaledFrame>

      <H2 sub="The 1600×900 hero used on landing pages and resource cards. Cover sits left, RegScale wordmark anchors bottom-right.">LP / Resource preview — 1600×900</H2>
      <CBScaledFrame width={1600} height={900} label="LP Resource Preview" sublabel="1600 × 900">
        <LPResourcePreview
          gradient="linear-gradient(135deg, #2E3091 0%, #0070BD 65%, #29ABE3 100%)"
          coverNode={<CoverThumb which="onepager" />}
        />
      </CBScaledFrame>

      <H2>Anatomy</H2>
      <div className="grid grid-2">
        {[
          ["Hero band — gradient + magenta accent", "Compliance Blue → Mid Blue → Light Blue diagonal, with a Protected Purple radial glow in the upper-right per the canonical photo treatment."],
          ["Pretitle pill", "Light Blue + 3px white border, ALL CAPS Montserrat 700, 0.10em tracking. Identifies the asset type."],
          ["Title", "Montserrat 800 / 64px / -0.01em, white with 6px shadow, balance-wrapped to keep line-end ragged-right."],
          ["Subtitle", "Roboto 400 / 22px, 1.45 leading, 95% white. Says what's actually delivered."],
          ["Pillar columns", "Three numbered pillars with Light Blue 4px top rule. Numbers in Montserrat 800 + 0.1em tracking."],
          ["Outcomes strip", "Slate Blue band with three large stats. Numbers in Light Blue 56px Montserrat 800; labels in Roboto 500 / 16px."],
          ["Footer CTA", "Solid Cyber Orange + white border, Roboto Bold ALL CAPS — matches CTA standards from the verified guide."],
          ["URL", "Compliance Blue Montserrat 700 — left for designers to swap per campaign."],
        ].map(([k, v]) => (
          <div key={k} className="card" style={{ padding: 16 }}>
            <h4 style={{ margin: "0 0 6px", fontSize: 13 }}>{k}</h4>
            <p style={{ margin: 0, fontSize: 12.5, color: "var(--rs-text-muted)", lineHeight: 1.55 }}>{v}</p>
          </div>
        ))}
      </div>

      <H2>Production checklist</H2>
      <div className="card" style={{ padding: 18 }}>
        <ul style={{ margin: 0, paddingLeft: 20, fontSize: 13.5, lineHeight: 1.85 }}>
          <li><b>File specs:</b> 8.5 × 11 in @ 300 DPI for print, 2x PDF/X-1a for web. Bleed 0.125" all sides.</li>
          <li><b>Title length:</b> 6–10 words, balance-wraps to 2 lines max. Cut everything else.</li>
          <li><b>Three pillars:</b> non-negotiable. Two columns reads as a partnership graphic; four feels like a product spec.</li>
          <li><b>Outcomes strip:</b> always three stats, always quantified. "Faster" without a percentage is a hedge.</li>
          <li><b>Logo:</b> RegScale wordmark white-on-gradient, top-left only. No partner co-brand on the cover — partner logos belong on page 2.</li>
        </ul>
      </div>
    </div>
  );
}

function SolutionBriefPage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Reference · Sales enablement" title="Solution Brief — RegML"
        lede="Two-page solution brief: cover + interior. Built using verified brand tokens, gradient direction tuned to the AI/RegML product line per the source (Secure Teal → Cloud Blue)."
        provenance={{ level: "verified", note: "Cover gradient direction matches /Solution-Brief-RegML-Compliance-at-the-Speed-of-AI/LP-Whitepaper-RegML (node 73:28): linear-gradient(rgb(0,214,171) 0%, rgb(21,192,222) 100%). Interior page format and section pattern are extrapolated from common solution-brief structure across the file (Trust & Resilience, Access Reviews, Automated Evidence Collection)." }} />

      <H2 sub="Cover anchors the asset. Pretitle, large title, subtitle, four-stat outcomes preview.">Cover</H2>
      <CBScaledFrame width={1100} height={1422} label="Brief cover" sublabel="8.5 × 11 in (portrait)">
        <BriefCover />
      </CBScaledFrame>

      <H2 sub="Three-section structure: Problem → Solution → Outcome. Each opens with a short summary then 3 supporting bullets.">Interior page</H2>
      <CBScaledFrame width={1100} height={1422} label="Brief interior — Problem · Solution · Outcome" sublabel="8.5 × 11 in (portrait)">
        <BriefInterior />
      </CBScaledFrame>

      <H2 sub="The 1600×900 hero used on resource pages and email graphics. RegML uses the Secure Teal → Cloud Blue gradient per the verified source.">LP / Resource preview — 1600×900</H2>
      <CBScaledFrame width={1600} height={900} label="LP Resource Preview — RegML brief" sublabel="1600 × 900">
        <LPResourcePreview
          gradient="linear-gradient(135deg, #00D6AB 0%, #15C0DE 100%)"
          coverNode={<CoverThumb which="brief" />}
        />
      </CBScaledFrame>

      <H2>Section pattern — Problem · Solution · Outcome</H2>
      <div className="grid grid-3">
        {[
          ["Problem", "Name the gap, with stakes. Quantify pain. End on the cost of inaction."],
          ["Solution", "What RegScale does specifically — not a feature list, a connection between the customer's reality and the platform's capabilities. Native integrations get named here."],
          ["Outcome", "Quantified results. Time-to-value. Compress the customer's audit cycle from weeks to days. Use real customer numbers when available."],
        ].map(([k, v]) => (
          <div key={k} className="card" style={{ padding: 16 }}>
            <h4 style={{ margin: "0 0 6px", fontSize: 14 }}>{k}</h4>
            <p style={{ margin: 0, fontSize: 12.5, color: "var(--rs-text-muted)", lineHeight: 1.55 }}>{v}</p>
          </div>
        ))}
      </div>

      <H2>Variants</H2>
      <div className="grid grid-2">
        <div className="card" style={{ padding: 18 }}>
          <h4 style={{ margin: "0 0 6px" }}>Industry brief</h4>
          <p style={{ margin: "0 0 8px", fontSize: 13, color: "var(--rs-text-muted)" }}>Compliance Blue gradient family. FinServ, DoW, Tech, Public Sector, Defense.</p>
          <div style={{ display: "flex", gap: 8 }}>
            <span style={{ width: 32, height: 32, borderRadius: 4, background: "linear-gradient(135deg, #2E3091, #0070BD)" }} />
            <span style={{ width: 32, height: 32, borderRadius: 4, background: "linear-gradient(135deg, #0070BD, #29ABE3)" }} />
          </div>
        </div>
        <div className="card" style={{ padding: 18 }}>
          <h4 style={{ margin: "0 0 6px" }}>Product brief — RegML</h4>
          <p style={{ margin: "0 0 8px", fontSize: 13, color: "var(--rs-text-muted)" }}>Secure Teal gradient family. RegML, GenAI, AI on-prem.</p>
          <div style={{ display: "flex", gap: 8 }}>
            <span style={{ width: 32, height: 32, borderRadius: 4, background: "linear-gradient(135deg, #00D6AB, #15C0DE)" }} />
            <span style={{ width: 32, height: 32, borderRadius: 4, background: "linear-gradient(135deg, #00D6AB, #0070BD)" }} />
          </div>
        </div>
        <div className="card" style={{ padding: 18 }}>
          <h4 style={{ margin: "0 0 6px" }}>Partnership brief</h4>
          <p style={{ margin: "0 0 8px", fontSize: 13, color: "var(--rs-text-muted)" }}>Add a second co-brand band on the cover, partner logo treatment per /Joint-Logo-Lockups guidance. Tines, Dragos, Sicura, Coalfire, Leidos, UCF.</p>
        </div>
        <div className="card" style={{ padding: 18 }}>
          <h4 style={{ margin: "0 0 6px" }}>Use-case brief</h4>
          <p style={{ margin: "0 0 8px", fontSize: 13, color: "var(--rs-text-muted)" }}>Workflow-led. Open with a customer scenario. Outcomes anchor on time-to-value rather than percentage savings.</p>
        </div>
      </div>

      <H2>Production notes</H2>
      <div className="card" style={{ padding: 18 }}>
        <ul style={{ margin: 0, paddingLeft: 20, fontSize: 13.5, lineHeight: 1.85 }}>
          <li><b>Page count:</b> 4 pages standard (cover + 2 interior + back). Briefs over 8 pages should ship as eBooks.</li>
          <li><b>Cover gradient:</b> match the product family. Don't invent new gradients per asset — use the canonical six.</li>
          <li><b>Interior typography:</b> Section title Montserrat 700 / 26px. Body Roboto 400 / 14px / 1.6 leading. Bullets get a Secure Teal checkmark dot.</li>
          <li><b>Outcomes preview:</b> 3–4 stats max on the cover. Numbers do the heavy lifting; labels stay terse.</li>
          <li><b>CTA:</b> footer band, solid Cyber Orange. URL second priority, Compliance Blue Montserrat 700.</li>
          <li><b>Print:</b> 8.5 × 11 @ 300 DPI, PDF/X-1a, 0.125" bleed, CMYK. Web export retains RGB.</li>
        </ul>
      </div>
    </div>
  );
}

Object.assign(window, { OnePagerPage, SolutionBriefPage });