// Section 9 — Intake / Urgency.
// Status board: cohort start strip + 3 Essay Intensive subject rows + Component row + Office Hours row.
// Status pills (no seat counts) signal urgency without exposing filled-seat numbers.

// Inline arrow — avoids Lucide re-render timing issues inside dynamic rows.
const InlineArrow = () => (
  <svg className="ir-arrow" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M5 12h14" />
    <path d="m13 5 7 7-7 7" />
  </svg>
);

const COHORT_STATUS = /*EDITMODE-BEGIN*/{
  "economicsHL": "open",
  "historyHL": "open",
  "englishAHL": "open",
  "applyByDate": "Aug 1, 2026"
}/*EDITMODE-END*/;

const STATUS_COPY = {
  open:        { label: "Open",            tone: "open" },
  filling:     { label: "Filling",         tone: "filling" },
  final:       { label: "Final spots",     tone: "final" },
  closed:      { label: "Closed · Waitlist", tone: "closed" },
};

const StatusPill = ({ status }) => {
  const cfg = STATUS_COPY[status] || STATUS_COPY.open;
  return <span className={`status-pill status-${cfg.tone}`}>{cfg.label}</span>;
};

const SubjectIntakeRow = ({ subject, status = "open", applyByDate, applyHref = "#apply-essay" }) => {
  const isClosed = status === "closed";
  return (
    <div className="intake-row subject">
      <div className="ir-subject">{subject}</div>
      <StatusPill status={status} />
      <div className="ir-context">Cohort of 12 · Apply by {applyByDate}</div>
      <a
        className={`ir-apply ${isClosed ? "secondary" : ""}`}
        href={applyHref}
        onClick={(e) => { e.preventDefault(); openApplyFlow({ programme: 'essay', subject }); }}
      >
        {isClosed ? "Waitlist" : "Apply"} <InlineArrow />
      </a>
    </div>
  );
};

const IntakeSection = () => (
  <section className="section intake-section" id="intake">
    <div className="wide">
      <header className="section-head intensives-section-head align-left">
        <div className="eyebrow">Next intake</div>
        <h2>
          Next intake.<br />
          <Scribble>August 2026.</Scribble>
        </h2>
        <p className="section-sub">Cohorts of twelve students per subject. Status updated by hand.</p>
      </header>

      <div className="intake-card">
        <div className="intake-top-strip">
          <span>August 2026 intake</span>
          <span className="divider">·</span>
          <span>Essay Intensive cohorts, Component Intensive, Office Hours</span>
        </div>

        <div className="intake-rows">
          <SubjectIntakeRow subject="Economics"   status={COHORT_STATUS.economicsHL} applyByDate={COHORT_STATUS.applyByDate} />
          <SubjectIntakeRow subject="History"     status={COHORT_STATUS.historyHL}   applyByDate={COHORT_STATUS.applyByDate} />
          <SubjectIntakeRow subject="English A"   status={COHORT_STATUS.englishAHL}  applyByDate={COHORT_STATUS.applyByDate} />

          <div className="intake-row component component-row-tint">
            <div className="ir-subject">Component Intensive</div>
            <div className="ir-meta">Private 1:1 · Rolling intake</div>
            <div className="ir-context ir-context-emphasis">Book at least four weeks before your deadline; <span className="purple">sooner is better</span></div>
            <div className="ir-context-mobile">Rolling intake · Year-round</div>
            <a className="ir-apply" href="#apply-component" onClick={(e) => { e.preventDefault(); openApplyFlow({ programme: 'component' }); }}>Apply <InlineArrow /></a>
          </div>

          <div className="intake-row coaching">
            <div className="ir-subject muted">Office Hours</div>
            <div className="ir-meta muted">Members only · 1:1</div>
            <div className="ir-context muted">Book at least one week ahead</div>
            <a className="ir-apply secondary" href="#coaching">Book <InlineArrow /></a>
          </div>
        </div>
      </div>

      <p className="intake-footnote">
        Each cohort caps at 12 students per subject. Status updated by hand as students join.
      </p>
    </div>
  </section>
);

Object.assign(window, { IntakeSection, StatusPill, SubjectIntakeRow });