// Voice & tone, Do's & Don'ts, Templates pages
function VoicePage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Voice" title="Voice & tone"
        lede="We speak to compliance leaders who are tired of being slow. Direct, technical, confident — never glib."
        provenance={{ level: "recommended", note: "No voice guide exists in source materials. House-words, avoid-list, and capitalization rules are authored from observed marketing-surface output. Brand-team review recommended." }} />

      <H2 sub="Three modes. Same voice, calibrated for context.">Voice spectrum</H2>
      <div className="grid grid-3">
        <div className="card">
          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
            <span className="tag tip">Authoritative</span>
          </div>
          <h4 style={{ margin: "0 0 6px", fontSize: 15 }}>Whitepapers, datasheets, executive decks</h4>
          <p style={{ margin: 0, fontSize: 13, color: "var(--rs-text-muted)" }}>Declarative. Cite frameworks by name. No hedging. The reader is a peer.</p>
        </div>
        <div className="card">
          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
            <span className="tag tip" style={{ background: "rgba(0,219,238,0.15)", color: "#0086a6" }}>Confident</span>
          </div>
          <h4 style={{ margin: "0 0 6px", fontSize: 15 }}>Webinar pages, campaigns, social</h4>
          <p style={{ margin: 0, fontSize: 13, color: "var(--rs-text-muted)" }}>Active voice. Concrete outcomes. Numbers when we have them.</p>
        </div>
        <div className="card">
          <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
            <span className="tag tip" style={{ background: "rgba(241,148,33,0.15)", color: "#A55A14" }}>Plainspoken</span>
          </div>
          <h4 style={{ margin: "0 0 6px", fontSize: 15 }}>UI copy, support, onboarding</h4>
          <p style={{ margin: 0, fontSize: 13, color: "var(--rs-text-muted)" }}>Short. Helpful. The reader has a job to do; get out of the way.</p>
        </div>
      </div>

      <H2 sub="The brand voice rules, with side-by-sides.">We are / We aren't</H2>
      <div className="grid grid-2">
        {[
          ["Direct","Performative",
            "Cuts ATO time from 12 months to weeks.",
            "Unlock the future of compliance with our revolutionary platform."],
          ["Technical","Buzzword-laden",
            "OSCAL-native. Ingest baselines as code, generate FedRAMP packages on demand.",
            "Synergistic AI-powered solutions for next-gen compliance excellence."],
          ["Specific","Vague",
            "847× faster than spreadsheet-based controls workflows.",
            "Significantly faster than legacy approaches."],
          ["Confident","Apologetic",
            "RegScale is the system of record for continuous controls monitoring.",
            "We hope to eventually become a trusted partner in your compliance journey."],
        ].map(([is, isnt, isEx, isntEx], i) => (
          <div key={i} className="voice-card">
            <div className="voice-side">
              <h5 className="is">We are {is}</h5>
              <p>"{isEx}"</p>
            </div>
            <div className="voice-side">
              <h5 className="isnt">We aren't {isnt}</h5>
              <p>"{isntEx}"</p>
            </div>
          </div>
        ))}
      </div>

      <H2 sub="Words and phrases by status.">Vocabulary</H2>
      <div className="grid grid-2">
        <div className="card">
          <h4 style={{ margin: "0 0 12px", fontSize: 13, color: "var(--rs-indigo)", letterSpacing: "0.16em", textTransform: "uppercase" }}>House words</h4>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {["Continuous controls monitoring","CCM","OSCAL","ATO","FedRAMP","compliance as code","real-time","engineered","scale","cATO","baseline"].map(w => (
              <span key={w} className="tag tip">{w}</span>
            ))}
          </div>
        </div>
        <div className="card">
          <h4 style={{ margin: "0 0 12px", fontSize: 13, color: "var(--rs-orange)", letterSpacing: "0.16em", textTransform: "uppercase" }}>Avoid</h4>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {["revolutionary","game-changing","best-in-class","seamless","robust","unleash","empower","leverage","next-gen","cutting-edge"].map(w => (
              <span key={w} className="tag dont">{w}</span>
            ))}
          </div>
        </div>
      </div>

      <H2>Capitalization & punctuation</H2>
      <div className="card" style={{ padding: 24 }}>
        <ul style={{ margin: 0, paddingLeft: 20, fontSize: 13.5, lineHeight: 1.8 }}>
          <li><b>"RegScale"</b> always. Never "Regscale", "regscale", or "Reg Scale".</li>
          <li>Sentence-case headlines. Title-case product names only.</li>
          <li>Acronyms uppercase: <code>OSCAL</code>, <code>FedRAMP</code>, <code>NIST</code>, <code>SOC 2</code> (with space, with number).</li>
          <li>Em dashes — without spaces — for emphasis. No double hyphens.</li>
          <li>Oxford comma. Always.</li>
          <li>Numbers under 10 spelled out in body copy; numerals in headlines and stats.</li>
        </ul>
      </div>
    </div>
  );
}

function DontsPage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Rules" title="Do's & Don'ts"
        lede="Quick-reference checklist for every campaign asset that ships."
        provenance={{ level: "mixed", note: "Color, type, and logo rules verified from source usage. Motion and imagery rules are proposed standards." }} />

      {[
        { title: "Color", items: [
          ["do", "Use Indigo + Cyan as the dominant pairing."],
          ["do", "Reserve Orange exclusively for primary CTAs."],
          ["dont", "Mix four+ brand colors in one composition."],
          ["dont", "Use Orange for body text, links, or non-actionable accents."],
          ["dont", "Recolor gradients — use the eight official stops only."],
        ]},
        { title: "Typography", items: [
          ["do", "Set headlines tight (1.05–1.15 line-height)."],
          ["do", "Use Roboto Bold ALL CAPS for buttons only."],
          ["dont", "Use display weights below 14px."],
          ["dont", "Italicize body copy for emphasis — use weight instead."],
        ]},
        { title: "Logo", items: [
          ["do", "Maintain 1X clear-space (symbol-height)."],
          ["do", "Use the inverse mark on Ink, Navy, and photography."],
          ["dont", "Add drop shadows, outlines, or effects to the wordmark."],
          ["dont", "Place the logo on busy or low-contrast backgrounds."],
        ]},
        { title: "Motion", items: [
          ["do", "Use ease-emphasis sparingly — one focal moment per screen."],
          ["do", "Honor prefers-reduced-motion."],
          ["dont", "Animate everything just because you can."],
          ["dont", "Use durations over 900ms for UI transitions."],
        ]},
        { title: "Imagery", items: [
          ["do", "Treat photography with the cyan→navy overlay at 0.7 opacity."],
          ["do", "Choose imagery that reads at thumbnail scale."],
          ["dont", "Use stock photography of generic ‘teamwork’ scenes."],
          ["dont", "Place type over the busiest area of an image."],
        ]},
      ].map(group => (
        <div key={group.title}>
          <H2>{group.title}</H2>
          <div className="grid grid-2">
            {group.items.map(([k, t], i) => (
              <div key={i} className="card" style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: 16 }}>
                <span className={"tag " + k}>{k === "do" ? "Do" : "Don't"}</span>
                <p style={{ margin: 0, fontSize: 13.5 }}>{t}</p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function TemplatesPage() {
  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Reference · Templates" title="Campaign surfaces"
        lede="Three reference layouts every webinar and event campaign uses. Built from the same tokens, scaled to surface."
        provenance={{ level: "verified", note: "Hero composition (gradient + Sky webinar key + CTA pill) modeled directly on the Tines, FedRAMP, and CMMC webinar landing pages." }} />

      <H2 sub="1600×900 — webinar & event landing page hero">Landing page hero</H2>
      <div className="card" style={{ padding: 16 }}>
        <div style={{ aspectRatio: "1600/900", borderRadius: 8, overflow: "hidden", position: "relative", background: "var(--rs-grad-hero)" }}>
          <div style={{ position: "absolute", inset: 0, background: "var(--rs-grad-overlay)", opacity: 0.65 }} />
          <div style={{ position: "absolute", left: 28, top: 28, display: "flex", alignItems: "center", gap: 16 }}>
            <RegScaleLogo size="md" inverse />
            <div style={{ width: 2, height: 36, background: "rgba(255,255,255,0.4)" }} />
            <div style={{ color: "#fff", fontWeight: 700, fontSize: 18, opacity: 0.9 }}>Partner</div>
          </div>
          <div style={{ position: "absolute", right: 28, top: 28, padding: "8px 28px", background: "var(--rs-sky)", border: "4px solid #fff", borderRadius: 999, color: "#fff", fontWeight: 700, fontSize: 13, letterSpacing: "0.18em", textTransform: "uppercase" }}>webinar</div>
          <div style={{ position: "absolute", left: 28, top: "32%", color: "#fff", fontWeight: 800, fontSize: 48, lineHeight: 1.05, maxWidth: "75%", textShadow: "0 4px 6px rgba(0,0,0,0.25)" }}>Headline goes here, two lines max.</div>
          <div style={{ position: "absolute", left: 28, bottom: 36, padding: "12px 36px", background: "var(--rs-cta-fill)", border: "4px solid #fff", borderRadius: 999, color: "#fff", fontFamily: "Roboto", fontWeight: 700, fontSize: 16, letterSpacing: "0.18em", textTransform: "uppercase" }}>Watch on-demand now</div>
        </div>
        <p style={{ margin: "12px 0 0", fontSize: 12, color: "var(--rs-text-muted)" }}>
          Hero gradient + image overlay + Light Blue webinar key (top-right) + solid Cyber Orange CTA pill (bottom-left). The signature RegScale composition.
        </p>
      </div>

      <H2 sub="650×150 — email banner / Zoom header">Email banner</H2>
      <div className="card" style={{ padding: 16 }}>
        <div style={{ aspectRatio: "650/150", borderRadius: 6, overflow: "hidden", position: "relative", background: "var(--rs-grad-email)" }}>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(46,53,142,0.2) 19%, rgba(106,196,250,0.4) 78%)" }} />
          <div style={{ position: "absolute", left: 20, top: "50%", transform: "translateY(-50%)" }}>
            <RegScaleLogo size="sm" inverse />
          </div>
          <div style={{ position: "absolute", right: 20, top: "50%", transform: "translateY(-50%)", color: "#fff", textAlign: "right" }}>
            <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.8 }}>Webinar · April 30</div>
            <div style={{ fontSize: 18, fontWeight: 800 }}>State of CCM 2026</div>
          </div>
        </div>
      </div>

      <H2 sub="320×50 — display ad">HTML5 ad unit</H2>
      <div className="card" style={{ padding: 16, display: "flex", justifyContent: "center" }}>
        <div style={{ width: 320, height: 50, borderRadius: 4, overflow: "hidden", position: "relative", background: "var(--rs-grad-hero)", display: "flex", alignItems: "center", padding: "0 12px", gap: 10 }}>
          <div style={{ width: 28, height: 28, background: "url(./assets/regscale-symbol-color.png) center/contain no-repeat", flexShrink: 0 }} />
          <div style={{ color: "#fff", fontSize: 11, fontWeight: 700, lineHeight: 1.2, flex: 1 }}>
            <div style={{ opacity: 0.8, letterSpacing: "0.12em", textTransform: "uppercase", fontSize: 8 }}>Webinar</div>
            <div>State of CCM 2026 →</div>
          </div>
          <div style={{ padding: "4px 10px", background: "var(--rs-cta-fill)", borderRadius: 999, color: "#fff", fontSize: 9, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", border: "1.5px solid #fff" }}>Register</div>
        </div>
      </div>

      <H2>Asset downloads (placeholder)</H2>
      <div className="card" style={{ padding: 14 }}>
        {[
          { n: "Brand Tokens", m: "tokens.css · tokens.json · 6 KB" },
          { n: "Logo Pack", m: "Primary, Inverse, Symbol — SVG + PNG · 1.8 MB" },
          { n: "Gradient CSS", m: "All 8 gradients with stops · 2 KB" },
          { n: "Webinar LP Template", m: "1600×900 Figma · 4.2 MB" },
          { n: "Email Banner Template", m: "650×150 PSD + Figma · 1.6 MB" },
          { n: "Motion Prefab Library", m: "8 React components + CSS · 12 KB" },
        ].map((a, i) => (
          <div key={i} className="asset-row">
            <div className="file">
              <div className="ico">{a.n.split(" ").map(s=>s[0]).join("").slice(0,2)}</div>
              <div>
                <div className="name">{a.n}</div>
                <div className="meta">{a.m}</div>
              </div>
            </div>
            <DownloadButton />
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { VoicePage, DontsPage, TemplatesPage });