// Sections for the AI Personas Evidence landing page.

/* ── Responsive styles ───────────────────────────────────── */
const RESPONSIVE_CSS = `
  .persona-hero-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .persona-inside-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    align-items: center;
  }
  .persona-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .persona-evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .persona-principles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .persona-cover-col {
    display: flex;
    justify-content: center;
    padding: 20px 40px;
  }

  @media (max-width: 900px) {
    .persona-hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
      padding: 48px 24px 64px !important;
    }
    .persona-inside-grid {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 56px 24px !important;
    }
    .persona-cover-col { display: none; }
    .persona-stats-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .persona-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;
    }
    .persona-stats-grid > div:first-child { padding-top: 0; }
    .persona-stats-grid > div:last-child { border-bottom: none; padding-bottom: 0; }
    .persona-evidence-grid {
      grid-template-columns: 1fr;
    }
    .persona-principles-grid {
      grid-template-columns: 1fr;
    }
    .persona-section-pad {
      padding: 64px 24px 48px !important;
    }
    .persona-closing-inner {
      padding: 72px 24px 64px !important;
    }
    .persona-logo-bar-section {
      padding: 24px 24px 48px !important;
    }
    .persona-inside-copy {
      max-width: 100% !important;
    }
    .persona-footer {
      padding: 24px 24px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
    }
    .persona-questions-grid {
      padding: 64px 24px 48px !important;
    }
  }

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

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

/* ── NavBar ──────────────────────────────────────────────── */
const PersonaNavBar = () => (
  <>
    <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" }}>
          <PersonaLogo width={170} />
        </a>
      </div>
    </header>
  </>
);

/* ── Hero ─────────────────────────────────────────────────── */
const PersonaHeroSection = ({ Italic, t, accent, scrollToForm, formRef }) => (
  <section>
    <div className="persona-hero-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "64px 40px 96px" }}>
      {/* Left — copy */}
      <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <PersonaEyebrow color={t.accentColor}>{t.eyebrowText}</PersonaEyebrow>

        <h1 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(40px, 6vw, 88px)", lineHeight: 0.98, letterSpacing: "-0.035em",
          color: "var(--av-ink)", margin: 0, textWrap: "balance",
        }}>
          AI Personas: What the Evidence <Italic>Actually Says</Italic>.
        </h1>

        <p style={{
          fontSize: "clamp(16px, 2vw, 20px)", lineHeight: 1.5, color: "var(--av-ink-soft)",
          fontFamily: "var(--font-sans)", margin: 0, textWrap: "pretty",
        }}>
          A guide for market research leaders who want the full picture, not the pitch.
          We reviewed 24 sources — academic papers, Stanford studies, Bain reports, Wharton critiques —
          and mapped the evidence honestly. Both sides.
        </p>

        {/* CTA row */}
        <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <button onClick={scrollToForm} style={{
            background: "var(--av-ink)", color: "#fff", border: "none",
            padding: "16px 26px", borderRadius: 10, fontSize: 15, fontWeight: 500,
            cursor: "pointer", fontFamily: "var(--font-sans)",
            display: "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>
          </button>
          <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>
        </div>

        {/* Proof row */}
        <div className="persona-stats-grid" style={{
          marginTop: 24, paddingTop: 36, borderTop: "1px solid var(--av-rule)",
        }}>
          {[
            { k: "Sources", v: <>24</>, note: "18 peer-reviewed academic papers + 6 major industry publications" },
            { k: "Replication rate", v: <><span style={{ color: accent }}>76</span>%</>, note: "Main effects reproduced across 19,447 AI personas (Yeykelis et al., 2024)" },
            { k: "AlgoVerde match", v: <>85–<span style={{ color: accent }}>90</span>%</>, note: "Resemblance to human panel in our own validation study with a leading US consulting firm" },
          ].map((s, i) => (
            <div key={i} style={{
              paddingRight: 24, borderRight: i < 2 ? "1px solid var(--av-rule)" : "none",
              paddingLeft: i > 0 ? 24 : 0,
            }}>
              <div style={{
                fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
                textTransform: "uppercase", color: "var(--av-ink-muted)", marginBottom: 10,
              }}>{s.k}</div>
              <div style={{
                fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em",
                color: "var(--av-ink)", lineHeight: 1.1, marginBottom: 8,
                fontVariantNumeric: "tabular-nums",
              }}>{s.v}</div>
              <div style={{ fontSize: 12, color: "var(--av-ink-muted)", lineHeight: 1.45 }}>{s.note}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Right — form */}
      <div ref={formRef}>
        <PersonaEmailForm accentColor={t.accentColor} />
      </div>
    </div>
  </section>
);

/* ── Inside the Paper ────────────────────────────────────── */
const PersonaInsideSection = ({ t, Italic }) => (
  <section id="inside" style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="persona-inside-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div className="persona-cover-col">
        <PersonaCover width={280} rotate={-4} />
      </div>
      <div className="persona-inside-copy" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 640 }}>
        <PersonaEyebrow color={t.accentColor}>Inside the paper</PersonaEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: 0,
        }}>
          The full picture.<br />
          Supporting evidence, critical evidence, and <Italic>five questions to ask</Italic>.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
        }}>
          This paper doesn't argue for a conclusion — it argues for a distinction.
          The difference between well-built AI personas and poorly-built ones
          is almost entirely a question of methodology, not technology.
        </p>
        <div style={{ marginTop: 12 }}>
          {[
            "Introduction: A prompt is not a methodology",
            "Section 1: AI Customer Personas — the supporting evidence",
            "Section 1: AI Customer Personas — the critical evidence",
            "Section 2: AI Expert Personas — a higher-stakes claim",
            "Section 3: What separates reliable from unreliable",
            "Five questions to ask any AI persona vendor",
            "The AlgoVerde approach & validation data",
          ].map((title, i) => (
            <PersonaTocChip key={i} idx={["i","ii","iii","iv","v","vi","vii"][i]} color={t.accentColor}>
              {title}
            </PersonaTocChip>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── Evidence Section ────────────────────────────────────── */
const PersonaEvidenceSection = ({ accent, accentSoft, Italic, t, scrollToForm }) => (
  <section className="persona-section-pad"
    style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 64px" }}>

    {/* Pull quote */}
    <div style={{
      borderLeft: `4px solid ${accent}`,
      paddingLeft: 28, marginBottom: 72, maxWidth: 800,
    }}>
      <p style={{
        fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
        fontSize: "clamp(20px, 2.5vw, 26px)", lineHeight: 1.45,
        color: "var(--av-ink)", margin: 0,
      }}>
        "The difference between well-built AI personas and poorly-built ones is
        almost entirely a question of methodology, not technology."
      </p>
    </div>

    {/* Two-col: supporting / critical */}
    <div className="persona-evidence-grid">
      {/* Supporting */}
      <div style={{
        background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
        padding: "36px", display: "flex", flexDirection: "column", gap: 20,
      }}>
        <div style={{
          fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
          textTransform: "uppercase", color: "#8282E3",
          display: "flex", alignItems: "center", gap: 8,
        }}>
          <span style={{ width: 20, height: 2, background: "#8282E3" }}></span>
          The supporting evidence
        </div>
        <h3 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22,
          letterSpacing: "-0.015em", color: "var(--av-ink)", lineHeight: 1.2, margin: 0,
        }}>AI customer personas can reproduce human panel results — under the right conditions.</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            { stat: "76%", label: "main effects replicated", note: "19,447 AI personas vs. 133 published studies — Yeykelis et al. (2024)" },
            { stat: "85%", label: "test-retest consistency", note: "Simulation of 1,052 real individuals grounded in self-report data — Stanford (2024)" },
            { stat: "68%", label: "results replicated overall", note: "Same Yeykelis study — strong signal, with important caveats on out-of-distribution tasks" },
          ].map((row, i) => (
            <div key={i} style={{
              padding: "16px 0",
              borderTop: "1px solid var(--av-rule-soft)",
              display: "flex", gap: 16, alignItems: "baseline",
            }}>
              <span style={{
                fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 28,
                letterSpacing: "-0.03em", color: "#8282E3", flexShrink: 0,
                fontVariantNumeric: "tabular-nums",
              }}>{row.stat}</span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: "var(--av-ink)", marginBottom: 4 }}>{row.label}</div>
                <div style={{ fontSize: 12, color: "var(--av-ink-muted)", lineHeight: 1.45 }}>{row.note}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Critical */}
      <div style={{
        background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
        padding: "36px", display: "flex", flexDirection: "column", gap: 20,
      }}>
        <div style={{
          fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
          textTransform: "uppercase", color: "#E64A19",
          display: "flex", alignItems: "center", gap: 8,
        }}>
          <span style={{ width: 20, height: 2, background: "#E64A19" }}></span>
          The critical evidence
        </div>
        <h3 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22,
          letterSpacing: "-0.015em", color: "var(--av-ink)", lineHeight: 1.2, margin: 0,
        }}>They fail predictably — and the failure modes are not obvious.</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            { label: "Systematic bias that looks plausible", note: "Ad hoc persona generation without rigorous sampling design introduces distortions that are hard to detect — Li, Chen, Namkoong & Peng (2025)" },
            { label: "Expert personas don't improve accuracy", note: "Assigning expert personas affects tone and framing, not the quality of underlying reasoning — Wharton (2026)" },
            { label: "Bias is harder to detect, not absent", note: "AI can amplify embedded biases while appearing objective — auditability and human oversight are not optional (Silicon Foundry, 2026)" },
          ].map((row, i) => (
            <div key={i} style={{
              padding: "16px 0",
              borderTop: "1px solid var(--av-rule-soft)",
              display: "flex", gap: 14, alignItems: "flex-start",
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: "50%",
                background: "#E64A19", flexShrink: 0, marginTop: 6,
              }}></span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: "var(--av-ink)", marginBottom: 4 }}>{row.label}</div>
                <div style={{ fontSize: 12, color: "var(--av-ink-muted)", lineHeight: 1.45 }}>{row.note}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

  </section>
);

/* ── 5 Principles Section ────────────────────────────────── */
const PersonaPrinciplesSection = ({ accent, t, Italic }) => {
  const principles = [
    { n: "01", title: "The brief shapes everything.", body: "Every study that shows strong performance begins with a clearly defined research question. Every study that shows failure begins with something underspecified. A well-built AI persona begins with a research question, not a prompt." },
    { n: "02", title: "Sampling design, not prompt engineering.", body: "The distinction between a persona and a prompt is structural, not cosmetic. Park et al.'s simulation of 1,052 individuals achieves 85% test-retest consistency because each agent is grounded in rich, individual-level self-report data — not because the prompt is cleverly written." },
    { n: "03", title: "Real data keeps personas honest.", body: "The strongest predictor of output quality is not the prompt itself but the rigor of the method. Personas grounded in explicit evidence remain better calibrated to real populations than those built from generic demographic descriptions alone." },
    { n: "04", title: "Validation is continuous, not a one-time event.", body: "Accuracy drops when personas are tested under conditions different from those they were built for. Validation is not a box to check before deployment — it is a continuous process of probing persona responses against known benchmarks." },
    { n: "05", title: "Human expertise is not replaced, it is extended.", body: "AI personas perform best in augmentation, not replacement, roles. An AI persona built with discipline extends the reach of a senior insights team into decisions that would otherwise be made without research at all." },
  ];
  return (
    <section style={{
      background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
    }}>
      <div className="persona-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
        <div style={{ marginBottom: 56, maxWidth: 640 }}>
          <PersonaEyebrow color={t.accentColor}>Section 3 · What separates reliable from unreliable</PersonaEyebrow>
          <h2 style={{
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.02,
            marginTop: 18, marginBottom: 0,
          }}>
            Five principles that appear{" "}<Italic>consistently</Italic>{" "}across all the research.
          </h2>
        </div>
        <div className="persona-principles-grid">
          {principles.map((p) => (
            <div key={p.n} style={{
              display: "flex", gap: 20, padding: "28px 0",
              borderTop: "1px solid var(--av-rule)",
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: "50%",
                background: personaAccent(t.accentColor).soft,
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0,
              }}>
                <span style={{
                  fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 12,
                  color: accent, letterSpacing: "0.04em",
                }}>{p.n}</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{
                  fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 16,
                  color: "var(--av-ink)", letterSpacing: "-0.01em",
                }}>{p.title}</div>
                <div style={{
                  fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.6,
                }}>{p.body}</div>
              </div>
            </div>
          ))}
          {/* AlgoVerde approach — sixth cell */}
          <div style={{
            padding: "28px", borderRadius: 12,
            background: personaAccent(t.accentColor).soft,
            display: "flex", flexDirection: "column", gap: 12,
            borderTop: "none",
          }}>
            <div style={{
              fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
              textTransform: "uppercase", color: accent,
            }}>The AlgoVerde approach</div>
            <div style={{
              fontFamily: "var(--font-sans)", fontWeight: 700,
              fontSize: "clamp(36px, 5vw, 56px)", letterSpacing: "-0.04em",
              color: accent, lineHeight: 0.95, fontVariantNumeric: "tabular-nums",
            }}>85–90%</div>
            <div style={{ fontSize: 15, fontWeight: 600, color: "var(--av-ink)" }}>
              resemblance to the human panel
            </div>
            <p style={{
              fontSize: 13, color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
            }}>
              In our 2024 validation study with a leading US consulting firm, the rank-ordered
              drivers of economic sentiment matched the human panel with 85–90% resemblance
              on relevant dimensions.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── Five Questions Section ──────────────────────────────── */
const PersonaQuestionsSection = ({ accent, t }) => {
  const questions = [
    { n: "01", label: "Question 1", q: "What brief process did you use to define the research question before building the persona?" },
    { n: "02", label: "Question 2", q: "How was the sampling frame designed, and what evidence was used to construct the personas?" },
    { n: "03", label: "Question 3", q: "How do you validate persona responses against known human benchmarks, and how often?" },
    { n: "04", label: "Question 4", q: "How do you detect, document, and correct for bias in your persona outputs?" },
    { n: "05", label: "Question 5", q: "At what point in your process does a human research expert review and calibrate the output?" },
  ];
  return (
    <section className="persona-questions-grid"
      style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px 64px" }}>
      <div style={{ marginBottom: 52, maxWidth: 680 }}>
        <PersonaEyebrow color={t.accentColor}>Reliability · A practical screen</PersonaEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 52px)", letterSpacing: "-0.028em", lineHeight: 1.02,
          marginTop: 18, marginBottom: 12,
        }}>
          Five questions <span style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
            color: accent,
          }}>to ask</span>.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55,
        }}>
          Any provider who cannot answer these with specifics is offering a prompt, not a methodology.
        </p>
      </div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {questions.map((row, i) => (
          <div key={i} style={{
            display: "flex", gap: 24, alignItems: "flex-start",
            padding: "24px 0", borderTop: "1px solid var(--av-rule)",
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: "50%",
              background: personaAccent(t.accentColor).soft,
              display: "flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0,
            }}>
              <span style={{
                fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 12,
                color: accent,
              }}>{row.n}</span>
            </div>
            <div>
              <div style={{
                fontSize: 11, fontWeight: 500, letterSpacing: "0.16em",
                textTransform: "uppercase", color: accent, marginBottom: 8,
              }}>{row.label}</div>
              <div style={{
                fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 17,
                color: "var(--av-ink)", lineHeight: 1.45, letterSpacing: "-0.01em",
              }}>{row.q}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ── Closing CTA ─────────────────────────────────────────── */
const PersonaClosingCTA = ({ t, accent, accentTint, scrollToForm }) => (
  <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="persona-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, 64px)", letterSpacing: "-0.03em", lineHeight: 1.02,
        margin: 0, color: "#fff", maxWidth: 900, textWrap: "balance",
      }}>
        The question is not{" "}
        <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, color: accentTint }}>
          whether
        </span>
        . It is{" "}
        <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, color: accentTint }}>
          how
        </span>.
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "rgba(255,255,255,0.65)", lineHeight: 1.6,
        margin: 0, maxWidth: 600,
      }}>
        GenAI Personas do not replace the methodology a senior insights team already has.
        They compress it — and extend it into decisions that would otherwise be made
        without research at all.
      </p>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 8 }}>
        <button onClick={scrollToForm} style={{
          background: "#fff", color: "var(--av-ink)", border: "none",
          padding: "18px 32px", borderRadius: 10, fontSize: 16, fontWeight: 500,
          cursor: "pointer", fontFamily: "var(--font-sans)",
          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>
        </button>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em" }}>
          Free · 19-page PDF · 24 sources
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  PersonaNavBar, PersonaHeroSection, PersonaInsideSection,
  PersonaEvidenceSection, PersonaPrinciplesSection,
  PersonaQuestionsSection, PersonaClosingCTA,
});