// Section 4 — Essay Intensive (Product 1, primary).
// Two-column body, four-week timeline, four-price matrix, CTA.
// Also exposes the "Request a subject" modal trigger (Section 4.5 lives in
// request-subject-modal.jsx and listens on the global event bus below).

const ProductLabel = ({ children, className = "" }) => (
  <span className={`product-label ${className}`}>{children}</span>
);

const GuaranteeChip = ({ children = "Guaranteed grade improvement, or full refund" }) => (
  <span className="guarantee-chip">
    <span className="dot">●</span>
    <span>{children}</span>
  </span>
);

const PriceMatrix = ({ launch, full, note }) => (
  <div className="price-matrix">
    <div className="price-col launch">
      <div className="price-col-head"><span className="launch-chip">Launch</span></div>
      <div className="price-row"><span>Members</span><b>{launch.members}</b></div>
      <div className="price-row"><span>Non-members</span><b>{launch.nonMembers}</b></div>
    </div>
    <div className="price-col full">
      <div className="price-col-head"><span className="full-label">Full price</span></div>
      <div className="price-row"><span>Members</span><b>{full.members}</b></div>
      <div className="price-row"><span>Non-members</span><b>{full.nonMembers}</b></div>
    </div>
    {note && <p className="price-note">{note}</p>}
  </div>
);

const WeekRow = ({ week, label, body }) => (
  <div className="week-row">
    <div className="week-meta">
      <div className="week-num">{week}</div>
    </div>
    <div className="week-body">
      <h4>{label}</h4>
      <p>{body}</p>
    </div>
  </div>
);

const openRequestSubjectModal = () => {
  window.dispatchEvent(new CustomEvent('intensives:openRequestSubject'));
};

const EssayIntensiveSection = () => (
  <section className="section product-section" id="essay-intensive">
    <div className="wide">
      <article className="product-card">

        <header className="product-header">
          <ProductLabel>Cohort Intensive · 4 weeks</ProductLabel>
          <h3 className="product-name">The Essay Intensive.</h3>
          <p className="product-promise">
            Four weeks to turn your essay grade around. Cohorts of twelve per subject; <b>guaranteed grade improvement</b>, or your money back.
          </p>
        </header>

        <div className="product-grid">
          {/* LEFT — what's in it */}
          <div className="product-left">
            <div className="micro-eyebrow">What's in it</div>
            <ul className="product-checks">
              <li>Taught by the coach who scored 7 in your subject. Economics by Steven; History by Sebastian; English A by Steven or Elijah.</li>
              <li>One live session per week with your cohort; four total.</li>
              <li>A recorded video each week from your coach, on your specific work.</li>
              <li>Marked drills every week; individual written feedback on every drill.</li>
              <li>Minimum three rounds of written feedback across the four weeks; up to six if you complete every drill and optional submission.</li>
              <li>Direct DM access to your coach throughout the four weeks.</li>
            </ul>

            <div className="micro-eyebrow" style={{ marginTop: 22 }}>At launch</div>
            <div className="subject-pills">
              <span className="subject-pill">Economics</span>
              <span className="subject-pill">History</span>
              <span className="subject-pill">English A</span>
            </div>

            <button type="button" className="request-link" onClick={openRequestSubjectModal}>
              Don't see your subject? <span className="scribble-arrow">Request it <Icon name="arrow-right" /></span>
            </button>

            <p className="product-audience">
              For students sitting Paper 1 or Paper 2 in any of the above; predicted 4–6, aiming for 6–7.
            </p>

            <GuaranteeChip />
          </div>

          {/* RIGHT — four-week timeline */}
          <div className="product-right">
            <div className="micro-eyebrow">How the four weeks run</div>
            <div className="weeks">
              <WeekRow
                week="Week 01"
                label="Diagnosis"
                body="You submit a baseline drill in week one. Your coach marks it and identifies the exact pattern holding your grade back."
              />
              <WeekRow
                week="Week 02"
                label="Frameworks"
                body="The structures examiners actually reward; drilled live, marked individually, with a recorded video walking through your specific submission."
              />
              <WeekRow
                week="Week 03"
                label="Execution"
                body="A full essay under timed conditions. Individual written feedback within 48 hours. Live session covers the patterns across the whole cohort."
              />
              <WeekRow
                week="Week 04"
                label="Refinement"
                body="A second full essay. A final round of written feedback. You walk out with the grade up, or you walk out with a refund."
              />
            </div>
          </div>
        </div>

        {/* PRICING + CTA */}
        <div className="product-foot">
          <div className="micro-eyebrow">Pricing</div>
          <PriceMatrix
            launch={{ members: "$997", nonMembers: "$1,297" }}
            full={{ members: "$1,297", nonMembers: "$1,597" }}
            note="Launch pricing closes the moment the first August cohort fills. After that, full pricing applies to every cohort going forward."
          />

          <p className="member-savings-line">
            Members save $300.{" "}
            <a className="member-savings-link" href="https://iborbit.com" target="_blank" rel="noopener">
              What's a member? <Icon name="arrow-right" />
            </a>
          </p>

          <div className="product-cta-row">
            <a className="btn black" href="#apply-essay" onClick={(e) => { e.preventDefault(); openApplyFlow({ programme: 'essay' }); }}>
              Apply — Essay Intensive <Icon name="arrow-right" />
            </a>
            <div className="cta-micro">August 2026 cohort · New cohort every six weeks</div>
          </div>
        </div>

      </article>
    </div>
  </section>
);

Object.assign(window, { EssayIntensiveSection, ProductLabel, GuaranteeChip, PriceMatrix, WeekRow, openRequestSubjectModal });