// Section 8.5 — What is iBOrbit membership?
//
// Sits between the guarantee (Section 8) and the next intake (Section 9).
// Explanatory, not a hard sell. The primary sale on this page is the intensives,
// not membership; this section just gives the "members / non-members" pricing
// throughout the page enough context to land.

const MembershipItem = ({ label, body }) => (
  <div className="member-item">
    <div className="member-item-label">{label}</div>
    <p className="member-item-body">{body}</p>
  </div>
);

const MembershipSection = () => (
  <section className="section membership-section" id="membership">
    <div className="wide">
      <div className="membership-card">
        <div className="eyebrow">Member pricing</div>
        <h2 className="membership-h">
          What is iBOrbit <span className="purple">membership</span>?
        </h2>
        <p className="membership-lede">
          iBOrbit is the community where our coaches teach, mark exemplars, and run weekly Q&amp;As. Members get reduced pricing on every intensive, plus Office Hours access.
        </p>

        <div className="member-items">
          <MembershipItem
            label="Save on every intensive"
            body={(
              <>Members save <b>$300</b> on every intensive at launch pricing, and <b>up to $497</b> at full price. The membership pays for itself before your first intensive.</>
            )}
          />
          <MembershipItem
            label="Office Hours access"
            body={(
              <>Members can book 1-to-1 sessions with any coach. Non-members cannot.</>
            )}
          />
          <MembershipItem
            label="Weekly live Q&A"
            body={(
              <>Every week with the full coach team. Bring any IA, EE, essay, or past paper question.</>
            )}
          />
        </div>

        <p className="membership-cta-line">
          <b>$99/month.</b> Cancel anytime.{" "}
          <a className="oh-membership-link" href="https://iborbit.com" target="_blank" rel="noopener">
            Join iBOrbit <Icon name="arrow-right" />
          </a>
        </p>
      </div>
    </div>
  </section>
);

window.MembershipSection = MembershipSection;