// Section 8 — The Guarantee.
// Full-width purple section. White-on-purple. Three plain-language rows + scope footnote.

const GuaranteeRow = ({ num, label, body }) => (
  <div className="g-row">
    <div className="g-eyebrow"><span>{num}</span> · <span>{label}</span></div>
    <p className="g-body">{body}</p>
  </div>
);

const GuaranteeSection = () => (
  <section className="section guarantee-section" id="guarantee">
    <div className="guarantee-bg" aria-hidden="true">
      <span className="g-orbit a" />
      <span className="g-orbit b" />
    </div>
    <div className="wide">
      <header className="g-head">
        <div className="eyebrow with-bullet g-eyebrow-light">The guarantee</div>
        <h2 className="g-heading">
          Your grade goes up.<br />
          <Scribble className="white">Or your money back.</Scribble>
        </h2>
      </header>

      <div className="g-rows">
        <GuaranteeRow
          num="01"
          label="Who qualifies"
          body="Every student in the Essay Intensive or Component Intensive. Automatically. No application, no upgrade, no opt-in."
        />
        <GuaranteeRow
          num="02"
          label="What counts as improvement"
          body="Your teacher-assessed mark on the specific component improves versus a documented baseline you submit before the programme starts."
        />
        <GuaranteeRow
          num="03"
          label="How the refund works"
          body="If your mark doesn't improve, you get a full refund. No paperwork chase, no fine print, no questions."
        />
      </div>

      <p className="g-footnote">
        We can't promise IBO moderation; only the teacher's mark before moderation.
      </p>
    </div>
  </section>
);

window.GuaranteeSection = GuaranteeSection;