// Section 6 — Office Hours (member benefit, advisory product).
//
// Repositioned from "Subject Coaching" (standalone tutoring) to "Office Hours"
// (member benefit of the iBOrbit community). No discount ladder; quieter, more
// bespoke composition than the intensives. Single-column flow; no chip grids,
// no timeline.
//
// File name kept as subject-coaching.jsx to avoid index.html script-tag churn.
//
// Booking does NOT go to a calendar widget. The "Book" button opens an
// inline modal that routes the user into the iBOrbit community on Skool,
// where members access the full coach team.

const OfficeHoursPriceCard = ({ label, members, recommended = false }) => (
  <div className={`coaching-price-card ${recommended ? "recommended" : ""}`}>
    <div className="cpc-head">
      <span className="cpc-label">{label}</span>
      {recommended && <span className="cpc-recommended">Recommended</span>}
    </div>
    <div className="cpc-rows">
      <div className="cpc-row">
        <span>Members</span>
        <b>{members}</b>
      </div>
      <div className="cpc-row cpc-row-unavailable">
        <span>Non-members</span>
        <span className="cpc-unavailable">Not available</span>
      </div>
    </div>
  </div>
);

/* ─── Members-only gate modal ─────────────────────────────────────── */

const OfficeHoursGateModal = ({ open, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) {
      document.addEventListener('keydown', onKey);
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="apply-backdrop" onClick={onClose}>
      <div className="apply-modal oh-gate-modal" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
        <button className="apf-close" onClick={onClose} aria-label="Close">
          <Icon name="x" />
        </button>

        <div className="oh-gate-icon"><Icon name="users" /></div>

        <div className="eyebrow">Members only</div>
        <h3 className="apf-h">Office Hours is members-only.</h3>
        <p className="oh-gate-body">
          Bookings happen inside the iBOrbit community. The full coach team is there, with weekly Q&amp;As, exemplar walkthroughs, and 1-to-1 booking slots.
        </p>

        <div className="oh-gate-ctas">
          <a className="btn purple oh-gate-primary" href="https://iborbit.com" target="_blank" rel="noopener">
            Join the community <span className="oh-gate-price">$99/month</span> <Icon name="arrow-right" />
          </a>
          <a className="btn oh-gate-secondary" href="https://www.skool.com/iborbit" target="_blank" rel="noopener">
            I'm already a member · Open Skool <Icon name="arrow-up-right" />
          </a>
        </div>
      </div>
    </div>
  );
};

/* ─── Section ─────────────────────────────────────────────────────── */

const SubjectCoachingSection = () => {
  const [gateOpen, setGateOpen] = React.useState(false);

  return (
    <section className="section coaching-section" id="coaching">
      <div className="wide">
        <article className="coaching-card office-hours-card">

          <header className="coaching-header">
            <div className="oh-header-row">
              <ProductLabel className="lavender">Member benefit · Limited capacity</ProductLabel>
              <span className="members-only-tag">Members only</span>
            </div>
            <h3 className="coaching-name">Office Hours.</h3>
            <p className="coaching-promise">
              For iBOrbit members between intensives, or whose deadlines don't fit our cohort calendar. One-to-one sessions with a coach who scored 7 in your subject. Limited capacity per coach; book at least two weeks ahead.
            </p>
            <p className="oh-gate-line">
              <em>
                Office Hours are available to active iBOrbit members only. Not a member yet?{" "}
                <a className="oh-membership-link" href="https://iborbit.com" target="_blank" rel="noopener">
                  Join the community <Icon name="arrow-right" />
                </a>
              </em>
            </p>
          </header>

          <div className="coaching-pricing oh-pricing">
            <div className="micro-eyebrow">Pricing</div>
            <div className="coaching-price-grid two-card oh-price-grid">
              <OfficeHoursPriceCard
                label="Single session"
                members="$250"
              />
              <OfficeHoursPriceCard
                label="Term block · 12 sessions"
                members="$2,400"
                recommended
              />
            </div>
            <p className="oh-members-only-line">
              Members-only pricing. Membership starts at $99/month.
            </p>
          </div>

          <div className="coaching-cta-row">
            <button type="button" className="btn" onClick={() => setGateOpen(true)}>
              Book — Office Hours <Icon name="arrow-right" />
            </button>
            <div className="cta-micro">Members book inside the community. Coaches respond within 24 hours.</div>
          </div>

          <p className="oh-tertiary">
            Not a member? <a className="oh-membership-link" href="https://iborbit.com" target="_blank" rel="noopener">Join the community first, then book your first session.</a>
          </p>

        </article>
      </div>

      <OfficeHoursGateModal open={gateOpen} onClose={() => setGateOpen(false)} />
    </section>
  );
};

Object.assign(window, { SubjectCoachingSection, OfficeHoursPriceCard, OfficeHoursGateModal });