// Module detail
function ModuleScreen({ nav, moduleId, signedIn, onBuy }) {
  const found = findModule(moduleId);
  if (!found) return <div className="container section"><p>Module not found.</p></div>;
  const { module: m, part } = found;
  const soon = m.state === "soon";
  const [openFaq, setOpenFaq] = React.useState(0);

  if (soon) {
    return (
      <section className="container section" style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>{part.title}</div>
        <h1 className="display-l">{m.title}</h1>
        <p className="lede" style={{ marginTop: 16 }}>This module is in production. It will release later this year.</p>
        <div style={{ marginTop: 24 }}>
          <Button variant="ghost" onClick={() => nav("/catalog")}>← Back to catalog</Button>
        </div>
      </section>
    );
  }

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

      <section className="container module-hero">
        <div>
          <div className="eyebrow">Module · {part.title.split("—")[0].trim()} · Chapter {m.chapter}</div>
          <h1 className="display-l">{m.title}</h1>
          <p className="m-desc">{m.description}</p>
          <div className="m-meta">
            <Chip>{m.videos} videos</Chip>
            <Chip>{m.minutes} minutes</Chip>
            <Chip>Updated {m.updated}</Chip>
          </div>
        </div>
        <aside className="buy-emphasis" style={{ border: "1px solid var(--hairline)", borderRadius: 8, padding: 24, background: "var(--bg-2)" }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>One-time purchase</div>
          <div className="serif" style={{ fontSize: 44, lineHeight: 1, margin: "8px 0 16px" }}>$39</div>
          <Button size="lg" variant="terra" className="btn-block" onClick={() => onBuy(m.id)}>Buy module — $39</Button>
          <div className="or" style={{ marginTop: 14, display: "block" }}>Or get the full <strong>Part I</strong> for <strong>$99</strong> <span className="muted">(save 15%)</span></div>
          <div className="or" style={{ marginTop: 6, display: "block" }}>Or the full course for <strong>$349</strong></div>
        </aside>
      </section>

      <section className="container video-list">
        <h3>In this module</h3>
        {m.videoList.map((v, i) => {
          const isLocked = v.state === "locked";
          return (
            <div key={v.id}
              className={`v-row ${isLocked ? "is-locked" : "is-preview"}`}
              onClick={() => !isLocked && nav(`/v/${v.id}`)}
              role={isLocked ? undefined : "button"}
              tabIndex={isLocked ? -1 : 0}
              onKeyDown={(e) => !isLocked && (e.key === "Enter") && nav(`/v/${v.id}`)}
              title={isLocked ? "Included with module" : undefined}>
              <div className="v-thumb">
                <Placeholder aspect="16x9" tone={v.thumbTone} label={v.thumbAlt.split(" —")[0]} alt={v.thumbAlt}/>
              </div>
              <div className="v-body">
                <div className="v-num">{v.num} · {v.minutes} min</div>
                <div className="v-title">{v.title}</div>
                <div className="v-duration">{isLocked ? "Included with module" : "Preview · free to watch"}</div>
              </div>
              <div className={`v-state ${v.state === "preview" ? "is-preview" : ""}`}>
                {isLocked ? <><Icon.Lock /> Locked</> : <><Icon.Play size={16}/> Play preview</>}
              </div>
            </div>
          );
        })}
      </section>

      <section className="container" style={{ padding: "48px 0", borderBottom: "1px solid var(--hairline)" }}>
        <div className="creator-strip" style={{ border: 0, padding: 0 }}>
          <Placeholder aspect="portrait" tone="sand-deep" corner="placeholder"
            label={"Arlene portrait"}
            alt="Portrait of Dr. Arlene Dijamco — placeholder"/>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Your teacher</div>
            <h3 className="display-m">Dr. Arlene Dijamco, MD</h3>
            <p>{COURSE.creator.shortBio}</p>
            <div className="creds">
              {COURSE.creator.creds.map((c, i) => <span key={i}>{c}</span>)}
            </div>
          </div>
        </div>
      </section>

      <section className="container explore-next">
        <h3>You might explore next</h3>
        <div className="cards-grid">
          {COURSE.parts[1].modules.slice(0, 3).map((m) => (
            <ModuleCard key={m.id} module={m} onOpen={nav} />
          ))}
        </div>
      </section>

      <section className="container faq">
        <h3>A few practical questions</h3>
        {[
          ["How long do I have access?", "Forever. Your purchase is one-time; watch as many times as you like."],
          ["Can I watch on my phone?", "Yes — the site works on any modern browser, and your place is saved across devices."],
          ["What if it's not for me?", "14-day refund if you've watched less than 30%."],
        ].map(([q, a], i) => (
          <div key={i} className="faq-item">
            <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)} aria-expanded={openFaq === i}>
              <span>{q}</span>
              <Icon.Chevron dir={openFaq === i ? "up" : "down"} />
            </button>
            {openFaq === i && <div className="faq-a">{a}</div>}
          </div>
        ))}
      </section>
    </>
  );
}

Object.assign(window, { ModuleScreen });