// Page sections — Brand Expression
const T = window.RS_TOKENS;

function OverviewPage() {
  return (
    <div className="page-anim">
      <SectionHeader
        eyebrow="Brand Expression & Motion · v1.0"
        title="The RegScale brand, in motion."
        lede="A canonical reference for how RegScale shows up across landing pages, webinar promotion, and digital campaigns. Use this as source-of-truth for marketing, partner co-branding, and AI-assisted asset creation."
      />

      <div className="grid grid-3" style={{ marginBottom: 56 }}>
        <a href="#color" onClick={(e)=>{e.preventDefault(); window.RS_NAV("color");}} className="card interactive" style={{ display: "block" }}>
          <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
            {["#2E3091","#0070BD","#0DC7BF","#F25924"].map(c => (
              <div key={c} style={{ width: 28, height: 28, background: c, borderRadius: 6 }} />
            ))}
          </div>
          <h3 style={{ margin: "0 0 4px", fontSize: 16 }}>Color & Gradient</h3>
          <p style={{ margin: 0, color: "var(--rs-text-muted)", fontSize: 13 }}>Compliance Blue, the official palette, and six canonical gradients per the 2025 guide.</p>
        </a>

        <a href="#type" onClick={(e)=>{e.preventDefault(); window.RS_NAV("type");}} className="card interactive" style={{ display: "block" }}>
          <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: "-0.02em", marginBottom: 6, lineHeight: 1 }}>Aa</div>
          <h3 style={{ margin: "0 0 4px", fontSize: 16 }}>Typography</h3>
          <p style={{ margin: 0, color: "var(--rs-text-muted)", fontSize: 13 }}>Montserrat for everything that speaks. Roboto for action. JetBrains Mono for code.</p>
        </a>

        <a href="#motion-principles" onClick={(e)=>{e.preventDefault(); window.RS_NAV("motion-principles");}} className="card interactive" style={{ display: "block" }}>
          <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{ width: 18, height: 18, background: "var(--rs-light-blue)", borderRadius: "50%",
                animation: `bob 1.6s ${i*0.12}s var(--ease-emphasis) infinite` }} />
            ))}
            <style>{`@keyframes bob { 50% { transform: translateY(-6px); opacity: 0.7; } }`}</style>
          </div>
          <h3 style={{ margin: "0 0 4px", fontSize: 16 }}>Motion</h3>
          <p style={{ margin: 0, color: "var(--rs-text-muted)", fontSize: 13 }}>Six principles, six easings, six durations. Live demos with shippable code.</p>
        </a>
      </div>

      <H2 sub="Six rules that make the system feel like RegScale, not generic SaaS.">Brand pillars</H2>
      <div className="grid grid-2">
        {[
          { n: "01", t: "Engineered, not decorated", d: "Every gradient, radius, and easing has a job. Decoration that doesn't carry meaning gets cut." },
          { n: "02", t: "Confidence through clarity", d: "We sell trust to people who buy compliance. Crisp type and high-contrast surfaces — never busy." },
          { n: "03", t: "Indigo earns the spotlight", d: "RegScale Indigo + Cyan are the brand's voice. Orange is for action only — it must mean ‘do this.’" },
          { n: "04", t: "Motion communicates state", d: "Movement should answer ‘what changed?’ — not perform. Functional over flashy, always." },
          { n: "05", t: "Co-brand without dilution", d: "When we partner, our mark stays primary. We give the partner room — never our hierarchy." },
          { n: "06", t: "Built to scale across surfaces", d: "Same tokens drive a 1600×900 hero, a 650×150 email, and a 320×50 ad. The system bends, the brand doesn't." },
        ].map(p => (
          <div key={p.n} className="principle">
            <div className="num">{p.n}</div>
            <h3>{p.t}</h3>
            <p>{p.d}</p>
          </div>
        ))}
      </div>

      <H2 sub="Drop-in tokens you can paste into a stylesheet, design tool, or AI prompt.">Copy-paste foundations</H2>
      <CodeBlock>
{`/* Drop into :root — 2025 canonical names */
--rs-compliance-blue: #2E3091;   /* Primary brand */
--rs-slate-blue:      #263574;   /* Depth */
--rs-cloud-blue:      #F7FAFD;   /* Off-white surface */
--rs-mid-blue:        #0070BD;   /* Mid-tone, gradient stop */
--rs-light-blue:      #29ABE3;   /* Webinar key, info */
--rs-secure-teal:     #0DC7BF;   /* Trust accent */
--rs-protected-purple:#9E005D;   /* Premium accent */
--rs-slate-grey:      #2B3045;   /* Body text — preferred */
--rs-cyber-orange:    #F25924;   /* Primary CTA — action only */

/* Canonical gradients */
--rs-grad-primary-1: linear-gradient(180deg, #0070BD 0%, #2E3091 100%);
--rs-grad-primary-2: linear-gradient(180deg, #2E3091 0%, #F25924 100%);
--rs-grad-primary-3: linear-gradient(180deg, #F25924 0%, #9E005D 100%);

/* CTA — solid Cyber Orange, Roboto Bold ALL CAPS */
--rs-cta-fill:        #F25924;
--rs-cta-font:        "Roboto";

--rs-ease-emphasis:   cubic-bezier(0.2, 0.9, 0.1, 1);
--rs-ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);`}
      </CodeBlock>
    </div>
  );
}

function LogoPage() {
  const variations = [
    { id: "main",    name: "Main",    sub: "Default. Color wordmark on Cloud Blue or White.",       bg: "on-paper",  inverse: false, accent: "color" },
    { id: "solid",   name: "Solid",   sub: "Single-color Compliance Blue. Use on light surfaces where the gradient mark would compete.", bg: "on-paper",  inverse: false, accent: "solid-blue" },
    { id: "black",   name: "Black",   sub: "All-black wordmark. Print, single-color reproductions.", bg: "on-paper",  inverse: false, accent: "all-black" },
    { id: "dark",    name: "Dark",    sub: "Dark surface optimized — color mark on Slate Grey.",    bg: "on-slate",  inverse: true,  accent: "color-on-dark" },
    { id: "white",   name: "White",   sub: "All-white wordmark. Photography, hero gradients, deep brand surfaces.", bg: "on-hero",   inverse: true,  accent: "all-white" },
    { id: "symbol",  name: "Symbol",  sub: "Mark alone. Favicons, avatars, app icons. Never below 20px.", bg: "on-paper",  inverse: false, accent: "symbol" },
  ];

  const renderVar = v => {
    if (v.accent === "symbol") {
      return <div style={{ width: 64, height: 64, background: "url(./assets/regscale-symbol-color.png) center/contain no-repeat" }} />;
    }
    return <RegScaleLogo size="md" inverse={v.inverse} variant={v.accent} />;
  };

  return (
    <div className="page-anim">
      <SectionHeader eyebrow="Brand · Logo & Lockups" title="Logo system"
        lede="Six official variations of the RegScale wordmark. Pick by surface, never by preference. Symbol-only is reserved for favicon-scale and tight UI moments."
        provenance={{ level: "verified", note: "Six logo variations (Main, Solid, Black, Dark, White, Symbol) verified against the 2025 Brand Guide. File-naming convention and 8-item don'ts list lifted directly from the guide's Logo Usage section." }} />

      <H2 sub="The six official forms.">Variations</H2>
      <div className="grid grid-3">
        {variations.map(v => (
          <div key={v.id} className="card">
            <div className={"logo-stage " + v.bg} style={{ minHeight: 120 }}>
              {renderVar(v)}
            </div>
            <h4 style={{ margin: "12px 0 4px", fontSize: 13 }}>{v.name}</h4>
            <p style={{ margin: 0, fontSize: 12, color: "var(--rs-text-muted)" }}>{v.sub}</p>
            <div style={{ marginTop: 12, display: "flex", gap: 6, flexWrap: "wrap" }}>
              <DownloadButton label="SVG" />
              <DownloadButton label="PNG" />
            </div>
          </div>
        ))}
      </div>

      <H2 sub="Always use the official files. Never typeset, recreate, or modify.">File naming convention</H2>
      <div className="card" style={{ padding: 18 }}>
        <CodeBlock>{`RegScale-logo-{variation}-v{n}.{svg|png}

Examples:
  RegScale-logo-main-v1.svg
  RegScale-logo-inverse-v1.svg
  RegScale-logo-symbol-v1.svg
  RegScale-logo-black-v1.png`}</CodeBlock>
        <p style={{ margin: "12px 0 0", fontSize: 13, color: "var(--rs-text-muted)" }}>
          Always pull from the canonical asset library. <b>Never recreate, retype, or re-vectorize the wordmark.</b>
        </p>
      </div>

      <H2 sub="Required negative space, expressed in symbol-heights (X).">Clear space & minimum size</H2>
      <div className="grid grid-2">
        <div className="card">
          <div className="logo-stage on-paper" style={{ position: "relative", padding: 56 }}>
            <RegScaleLogo size="md" />
            <div style={{ position: "absolute", inset: 8, border: "1px dashed rgba(46,48,145,0.3)", borderRadius: 8, pointerEvents: "none" }} />
            <div style={{ position: "absolute", top: 12, left: 12, fontSize: 10, color: "var(--rs-indigo)", fontWeight: 700, letterSpacing: "0.16em" }}>1X</div>
          </div>
          <p style={{ margin: "12px 0 0", fontSize: 13, color: "var(--rs-text-muted)" }}>Maintain <code>1X</code> = symbol-height of clear space on all sides. No cropping, overlapping text, or visual noise inside this zone.</p>
        </div>
        <div className="card">
          <div className="logo-stage on-paper" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 24 }}>
            <RegScaleLogo size="sm" />
            <span style={{ fontSize: 11, color: "var(--rs-text-muted)" }}>32px<br/>min digital</span>
            <span style={{ width: 1, height: 36, background: "var(--rs-border)" }} />
            <span style={{ fontSize: 11, color: "var(--rs-text-muted)" }}>0.4 in<br/>min print</span>
          </div>
          <p style={{ margin: "12px 0 0", fontSize: 13, color: "var(--rs-text-muted)" }}>Below these sizes, switch to the symbol-only mark.</p>
        </div>
      </div>

      <H2 sub="Eight rules from the 2025 Brand Guide. Each breaks the brand.">Don'ts</H2>
      <div className="grid grid-4">
        {[
          { d: "Don't recolor the logo",          sub: "Use only the official color variations.", style: { color: "#9E005D" } },
          { d: "Don't outline the wordmark",      sub: "Filled marks only.",                       style: { WebkitTextStroke: "1px var(--rs-cyber-orange)", color: "transparent" } },
          { d: "Don't stretch or distort",        sub: "Preserve aspect ratio.",                   style: { transform: "scaleX(1.45)" } },
          { d: "Don't rotate or angle",           sub: "Always horizontal.",                       style: { transform: "rotate(-9deg)" } },
          { d: "Don't add effects",               sub: "No shadows, glows, or 3D.",                style: { textShadow: "3px 3px 0 #9E005D" } },
          { d: "Don't typeset the wordmark",      sub: "Use the official file. Never retype.",     style: { fontFamily: "Times, serif", fontWeight: 400 } },
          { d: "Don't crowd with copy",           sub: "Maintain 1X clear space.",                 style: {} },
          { d: "Don't place on busy backgrounds", sub: "Use solid surfaces or approved gradients.",style: {} },
        ].map((x, i) => (
          <div className="card" key={i} style={{ padding: 16 }}>
            <div className="logo-stage on-paper" style={{ minHeight: 100, padding: 16, position: "relative" }}>
              <div className="logo-mark" style={x.style}>
                <div className="logo-symbol" style={{ width: 28, height: 28 }} />
                <div className="logo-wordmark" style={{ fontSize: 18 }}>Reg<span className="scale">Scale</span></div>
              </div>
              {i === 6 && <div style={{ position: "absolute", top: 18, right: 18, fontSize: 11, fontWeight: 700, color: "var(--rs-cyber-orange)" }}>WEBINAR · 2026</div>}
              {i === 7 && <div style={{ position: "absolute", inset: 0, background: "rgba(242,89,36,0.18)", pointerEvents: "none" }} />}
              <div className="dont-x" />
            </div>
            <div style={{ marginTop: 10, fontSize: 12, fontWeight: 600 }}>{x.d}</div>
            <div style={{ fontSize: 11, color: "var(--rs-text-muted)", marginTop: 2 }}>{x.sub}</div>
          </div>
        ))}
      </div>

      <H2 sub="When co-branding with partners on webinars or joint campaigns.">Partner lockups</H2>
      <div className="card">
        <div className="logo-stage on-hero" style={{ minHeight: 140 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
            <RegScaleLogo size="md" inverse />
            <div style={{ width: 2, height: 56, background: "rgba(255,255,255,0.4)" }} />
            <div style={{ color: "#fff", fontFamily: "Montserrat", fontWeight: 700, fontSize: 22, letterSpacing: "-0.01em", opacity: 0.9 }}>Partner Mark</div>
          </div>
        </div>
        <p style={{ margin: "16px 0 0", fontSize: 13, color: "var(--rs-text-muted)" }}>
          Reference layout. RegScale should sit LEFT in joint lockups, separated by a thin neutral divider, with visual weight balanced against the partner mark. <b>Verify exact divider weight and proportions against the Joint-Logo-Lockups Figma page before production use.</b>
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { OverviewPage, LogoPage });