function MembershipPage({ nav, member = {}, pay = {}, fmt = value => `£${value}`, cart }) {
  const plan = D.membership || { id: "ac-season-90", name: "UK assessment-centre interview pass", gbp: 49, days: 90, bundleId: "uk-two-firm-ac-interview", serviceGbp: 7, discountPct: 15, enabled: false };
  const bundle = D.bundleById(plan.bundleId);
  const packs = bundle ? D.bundlePacks(bundle) : [];
  const programmes = window.FBO_CALENDAR ? window.FBO_CALENDAR.programmes : [];
  const progress = useCalendarProgress(member, programmes);
  const [error, setError] = useState("");
  const purchase = () => {
    setError("");
    if (!member.user) { nav("login"); return; }
    if (!pay.membership || !cart || typeof cart.addMembership !== "function") { setError("This pass is not available to purchase right now. You can still browse the free calendar."); return; }
    try { cart.addMembership(plan.id); nav("checkout"); } catch (e) { setError(e.message || "The pass could not be added. Please try again."); }
  };
  const ready = pay.loaded && !pay.error && pay.membership && member.loaded && member.user && progress.accountReady && !progress.loading;
  return <div className="container membership-page page-enter page-in">
    <header className="membership-intro"><div className="eyebrow-rule">A FIXED 90-DAY PASS · NO AUTO-RENEWAL</div><h1 className="h-section">Two interviews to prepare for.<br/><em>One place to stay on track.</em></h1><p>For candidates preparing KPMG UK competency interviews and PwC UK ACA graduate interviews. Two named question banks with model answers, plus 90 days of application tools.</p></header>
    <div className="membership-layout"><section className="membership-contents" aria-labelledby="membership-content-title"><div className="eyebrow">THE PRACTICE YOU KEEP</div><h2 id="membership-content-title">Know exactly what’s included.</h2><p>Questions + Answers editions, read online in your FBO library.</p><div className="membership-packs">{packs.map((pack, i) => <article className="membership-pack" key={pack.id}><span className="membership-pack-number">0{i + 1}</span><div><span className="eyebrow">{pack.firm} · UK · ASSESSMENT-CENTRE INTERVIEW</span><h3>{pack.role}</h3><p>{pack.questions} questions · {pack.answered} model answers · {fmt(D.finalPrice(D.priceOf(pack, "QA")))} separately</p><p>{pack.id === "kpmg_uk_ac_general" ? "KPMG UK competency interview practice, including 10 work-style statements." : "PwC UK ACA graduate interview practice. Check your invitation and role before choosing this selection."}</p><a className="calendar-text-link" href={`#/shop?firm=${encodeURIComponent(pack.firmId)}&pack=${encodeURIComponent(pack.id)}`}>Check this pack &amp; sample questions <span aria-hidden="true">↗</span></a></div></article>)}</div><div className="membership-scope"><strong>Interview practice, with clear boundaries.</strong><p>{bundle ? bundle.scope : "These two packs do not cover a full assessment-centre day, group exercises, every hiring stage or every PwC role."}</p></div><section className="membership-services" aria-labelledby="membership-services-title"><div className="eyebrow">THE SERVICE FOR 90 DAYS</div><h2 id="membership-services-title">Keep your applications moving.</h2><ol><li><strong>Pick up on another device</strong><p>Save projects and track Saved, Applied, Interview and Offer status in your account.</p></li><li><strong>Choose deadline reminders</strong><p>Enter your own assessment or interview date, or choose a confirmed official application deadline. Opt in at 1, 3 or 7 days before that date. Official dates must have been verified within the past 7 days; rolling, stale and unconfirmed official deadlines are excluded. Reminders are checked once daily in Europe/London time; this is not a real-time opening alert service.</p></li><li><strong>15% off additional pack editions</strong><p>While your pass is active. We compare eligible offers and existing bundle prices at checkout; discounts do not stack.</p></li></ol></section></section>
      <aside className="membership-purchase" aria-label="Pass price and purchase"><div className="eyebrow">UK INTERVIEW PASS</div><div className="membership-price"><strong>{fmt(plan.gbp)}</strong><span>one payment<br/>{plan.days} days</span></div><div className="membership-price-breakdown"><div><span>Existing two-pack QA bundle</span><strong>{fmt(bundle ? D.bundlePrice(bundle) : 42)}</strong></div><div><span>90-day application service</span><strong>{fmt(plan.serviceGbp)}</strong></div></div><p className="membership-purchase-note"><strong>Fixed UK selection:</strong> KPMG competency interviews + PwC ACA graduate interviews. These are two named packs, not any two packs from the catalogue.</p><p className="membership-purchase-note">Already own one or both included QA editions? Sign in with the same email. Checkout checks your purchases and charges the eligible difference; owning both leaves the {fmt(plan.serviceGbp)} service.</p>{pay.trial && <div className="calendar-inline-note"><strong>Stripe test mode.</strong> No real money is taken.</div>}
        {progress.active ? <div className="membership-current" role="status"><strong>Your pass is active.</strong><p>Services run until {calendarDate(progress.membership.endsAt)}. Your included QA editions stay in your library afterwards.</p><button className="btn btn-primary" onClick={() => nav("calendar")}>Open my application desk →</button><button className="calendar-text-link" onClick={() => nav("library")}>Open my QA library</button></div> : <>{error && <div className="calendar-alert" role="alert">{error}</div>}{progress.error && <div className="calendar-alert" role="alert">{progress.error}<button className="calendar-text-link" onClick={progress.refresh}>Check my account again</button></div>}{!pay.loaded || !member.loaded ? <p role="status">Checking availability…</p> : pay.error ? <div className="calendar-alert" role="alert">{pay.error}<button className="calendar-text-link" onClick={pay.retry}>Try again</button></div> : !pay.membership ? <p className="membership-unavailable">This pass is not currently on sale. The recruitment calendar is free to explore.</p> : !member.user ? <><button className="btn btn-primary" onClick={() => nav("login")}>Sign in to review your price →</button><p className="membership-small">An FBO account is required for synced progress and your pass. No payment is taken at sign-in.</p></> : <><button className="btn btn-primary" disabled={!ready || !!progress.busy} onClick={purchase}>{progress.loading ? "Checking your pass…" : "Review pass at checkout →"}</button><p className="membership-small">Signed in as {member.user.email}. The final amount is confirmed before payment.</p></>}</>}
        <ul className="membership-promise"><li>No automatic renewal or recurring charge.</li><li>Services begin when payment is confirmed.</li><li>Included QA access continues after the pass ends.</li><li>Employer vacancies and invitations remain the final reference.</li></ul><div className="membership-alternative"><strong>Only need the practice?</strong><p>The same two QA editions are available as a {fmt(bundle ? D.bundlePrice(bundle) : 42)} bundle without membership.</p><button className="calendar-text-link" onClick={() => nav("shop")}>Explore the existing bundles →</button></div><div className="membership-legal"><button onClick={() => nav("terms")}>Terms</button><button onClick={() => nav("refund")}>Refund policy</button></div>
      </aside>
    </div><section className="membership-free"><div><span className="eyebrow">START FOR FREE</span><h2>The calendar is open to everyone.</h2><p>Browse the maintained UK project selection, check official sources and save projects in this browser. A membership is optional.</p></div><button className="btn btn-ghost" onClick={() => nav("calendar")}>Explore the free calendar →</button></section>
  </div>;
}
window.MembershipPage = MembershipPage;
