// Landing page
function LandingScreen({ nav, device }) {
  const published = findModule("body-compass").module;
  const isM = device === "mobile";
  return (
    <>
      <section className="container">
        <div className="hero">
          <div className="hero-text">
            <div className="eyebrow">A course from Dr. Arlene Dijamco, MD</div>
            <h1 className="display-xl">Your body has been speaking.<br/><em style={{ fontStyle: "italic", color: "var(--terra)" }}>Learn how to listen.</em></h1>
            <p className="lede hero-sub">A video course grounded in osteopathic, emotional, and energetic practice — for anyone ready to come home to their own body.</p>
            <div className="hero-ctas">
              <Button size="lg" variant="terra" onClick={() => nav("/v/meeting-body-wisdom")}>Watch the free intro</Button>
              <Button size="lg" variant="ghost" onClick={() => nav("/catalog")}>Browse the course</Button>
            </div>
          </div>
          <div className="hero-visual">
            <Placeholder aspect="still" tone="sand" corner="placeholder · hero"
              label={"Warm still-life — hands resting\non an open book, linen draped\n(editorial, natural light)"}
              alt="Hero placeholder: hands resting on an open book, warm natural light"
            />
          </div>
        </div>
      </section>

      <section className="container">
        <div className="creator-strip">
          <Placeholder aspect="portrait" tone="sand-deep" corner="placeholder · portrait"
            label={"Arlene portrait\n(north-window light,\nneutral linen)"}
            alt="Portrait of Dr. Arlene Dijamco — placeholder"/>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>The 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">
        <div className="featured">
          <Placeholder aspect="4x3" tone="sand" corner="placeholder · module"
            label={"Module imagery\n(hands on an open book)"}
            alt="Featured module imagery — placeholder"/>
          <div>
            <div className="eyebrow">Featured module · Part I · Chapter 3</div>
            <h3 className="display-l">Your Body as a Compass</h3>
            <p style={{ color: "var(--ink-2)", margin: 0, maxWidth: 480 }}>
              Learn to read your body's quiet reporting — tightness, ease, warmth, contraction — and use it as a compass for daily decisions.
            </p>
            <div className="featured-meta">
              <span><strong style={{ fontFamily: "var(--ff-serif)", fontSize: 18 }}>$39</strong></span>
              <span>{published.videos} videos</span>
              <span>{published.minutes} min</span>
            </div>
            <Button onClick={() => nav("/m/body-compass")}>View module →</Button>
          </div>
        </div>
      </section>

      <section className="container how-it-works">
        <div className="eyebrow" style={{ marginBottom: 14 }}>How it works</div>
        <h3 className="display-m">Three small steps.</h3>
        <div className="how-grid">
          {[
            ["Browse", "Explore modules grounded in the chapters of I Am Intuitive."],
            ["Buy what resonates", "Purchase a single module or the full course. Yours to watch anytime."],
            ["Learn at your pace", "Watch on any device; your place is saved automatically."],
          ].map(([t, d], i) => (
            <div key={i} className="how-step">
              <div className="num">0{i+1}</div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="container testimonials">
        <div className="eyebrow" style={{ marginBottom: 14 }}>From readers & colleagues</div>
        <h3 className="display-m">In practice, and in life.</h3>
        {/* placeholder: testimonials are stand-ins until real ones approved */}
        <div className="quotes">
          {COURSE.testimonials.map((t, i) => (
            <figure key={i} style={{ margin: 0 }}>
              <blockquote className="quote" style={{ margin: 0 }}>
                <span className="q-mark">“</span>{t.quote}
              </blockquote>
              <figcaption className="quote-attr">
                <strong>{t.name}</strong> · {t.place}
              </figcaption>
            </figure>
          ))}
        </div>
      </section>
    </>
  );
}

Object.assign(window, { LandingScreen });