// Video detail — preview (unlocked) + locked
function VideoScreen({ nav, videoId, onBuy }) {
  const found = findVideo(videoId);
  if (!found) return <div className="container section"><p>Video not found.</p></div>;
  const { video: v, module: m, part } = found;
  const locked = v.state === "locked";
  const [showTranscript, setShowTranscript] = React.useState(false);

  // find next video
  const idx = m.videoList.findIndex((x) => x.id === v.id);
  const next = m.videoList[idx + 1];

  return (
    <>
      <Breadcrumb onNav={nav} items={[
        { label: "Catalog", path: "/catalog" },
        { label: m.title, path: `/m/${m.id}` },
        { label: v.title },
      ]} />

      <section className="container video-page">
        <div className={`player ${locked ? "is-locked" : ""}`}>
          <Placeholder aspect="16x9" tone={v.thumbTone}
            label={v.thumbAlt.split(" —")[0]}
            corner="placeholder · poster"
            alt={`${v.title} poster — placeholder`} />
          {!locked && (
            <button className="play-btn" aria-label={`Play ${v.title}`}>
              <Icon.Play size={28} />
            </button>
          )}
          {locked && (
            <div className="lock-card">
              <div className="lock-icon"><Icon.Lock size={20} /></div>
              <h4>This video is part of <em style={{ fontStyle: "italic" }}>{m.title}</em>.</h4>
              <p>Buy the module to unlock all 3 videos — yours forever.</p>
              <div className="lock-ctas">
                <Button variant="terra" size="lg" onClick={() => onBuy(m.id)}>Buy module — $39</Button>
                <Button variant="ghost" onClick={() => nav("/v/meeting-body-wisdom")}>Or watch the free intro →</Button>
              </div>
            </div>
          )}
        </div>

        <div className="video-info">
          <h1>{v.title}</h1>
          <div className="v-meta">
            <Chip>{v.minutes} min</Chip>
            {v.state === "preview" && <Chip tone="sage">Preview · free</Chip>}
            {locked && <Chip tone="soon"><Icon.Lock size={12}/> Locked</Chip>}
            <Chip>Chapter {m.chapter}</Chip>
          </div>

          {!locked && (
            <>
              <button className="transcript-toggle" onClick={() => setShowTranscript(!showTranscript)} aria-expanded={showTranscript}>
                <span>Transcript</span>
                <Icon.Chevron dir={showTranscript ? "up" : "down"} />
              </button>
              {showTranscript && (
                <div className="transcript-body">
                  <p>Take a moment before we begin. Feel the weight of your body on the chair, or your feet on the floor. Notice, without changing anything, where your attention goes first. That movement of attention — that's already your body reporting. In this opening, we'll practice listening without deciding yet what the reports mean…</p>
                  <em>Auto-transcript; full transcript available.</em>
                </div>
              )}
            </>
          )}

          {locked && (
            <div style={{ padding: "24px 0", borderTop: "1px solid var(--hairline)" }}>
              <h3 className="display-s" style={{ marginTop: 0 }}>About <em>{m.title}</em></h3>
              <p style={{ color: "var(--ink-2)", maxWidth: 620 }}>{m.description}</p>
            </div>
          )}

          {next && !locked && (
            <div className="up-next">
              <div className="un-thumb">
                <Placeholder aspect="16x9" tone={next.thumbTone} label={next.thumbAlt.split(" —")[0]} alt={next.thumbAlt}/>
              </div>
              <div>
                <div className="un-label">Up next</div>
                <div className="un-title">{next.num} · {next.title}</div>
                <div className="un-meta">{next.minutes} min · Locked</div>
              </div>
              <Button variant="terra" onClick={() => onBuy(m.id)}>Buy module to continue — $39</Button>
            </div>
          )}
        </div>

        {locked && (
          <section className="video-list" style={{ paddingTop: 0 }}>
            <h3>All videos in this module</h3>
            {m.videoList.map((vv) => {
              const isLocked = vv.state === "locked";
              const isSelf = vv.id === v.id;
              return (
                <div key={vv.id}
                  className={`v-row ${isLocked ? "is-locked" : "is-preview"}`}
                  style={isSelf ? { background: "var(--bg-2)" } : undefined}
                  onClick={() => !isLocked && nav(`/v/${vv.id}`)}>
                  <div className="v-thumb">
                    <Placeholder aspect="16x9" tone={vv.thumbTone} label={vv.thumbAlt.split(" —")[0]} alt={vv.thumbAlt}/>
                  </div>
                  <div className="v-body">
                    <div className="v-num">{vv.num} · {vv.minutes} min</div>
                    <div className="v-title">{vv.title}</div>
                  </div>
                  <div className={`v-state ${vv.state === "preview" ? "is-preview" : ""}`}>
                    {isLocked ? <><Icon.Lock /> Locked</> : <><Icon.Play size={16}/> Preview</>}
                  </div>
                </div>
              );
            })}
          </section>
        )}

        <a href={`#/m/${m.id}`} className="back-link" onClick={(e) => { e.preventDefault(); nav(`/m/${m.id}`); }}>
          <Icon.Arrow dir="left" size={14}/> Back to module
        </a>
      </section>
    </>
  );
}

Object.assign(window, { VideoScreen });