// My Library
function LibraryScreen({ nav, watchProgress }) {
  const [tab, setTab] = React.useState("Continue");
  const tabs = ["Continue", "New", "In progress", "Completed", "By module"];
  const m = findModule("body-compass").module;
  const pct = Math.max(1, Math.round((watchProgress || 0.34) * 100));
  return (
    <section className="container section" style={{ padding: "32px 0 48px" }}>
      <div className="lib-head">
        <div className="eyebrow" style={{ marginBottom: 10 }}>Your library</div>
        <h1>Welcome back.</h1>
        <p>1 module · 3 videos · last watched just now</p>
      </div>

      <div className="lib-tabs" role="tablist" aria-label="Library tabs">
        {tabs.map((t) => (
          <button key={t} className={`lib-tab${tab === t ? " is-active" : ""}`} onClick={() => setTab(t)} role="tab" aria-selected={tab === t}>
            {t}
          </button>
        ))}
      </div>

      <div className="continue-hero">
        <div>
          <div className="ch-eyebrow eyebrow">Continue watching</div>
          <h2>Mapping the Body's Compass</h2>
          <div className="ch-module">{m.title} · Video 02 of 03</div>
          <div className="resume-bar"><span style={{ width: `${pct}%` }} /></div>
          <div className="resume-meta">Resume at <strong>6:12</strong> · {pct}% complete</div>
          <Button variant="terra" size="lg" onClick={() => nav("/v/mapping-compass")}>
            <Icon.Play size={16}/> &nbsp;Resume
          </Button>
        </div>
        <div className="ch-thumb">
          <Placeholder aspect="16x9" tone="sand-deep" label="Compass on desk" corner="placeholder" alt="Video thumbnail — placeholder"/>
        </div>
      </div>

      <div className="lib-section">
        <h3>Your Body as a Compass</h3>
        <div className="shelf-grid">
          <article className="shelf-card is-done">
            <div className="sc-thumb"><Placeholder aspect="16x9" tone="sand" label="Hands on chest" alt="Video thumbnail — placeholder"/></div>
            <div>
              <div className="sc-title">Meeting Your Body's Wisdom</div>
              <div className="sc-meta">8 min · Completed</div>
            </div>
            <div className="shelf-check" aria-label="Completed"><Icon.Check /></div>
          </article>
          <article className="shelf-card">
            <div className="sc-thumb"><Placeholder aspect="16x9" tone="sage" label="Tea on windowsill" alt="Video thumbnail — placeholder"/></div>
            <div>
              <div className="sc-title">Practical Daily Check-Ins</div>
              <div className="sc-meta">16 min · Not yet started</div>
            </div>
            <Button size="sm" variant="ghost" className="sc-action" onClick={() => nav("/v/mapping-compass")}>Start</Button>
          </article>
        </div>
      </div>

      <div className="upsell-card">
        <div>
          <h4>Looking for more?</h4>
          <p>New modules release throughout the year. Preview what's coming in Parts II–IV.</p>
        </div>
        <Button variant="ghost" onClick={() => nav("/catalog")}>Browse the catalog →</Button>
      </div>
    </section>
  );
}

Object.assign(window, { LibraryScreen });