// Section 2.7 — Inside the programme (cinematic, premium VSL frame).
// Apple-keynote dark video frame with elegant chrome.
// NOT a YouTube embed. Click-to-play state managed locally.

const ProgrammeProofCard = ({ icon, title, body }) => (
  <div className="programme-proof">
    <div className="pp-icon"><Icon name={icon} /></div>
    <div className="pp-text">
      <b>{title}</b>
      <span>{body}</span>
    </div>
  </div>
);

const VideoStillContent = () => (
  <div className="vs-content" aria-hidden="true">
    {/* Simulated annotated essay artifact, top-left */}
    <div className="vs-doc">
      <div className="vs-doc-head">
        <span className="vs-doc-eyebrow">English A · IO commentary</span>
        <span className="vs-doc-grade">7</span>
      </div>
      <div className="vs-doc-lines">
        <div className="vs-line full" />
        <div className="vs-line full hl" />
        <div className="vs-line mid" />
        <div className="vs-line full" />
        <div className="vs-line short" />
        <div className="vs-line full" />
      </div>
      <div className="vs-annotation">
        <span className="vs-arrow">↳</span>
        <span>Examiner would reward the qualifier here.</span>
      </div>
    </div>

    {/* Feedback comment artifact, bottom-right */}
    <div className="vs-comment">
      <div className="vs-comment-head">
        <span className="vs-avatar">SP</span>
        <span className="vs-comment-meta">Steven · 0:14:32</span>
      </div>
      <p>The thesis is doing two jobs. Split it; the first sentence is your argument, the second is your scope.</p>
    </div>

    {/* Transcript chip, top-right */}
    <div className="vs-transcript-chip">
      <span className="vs-tc-label">Transcript</span>
      <span className="vs-tc-time">00:14:32 / 00:38:11</span>
    </div>
  </div>
);

const InsideProgrammeSection = () => {
  const [playing, setPlaying] = React.useState(false);

  return (
    <section className="section inside-programme-section" id="inside">
      <div className="wide">
        <header className="section-head intensives-section-head align-left">
          <div className="eyebrow">Inside the programme</div>
          <h2>
            See how the coaching <Scribble>actually works.</Scribble>
          </h2>
          <p className="section-sub">Real feedback. Real transcripts. Real examiner logic.</p>
        </header>

        <div className="programme-stage">
          <div className={`video-frame ${playing ? "playing" : ""}`}>
            <div className="vf-grain" aria-hidden="true" />
            <div className="vf-vignette" aria-hidden="true" />

            <VideoStillContent />

            <button
              className="vf-play"
              onClick={() => setPlaying((p) => !p)}
              aria-label={playing ? "Pause" : "Play"}
            >
              <Icon name={playing ? "pause" : "play"} />
            </button>

            <div className="vf-chrome">
              <div className="vf-progress">
                <div className="vf-progress-fill" style={{ width: playing ? "38%" : "0%" }} />
              </div>
              <div className="vf-chrome-meta">
                <span className="vf-time">{playing ? "00:14:32" : "00:00"}</span>
                <span className="vf-divider">·</span>
                <span className="vf-runtime">Runtime 03:42</span>
                <span className="vf-divider">·</span>
                <span className="vf-label">Inside the programme</span>
              </div>
            </div>
          </div>

          <div className="programme-proof-strip">
            <ProgrammeProofCard
              icon="file-text"
              title="Annotated essays"
              body="Line-level structural marks"
            />
            <ProgrammeProofCard
              icon="message-square"
              title="Recorded feedback"
              body="Per-student video commentary"
            />
            <ProgrammeProofCard
              icon="layout-grid"
              title="Examiner logic"
              body="What the mark scheme is rewarding"
            />
            <ProgrammeProofCard
              icon="users"
              title="Coaching calls"
              body="Live cohort and 1:1 sessions"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

window.InsideProgrammeSection = InsideProgrammeSection;