/* global React, BgGear, IconArrow, IconCheck */

function IncludedList({ items, dark = false }) {
  return (
    <ul className={"pm-incl" + (dark ? " pm-incl--dark" : "")}>
      {items.map((item, i) =>
      <li key={i} className="pm-incl__item">
          <span className="pm-incl__check" aria-hidden="true"><IconCheck size={13} /></span>
          <span>{item}</span>
        </li>
      )}
    </ul>);

}

function ProgrammesPage({ navigate, onCTA }) {
  return (
    <div className="route">
      {/* ============ HERO ============ */}
      <section className="hero" style={{ paddingBottom: 96 }}>
        <BgGear style={{ top: -160, right: -180 }} size={620} opacity={0.05} />
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <div style={{ maxWidth: 900 }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>
              <span className="pill pill--dot" style={{ borderColor: "var(--color-violet)" }}>
                Programmes &amp; Membership
              </span>
              <span style={{ marginLeft: 16 }}>For Senior HR Professionals</span>
            </div>
            <h1 className="t-hero fade-up fade-up-delay-1" style={{ marginTop: 32 }}>
              There is <em style={{ fontStyle: "italic", color: "var(--color-yellow)" }}>no HR for HR.</em>
              <br />That ends here.
            </h1>
            <p className="t-body-lg hero__lead fade-up fade-up-delay-2" style={{ marginTop: 32, maxWidth: 660 }}>
              Everything we offer is designed exclusively for senior HR professionals, from a free
              community to keep you close to what matters, to bespoke leadership programmes for VP
              and CPO level. Find the level of support that fits where you are.
            </p>
          </div>

          {/* quick nav chips */}
          <div className="pm-jump fade-up fade-up-delay-3">
            <a className="pm-jump__link" href="#programmes" onClick={(e) => { e.preventDefault(); document.getElementById("pm-membership")?.scrollIntoView({ behavior: "smooth" }); }}>Membership</a>
            <a className="pm-jump__link" href="#programmes" onClick={(e) => { e.preventDefault(); document.getElementById("pm-coaching")?.scrollIntoView({ behavior: "smooth" }); }}>Coaching programmes</a>
            <a className="pm-jump__link" href="#programmes" onClick={(e) => { e.preventDefault(); document.getElementById("pm-standalone")?.scrollIntoView({ behavior: "smooth" }); }}>Strengths add-on</a>
          </div>
        </div>
      </section>

      {/* ============ MEMBERSHIP ============ */}
      <section className="section bg-off-white" id="pm-membership">
        <div className="container">
          <div style={{ marginBottom: 56, maxWidth: 720 }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>Membership</div>
            <h2 className="t-h1">Stay close to what matters.</h2>
            <p className="t-body-lg text-mid" style={{ marginTop: 20 }}>
              Two ways to belong, whether you're exploring or fully invested in your own development.
            </p>
          </div>

          <div className="pm-member-grid">
            {/* FREE */}
            <div className="pm-card">
              <div className="pm-card__head">
                <div className="pm-tag">Free Membership</div>
                <h3 className="pm-card__name">People Cake Community</h3>
                <p className="pm-card__tagline">
                  A space to explore, connect and stay close to what matters in your HR career.
                </p>
              </div>
              <p className="text-mid">
                Not sure where to start, or simply not ready to commit to a programme yet? This is your
                starting point. Sign up for free and get access to our curated members' area and
                <em> The Sweet Spot</em>, our monthly newsletter written specifically for senior HR professionals.
              </p>
              <div className="divider" />
              <div className="pm-incl__label">What's included</div>
              <IncludedList items={[
                "Access to the People Cake members' area",
                "The Sweet Spot — our monthly newsletter for senior HR leaders",
                "Early access to new resources, tools and events",
                "Exclusive membership offer if you sign up to Elite within 12 months"]} />
              <button className="btn btn--ghost pm-card__cta" onClick={onCTA}>
                Join for free <IconArrow />
              </button>
            </div>

            {/* ELITE PATHWAY (featured / dark) */}
            <div className="pm-card pm-card--feature">
              <span className="pm-ribbon">Premium Annual Membership</span>
              <div className="pm-card__head">
                <div className="pm-tag pm-tag--yellow">Membership · Annual</div>
                <h3 className="pm-card__name" style={{ color: "var(--color-white)" }}>People Cake Elite Pathway</h3>
                <p className="pm-card__tagline" style={{ color: "rgba(255,255,255,0.82)" }}>
                  An intentional space for senior HR leaders to grow, adapt and excel, with the support to match.
                </p>
              </div>
              <p style={{ color: "rgba(255,255,255,0.74)" }}>
                Designed for senior HR professionals who are serious about investing in themselves. Four
                coaching sessions with Sarah across the year keep you focused, one per quarter, alongside
                unlimited diagnostics, in-depth Strengths content, live events and a community of peers
                who truly understand your world.
              </p>
              <p style={{ color: "rgba(255,255,255,0.74)" }}>
                Members also benefit from a <strong style={{ color: "var(--color-yellow)", fontWeight: 600 }}>lifetime coaching rate</strong>:
                any sessions beyond your four stay at the rate you joined at, for as long as your membership is active.
              </p>
              <div className="divider divider--dark" />
              <div className="pm-incl__label" style={{ color: "rgba(255,255,255,0.55)" }}>What's included</div>
              <IncludedList dark items={[
                "Four coaching sessions with Sarah per year (one per quarter)",
                "Unlimited access to all diagnostic tools in the members' area",
                "In-depth Strengths content — build, leverage and manage your strengths",
                "90-day onboarding plan template + guide for new role transitions",
                "Free access to all live virtual webinars (+ recordings)",
                "Free attendance at our annual Senior HR Leaders networking event",
                "The Sweet Spot — monthly newsletter",
                "Lifetime coaching rate for any additional sessions"]} />
              <button className="btn btn--coaching pm-card__cta" onClick={onCTA}>
                Enquire about Elite <IconArrow />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============ COACHING PROGRAMMES ============ */}
      <section className="section bg-white" id="pm-coaching">
        <div className="container">
          <div style={{ marginBottom: 56, maxWidth: 760 }}>
            <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>Coaching Programmes</div>
            <h2 className="t-h1">Three programmes. One clear next step.</h2>
            <p className="t-body-lg text-mid" style={{ marginTop: 20 }}>
              Each programme builds on the last, from finding clarity, to landing your next role,
              to a fully bespoke senior leadership engagement. Pick the depth that matches your moment.
            </p>
          </div>

          <div className="pm-prog-grid">
            {/* CAREER BUILDER */}
            <div className="pm-prog">
              <div className="t-label" style={{ color: "var(--color-violet)" }}>Foundation Programme</div>
              <div className="pm-prog__sessions">
                <span className="pm-prog__num">4</span>
                <span className="pm-prog__num-label">coaching<br />sessions</span>
              </div>
              <h3 className="pm-card__name">Career Builder</h3>
              <p className="pm-card__tagline">
                Clarity on who you are, what you're built for, and what comes next.
              </p>
              <p className="text-mid">
                For the senior HR professional who knows something needs to change but hasn't been able to
                name it, or who can see where they want to go but isn't sure how to get there.
              </p>
              <div className="divider" />
              <div className="pm-incl__label">What's included</div>
              <IncludedList items={[
                "Four coaching sessions",
                "Diagnostic exercises",
                "Clarity on your career direction",
                "Optional: individual Strengths Profile bolt-on"]} />
              <button className="btn btn--ghost pm-card__cta" onClick={onCTA}>
                Enquire <IconArrow />
              </button>
            </div>

            {/* CAREER NAVIGATOR */}
            <div className="pm-prog pm-prog--mid">
              <span className="pm-prog__flag">Most popular</span>
              <div className="t-label" style={{ color: "var(--color-violet)" }}>Transition Programme</div>
              <div className="pm-prog__sessions">
                <span className="pm-prog__num">6</span>
                <span className="pm-prog__num-label">coaching<br />sessions</span>
              </div>
              <h3 className="pm-card__name">Career Navigator</h3>
              <p className="pm-card__tagline">
                Understand what you're uniquely built for, and land your next role with confidence.
              </p>
              <p className="text-mid">
                For the senior HR professional who is ready to make a move but needs more than clarity,
                they need a plan. Six sessions, a full Strengths profile and a crafted 90-day onboarding plan
                take you from where you are now, through your transition, into your new role.
              </p>
              <div className="divider" />
              <div className="pm-incl__label">What's included</div>
              <IncludedList items={[
                "Six coaching sessions",
                "Diagnostic exercises",
                "Your individual Strengths Profile, report & feedback session",
                "A crafted 90-day onboarding plan aligned to your new role"]} />
              <p className="pm-prog__note">
                Already landed the role? Career Navigator can be extended or upgraded to Career Elite.
              </p>
              <button className="btn btn--coaching pm-card__cta" onClick={onCTA}>
                Enquire <IconArrow />
              </button>
            </div>

            {/* CAREER ELITE */}
            <div className="pm-prog pm-prog--feature">
              <div className="t-label" style={{ color: "var(--color-yellow)" }}>Bespoke Senior Leadership</div>
              <div className="pm-prog__sessions">
                <span className="pm-prog__num" style={{ color: "var(--color-white)" }}>8</span>
                <span className="pm-prog__num-label" style={{ color: "rgba(255,255,255,0.6)" }}>coaching<br />sessions</span>
              </div>
              <h3 className="pm-card__name" style={{ color: "var(--color-white)" }}>Career Elite</h3>
              <p className="pm-card__tagline" style={{ color: "rgba(255,255,255,0.82)" }}>
                A bespoke, comprehensive programme for VP and CPO level professionals.
              </p>
              <p style={{ color: "rgba(255,255,255,0.74)" }}>
                People Cake's most comprehensive offering. Eight sessions, a full 360 report, your Strengths
                profile and a bespoke 90-day plan form the foundation. Two coaching credits can be held for
                day 45 and day 90 of your new role, because the most important support doesn't end when you land.
              </p>
              <div className="divider divider--dark" />
              <div className="pm-incl__label" style={{ color: "rgba(255,255,255,0.55)" }}>What's included</div>
              <IncludedList dark items={[
                "Eight coaching sessions",
                "Individual Strengths profile, report & bespoke feedback session",
                "Full 360 report combining strengths and stakeholder feedback",
                "A bespoke 90-day action / onboarding plan",
                "Two coaching credits held for day 45 & day 90 of your new role"]} />
              <p className="pm-prog__note" style={{ color: "rgba(255,255,255,0.6)" }}>
                Want ongoing support? Consider the Elite Pathway membership for a network of peers
                across the rest of your career.
              </p>
              <button className="btn btn--coaching pm-card__cta" onClick={onCTA}>
                Enquire <IconArrow />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============ STANDALONE STRENGTHS ADD-ON ============ */}
      <section className="section bg-off-white" id="pm-standalone">
        <div className="container">
          <div className="pm-standalone">
            <div>
              <div className="t-label eyebrow" style={{ color: "var(--color-violet)" }}>Standalone Add-on</div>
              <h2 className="t-h1" style={{ marginBottom: 24 }}>Strengths Profile, Report &amp; Feedback</h2>
              <p className="t-body-lg" style={{ fontFamily: "var(--font-display)", fontStyle: "italic", marginBottom: 24 }}>
                Know what you're uniquely brilliant at, and start using it as your compass.
              </p>
              <p className="text-mid" style={{ marginBottom: 20 }}>
                Available as a standalone session or as a bolt-on to Career Builder, this gives you a deep,
                evidence-based understanding of your natural strengths, and crucially, how to build on them,
                leverage them intentionally, and recognise when an overused strength is working against you.
              </p>
              <p style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.4 }}>
                Understanding your strengths is not a personality test. It is the foundation of every good
                career decision you will make from here.
              </p>
            </div>
            <div className="pm-aside">
              <div className="pm-incl__label">How it works</div>
              <IncludedList items={[
                "Evidence-based individual Strengths profile",
                "Full written report",
                "1:1 feedback session to interpret your results",
                "Available standalone or as a Career Builder bolt-on"]} />
              <div className="divider" style={{ margin: "8px 0" }} />
              <p className="t-small text-mid">
                Building strengths in your own team? Contact us about Corporate packages and tailor-made
                coaching programmes, plus availability.
              </p>
              <button className="btn btn--coaching" onClick={onCTA} style={{ marginTop: 8 }}>
                Ask about Strengths <IconArrow />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ============ FINAL CTA ============ */}
      <section className="bg-black" style={{ padding: "80px 0", textAlign: "center", position: "relative", overflow: "hidden" }}>
        <BgGear style={{ top: -180, right: "50%", marginRight: -300 }} size={520} opacity={0.04} />
        <div className="container" style={{ position: "relative", zIndex: 1 }}>
          <h2 className="t-hero" style={{ maxWidth: 880, margin: "0 auto 24px" }}>
            Ready to <em style={{ fontStyle: "italic", color: "var(--color-yellow)" }}>find out more?</em>
          </h2>
          <p className="t-body-lg" style={{ color: "rgba(255,255,255,0.8)", maxWidth: 600, margin: "0 auto 40px" }}>
            Contact us to find out about current pricing, membership rates and availability.
          </p>
          <button className="btn btn--coaching btn--lg" onClick={onCTA}>
            Contact us <IconArrow />
          </button>
          <p className="t-small" style={{ color: "rgba(255,255,255,0.6)", marginTop: 32, maxWidth: 560, margin: "32px auto 0" }}>
            CIPD and SHRM members — please mention your membership when you get in touch for details of discounts available.
          </p>
        </div>
      </section>
    </div>);

}

const programmesPageStyle = document.createElement("style");
programmesPageStyle.textContent = `
  /* Jump chips in hero */
  .pm-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
  .pm-jump__link {
    display: inline-flex; align-items: center;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
  }
  .pm-jump__link:hover { border-color: var(--color-yellow); color: var(--color-yellow); }

  /* Membership grid */
  .pm-member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); align-items: start; }
  @media (max-width: 920px) { .pm-member-grid { grid-template-columns: 1fr; } }

  /* Generic offer card */
  .pm-card {
    position: relative;
    padding: var(--s-48);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-violet);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: var(--s-24);
    height: 100%;
  }
  .pm-card--feature {
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--color-yellow);
  }
  .pm-card__head { display: flex; flex-direction: column; gap: var(--s-12); }
  .pm-card__name { font-family: var(--font-display); font-size: 30px; line-height: 1.15; font-weight: 500; }
  .pm-card__tagline {
    font-family: var(--font-display); font-style: italic;
    font-size: 20px; line-height: 1.4; color: var(--color-mid-grey);
  }
  .pm-card__cta { margin-top: auto; align-self: flex-start; }

  .pm-tag {
    display: inline-flex; align-self: flex-start;
    font-size: var(--text-label); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--color-violet);
  }
  .pm-tag--yellow { color: var(--color-yellow); }

  .pm-ribbon {
    position: absolute; top: 0; right: var(--s-48);
    transform: translateY(-50%);
    background: var(--color-yellow); color: var(--color-black);
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--r-pill);
  }

  /* Included checklist */
  .pm-incl__label {
    font-size: var(--text-label); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--color-mid-grey);
  }
  .pm-incl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-12); }
  .pm-incl__item { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; font-size: 15px; }
  .pm-incl--dark .pm-incl__item { color: rgba(255,255,255,0.82); }
  .pm-incl__check {
    flex: 0 0 auto; margin-top: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(94,92,167,0.12); color: var(--color-violet);
  }
  .pm-incl--dark .pm-incl__check { background: rgba(242,230,64,0.16); color: var(--color-yellow); }

  /* Programme grid */
  .pm-prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32); align-items: start; }
  @media (max-width: 980px) { .pm-prog-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
  .pm-prog {
    position: relative;
    padding: var(--s-48) var(--s-32);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-violet);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: var(--s-16);
    height: 100%;
    transition: box-shadow 200ms ease, transform 200ms ease;
  }
  .pm-prog:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
  .pm-prog--mid { border-top-width: 4px; }
  .pm-prog--feature {
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--color-yellow);
  }
  .pm-prog__flag {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: var(--color-violet); color: var(--color-white);
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap;
  }
  .pm-prog__sessions { display: flex; align-items: baseline; gap: 10px; margin: 4px 0; }
  .pm-prog__num {
    font-family: var(--font-display); font-weight: 400;
    font-size: 64px; line-height: 0.9; color: var(--color-violet);
  }
  .pm-prog__num-label {
    font-size: var(--text-small); line-height: 1.2; color: var(--color-mid-grey);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500;
  }
  .pm-prog__note {
    font-size: var(--text-small); line-height: 1.55; color: var(--color-mid-grey);
    font-style: italic;
  }

  /* Standalone */
  .pm-standalone { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-80); align-items: center; }
  @media (max-width: 920px) { .pm-standalone { grid-template-columns: 1fr; gap: var(--s-48); } }
  .pm-aside {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-violet);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    padding: var(--s-48);
    display: flex; flex-direction: column; gap: var(--s-16);
  }
`;
document.head.appendChild(programmesPageStyle);

window.ProgrammesPage = ProgrammesPage;