// Section 5 — Component Intensive (Product 2, primary).
// Restructured to feel quieter and more bespoke than the Essay Intensive:
//   - Different eyebrow tag (BESPOKE)
//   - Single-column narrative for "What's included"
//   - Horizontal four-week timeline (not vertical numbered column)
//   - 5 primary component pills with "+ 8 more" expand
//   - Capacity/bespoke positioning line promoted to in-section, not below CTA

const PRIMARY_PILLS = [
  "History IA", "Economics IA", "Biology IA",
  "English A Essay", "Extended Essay",
];

const SECONDARY_PILLS = [
  "English IO", "Chemistry HL IA", "Maths AA IA", "Maths AI IA",
  "Latin IA", "Computer Science IA", "TOK Essay", "TOK Exhibition",
];

const ComponentPillGrid = () => {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <div className={`subject-pills wide-pills component-pills ${expanded ? "expanded" : ""}`}>
      {PRIMARY_PILLS.map((c) => <span key={c} className="subject-pill">{c}</span>)}
      {expanded && SECONDARY_PILLS.map((c) => (
        <span key={c} className="subject-pill secondary-pill">{c}</span>
      ))}
      {!expanded && (
        <button type="button" className="subject-pill expand-pill" onClick={() => setExpanded(true)}>
          <span className="expand-pill-plus" aria-hidden="true">+</span>
          {SECONDARY_PILLS.length} more
        </button>
      )}
    </div>
  );
};

const HorizontalWeek = ({ week, label, body }) => (
  <div className="hw-cell">
    <div className="hw-week">{week}</div>
    <h4 className="hw-label">{label}</h4>
    <p className="hw-body">{body}</p>
  </div>
);

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

        <header className="product-header">
          <ProductLabel>1-to-1 · Bespoke · Booked to your deadline</ProductLabel>
          <h3 className="product-name">The Component Intensive.</h3>
          <p className="product-promise">
            Four weeks, one component, one coach. From research question to final draft sign-off; <b>guaranteed grade improvement</b>, or your money back.
          </p>
        </header>

        {/* SINGLE-COLUMN NARRATIVE — what's included */}
        <div className="ci-body">

          <section className="ci-section">
            <div className="micro-eyebrow">What's included</div>
            <ul className="ci-list">
              <li>Booked one-to-one with a coach who scored 7 in your subject. Not a junior, not a TA.</li>
              <li>Four weeks, end-to-end; planning, structure, drafting, refinement, final sign-off.</li>
              <li>The coach is in every key decision before you write: research question, methodology, argument architecture, evidence selection.</li>
              <li>Live sessions and async written feedback paced to your deadline, not a fixed calendar.</li>
              <li>Direct DM access to your coach throughout the four weeks.</li>
            </ul>
          </section>

          <section className="ci-section">
            <div className="micro-eyebrow">Components we cover</div>
            <ComponentPillGrid />
            <p className="ci-muted">
              EE in any subject; ask us about coverage for less common ones.
            </p>
            <p className="ci-muted">
              Pick one component. The whole four weeks is built around it.
            </p>
          </section>

          {/* PROMOTED capacity / bespoke positioning line */}
          <section className="ci-capacity">
            <p className="ci-capacity-line">
              Each coach takes a small number of components per month. <span className="purple">Capacity is the bottleneck, not demand.</span>
            </p>
          </section>

          <GuaranteeChip />
        </div>

        {/* HORIZONTAL FOUR-WEEK TIMELINE */}
        <section className="ci-timeline-wrap">
          <div className="micro-eyebrow">How the four weeks run</div>
          <div className="ci-horizontal-timeline">
            <HorizontalWeek
              week="Week 01"
              label="Foundations"
              body="Research question locked. Methodology agreed. Argument architecture sketched. Nothing is written yet; everything is decided."
            />
            <HorizontalWeek
              week="Week 02"
              label="Draft one"
              body="You write the first full draft. Your coach reads it, marks it, and sends a recorded video walking you through every structural and analytical decision."
            />
            <HorizontalWeek
              week="Week 03"
              label="Draft two"
              body="You rewrite with the feedback applied. Coach reviews the revisions in detail; live session to resolve anything still open."
            />
            <HorizontalWeek
              week="Week 04"
              label="Sign-off"
              body="A final draft. A final review. Coach signs it off when it's ready to submit. Your grade goes up, or you get a full refund."
            />
          </div>
        </section>

        <div className="product-foot">
          <div className="micro-eyebrow">Pricing</div>
          <PriceMatrix
            launch={{ members: "$1,200", nonMembers: "$1,500" }}
            full={{ members: "$1,500", nonMembers: "$1,997" }}
            note="Launch pricing applies to the first cohort of one-to-one students. After that, full pricing applies."
          />

          <p className="member-savings-line">
            Members save up to $497.{" "}
            <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-component" onClick={(e) => { e.preventDefault(); openApplyFlow({ programme: 'component' }); }}>
              Apply — Component Intensive <Icon name="arrow-right" />
            </a>
            <div className="cta-micro">Rolling intake · Year-round</div>
          </div>
        </div>

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

Object.assign(window, { ComponentIntensiveSection, PRIMARY_PILLS, SECONDARY_PILLS });