// Sections for the Beyond Concept Testing landing page.

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

  @media (max-width: 900px) {
    .bct-hero-wrap {
      gap: 32px;
      padding: 48px 24px 56px !important;
    }
    .bct-inside-grid {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 56px 24px !important;
    }
    .bct-cover-col { display: none; }
    .bct-stats-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .bct-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;
    }
    .bct-stats-grid > div:first-child { padding-top: 0; }
    .bct-stats-grid > div:last-child { border-bottom: none; padding-bottom: 0; }
    .bct-cando-grid { grid-template-columns: 1fr; }
    .bct-steps-grid { grid-template-columns: 1fr; }
    .bct-trust-grid { grid-template-columns: 1fr; }
    .bct-table-row {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .bct-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 two values read
       as an unlabelled list. */
    .bct-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;
    }
    .bct-section-pad {
      padding: 64px 24px 48px !important;
    }
    .bct-closing-inner {
      padding: 72px 24px 64px !important;
    }
    .bct-inside-copy {
      max-width: 100% !important;
    }
    .bct-footer {
      padding: 24px 24px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
    }
  }

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

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

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

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

      <h1 style={{
        fontFamily: "var(--font-sans)", fontWeight: 600,
        fontSize: "clamp(44px, 7.2vw, 96px)", lineHeight: 0.98, letterSpacing: "-0.038em",
        color: "var(--av-ink)", margin: 0, maxWidth: 1180,
      }}>
        <Italic>Beyond</Italic> concept testing.
      </h1>

      <p style={{
        fontSize: "clamp(16px, 2vw, 21px)", lineHeight: 1.5, color: "var(--av-ink-soft)",
        fontFamily: "var(--font-sans)", margin: 0, maxWidth: 780, textWrap: "pretty",
      }}>
        Concept testing asks which of your options people prefer. It is a good question,
        but a narrow one — the decision that mattered happened weeks earlier, when somebody
        made the cut. We don't just test concepts. We generate the ones worth testing.
      </p>

      {/* CTA row */}
      <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
        <a href={BEYOND_PDF} download onClick={() => beyondTrackDownload("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="bct-stats-grid" style={{
        marginTop: 16, paddingTop: 36, borderTop: "1px solid var(--av-rule)",
      }}>
          {[
            {
              k: "Blind backtest",
              v: <><span style={{ color: accent }}>96.3</span>%</>,
              note: "Agreement with a 2,100-person human panel, reproducing a 2024 US consumer sentiment study",
            },
            {
              k: "Third-party research costs",
              v: <>−<span style={{ color: accent }}>75</span>%</>,
              note: "A Global Automaker cut them by roughly three quarters, and compressed concept development from over a year to 3–4 months",
            },
            {
              k: "To the stage gate",
              v: <><span style={{ color: accent }}>4</span> days</>,
              note: "With a lead concept that had not existed when the process began",
            },
          ].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: "clamp(28px, 3vw, 38px)", fontWeight: 600, letterSpacing: "-0.025em",
                color: "var(--av-ink)", lineHeight: 1.1, marginBottom: 10,
                fontVariantNumeric: "tabular-nums",
              }}>{s.v}</div>
              <div style={{ fontSize: 13, color: "var(--av-ink-muted)", lineHeight: 1.45, maxWidth: 300 }}>{s.note}</div>
            </div>
          ))}
      </div>
    </div>
  </section>
);

/* ── Inside the Paper ────────────────────────────────────── */
const BeyondInsideSection = ({ t, Italic }) => (
  <section id="inside" style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="bct-inside-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div className="bct-cover-col">
        <BeyondCover width={280} rotate={-4} />
      </div>
      <div className="bct-inside-copy" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 640 }}>
        <BeyondEyebrow color={t.accentColor}>Inside the paper</BeyondEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: 0,
        }}>
          Make the option set an <Italic>output</Italic><br />
          of the process, not an input to it.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
        }}>
          Not a case against concept testing. A case against letting a workshop three months
          ago decide what you are allowed to test.
        </p>
        <div style={{ marginTop: 12 }}>
          {[
            "Ideas are cheap, execution is still expensive",
            "It's more than the concepts in front of you",
            "When the shortlist gets more expensive",
            "Six steps, one loop",
            "What can you test?",
            "Can you trust it?",
            "Defensible by design",
            "Who is using it",
            "Where to start",
          ].map((title, i) => (
            <BeyondTocChip key={i} idx={["i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix"][i]} color={t.accentColor}>
              {title}
            </BeyondTocChip>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── The scope problem (differentiator 1) ─────────────────── */
const BeyondScopeSection = ({ accent, Italic, t }) => {
  const soft = beyondAccent(t.accentColor).soft;
  const rows = [
    {
      before: "Which of our concepts wins?",
      now: "What is the whole possibility space, and where in it do we have a right to win?",
    },
    {
      before: "What is the average score?",
      now: "Who wins, who loses, and how much volume sits with the people who disagree?",
    },
    {
      before: "Which one won?",
      now: "What do we lead with, what complements it, what do we retire — and how can we show our work?",
    },
  ];
  return (
    <section className="bct-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 72px" }}>
      <div style={{ marginBottom: 48, maxWidth: 800 }}>
        <BeyondEyebrow color={t.accentColor}>Why beyond</BeyondEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.05,
          marginTop: 18, marginBottom: 20,
        }}>
          It's more than the <Italic>concepts</Italic> in front of you.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0,
        }}>
          Coca-Cola Spiced launched with fanfare in February 2024 and was pulled from shelves
          roughly seven months later. Liquid Death did the harder thing — entered a saturated
          category and closed a round in March 2024 valuing it at $1.4 billion. Neither outcome
          was settled by the quality of a preference test. Both were settled much earlier, by
          what was considered in the first place.
        </p>
      </div>

      <div className="bct-cando-grid">
        <div style={{
          background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
          padding: "32px 32px", display: "flex", flexDirection: "column", gap: 16,
        }}>
          <div style={{
            fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
            textTransform: "uppercase", color: "var(--av-ink-muted)",
          }}>What a preference test can tell you</div>
          {[
            "Rank the options in front of it, reliably",
            "Quantify the gap between them",
            "Give you a defensible reason to back one over another",
          ].map((item, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "baseline", gap: 12,
              fontSize: 15, color: "var(--av-ink)", lineHeight: 1.5,
            }}>
              <span style={{ color: "var(--av-ink-muted)", flexShrink: 0, fontSize: 13 }}>—</span>
              <span>{item}</span>
            </div>
          ))}
        </div>

        <div style={{
          background: "#fff", border: `1px solid ${accent}`, borderRadius: 16,
          padding: "32px 32px", display: "flex", flexDirection: "column", gap: 16,
        }}>
          <div style={{
            fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
            textTransform: "uppercase", color: accent,
          }}>What it cannot</div>
          {[
            "Whether the winner is good enough to launch",
            "What should have been on the list instead",
            "Which element of the concept is carrying it",
            "Who inside the average is objecting",
          ].map((item, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "baseline", gap: 12,
              fontSize: 15, color: "var(--av-ink)", lineHeight: 1.5,
            }}>
              <span style={{ color: accent, flexShrink: 0, fontSize: 13 }}>—</span>
              <span>{item}</span>
            </div>
          ))}
          <div style={{
            marginTop: 4, fontSize: 13.5, color: "var(--av-ink-muted)", lineHeight: 1.5,
            fontStyle: "italic",
          }}>A larger sample improves none of those four.</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,
        }}>
          "A test result feels like an answer about the market. It is an answer about your
          shortlist — and your shortlist was set by whoever happened to be in a room on a Tuesday."
        </p>
      </div>

      {/* Before / after */}
      <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,
        }}>
          What changes when the option set becomes an output.
        </h3>

        <div className="bct-table-row bct-table-head" style={{
          padding: "0 0 14px", borderBottom: "1px solid var(--av-rule)",
        }}>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--av-ink-muted)" }}>What you could answer before</div>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: accent }}>What you can answer now</div>
        </div>
        {rows.map((r, i) => (
          <div key={i} className="bct-table-row" style={{
            padding: "22px 0", borderBottom: "1px solid var(--av-rule)",
          }}>
            <div data-col="Before" style={{ fontSize: 14.5, color: "var(--av-ink-muted)", lineHeight: 1.55 }}>{r.before}</div>
            <div data-col="Now" style={{ fontSize: 14.5, color: "var(--av-ink)", lineHeight: 1.55, fontWeight: 500 }}>{r.now}</div>
          </div>
        ))}

        <p style={{
          marginTop: 28, fontSize: 14, color: "var(--av-ink-muted)", lineHeight: 1.6,
          fontStyle: "italic", fontFamily: "var(--font-serif)",
        }}>
          Three more pairs — where the concepts came from, which element is carrying one, and how
          to make the best of them stronger before you commit — are in the full table inside the paper.
        </p>
      </div>
    </section>
  );
};

/* ── Six steps, one loop (differentiator 2) ───────────────── */
const BeyondLoopSection = ({ accent, Italic, t }) => {
  const steps = [
    { n: "01", title: "Explore", body: "See the space before choosing where to play." },
    { n: "02", title: "Generate", body: "Turn the possibility space into options worth testing." },
    { n: "03", title: "Stress-Test", body: "Understand why a concept works, and where it breaks." },
    { n: "04", title: "Segment", body: "See who you win, and who you risk losing." },
    { n: "05", title: "Improve", body: "Make the best option better before you commit." },
    { n: "06", title: "Decide", body: "Commit, with the reasoning attached." },
  ];
  return (
    <section style={{
      background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
    }}>
      <div className="bct-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "88px 40px" }}>
        <div style={{ marginBottom: 48, maxWidth: 760 }}>
          <BeyondEyebrow color={t.accentColor}>How it works</BeyondEyebrow>
          <h2 style={{
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.05,
            marginTop: 18, marginBottom: 20,
          }}>
            Six <Italic>steps, one</Italic> loop.
          </h2>
          <p style={{
            fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0,
          }}>
            AlgoVerde builds a living AI model of your market, and runs product decisions against
            it. Validation is one outcome of the loop rather than the only purpose of it — every
            cycle returns a better option than the one that went in.
          </p>
        </div>

        <div className="bct-steps-grid">
          {steps.map((s) => (
            <div key={s.n} style={{
              border: "1px solid var(--av-rule)", borderRadius: 16,
              padding: "28px 28px", display: "flex", flexDirection: "column", gap: 10,
            }}>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                fontSize: 20, color: accent, lineHeight: 1,
                fontVariantNumeric: "tabular-nums",
              }}>{s.n}</div>
              <h3 style={{
                fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 21,
                letterSpacing: "-0.015em", color: "var(--av-ink)", lineHeight: 1.25, margin: 0,
              }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0 }}>
                {s.body}
              </p>
            </div>
          ))}
        </div>

        <p style={{
          marginTop: 28, fontSize: 14, color: "var(--av-ink-muted)", lineHeight: 1.6,
          fontStyle: "italic", fontFamily: "var(--font-serif)",
        }}>
          What each step actually produces, and the household-care scenario that runs through all
          six — from three concepts already chosen to a lead concept that did not exist when the
          process began — is inside the paper, alongside the full list of what you can put through
          the loop.
        </p>
      </div>
    </section>
  );
};

/* ── Can you trust it (proof teaser) ──────────────────────── */
const BeyondTrustSection = ({ accent, Italic, t }) => {
  const soft = beyondAccent(t.accentColor).soft;
  const stats = [
    { v: "96.3%", k: "Agreement", note: "With the human panel" },
    { v: "3.7", k: "Mean absolute error", note: "In points" },
    { v: "0.97", k: "Rank correlation", note: "Across the ten factors measured" },
  ];
  return (
    <section className="bct-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 80px" }}>
      <div style={{ marginBottom: 44, maxWidth: 760 }}>
        <BeyondEyebrow color={t.accentColor}>Can you trust it</BeyondEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 46px)", letterSpacing: "-0.028em", lineHeight: 1.05,
          marginTop: 18, marginBottom: 20,
        }}>
          A <Italic>blind</Italic> backtest against a real human panel.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0,
        }}>
          Working with a leading consulting firm, AlgoVerde reproduced a 2024 US consumer sentiment
          study using a Synthetic Panel representing the US population aged 18 and over, at the
          original sample size of 2,100.
        </p>
      </div>

      <div className="bct-trust-grid">
        {stats.map((s, i) => (
          <div key={i} style={{
            background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
            padding: "28px 32px",
          }}>
            <div style={{
              fontFamily: "var(--font-serif)", fontWeight: 500,
              fontSize: 40, letterSpacing: "-0.02em", color: accent, lineHeight: 1.05,
              fontVariantNumeric: "tabular-nums",
            }}>{s.v}</div>
            <div style={{
              marginTop: 10, fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
              textTransform: "uppercase", color: "var(--av-ink-muted)",
            }}>{s.k}</div>
            <div style={{ marginTop: 8, fontSize: 13.5, color: "var(--av-ink-soft)", lineHeight: 1.5 }}>
              {s.note}
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 24, borderRadius: 14, background: soft, padding: "26px 32px",
      }}>
        <p style={{
          fontSize: 14.5, color: "var(--av-ink)", lineHeight: 1.6, margin: 0, fontWeight: 500,
        }}>
          The structure held. The same factors dominated both lists in the same order, and the
          same factors sat at the bottom of both.
        </p>
      </div>

      <p style={{
        marginTop: 28, fontSize: 14, color: "var(--av-ink-muted)", lineHeight: 1.6,
        fontStyle: "italic", fontFamily: "var(--font-serif)",
      }}>
        Three customer-run validations — including a Global CPG that measured 90% alignment against
        its own purchase-intent panels, and a client that found the outputs close enough to replace
        three studies it had already paid for — are inside the paper, alongside the architecture
        that makes an answer defensible rather than merely plausible.
      </p>
    </section>
  );
};

/* ── Closing CTA ─────────────────────────────────────────── */
const BeyondClosingCTA = ({ 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="bct-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: 940, textWrap: "balance",
      }}>
        Don't test the shortlist.{" "}
        <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, color: accentTint }}>
          Generate a better one.
        </span>
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "rgba(255,255,255,0.65)", lineHeight: 1.6,
        margin: 0, maxWidth: 640,
      }}>
        A preference test grades the options in the room. Explore the possibility space, generate
        the alternatives, stress-test them, improve them — and decide with the reasoning attached.
      </p>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 8 }}>
        <a href={BEYOND_PDF} download onClick={() => beyondTrackDownload("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 · Concept testing
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  BeyondNavBar, BeyondHeroSection, BeyondInsideSection,
  BeyondScopeSection, BeyondLoopSection, BeyondTrustSection, BeyondClosingCTA,
});
