// Sections for the Validate in Seconds landing page.

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

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

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

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

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

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

        <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",
        }}>
          Validate in <Italic>Seconds</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",
        }}>
          How CPG concept testing is being reinvented, not just accelerated. The shift
          is not faster research — it's a different operating model for launching new products.
        </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="validate-stats-grid" style={{
          marginTop: 24, paddingTop: 36, borderTop: "1px solid var(--av-rule)",
        }}>
          {[
            { k: "New CPG products fail", v: <><span style={{ color: accent }}>70</span>–85%</>, note: "Industry estimates — mostly due to misread consumer needs and weak positioning" },
            { k: "Lift in add-to-cart", v: <><span style={{ color: accent }}>60</span>%</>, note: "On products tested through reinvented concept testing vs. panels, Fortune 500 CPG leader" },
            { k: "Cost savings", v: <><span style={{ color: accent }}>90</span>%</>, note: "Testing cost reduced turning months of research into days, same case study" },
          ].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}>
        <ValidateEmailForm accentColor={t.accentColor} />
      </div>
    </div>
  </section>
);

/* ── Inside the Paper ────────────────────────────────────── */
const ValidateInsideSection = ({ t, Italic }) => (
  <section id="inside" style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="validate-inside-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div className="validate-cover-col">
        <ValidateCover width={280} rotate={-4} />
      </div>
      <div className="validate-inside-copy" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 640 }}>
        <ValidateEyebrow color={t.accentColor}>Inside the paper</ValidateEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: 0,
        }}>
          A different operating model for <Italic>launching new products</Italic>.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
        }}>
          Generative AI offered a chance to resolve the rigor-vs-speed trade-off in concept
          testing, but the dominant industry response was simply to make existing surveys
          cheaper and faster. AlgoVerde argues for a different model.
        </p>
        <div style={{ marginTop: 12 }}>
          {[
            "Executive summary: a different operating model",
            "The problem: the decision that makes or breaks the launch",
            "The reinvention: from a gate to a continuous validation layer",
            "Can you trust it: validating synthetic fidelity",
            "Case study: inside a Fortune 500 CPG launch",
            "One panel, end to end: what was validated, and the outcome",
            "Side by side: two approaches to AI in concept testing",
          ].map((title, i) => (
            <ValidateTocChip key={i} idx={["i","ii","iii","iv","v","vi","vii"][i]} color={t.accentColor}>
              {title}
            </ValidateTocChip>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── Problem / Reinvention Section ───────────────────────── */
const ValidateProblemSection = ({ accent, Italic, t }) => (
  <section className="validate-section-pad"
    style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 64px" }}>

    {/* Pull quote */}
    <div style={{
      borderLeft: `4px solid ${accent}`,
      paddingLeft: 28, marginBottom: 56, maxWidth: 820,
    }}>
      <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,
      }}>
        "Concept testing happens too late, and in insufficient volume, to meaningfully guide strategy."
      </p>
    </div>

    {/* Three pain-point cards */}
    <div className="validate-cards-grid" style={{ marginBottom: 64 }}>
      {[
        { n: "01", title: "Too few concepts", body: "Businesses with many promising ideas must prematurely discard most of them to fit testing budgets." },
        { n: "02", title: "The wrong results", body: "The concepts that survive are not those that would win with consumers, but those that survived the boardroom." },
        { n: "03", title: "Stale by arrival", body: "Each study takes months, so major decisions ride on research three, six, or twelve months out of date." },
      ].map((c) => (
        <div key={c.n} style={{
          background: "#fdeae3", borderRadius: 16, padding: "28px",
          display: "flex", flexDirection: "column", gap: 14,
        }}>
          <span style={{
            width: 30, height: 30, borderRadius: "50%", background: "#E64A19",
            color: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 12, fontWeight: 700, fontFamily: "var(--font-sans)",
          }}>{c.n}</span>
          <div style={{
            fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 18,
            color: "var(--av-ink)", letterSpacing: "-0.01em",
          }}>{c.title}</div>
          <p style={{ fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0 }}>{c.body}</p>
        </div>
      ))}
    </div>

    {/* Two-col: incumbent gate vs continuous validation layer */}
    <div className="validate-evidence-grid">
      <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: "var(--av-ink-muted)",
          display: "flex", alignItems: "center", gap: 8,
        }}>
          <span style={{ width: 20, height: 2, background: "var(--av-ink-muted)" }}></span>
          The old model
        </div>
        <h3 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22,
          letterSpacing: "-0.015em", color: "var(--av-ink)", lineHeight: 1.2, margin: 0,
        }}>Rigor and speed have always been a trade-off.</h3>
        <p style={{ fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0 }}>
          Traditional concept testing is rigorous but slow, limited by human fieldwork.
          Generative AI offered a chance to resolve that trade-off — but the industry's
          response was revealingly cautious: synthetic respondents for early screening,
          never trusted with the final decision.
        </p>
      </div>

      <div style={{
        background: softTint(accent), border: `1px solid ${accent}33`, borderRadius: 16,
        padding: "36px", display: "flex", flexDirection: "column", gap: 20,
      }}>
        <div style={{
          fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
          textTransform: "uppercase", color: accent,
          display: "flex", alignItems: "center", gap: 8,
        }}>
          <span style={{ width: 20, height: 2, background: accent }}></span>
          The reinvention
        </div>
        <h3 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 22,
          letterSpacing: "-0.015em", color: "var(--av-ink)", lineHeight: 1.2, margin: 0,
        }}>From a gate to a continuous validation layer.</h3>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            { label: "The Flight Simulator for Product Strategy" },
            { label: "Insight that compounds" },
            { label: "The GenAI Persona" },
          ].map((row, i) => (
            <div key={i} style={{
              padding: "12px 0",
              borderTop: "1px solid var(--av-rule-soft)",
              display: "flex", gap: 14, alignItems: "center",
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: "50%",
                background: accent, flexShrink: 0,
              }}></span>
              <div style={{ fontSize: 14, fontWeight: 600, color: "var(--av-ink)" }}>{row.label}</div>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 12, color: "var(--av-ink-muted)", lineHeight: 1.5, margin: 0 }}>
          What each one means for your pipeline — inside the paper.
        </p>
      </div>
    </div>
  </section>
);

const softTint = (hex) => `${hex}14`;

/* ── Trust Section ────────────────────────────────────────── */
const ValidateTrustSection = ({ accent, t, Italic }) => (
  <section style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="validate-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div style={{ marginBottom: 48, maxWidth: 720 }}>
        <ValidateEyebrow color={t.accentColor}>Can you trust it?</ValidateEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05,
          marginTop: 18, marginBottom: 16,
        }}>
          Validating <Italic>synthetic fidelity</Italic>.
        </h2>
        <p style={{ fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55 }}>
          Synthetic Fidelity is the empirically validated accuracy of AlgoVerde's AI panels
          against human consumer panels — benchmarked, not assumed.
        </p>
      </div>

      <div className="validate-evidence-grid">
        <div style={{
          border: "1px dashed var(--av-rule)", borderRadius: 16,
          padding: "32px", display: "flex", flexDirection: "column", gap: 16,
        }}>
          <span style={{
            display: "inline-flex", alignSelf: "flex-start",
            border: "1px solid var(--av-rule)", borderRadius: 999,
            padding: "6px 16px", fontSize: 13, fontWeight: 600, color: "var(--av-ink)",
          }}>Off-the-shelf LLM</span>
          <p style={{ fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0 }}>
            A large language model prompted to "act like" a consumer produces fluent but
            unvalidated answers.
          </p>
        </div>

        <div style={{
          background: accent, borderRadius: 16, color: "#fff",
          padding: "32px", display: "flex", flexDirection: "column", gap: 16,
        }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>AlgoVerde GenAI Persona</div>
          {[
            "Built from individual-level behavioral data",
            "Benchmarked against human results",
            "Re-calibrated as markets evolve",
          ].map((line, i) => (
            <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14, lineHeight: 1.5 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#fff", marginTop: 6, flexShrink: 0 }}></span>
              <span>{line}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        borderLeft: `4px solid ${accent}`, paddingLeft: 28, marginTop: 56, maxWidth: 760,
      }}>
        <p style={{
          fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
          fontSize: "clamp(18px, 2.2vw, 22px)", lineHeight: 1.5, color: "var(--av-ink)", margin: 0,
        }}>
          A new operating model for innovation — not just a faster survey.
        </p>
      </div>
    </div>
  </section>
);

/* ── Case Study + Validated Stages Table ─────────────────── */
const ValidateCaseStudySection = ({ accent, t, Italic }) => {
  const rows = [
    { stage: "Concept testing", outcome: "Months to ~2 weeks; ~90% lower testing cost" },
    { stage: "E-commerce", outcome: "60% increase in add-to-cart on tested products" },
    { stage: "Transcreation", outcome: "Local validation in a fraction of the timeline" },
  ];
  return (
    <section className="validate-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 64px" }}>
      <div style={{ marginBottom: 48, maxWidth: 760 }}>
        <ValidateEyebrow color={t.accentColor}>Case study</ValidateEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.05,
          marginTop: 18, marginBottom: 16,
        }}>
          Inside a Fortune 500 <Italic>CPG</Italic> launch.
        </h2>
        <p style={{ fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.6 }}>
          A maker of dozens of household brands was sitting on more promising R&D than its
          validation pipeline could afford to test. So the team ran a two-week sprint instead:
          GenAI Personas matched to their target consumers, concepts reworked and re-tested
          in real time — no new fieldwork, no waiting.
        </p>
      </div>

      <div style={{
        background: accent, borderRadius: 16, color: "#fff",
        padding: "32px 36px", marginBottom: 48, maxWidth: 900,
      }}>
        <p style={{ fontSize: 16, lineHeight: 1.6, margin: 0 }}>
          A personal-care concept landed poorly until the team shifted the message from a health
          benefit to a personal-confidence angle: purchase intent jumped immediately. In a
          traditional focus group, that insight would have arrived weeks later, or never.
        </p>
      </div>

      <div style={{ marginBottom: 24 }}>
        <ValidateEyebrow color={t.accentColor}>One panel, end to end</ValidateEyebrow>
        <h3 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: "clamp(24px, 3vw, 32px)",
          letterSpacing: "-0.02em", marginTop: 16,
        }}>A glimpse of what was validated.</h3>
      </div>

      {rows.map((r, i) => (
        <div key={i} style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, flexWrap: "wrap",
          padding: "18px 0", borderBottom: "1px solid var(--av-rule-soft)",
        }}>
          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15, color: "var(--av-ink)" }}>{r.stage}</div>
          <div style={{ fontSize: 14, color: accent, fontWeight: 500, lineHeight: 1.5 }}>{r.outcome}</div>
        </div>
      ))}
      <p style={{ fontSize: 13, color: "var(--av-ink-muted)", lineHeight: 1.5, marginTop: 16, marginBottom: 0 }}>
        Plus message &amp; creative, image creation, and creative validation — the full
        six-stage breakdown is in the paper.
      </p>
    </section>
  );
};

/* ── Side-by-Side Comparison Section ─────────────────────── */
const ValidateCompareSection = ({ accent, t }) => {
  const rows = [
    { label: "Core question", old: "How do we run the same survey faster and cheaper?", neu: "What would concept testing look like if designed around AI consumers?" },
    { label: "Role of AI", old: "A faster questionnaire", neu: "A continuous validation layer across the journey" },
    { label: "Net effect", old: "Marginal improvement", neu: "Rigor and speed together" },
  ];
  return (
    <section style={{ background: "#fff", borderTop: "1px solid var(--av-rule)" }}>
      <div className="validate-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px 96px" }}>
        <div style={{ marginBottom: 48, maxWidth: 680 }}>
          <ValidateEyebrow color={t.accentColor}>Side by side</ValidateEyebrow>
          <h2 style={{
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.05,
            marginTop: 18,
          }}>
            Two approaches to AI in concept testing.
          </h2>
        </div>

        <div className="validate-compare-row" style={{
          padding: "16px 0", borderBottom: "1px solid var(--av-rule)",
        }}>
          <div></div>
          <div>
            <span style={{
              display: "inline-flex", border: "1px solid var(--av-rule)", borderRadius: 999,
              padding: "5px 14px", fontSize: 12, fontWeight: 600, color: "var(--av-ink-soft)",
            }}>Incumbent</span>
            <div style={{ fontSize: 13, fontWeight: 500, color: "var(--av-ink-muted)", marginTop: 10 }}>AI bolted on</div>
          </div>
          <div>
            <span style={{
              display: "inline-flex", background: accent, borderRadius: 999,
              padding: "5px 14px", fontSize: 12, fontWeight: 600, color: "#fff",
            }}>Reinvention</span>
            <div style={{ fontSize: 13, fontWeight: 500, color: accent, marginTop: 10 }}>Process rebuilt</div>
          </div>
        </div>

        {rows.map((r, i) => (
          <div key={i} className="validate-compare-row" style={{
            padding: "22px 0", borderBottom: "1px solid var(--av-rule-soft)", alignItems: "start",
          }}>
            <div style={{
              fontSize: 11, fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase",
              color: "var(--av-ink-muted)",
            }}>{r.label}</div>
            <div style={{ fontSize: 15, color: "var(--av-ink-soft)", lineHeight: 1.5 }}>{r.old}</div>
            <div style={{ fontSize: 15, fontWeight: 500, color: "var(--av-ink)", lineHeight: 1.5 }}>{r.neu}</div>
          </div>
        ))}
        <p style={{ fontSize: 13, color: "var(--av-ink-muted)", lineHeight: 1.5, marginTop: 24 }}>
          Plus where it's allowed, the link to the decision, and cadence — the full
          side-by-side is in the paper.
        </p>
      </div>
    </section>
  );
};

/* ── Closing CTA ─────────────────────────────────────────── */
const ValidateClosingCTA = ({ 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="validate-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",
      }}>
        Not just faster research.<br />
        <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, color: accentTint }}>
          A different operating model
        </span>.
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "rgba(255,255,255,0.65)", lineHeight: 1.6,
        margin: 0, maxWidth: 600,
      }}>
        Reinventing concept testing around validated AI consumers to inform decisions
        continuously across the innovation pipeline.
      </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 · White paper · CPG concept testing
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  ValidateNavBar, ValidateHeroSection, ValidateInsideSection,
  ValidateProblemSection, ValidateTrustSection, ValidateCaseStudySection,
  ValidateCompareSection, ValidateClosingCTA,
});
