// Connective tissue between Inside the Programme demo and the product sections.
// Names both products at high level so parents transition from learning mode to buying mode.

const ProgrammeTransition = () => (
  <section className="section into-products-section">
    <div className="into-products-inner">
      <div className="eyebrow into-products-eyebrow">Now the programmes</div>
      <h3 className="into-products-h">That's the gap. Here's exactly how we close it.</h3>
      <p className="into-products-body into-products-objection">
        You've read the markscheme and you're still stuck, because you can't mark your own blind spot; whether it's an essay, an IA, or an EE, the parts that feel fine while you're writing them are exactly where the marks leak. A coach who already has the eye, on your actual work, is the one thing you can't do alone.
      </p>
      <p className="into-products-body">
        Same coaches. Same approach. Same guarantee. They differ in scope; one covers a whole subject in a cohort, one is built around a single component, one-to-one.
      </p>
    </div>
  </section>
);

window.ProgrammeTransition = ProgrammeTransition;