// Hero — Section 1 of the iBOrbit Intensives landing page.
// Split layout: left = copy, right = visual stage (draft doc + supervisor msg + deadline stamp).
// Proof strip sits in its own band directly below the hero grid.

const DraftDocPlaceholder = () => (
  <div className="draft-doc" aria-hidden="true">
    <div className="doc-eyebrow">Internal Assessment · Draft 1</div>
    <div className="doc-title">Investigating the effect of monetary policy on…</div>
    <div className="doc-lines">
      <div className="doc-line full" />
      <div className="doc-line full" />
      <div className="doc-line mid" />
      <div className="doc-line full" />
      <div className="doc-line short" />
      <div className="doc-line full" />
      <div className="doc-line mid" />
      <div className="doc-line tiny" />
    </div>
    <span className="doc-redmark" />
  </div>
);

const SupervisorMessage = () => (
  <div className="supervisor-msg" role="img" aria-label="A vague supervisor email reading: Looks good, keep going.">
    <div className="msg-head">
      <div className="msg-avatar">MH</div>
      <div>
        <b>Mr Henderson</b>
        <span>3 days ago · re: IA draft</span>
      </div>
    </div>
    <p className="msg-body">Looks good, keep going.</p>
    <div className="msg-footer">— no other comments</div>
  </div>
);

const DeadlineStamp = ({ days = 14 }) => (
  <div className="deadline-stamp" role="img" aria-label={`IA due in ${days} days`}>
    <div className="ds-eyebrow">IA Due in</div>
    <div className="ds-days">{days}</div>
    <div className="ds-unit">Days</div>
    <div className="ds-context">and you still don't know if it's working</div>
  </div>
);

const IntensivesHero = () => (
  <section className="section hero" id="top">
    <div className="wide">
      <div className="hero-grid">
        {/* LEFT — copy column */}
        <div className="hero-copy">
          <div className="eyebrow">The Intensives</div>

          <h1>
            Months of work. <Scribble>Same</Scribble> predicted grade.
          </h1>

          <p className="lede">
            You're not stuck because you're not working. You're stuck because no one has shown you which structural decisions your draft is getting wrong; before you write. A coach who scored <b className="purple">45 in May 2026</b> fixes that in four weeks, or you get a full refund.
          </p>

          <div className="hero-actions">
            <Button variant="black" href="#essay-intensive">
              See the programmes <Icon name="arrow-right" />
            </Button>
            <Button href="#guarantee">
              See the guarantee
            </Button>
          </div>

          <p className="hero-microline">
            Essay Intensives run every six weeks and cap at twelve students.
            One-to-one programmes are available year-round.
          </p>
        </div>

        {/* RIGHT — visual stage */}
        <div className="hero-visual">
          <IntensivesOrbits />
          <DraftDocPlaceholder />
          <SupervisorMessage />
          <DeadlineStamp days={14} />
        </div>
      </div>
    </div>
  </section>
);

/* ---- Proof strip directly below the hero ---- */
const IntensivesHeroProof = () => {
  const scrollToCoaches = (e) => {
    e.preventDefault();
    const el = document.getElementById('coaches');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section className="section proof-section">
      <div className="wide">
        <div className="hero-proof-tower">
          {/* TOP — primary trust signal */}
          <a
            href="#coaches"
            onClick={scrollToCoaches}
            className="hero-proof-primary"
            aria-label="See the three 45/45 coaches"
          >
            <div className="hpp-content">
              <div className="hpp-headline">
                <span className="hpp-mult">3×</span>
                <span className="hpp-score">45/45</span>
                <span className="hpp-noun">coaches</span>
              </div>
              <p className="hpp-meta">
                Verified by IBO. Most recent cohort. <span className="hpp-cta">Click any coach to view transcript <Icon name="arrow-right" /></span>
              </p>
            </div>
          </a>

          {/* BOTTOM — logistical facts (secondary) */}
          <div className="hero-proof-facts">
            <div className="hpf-tile">
              <span className="hpf-label">Programme length</span>
              <span className="hpf-value">4 weeks</span>
            </div>
            <div className="hpf-tile">
              <span className="hpf-label">1-to-1 availability</span>
              <span className="hpf-value">Year-round</span>
            </div>
            <div className="hpf-tile">
              <span className="hpf-label">Outcome</span>
              <span className="hpf-value">Grade up, or refund</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { IntensivesHero, IntensivesHeroProof, DraftDocPlaceholder, SupervisorMessage, DeadlineStamp });