// Sections for the Synthetic Beats Real (B2B personas) landing page.

/* ── Responsive styles ───────────────────────────────────── */
const RESPONSIVE_CSS = `
  .sbr-hero-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 88px 40px 88px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .sbr-inside-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    align-items: center;
  }
  .sbr-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .sbr-two-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .sbr-three-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .sbr-phase-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 20px;
  }
  .sbr-table-row {
    display: grid;
    grid-template-columns: 0.7fr 1fr 1fr;
    gap: 40px;
  }
  .sbr-cover-col {
    display: flex;
    justify-content: center;
    padding: 20px 40px;
  }

  @media (max-width: 900px) {
    .sbr-hero-wrap {
      gap: 32px;
      padding: 48px 24px 56px !important;
    }
    .sbr-inside-grid {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 56px 24px !important;
    }
    .sbr-cover-col { display: none; }
    .sbr-stats-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .sbr-stats-grid > div {
      border-right: none !important;
      border-bottom: 1px solid var(--av-rule);
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 20px;
      padding-top: 20px;
    }
    .sbr-stats-grid > div:first-child { padding-top: 0; }
    .sbr-stats-grid > div:last-child { border-bottom: none; padding-bottom: 0; }
    .sbr-two-grid { grid-template-columns: 1fr; }
    .sbr-three-grid { grid-template-columns: 1fr; }
    .sbr-phase-grid { grid-template-columns: 1fr; }
    .sbr-table-row {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .sbr-table-head { display: none !important; }
    /* The column headers are hidden when the table stacks, so each cell
       carries its own label on mobile — otherwise the values read as an
       unlabelled list. */
    .sbr-table-row [data-col]::before {
      content: attr(data-col);
      display: block;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--av-ink-muted);
      margin-bottom: 3px;
    }
    .sbr-section-pad {
      padding: 64px 24px 48px !important;
    }
    .sbr-card-pad {
      padding: 24px 22px !important;
    }
    .sbr-closing-inner {
      padding: 72px 24px 64px !important;
    }
    .sbr-inside-copy {
      max-width: 100% !important;
    }
    .sbr-footer {
      padding: 24px 24px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
    }
  }

  @media (max-width: 480px) {
    .sbr-hero-wrap { padding: 36px 20px 48px !important; }
    .sbr-inside-grid { padding: 48px 20px !important; }
    .sbr-section-pad { padding: 56px 20px 40px !important; }
    .sbr-closing-inner { padding: 64px 20px 56px !important; }
    .sbr-footer { padding: 24px 20px !important; }
  }
`;

const ResponsiveStyles = () => (
  <style dangerouslySetInnerHTML={{ __html: RESPONSIVE_CSS }} />
);

/* ── Shared bits ─────────────────────────────────────────── */
const SbrLabel = ({ children, color = "var(--av-ink-muted)", style }) => (
  <div style={{
    fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
    textTransform: "uppercase", color, ...style,
  }}>{children}</div>
);

const SbrH2 = ({ children, style }) => (
  <h2 style={{
    fontFamily: "var(--font-sans)", fontWeight: 600,
    fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.05,
    marginTop: 18, marginBottom: 20, ...style,
  }}>{children}</h2>
);

const SbrLede = ({ children }) => (
  <p style={{
    fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0,
  }}>{children}</p>
);

// The "rest is in the paper" line that closes every truncated section, so
// the truncation reads as a deliberate teaser rather than an unfinished page.
const SbrInsideNote = ({ children }) => (
  <p style={{
    marginTop: 28, fontSize: 14, color: "var(--av-ink-muted)", lineHeight: 1.6,
    fontStyle: "italic", fontFamily: "var(--font-serif)", maxWidth: 900,
  }}>{children}</p>
);

/* ── NavBar ──────────────────────────────────────────────── */
const SbrNavBar = () => (
  <>
    <ResponsiveStyles />
    <header style={{
      background: "var(--av-canvas)",
      borderBottom: "1px solid var(--av-rule)",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "0 40px", height: 75,
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <a href="https://algoverde.ai" aria-label="AlgoVerde — home"
          style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}>
          <SbrLogo width={170} />
        </a>
      </div>
    </header>
  </>
);

/* ── Hero ─────────────────────────────────────────────────── */
const SbrHeroSection = ({ Italic, t, accent }) => (
  <section>
    <div className="sbr-hero-wrap">
      <SbrEyebrow color={t.accentColor}>{t.eyebrowText}</SbrEyebrow>

      <h1 style={{
        fontFamily: "var(--font-sans)", fontWeight: 600,
        fontSize: "clamp(42px, 6.4vw, 88px)", lineHeight: 0.98, letterSpacing: "-0.038em",
        color: "var(--av-ink)", margin: 0, maxWidth: 1180, textWrap: "balance",
      }}>
        Synthetic personas <Italic>beat real</Italic> for B2B audiences.
      </h1>

      <p style={{
        fontSize: "clamp(16px, 2vw, 21px)", lineHeight: 1.5, color: "var(--av-ink-soft)",
        fontFamily: "var(--font-sans)", margin: 0, maxWidth: 800, textWrap: "pretty",
      }}>
        CTOs. Heads of procurement. Specialist physicians. Dealer principals. Their decisions
        matter, and their calendars have no room for your questionnaire. A better way to study
        the audiences you struggle to recruit — in days, not months.
      </p>

      {/* CTA row */}
      <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
        <a href={SBR_PDF} download onClick={() => sbrTrackDownload("hero")} style={{
          background: "var(--av-ink)", color: "#fff", border: "none",
          padding: "17px 28px", borderRadius: 10, fontSize: 15.5, fontWeight: 500,
          cursor: "pointer", fontFamily: "var(--font-sans)", textDecoration: "none",
          display: "inline-flex", alignItems: "center", gap: 12,
          transition: "background 160ms ease, transform 160ms ease",
          letterSpacing: "-0.005em",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.transform = "translateY(-1px)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "var(--av-ink)"; e.currentTarget.style.transform = "none"; }}
        >
          <span>{t.ctaLabel}</span>
          <span style={{ fontSize: 16 }}>↓</span>
        </a>
        <a href="#inside" style={{
          fontSize: 14, fontWeight: 500, color: "var(--av-ink-soft)",
          textDecoration: "none", padding: "14px 8px",
          display: "inline-flex", alignItems: "center", gap: 8,
          transition: "color 160ms ease",
        }}
          onMouseEnter={(e) => e.currentTarget.style.color = accent}
          onMouseLeave={(e) => e.currentTarget.style.color = "var(--av-ink-soft)"}
        >
          <span>See what's inside</span>
          <span>↓</span>
        </a>
        <span style={{
          fontSize: 12.5, color: "var(--av-ink-muted)", letterSpacing: "0.04em",
          paddingLeft: 4,
        }}>
          Free PDF · No email required
        </span>
      </div>

      {/* Proof row */}
      <div className="sbr-stats-grid" style={{
        marginTop: 16, paddingTop: 36, borderTop: "1px solid var(--av-rule)",
      }}>
          {[
            {
              k: "Apparent qualifiers",
              v: "≈9 in 10",
              note: "Ineligible, when 0.5% of a screened pool genuinely qualifies and 5% of the rest falsely clears the screener — illustrative arithmetic",
            },
            {
              k: "Pew Research, 2024",
              v: "18%",
              note: "Of 11,114 U.S. adults flagged for claiming implausible activities — including 10% who said they had visited the International Space Station",
            },
            {
              k: "Attention checks passed",
              v: "99.8%",
              note: "By an autonomous synthetic respondent, across 6,000 standard checks in a published experiment",
            },
          ].map((s, i) => (
            <div key={i} style={{
              paddingRight: 24, borderRight: i < 2 ? "1px solid var(--av-rule)" : "none",
              paddingLeft: i > 0 ? 24 : 0,
            }}>
              <SbrLabel style={{ marginBottom: 10 }}>{s.k}</SbrLabel>
              <div style={{
                fontSize: "clamp(28px, 3vw, 38px)", fontWeight: 600, letterSpacing: "-0.025em",
                color: accent, lineHeight: 1.1, marginBottom: 10,
                fontVariantNumeric: "tabular-nums",
              }}>{s.v}</div>
              <div style={{ fontSize: 13, color: "var(--av-ink-muted)", lineHeight: 1.45, maxWidth: 320 }}>{s.note}</div>
            </div>
          ))}
      </div>
    </div>
  </section>
);

/* ── Inside the Paper ────────────────────────────────────── */
const SbrInsideSection = ({ t, Italic }) => (
  <section id="inside" style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="sbr-inside-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div className="sbr-cover-col">
        <SbrCover width={280} rotate={-4} />
      </div>
      <div className="sbr-inside-copy" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 640 }}>
        <SbrEyebrow color={t.accentColor}>Inside the paper</SbrEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: 0,
        }}>
          Study the audiences<br />
          you <Italic>struggle</Italic> to recruit.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
        }}>
          Not a case against human research. A case for getting more from every real
          conversation you manage to secure — with a method a sceptical buyer can inspect.
        </p>
        <div style={{ marginTop: 12 }}>
          {[
            "The short version",
            "You cannot simply buy B2B audiences",
            "Fraud is rampant",
            "Sample composition is also an issue",
            "General-purpose models don't solve the B2B problem",
            "Why AlgoVerde can generate reliable B2B personas",
            "Panel composition, specified in advance",
            "From brief to a panel you can question",
            "Our evidence",
            "Match method to decision type",
            "Start with one audience, one decision",
          ].map((title, i) => (
            <SbrTocChip key={i} idx={["i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix", "x", "xi"][i]} color={t.accentColor}>
              {title}
            </SbrTocChip>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── The recruitment problem (differentiator 1) ───────────── */
// Problem framing is the hook, not the product. The supporting evidence is
// what stays in the paper.
const SbrRecruitSection = ({ accent, Italic, t }) => {
  const ember = SBR_COLORS.ember.solid;
  return (
    <section className="sbr-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 72px" }}>
      <div style={{ marginBottom: 48, maxWidth: 800 }}>
        <SbrEyebrow color={t.accentColor}>The recruitment problem</SbrEyebrow>
        <SbrH2>You cannot simply <Italic>buy</Italic> B2B audiences.</SbrH2>
        <SbrLede>
          The job title is only the first filter. Add company size, industry, geography and
          decision responsibility, and the pool shrinks fast. Higher incentives improve response
          rates — but they also raise the reward for misrepresentation.
        </SbrLede>
      </div>

      {/* Two risks — named, not argued */}
      <div className="sbr-two-grid">
        {[
          {
            k: "Fraud has outpaced screening",
            body: "Fluent answers and completed attention checks are no longer sufficient evidence of trustworthy data.",
          },
          {
            k: "Real is not the same as representative",
            body: "Enthusiastic adopters respond; satisfied incumbents often do not. Recommenders are reachable; budget blockers frequently are not.",
          },
        ].map((c, i) => (
          <div key={i} className="sbr-card-pad" style={{
            background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
            padding: "28px 32px", display: "flex", flexDirection: "column", gap: 12,
          }}>
            <SbrLabel color={i === 0 ? ember : accent}>{c.k}</SbrLabel>
            <p style={{ fontSize: 15, color: "var(--av-ink)", lineHeight: 1.55, margin: 0 }}>{c.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ── Why AlgoVerde (differentiator 2) ─────────────────────── */
const SbrApproachSection = ({ accent, Italic, t }) => {
  const principles = [
    "Look where the relevant evidence is.",
    "Find the differences that change a decision.",
    "Give the persona a situation.",
  ];
  const questions = [
    "What evidence went into this persona?",
    "Which attributes are inferred?",
    "What is missing?",
    "What has been checked against independent information?",
  ];
  return (
    <section style={{
      background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
    }}>
      <div className="sbr-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "88px 40px" }}>
        <div style={{ marginBottom: 48, maxWidth: 800 }}>
          <SbrEyebrow color={t.accentColor}>Why AlgoVerde</SbrEyebrow>
          <SbrH2>An AI model does not always represent a <Italic>reliable</Italic> persona.</SbrH2>
          <SbrLede>
            Ask a general-purpose model to play a dealer principal and it may produce something
            articulate and plausible. The harder test is whether it captures what would make that
            dealer accept, reject, or quietly stop considering your offer. AlgoVerde pairs an
            evidence layer with a decision-context layer — the difference between a defensible
            Synthetic Panel and a plausible guess.
          </SbrLede>
        </div>

        <SbrLabel style={{ marginBottom: 18 }}>Three principles</SbrLabel>
        <div className="sbr-three-grid">
          {principles.map((p, i) => (
            <div key={i} className="sbr-card-pad" style={{
              border: "1px solid var(--av-rule)", borderRadius: 16,
              padding: "28px 28px", display: "flex", flexDirection: "column", gap: 14,
            }}>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                fontSize: 20, color: accent, lineHeight: 1, fontVariantNumeric: "tabular-nums",
              }}>0{i + 1}</div>
              <h3 style={{
                fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 21,
                letterSpacing: "-0.015em", color: "var(--av-ink)", lineHeight: 1.25, margin: 0,
              }}>{p}</h3>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56 }}>
          <h3 style={{
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(22px, 2.6vw, 30px)", letterSpacing: "-0.02em", lineHeight: 1.15,
            marginBottom: 24, maxWidth: 760,
          }}>
            The questions a buyer should insist on answering.
          </h3>
          <div className="sbr-two-grid" style={{ gap: 0, columnGap: 40 }}>
            {questions.map((q, i) => (
              <div key={i} style={{
                display: "flex", alignItems: "baseline", gap: 14,
                padding: "16px 0", borderTop: "1px solid var(--av-rule)",
              }}>
                <span style={{
                  fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                  fontSize: 17, color: accent, minWidth: 28, flexShrink: 0,
                }}>0{i + 1}</span>
                <span style={{ fontSize: 15.5, fontWeight: 500, color: "var(--av-ink)", lineHeight: 1.45 }}>{q}</span>
              </div>
            ))}
          </div>
        </div>

        <SbrInsideNote>
          Where the evidence comes from, which differences actually change a B2B decision, and how
          AlgoVerde answers each of the four questions — inside the paper.
        </SbrInsideNote>
      </div>
    </section>
  );
};

/* ── From brief to panel (workflow) ───────────────────────── */
const SbrWorkflowSection = ({ accent, Italic, t }) => {
  const soft = sbrAccent(t.accentColor).soft;
  const phases = [
    {
      range: "01–03", name: "Define the decision",
      steps: ["Define the question", "Establish the context", "Describe the audience"],
    },
    {
      range: "04–07", name: "Build the audience",
      steps: ["Investigate behavior", "Review the segments", "Specify the persona schema", "Generate and inspect"],
      flag: { at: 1, label: "Human review" },
    },
    {
      range: "08", name: "Refine",
      steps: ["Refine against real interactions"],
      flag: { at: 0, label: "Independent evaluation" },
    },
  ];
  let n = 0;
  return (
    <section className="sbr-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 80px" }}>
      <div style={{ marginBottom: 44, maxWidth: 780 }}>
        <SbrEyebrow color={t.accentColor}>How it works</SbrEyebrow>
        <SbrH2>From brief to a panel you can <Italic>question</Italic>.</SbrH2>
        <SbrLede>
          Eight steps, every one of them visible to your team as it runs — with your team steering
          the segments before anything is generated.
        </SbrLede>
      </div>

      <div className="sbr-phase-grid">
        {phases.map((p) => (
          <div key={p.range} className="sbr-card-pad" style={{
            background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
            padding: "28px 28px", display: "flex", flexDirection: "column", gap: 6,
          }}>
            <div style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
              fontSize: 18, color: accent, fontVariantNumeric: "tabular-nums",
            }}>{p.range}</div>
            <h3 style={{
              fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 20,
              letterSpacing: "-0.015em", color: "var(--av-ink)", margin: "0 0 10px",
            }}>{p.name}</h3>
            {p.steps.map((s, i) => {
              n += 1;
              return (
                <div key={s} style={{
                  display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap",
                  padding: "10px 0", borderTop: "1px solid var(--av-rule)",
                  fontSize: 14.5, color: "var(--av-ink)", lineHeight: 1.4,
                }}>
                  <span style={{ color: "var(--av-ink-muted)", fontSize: 12.5, fontVariantNumeric: "tabular-nums", minWidth: 20 }}>
                    {String(n).padStart(2, "0")}
                  </span>
                  <span style={{ flex: 1, minWidth: 140 }}>{s}</span>
                  {p.flag && p.flag.at === i && (
                    <span style={{
                      fontSize: 10.5, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase",
                      color: accent, background: soft, borderRadius: 999, padding: "4px 10px",
                    }}>{p.flag.label}</span>
                  )}
                </div>
              );
            })}
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 24, borderRadius: 14, background: soft, padding: "26px 32px",
      }}>
        <p style={{
          fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
          fontSize: "clamp(17px, 2.1vw, 21px)", color: "var(--av-ink)", lineHeight: 1.45, margin: 0,
        }}>
          One requirement applies throughout: the persona must be capable of saying no. If every
          persona wants to book a follow-up meeting, it's just not credible.
        </p>
      </div>
    </section>
  );
};

/* ── Our evidence (proof teaser) ──────────────────────────── */
const SbrEvidenceSection = ({ accent, Italic, t }) => {
  const soft = sbrAccent(t.accentColor).soft;
  const sets = [
    { k: "Medical specialty society", v: "Highly specialized physicians" },
    { k: "Global automaker", v: "A dealer network" },
    { k: "Deep tech company", v: "The buying committee" },
  ];
  const rows = [
    {
      need: "Exploring objections?",
      synth: "Challenge the offer across roles and situations.",
      human: "Check which objections real buyers raise — including the ones the model misses.",
    },
    {
      need: "Refining a message?",
      synth: "Compare alternatives and surface assumptions.",
      human: "Test comprehension and relevance with the target audience.",
    },
  ];
  return (
    <section style={{
      background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
    }}>
      <div className="sbr-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "88px 40px 80px" }}>
        <div style={{ marginBottom: 44, maxWidth: 800 }}>
          <SbrEyebrow color={t.accentColor}>Our evidence</SbrEyebrow>
          <SbrH2>The strongest evidence: clients <Italic>keep using them</Italic>.</SbrH2>
          <SbrLede>
            Each of these companies could commission human research. Instead, they keep putting
            real decisions through AlgoVerde's B2B persona sets — and coming back with the next
            question. That is the test the market actually applies.
          </SbrLede>
        </div>

        <div className="sbr-three-grid">
          {sets.map((s, i) => (
            <div key={i} className="sbr-card-pad" style={{
              border: "1px solid var(--av-rule)", borderRadius: 16, padding: "28px 32px",
            }}>
              <SbrLabel color={accent}>{s.k}</SbrLabel>
              <div style={{
                marginTop: 12, fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em",
                color: "var(--av-ink)", lineHeight: 1.3,
              }}>{s.v}</div>
              <div style={{ marginTop: 8, fontSize: 13.5, color: "var(--av-ink-muted)" }}>In active use today</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 24, borderRadius: 14, background: soft, padding: "26px 32px",
        }}>
          <p style={{ fontSize: 15, color: "var(--av-ink)", lineHeight: 1.6, margin: 0, fontWeight: 500 }}>
            The question that matters is whether the decision the synthetic personas informed was
            better than the one you would otherwise have made, on the timeline you actually had.
          </p>
        </div>

        {/* Match method to decision — a taste of the full table */}
        <div style={{ marginTop: 64 }}>
          <h3 style={{
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(22px, 2.6vw, 30px)", letterSpacing: "-0.02em", lineHeight: 1.15,
            marginBottom: 32, maxWidth: 720,
          }}>
            Match the method to the decision.
          </h3>

          <div className="sbr-table-row sbr-table-head" style={{
            padding: "0 0 14px", borderBottom: "1px solid var(--av-rule)",
          }}>
            <SbrLabel>If you are</SbrLabel>
            <SbrLabel color={accent}>Use GenAI Personas to</SbrLabel>
            <SbrLabel>Then, with real buyers</SbrLabel>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="sbr-table-row" style={{
              padding: "22px 0", borderBottom: "1px solid var(--av-rule)",
            }}>
              <div style={{ fontSize: 15, color: "var(--av-ink)", lineHeight: 1.5, fontWeight: 600 }}>{r.need}</div>
              <div data-col="GenAI Personas" style={{ fontSize: 14.5, color: "var(--av-ink)", lineHeight: 1.55, fontWeight: 500 }}>{r.synth}</div>
              <div data-col="Real buyers" style={{ fontSize: 14.5, color: "var(--av-ink-muted)", lineHeight: 1.55 }}>{r.human}</div>
            </div>
          ))}
        </div>

        <SbrInsideNote>
          Plus understanding a buying process, and why estimating demand needs a separately
          validated method rather than a collection of simulated responses — in the full table
          inside the paper.
        </SbrInsideNote>
      </div>
    </section>
  );
};

/* ── Closing CTA ─────────────────────────────────────────── */
const SbrClosingCTA = ({ t, accent, accentTint }) => (
  <section style={{
    background: "var(--av-bg-dark)", color: "#fff", position: "relative", overflow: "hidden",
  }}>
    <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: accent }}></div>
    <div className="sbr-closing-inner" style={{
      maxWidth: 1320, margin: "0 auto", padding: "96px 40px 88px",
      display: "flex", flexDirection: "column", alignItems: "center",
      gap: 36, textAlign: "center",
    }}>
      <h2 style={{
        fontFamily: "var(--font-sans)", fontWeight: 600,
        fontSize: "clamp(32px, 5vw, 60px)", letterSpacing: "-0.03em", lineHeight: 1.05,
        margin: 0, color: "#fff", maxWidth: 980, textWrap: "balance",
      }}>
        Bring us the audience you cannot reach.{" "}
        <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, color: accentTint }}>
          Let the output settle the question.
        </span>
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "rgba(255,255,255,0.65)", lineHeight: 1.6,
        margin: 0, maxWidth: 660,
      }}>
        One hard-to-reach audience. One decision you cannot postpone. A Synthetic Panel built
        around both, with the construction visible at every step — judged by the decision it informs.
      </p>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 8 }}>
        <a href={SBR_PDF} download onClick={() => sbrTrackDownload("closing")} style={{
          background: "#fff", color: "var(--av-ink)", border: "none",
          padding: "18px 32px", borderRadius: 10, fontSize: 16, fontWeight: 500,
          cursor: "pointer", fontFamily: "var(--font-sans)", textDecoration: "none",
          display: "inline-flex", alignItems: "center", gap: 14,
          transition: "transform 160ms ease, background 160ms ease",
          letterSpacing: "-0.005em",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = accentTint; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.background = "#fff"; }}
        >
          <span>{t.ctaLabel}</span>
          <span style={{ fontSize: 16 }}>↓</span>
        </a>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em" }}>
          Free PDF · No email required · B2B research
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  SbrNavBar, SbrHeroSection, SbrInsideSection,
  SbrRecruitSection, SbrApproachSection, SbrWorkflowSection, SbrEvidenceSection,
  SbrClosingCTA,
});