// BRCG Sales Deck — Editorial (v7)
// Arc: Cover → Trusted by → Platforms → Tension → Acquire/Convert/Retain → Channels → Rhoback → Discord → Why BRCG → Who we are → Partner → CTA

const TYPE_SCALE = { hero: 120, body: 30, tag: 17 };
const SPACING = { paddingTop: 120, paddingBottom: 96, paddingX: 120 };

const COLORS = {
  navy: "#03081D", blue: "#0542BF", teal: "#1C818D", cream: "#EEF1EF",
  page: "#FAFAFA", ink: "#03081D",
  fg2: "rgba(0,0,0,0.70)", fg3: "rgba(0,0,0,0.52)", fg4: "rgba(0,0,0,0.36)",
  rule: "rgba(0,0,0,0.10)", ruleSoft: "rgba(0,0,0,0.06)",
  onDark2: "rgba(255,255,255,0.74)", onDark3: "rgba(255,255,255,0.52)", onDark4: "rgba(255,255,255,0.36)",
  ruleDark: "rgba(255,255,255,0.14)", ruleDarkSoft: "rgba(255,255,255,0.08)",
};
const accent = (onDark) => (onDark ? COLORS.cream : COLORS.blue);

function SlideFrame({ bg = COLORS.page, color = COLORS.ink, children, chrome = true }) {
  const onDark = bg === COLORS.navy || bg === COLORS.ink;
  return (
    <div style={{ position: "absolute", inset: 0, background: bg, color, fontFamily: 'Public Sans, Roboto, ui-sans-serif, system-ui, sans-serif', overflow: "hidden", display: "flex", flexDirection: "column" }}>
      {chrome && <TopBar onDark={onDark}/>}
      <div style={{ flex: 1, position: "relative", padding: `${SPACING.paddingTop}px ${SPACING.paddingX}px ${SPACING.paddingBottom}px`, display: "flex", flexDirection: "column" }}>{children}</div>
      {chrome && <BottomBar onDark={onDark}/>}
    </div>
  );
}
function TopBar({ onDark }) {
  const c = onDark ? COLORS.onDark3 : COLORS.fg3;
  const rule = onDark ? COLORS.ruleDark : COLORS.rule;
  return (
    <div style={{ position: "absolute", top: 44, left: SPACING.paddingX, right: SPACING.paddingX, display: "flex", justifyContent: "flex-start", alignItems: "center", zIndex: 2, paddingBottom: 22, borderBottom: `1px solid ${rule}` }}>
      <img src="assets/brcg-logo-blue.png" alt="BRCG" style={{ height: 32, filter: onDark ? "brightness(0) invert(1)" : "none" }}/>
    </div>
  );
}
function BottomBar({ onDark }) {
  const c = onDark ? COLORS.onDark4 : COLORS.fg4;
  const rule = onDark ? COLORS.ruleDarkSoft : COLORS.ruleSoft;
  return (
    <div style={{ position: "absolute", bottom: 40, left: SPACING.paddingX, right: SPACING.paddingX, display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 2, paddingTop: 20, borderTop: `1px solid ${rule}`, fontSize: 12.5, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 500, color: c }}>
      <span>Blue Ridge Consulting Group</span><span>brcg.co</span>
    </div>
  );
}
function Tag({ children, onDark = false }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 12, fontSize: TYPE_SCALE.tag, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: accent(onDark) }}>
      <span aria-hidden style={{ width: 28, height: 1, background: "currentColor", opacity: 0.75 }}/>{children}
    </span>
  );
}
function Emph({ children, onDark }) {
  return <span style={{ fontStyle: "italic", fontWeight: 400, color: accent(onDark) }}>{children}</span>;
}
function Stat({ label, value, onDark }) {
  return (
    <div>
      <div style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.035em", color: onDark ? "#fff" : COLORS.ink, lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 13, letterSpacing: "0.18em", textTransform: "uppercase", color: onDark ? COLORS.onDark3 : COLORS.fg4, marginTop: 14, fontWeight: 600, maxWidth: 280 }}>{label}</div>
    </div>
  );
}

// ── S1. Cover ────────────────────────────────────────────────────────
function S01_Cover() {
  return (
    <SlideFrame bg={COLORS.navy} color="#fff" chrome={false}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 55% 60% at 18% 30%, rgba(5,66,191,0.32) 0%, transparent 60%), radial-gradient(ellipse 70% 55% at 100% 100%, rgba(5,66,191,0.18) 0%, transparent 60%)" }}/>
      <div style={{ position: "relative", zIndex: 2, height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: `80px ${SPACING.paddingX}px 72px` }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 28, borderBottom: `1px solid ${COLORS.ruleDark}` }}>
          <img src="assets/brcg-logo-blue.png" alt="BRCG" style={{ height: 60, filter: "brightness(0) invert(1)" }}/>
          <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: "0.24em", textTransform: "uppercase", color: COLORS.onDark2 }}>brcg.co</div>
        </div>
        <div style={{ maxWidth: 1560 }}>
          <Tag onDark>Blue Ridge Consulting Group</Tag>
          <h1 style={{ fontSize: TYPE_SCALE.hero, fontWeight: 800, letterSpacing: "-0.048em", lineHeight: 0.96, margin: 0, marginTop: 40, color: "#fff", textWrap: "balance" }}>
            Your go-to<br/><Emph onDark>growth partner.</Emph>
          </h1>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", paddingTop: 32, borderTop: `1px solid ${COLORS.ruleDarkSoft}` }}>
          <div style={{ fontSize: 26, color: "#fff", fontWeight: 400, letterSpacing: "-0.01em", maxWidth: 820, lineHeight: 1.4 }}>
            Your full-stack growth partner. One team to manage the full funnel.
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: COLORS.onDark3 }}>brcg.co</div>
        </div>
      </div>
    </SlideFrame>
  );
}

// ── S2. Trusted by ───────────────────────────────────────────────────
function S02_TrustedBy() {
  // 15 clients in a 5-column × 3-row grid. Per-logo heights keep optical weight
  // balanced across wordmarks with different x-heights and visual density.
  const clients = [
    { src: "discord-blue.png",      h: 72 },
    { src: "linktree-blue.png",     h: 58 },
    { src: "gofundme-blue.png",     h: 68 },
    { src: "twitch-blue.png",       h: 72 },
    { src: "rhoback-blue.png",      h: 66 },
    { src: "owner-blue.png",        h: 68 },
    { src: "cameo-blue.png",        h: 70 },
    { src: "fable-blue.png",        h: 76 },
    { src: "double-good-blue.png",  h: 104 },
    { src: "zero-blue.png",         h: 76 },
    { src: "binkybro-blue.png",     h: 96 },
    { src: "atmosfy-blue.png",      h: 74 },
    { src: "pepper-blue.png",       h: 70 },
    { src: "innerbalance-blue.png", h: 92 },
    { src: "glorious-blue.png",     h: 66 },
  ];
  return (
    <SlideFrame>
      <div style={{ maxWidth: 1560, marginBottom: 40 }}>
        <Tag>Trusted by</Tag>
        <h2 style={{ fontSize: 96, fontWeight: 800, letterSpacing: "-0.044em", lineHeight: 1.0, color: COLORS.ink, marginTop: 28, textWrap: "balance" }}>
          Brands <Emph>you know.</Emph>
        </h2>
      </div>

      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
          borderTop: `1px solid ${COLORS.rule}`, borderLeft: `1px solid ${COLORS.rule}`,
        }}>
          {clients.map(l => (
            <div key={l.src} style={{
              borderRight: `1px solid ${COLORS.rule}`, borderBottom: `1px solid ${COLORS.rule}`,
              height: 190, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 24px",
            }}>
              <img src={`assets/logos/${l.src}`} alt=""
                style={{ height: l.h, maxWidth: "100%", objectFit: "contain", display: "block" }}/>
            </div>
          ))}
        </div>
      </div>
    </SlideFrame>
  );
}

// ── S3. Platforms — certified partner stack ─────────────────────────
function S03_Platforms() {
  // 13 platforms on a 5-column grid (2 trailing cells left blank for breathing room).
  // Cream SlideFrame background differentiates this from the Trusted-by wall on white.
  // Per-logo h: bumped iterable / customer.io / amplitude / triplewhale to balance.
  const platforms = [
    { src: "klaviyo-blue.png",      h: 76 },
    { src: "braze-blue.png",        h: 92 },
    { src: "iterable-blue.png",     h: 76 },
    { src: "customerio-blue.png",   h: 84 },
    { src: "hubspot-blue.png",      h: 76 },
    { src: "salesforce-blue.png",   h: 96 },
    { src: "marketo-blue.png",      h: 86 },
    { src: "ajo-blue.png",          h: 100 },
    { src: "attentive-blue.png",    h: 72 },
    { src: "postscript-blue.png",   h: 82 },
    { src: "amplitude-blue.png",    h: 88 },
    { src: "triplewhale-blue.png",  h: 84 },
    { src: "stripo-blue.png",       h: 86 },
  ];
  return (
    <SlideFrame bg={COLORS.cream}>
      <div style={{ maxWidth: 1560, marginBottom: 40 }}>
        <Tag>Certified partners</Tag>
        <h2 style={{ fontSize: 88, fontWeight: 800, letterSpacing: "-0.044em", lineHeight: 1.0, color: COLORS.ink, marginTop: 28, textWrap: "balance" }}>
          Certified across<br/><Emph>every major platform.</Emph>
        </h2>
        <p style={{ fontSize: 26, lineHeight: 1.45, color: COLORS.fg2, marginTop: 28, maxWidth: 1100 }}>
          We recommend the right tools for your brand. And back it with data from programs we've built on every one.
        </p>
      </div>

      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
          borderTop: `1px solid ${COLORS.rule}`, borderLeft: `1px solid ${COLORS.rule}`,
          background: "#fff", borderRadius: 2,
        }}>
          {platforms.map(l => (
            <div key={l.src} style={{
              borderRight: `1px solid ${COLORS.rule}`, borderBottom: `1px solid ${COLORS.rule}`,
              height: 150, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 12px",
            }}>
              <img src={`assets/logos/${l.src}`} alt=""
                style={{ height: l.h, maxWidth: "100%", objectFit: "contain", display: "block" }}/>
            </div>
          ))}
        </div>
      </div>
    </SlideFrame>
  );
}

// ── S4. The tension ──────────────────────────────────────────────────
function S04_Tension() {
  return (
    <SlideFrame>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", maxWidth: 1560 }}>
        <Tag>The problem</Tag>
        <h2 style={{ fontSize: TYPE_SCALE.hero, fontWeight: 800, letterSpacing: "-0.048em", lineHeight: 0.98, color: COLORS.ink, margin: 0, marginTop: 40, textWrap: "balance" }}>
          Growth doesn't live in<br/><Emph>one channel.</Emph>
        </h2>
        <p style={{ fontSize: 32, lineHeight: 1.45, color: COLORS.fg2, marginTop: 48, maxWidth: 1280, fontWeight: 400, letterSpacing: "-0.01em" }}>
          Most brands hire five specialists who never talk. Paid optimizes for ROAS. Lifecycle optimizes for opens. The leak isn't in one place. It's in the handoffs.
        </p>
      </div>
    </SlideFrame>
  );
}

// ── S5. Acquire. Convert. Retain. ────────────────────────────────────
function S05_Model() {
  const pillars = [
    {
      k: "Acquire",
      d: "Paid media, SEO, and demand gen that fill your pipeline fast.",
      tactics: ["Paid social & search", "SEO & content", "Creator & affiliate", "Landing pages & CRO"],
    },
    {
      k: "Convert",
      d: "CRM, onboarding, and product moments that turn signups into revenue.",
      tactics: ["Lifecycle email & SMS", "Onboarding flows", "In-product activation", "Experimentation & A/B"],
    },
    {
      k: "Retain",
      d: "Flows, automation, and loyalty that keep customers coming back.",
      tactics: ["Win-back & reactivation", "Loyalty & referral", "Segmentation & personalization", "Churn & LTV modeling"],
    },
  ];
  return (
    <SlideFrame bg={COLORS.cream}>
      <div style={{ maxWidth: 1560, marginBottom: 48 }}>
        <Tag>How we help brands grow</Tag>
        <h2 style={{ fontSize: 96, fontWeight: 800, letterSpacing: "-0.044em", lineHeight: 1.0, color: COLORS.ink, marginTop: 32, textWrap: "balance" }}>
          Acquire. Convert.<br/><Emph>Retain.</Emph>
        </h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: `1px solid ${COLORS.rule}`, borderLeft: `1px solid ${COLORS.rule}`, flex: 1 }}>
        {pillars.map((p, i) => (
          <div key={p.k} style={{ background: "#fff", borderRight: `1px solid ${COLORS.rule}`, borderBottom: `1px solid ${COLORS.rule}`, padding: "44px 44px 48px", display: "flex", flexDirection: "column", gap: 28 }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
              <h3 style={{ fontSize: 64, fontWeight: 800, letterSpacing: "-0.03em", color: COLORS.ink, margin: 0, lineHeight: 1.0 }}>{p.k}.</h3>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.22em", color: COLORS.blue }}>{`0${i+1}`}</div>
            </div>
            <p style={{ fontSize: 26, lineHeight: 1.45, color: COLORS.fg2, margin: 0 }}>{p.d}</p>
            <div style={{ height: 1, background: COLORS.rule, marginTop: 4 }}/>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 20 }}>
              {p.tactics.map(t => (
                <li key={t} style={{ fontSize: 24, lineHeight: 1.35, color: COLORS.ink, display: "flex", alignItems: "baseline", gap: 14 }}>
                  <span style={{ width: 7, height: 7, borderRadius: "50%", background: COLORS.blue, flexShrink: 0, transform: "translateY(-2px)" }}/>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </SlideFrame>
  );
}

// ── S6. What we run — channels ───────────────────────────────────────
function S06_Channels() {
  const services = [
    { n: "01", t: "Paid Media",          d: "Performance campaigns built to scale profitably." },
    { n: "02", t: "SEO & Organic",       d: "Technical SEO, content, and links as one system." },
    { n: "03", t: "CRM & Retention",     d: "Email, SMS, push, in-product. One lifecycle engine." },
    { n: "04", t: "Product Development", d: "Activation flows, referral systems, shipped in weeks." },
    { n: "05", t: "Marketing Ops",       d: "Deployment, QA, and workflow across every channel." },
    { n: "06", t: "AI Growth",           d: "AI-native workflows embedded in your growth stack." },
  ];
  return (
    <SlideFrame>
      <div style={{ maxWidth: 1560, marginBottom: 48 }}>
        <Tag>What we run</Tag>
        <h2 style={{ fontSize: 84, fontWeight: 800, letterSpacing: "-0.042em", lineHeight: 1.02, color: COLORS.ink, marginTop: 28, textWrap: "balance" }}>
          Six channels. <Emph>One team.</Emph>
        </h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: `1px solid ${COLORS.rule}`, borderLeft: `1px solid ${COLORS.rule}` }}>
        {services.map(s => (
          <div key={s.n} style={{ borderRight: `1px solid ${COLORS.rule}`, borderBottom: `1px solid ${COLORS.rule}`, padding: 40, minHeight: 200, background: "#fff" }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.22em", color: COLORS.blue, marginBottom: 16 }}>{s.n}</div>
            <h3 style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-0.022em", color: COLORS.ink, margin: 0, marginBottom: 12, lineHeight: 1.15 }}>{s.t}</h3>
            <p style={{ fontSize: 20, lineHeight: 1.5, color: COLORS.fg2, margin: 0 }}>{s.d}</p>
          </div>
        ))}
      </div>
    </SlideFrame>
  );
}

// ── S7. Rhoback ──────────────────────────────────────────────────────
function S07_Rhoback() {
  return (
    <SlideFrame>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, flex: 1, alignItems: "center" }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: COLORS.fg4, marginBottom: 32 }}>Case study · Rhoback</div>
          <img src="assets/logos/rhoback-blue.png" alt="Rhoback" style={{ height: 72, objectFit: "contain", display: "block", marginBottom: 56 }}/>
          <h2 style={{ fontSize: 72, fontWeight: 800, letterSpacing: "-0.042em", lineHeight: 1.02, color: COLORS.ink, margin: 0 }}>
            CRM became their<br/><Emph>growth engine.</Emph>
          </h2>
          <p style={{ fontSize: 24, lineHeight: 1.55, color: COLORS.fg2, marginTop: 36, maxWidth: 640 }}>
            We optimized CRO and data capture to extend reach through CRM — then turned 50+ A/B tests into a compounding lifecycle program.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 48 }}>
          <div style={{ borderTop: `1px solid ${COLORS.rule}`, paddingTop: 32 }}>
            <div style={{ fontSize: 200, fontWeight: 800, letterSpacing: "-0.06em", lineHeight: 0.88, color: COLORS.blue }}>300%</div>
            <div style={{ fontSize: 24, color: COLORS.ink, fontWeight: 500, marginTop: 16, letterSpacing: "-0.01em" }}>Sign-up rate lift</div>
          </div>
          <div style={{ display: "flex", gap: 64, paddingTop: 32, borderTop: `1px solid ${COLORS.rule}` }}>
            <Stat label="YoY revenue" value="+24%"/>
            <Stat label="A/B tests run" value="50+"/>
          </div>
        </div>
      </div>
    </SlideFrame>
  );
}

// ── S8. Discord ──────────────────────────────────────────────────────
function S08_Discord() {
  return (
    <SlideFrame bg={COLORS.navy} color="#fff">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, flex: 1, alignItems: "center", zIndex: 1 }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: COLORS.onDark3, marginBottom: 32 }}>Case study · Discord</div>
          <img src="assets/logos/discord-blue.png" alt="Discord" style={{ height: 72, filter: "brightness(0) invert(1)", objectFit: "contain", marginBottom: 56 }}/>
          <h2 style={{ fontSize: 72, fontWeight: 800, letterSpacing: "-0.042em", lineHeight: 1.02, color: "#fff", margin: 0 }}>
            Campaign ops,<br/><Emph onDark>unblocked.</Emph>
          </h2>
          <p style={{ fontSize: 24, lineHeight: 1.55, color: COLORS.onDark2, marginTop: 36, maxWidth: 640 }}>
            Every launch waited on someone else — engineering for lists, approvals across teams, deploy, analysis. We led platform migration and enablement: data planning, implementation, campaign management, and self-service reporting.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <div style={{ borderTop: `1px solid ${COLORS.ruleDark}`, paddingTop: 32 }}>
            <div style={{ fontSize: 180, fontWeight: 800, letterSpacing: "-0.06em", lineHeight: 0.88, color: "#fff" }}>85%</div>
            <div style={{ fontSize: 24, color: COLORS.onDark2, fontWeight: 500, marginTop: 16, letterSpacing: "-0.01em" }}>Faster campaign deployment</div>
          </div>
          <div style={{ borderTop: `1px solid ${COLORS.ruleDark}`, paddingTop: 32 }}>
            <div style={{ fontSize: 180, fontWeight: 800, letterSpacing: "-0.06em", lineHeight: 0.88, color: COLORS.cream }}>10×</div>
            <div style={{ fontSize: 24, color: COLORS.onDark2, fontWeight: 500, marginTop: 16, letterSpacing: "-0.01em" }}>More campaigns shipped per year</div>
          </div>
        </div>
      </div>
    </SlideFrame>
  );
}

// ── S9. Why BRCG exists ──────────────────────────────────────────────
function S09_Why() {
  // Long-form essay-style argument for the agency model. Two-column layout:
  // big stand-first headline left, justified body copy right, divided by a rule.
  return (
    <SlideFrame>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, flex: 1 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 32, paddingTop: 8 }}>
          <Tag>The reason</Tag>
          <h2 style={{ fontSize: 72, fontWeight: 800, letterSpacing: "-0.042em", lineHeight: 1.02, color: COLORS.ink, margin: 0, textWrap: "balance" }}>
            Internal teams made sense once.<br/><Emph>They don't anymore.</Emph>
          </h2>
        </div>
        <div style={{ borderLeft: `1px solid ${COLORS.rule}`, paddingLeft: 64, display: "flex", flexDirection: "column", gap: 26 }}>
          <p style={{ fontSize: 24, lineHeight: 1.55, color: COLORS.fg2, margin: 0 }}>
            We built lifecycle programs inside companies. We watched them grow headcount before they grew revenue. By the time a hire was onboarded, the window had moved.
          </p>
          <p style={{ fontSize: 24, lineHeight: 1.55, color: COLORS.fg2, margin: 0 }}>
            The right agency can match the output of a full internal team at a fraction of the cost — and cut scope when the work is done instead of carrying it on payroll.
          </p>
          <p style={{ fontSize: 26, lineHeight: 1.5, color: COLORS.ink, margin: 0, fontWeight: 500, letterSpacing: "-0.012em" }}>
            That's the model. Real practitioners, certified across every major platform, solving client problems every week. Week one, we're working. As performance compounds, the cost structure improves. No bloat. No lock-in.
          </p>
        </div>
      </div>
    </SlideFrame>
  );
}

// ── S10. Who we are ──────────────────────────────────────────────────
function S10_WhoWeAre() {
  // Two-up portrait composition. Square portraits sit in a navy plate so the
  // soft-edged source photos read intentional within the editorial system.
  const founders = [
    { src: "kodie.png", name: "Kodie Critzer", role: "CEO" },
    { src: "henry.png", name: "Henry Pollard", role: "COO" },
  ];
  return (
    <SlideFrame bg={COLORS.cream}>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 88, flex: 1, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
          <Tag>Who we are</Tag>
          <h2 style={{ fontSize: 68, fontWeight: 800, letterSpacing: "-0.042em", lineHeight: 1.02, color: COLORS.ink, margin: 0, textWrap: "balance" }}>
            Built by people who've done this<br/><Emph>from the inside.</Emph>
          </h2>
          <p style={{ fontSize: 22, lineHeight: 1.55, color: COLORS.fg2, margin: 0, marginTop: 8 }}>
            Between us, we've built and scaled CRM and growth programs at Twitch, Bandai Namco, Cameo, and others. We know what it looks like when those teams get too big, move too slow, and cost too much to justify.
          </p>
          <p style={{ fontSize: 22, lineHeight: 1.55, color: COLORS.fg2, margin: 0 }}>
            Henry built the internal ops structure that makes us different in practice — tickets, roadmaps, prioritization, time to impact. The infrastructure a good internal team takes 12 months to build is already running on day one.
          </p>
          <p style={{ fontSize: 24, lineHeight: 1.45, color: COLORS.ink, margin: 0, marginTop: 4, fontWeight: 600, letterSpacing: "-0.012em" }}>
            That's why we started BRCG.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
          {founders.map(f => (
            <div key={f.src} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <div style={{ aspectRatio: "1 / 1", overflow: "hidden", background: "#fff", border: `1px solid ${COLORS.rule}`, borderRadius: "50%" }}>
                <img src={`assets/team/${f.src}`} alt={f.name}
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4, paddingTop: 4 }}>
                <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.022em", color: COLORS.ink, lineHeight: 1.1 }}>{f.name}</div>
                <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: COLORS.blue }}>{f.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </SlideFrame>
  );
}

// ── S11. A partner, not a vendor ─────────────────────────────────────
function S11_Partner() {
  const pillars = [
    { t: "Scope that flexes", d: "One channel or the full funnel. We start where the pressure is and grow into what you need." },
    { t: "An extension of your team", d: "Embedded in your stack, your tools, your Slack. The people on the call are the people doing the work." },
    { t: "Built around your goals", d: "No playbook-in-a-drawer. Every engagement is scoped, measured, and compensated against the KPI that matters to you." },
  ];
  return (
    <SlideFrame bg={COLORS.navy} color="#fff">
      <div style={{ maxWidth: 1560, marginBottom: 56 }}>
        <Tag onDark>How we partner</Tag>
        <h2 style={{ fontSize: 96, fontWeight: 800, letterSpacing: "-0.044em", lineHeight: 1.0, color: "#fff", marginTop: 32, textWrap: "balance" }}>
          A custom solution,<br/><Emph onDark>built around your goals.</Emph>
        </h2>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", flex: 1, borderTop: `1px solid ${COLORS.ruleDark}` }}>
        {pillars.map((p, i) => (
          <div key={p.t} style={{ padding: "44px 36px 8px 0", paddingLeft: i === 0 ? 0 : 36, borderRight: i < 2 ? `1px solid ${COLORS.ruleDark}` : "none", display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.22em", color: COLORS.cream, opacity: 0.85 }}>{`0${i+1}`}</div>
            <h3 style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.025em", color: "#fff", margin: 0, lineHeight: 1.15 }}>{p.t}</h3>
            <p style={{ fontSize: 20, lineHeight: 1.55, color: COLORS.onDark2, margin: 0 }}>{p.d}</p>
          </div>
        ))}
      </div>
    </SlideFrame>
  );
}

// ── S12. CTA ─────────────────────────────────────────────────────────
function S12_CTA() {
  return (
    <SlideFrame bg={COLORS.navy} color="#fff" chrome={false}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 55% 60% at 18% 30%, rgba(5,66,191,0.20) 0%, transparent 60%), radial-gradient(ellipse 70% 55% at 100% 100%, rgba(28,129,141,0.18) 0%, transparent 60%)" }}/>
      <div style={{ position: "relative", zIndex: 2, flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-between", padding: `80px ${SPACING.paddingX}px 72px` }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 28, borderBottom: `1px solid ${COLORS.ruleDark}` }}>
          <img src="assets/brcg-logo-blue.png" alt="BRCG" style={{ height: 60, filter: "brightness(0) invert(1)" }}/>
          <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: "0.24em", textTransform: "uppercase", color: COLORS.onDark2 }}>brcg.co</div>
        </div>
        <div style={{ maxWidth: 1560 }}>
          <h2 style={{ fontSize: 132, fontWeight: 800, letterSpacing: "-0.048em", lineHeight: 0.96, color: "#fff", marginTop: 0, marginBottom: 0, textWrap: "balance" }}>
            Let's talk about<br/><Emph onDark>your growth.</Emph>
          </h2>
          <p style={{ fontSize: 30, lineHeight: 1.45, color: COLORS.onDark2, marginTop: 48, maxWidth: 1280 }}>
            Book a call. We'll create a free audit, tell you what's working, what's not, and what we'd change first.
          </p>
        </div>
        <div style={{ display: "flex", justifyContent: "flex-start", alignItems: "flex-end", paddingTop: 32, borderTop: `1px solid ${COLORS.ruleDarkSoft}` }}>
          <div style={{ fontSize: 32, color: "#fff", fontWeight: 500, letterSpacing: "-0.01em" }}>hello@brcg.co &nbsp;·&nbsp; brcg.co</div>
        </div>
      </div>
    </SlideFrame>
  );
}

Object.assign(window, {
  S01_Cover, S02_TrustedBy, S03_Platforms, S04_Tension, S05_Model, S06_Channels,
  S07_Rhoback, S08_Discord, S09_Why, S10_WhoWeAre, S11_Partner, S12_CTA,
});
