// Scenes: Cover, Hub (corridor of seven doors), Chapter (Monday), Poem.
// All scenes accept { onNavigate, tweaks, audio } and use the lantern reveal
// system + camera-dolly transitions.

// ────────────────────────────────────────────────────────────────────────────
// Cover — full-screen animated book cover. Title breathes, fog drifts,
// after a beat "Open the book" prompt appears.

function Cover({ onOpen, tweaks, audio }) {
  const [ready, setReady] = React.useState(false);
  const [opening, setOpening] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setReady(true), 2400);
    return () => clearTimeout(t);
  }, []);

  const open = () => {
    if (opening) return;
    audio.tick('thud');
    setOpening(true);
    setTimeout(onOpen, 1800);
  };

  const breath = tweaks.breath / 100;
  const fog = tweaks.fog / 100;

  return (
    <div className={`cover ${opening ? 'cover--opening' : ''}`}
         style={{ '--breath': breath, '--fog': fog }}>

      {/* Hair-shrouded silhouette — fills the viewport */}
      <div className="cover-silhouette" aria-hidden="true">
        <img src="assets/silhouette.png" alt="" draggable="false" />
      </div>
      {/* Dog-tag chain echo, faintly red, hanging from the neck */}
      <div className="cover-dogtag" aria-hidden="true" />

      <div className="cover-fog" aria-hidden="true">
        <div className="cover-fog-layer cover-fog-1" />
        <div className="cover-fog-layer cover-fog-2" />
        <div className="cover-fog-layer cover-fog-3" />
      </div>

      <div className="cover-frame">
        <div className="cover-title-block">
          <h1 className="cover-title">
            <span className="cover-title-line">VENOM</span>
            <span className="cover-title-line cover-title-mid">AS&nbsp;MY</span>
            <span className="cover-title-line">SILHOUETTE</span>
          </h1>
          <div className="cover-byline">
            <span className="cover-byline-rule" />
            <span>Narbeh&nbsp;Der-Gevorkian</span>
            <span className="cover-byline-rule" />
          </div>
        </div>
      </div>

      <button className={`cover-prompt ${ready && !opening ? 'is-ready' : ''}`}
              onClick={open}
              onMouseEnter={() => audio.tick('whisper')}>
        <span className="cover-prompt-bracket">[</span>
        <span className="cover-prompt-text">open&nbsp;the&nbsp;book</span>
        <span className="cover-prompt-bracket">]</span>
      </button>

      <div className="cover-split cover-split-l" />
      <div className="cover-split cover-split-r" />
      <div className={`cover-credit ${opening ? 'is-shown' : ''}`}>
        <div className="cover-credit-eyebrow">— created and written by —</div>
        <div className="cover-credit-name">Narbeh Der-Gevorkian</div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Hub — corridor of seven doors receding. Doors only become visible when the
// cursor's lantern passes near them. Plus the Amazon book object on a pedestal.

function CorridorDoor({ day, idx, onEnter, audio }) {
  const ref = React.useRef(null);
  const reveal = useReveal(ref, 320);
  const [hovered, setHovered] = React.useState(false);

  // Doors arranged in 7 z-depths down a corridor. Even doors on left wall, odd
  // on right wall, alternating, receding into vanishing point at center.
  const depth = idx;             // 0..6
  const side = idx % 2 === 0 ? -1 : 1; // -1 left, +1 right
  const z = depth * 0.13;        // perspective fraction
  const scale = 1 - z * 1.05;    // doors shrink toward center
  const xOffset = side * (44 - depth * 5); // wall angle
  const opacityFromDepth = Math.max(0.28, 1 - depth * 0.11);

  React.useEffect(() => {
    if (reveal > 0.5 && !hovered) {
      setHovered(true);
      audio.tick('tick');
    } else if (reveal < 0.2 && hovered) {
      setHovered(false);
    }
  }, [reveal, hovered, audio]);

  const litness = Math.max(reveal, 0.15);

  return (
    <button
      ref={ref}
      className="door"
      style={{
        '--side': side,
        '--scale': scale,
        '--x': `${xOffset}%`,
        '--depth-op': opacityFromDepth,
        '--lit': litness,
      }}
      onClick={() => { audio.tick('thud'); onEnter(day.id); }}
      aria-label={`${day.label} — ${day.part}`}
    >
      <div className="door-frame">
        <div className="door-panel">
          <div className="door-knob" />
          <div className="door-light" />
        </div>
      </div>
      <div className="door-plate">
        <div className="door-plate-day">{day.label.slice(0,3).toUpperCase()}</div>
        <div className="door-plate-num">{String(idx + 1).padStart(2, '0')}</div>
      </div>
      <div className="door-caption" style={{ opacity: litness }}>
        <span className="door-caption-day">{day.label}</span>
        <span className="door-caption-part">{day.part}</span>
      </div>
    </button>
  );
}

function AmazonBook({ onClick, audio }) {
  const ref = React.useRef(null);
  const reveal = useReveal(ref, 240);
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button ref={ref} className="hub-book" style={{ '--lit': Math.max(reveal, 0.2) }}
              onMouseEnter={() => audio.tick('whisper')}
              onClick={() => { audio.tick('thud'); setOpen(true); }}>
        <img className="hub-book-img" src="assets/book-3d.png" alt="Venom as My Silhouette — book" />
        <div className="hub-book-caption">
          <span className="rule" /> take this story with you <span className="rule" />
        </div>
      </button>
      {open && (
        <div className="amazon-overlay" onClick={() => setOpen(false)}>
          <div className="amazon-card" onClick={(e) => e.stopPropagation()}>
            <div className="amazon-eyebrow">— take this story with you —</div>
            <h3 className="amazon-title">Venom as My Silhouette</h3>
            <div className="amazon-author">by Narbeh Der-Gevorkian</div>
            <div className="amazon-rule" />
            <div className="amazon-actions">
              <a href="#" className="amazon-btn" onClick={(e) => e.preventDefault()}>
                <span>Amazon</span><span className="amazon-arrow">→</span>
              </a>
              <a href="#" className="amazon-btn amazon-btn--ghost" onClick={(e) => e.preventDefault()}>
                <span>Barnes &amp; Noble</span><span className="amazon-arrow">→</span>
              </a>
              <a href="#" className="amazon-btn amazon-btn--ghost" onClick={(e) => e.preventDefault()}>
                <span>Bookshop.org</span><span className="amazon-arrow">→</span>
              </a>
            </div>
            <button className="amazon-close" onClick={() => setOpen(false)}>close</button>
          </div>
        </div>
      )}
    </>
  );
}

// Hotspot rectangles tuned to each rendered hallway image. Coordinates are
// percentages of the image (left, top, width, height) so they scale with the
// viewport. id maps to a DAYS entry; "shrine-book" opens the Amazon overlay.
const HALL_HOTSPOTS = {
  wide: [
    { id: 'mon', l: 4,  t: 24, w: 16, h: 56 },   // left wall, foreground
    { id: 'tue', l: 22, t: 30, w: 11, h: 46 },   // left wall, mid
    { id: 'wed', l: 34, t: 34, w: 8,  h: 36 },   // left wall, back
    { id: 'thu', l: 46, t: 36, w: 8,  h: 36 },   // end wall — Thursday door
    { id: 'fri', l: 58, t: 34, w: 8,  h: 36 },   // right wall, back
    { id: 'sat', l: 67, t: 30, w: 11, h: 46 },   // right wall, mid
    { id: 'sun', l: 80, t: 24, w: 16, h: 56 },   // right wall, foreground
  ],
  close: [
    { id: 'wed', l: 4,  t: 14, w: 22, h: 76 },   // Wednesday — left
    { id: 'thu', l: 41, t: 22, w: 18, h: 64 },   // Thursday — center back
    { id: 'fri', l: 74, t: 14, w: 22, h: 76 },   // Friday — right
  ],
  shrine: [
    { id: 'shrine-book', l: 46, t: 46, w: 9, h: 18 }, // book itself, on top of pedestal
  ],
};

function HallScene({ view, onPrev, onNext, onDoor, onBook, audio }) {
  const HALL_VER = { wide: 1, close: 1, shrine: 2 };
  const src = `assets/hall-${view}.png?v=${HALL_VER[view] || 1}`;
  const hotspots = HALL_HOTSPOTS[view] || [];
  React.useEffect(() => { audio.sting && audio.sting(); }, [view]);

  const handle = (id) => {
    audio.tick('thud');
    if (id === 'shrine-book') return onBook();
    onDoor(id);
  };

  return (
    <div className="hall" key={view}>
      <img className="hall-bg" src={src} alt="" draggable="false" />
      <div className="hall-vignette" />

      {hotspots.map((h, i) => {
        const day = DAYS.find(d => d.id === h.id);
        const label = h.id === 'shrine-book'
          ? 'open the book'
          : (day ? `${day.label} — ${day.part}` : h.id);
        return (
          <button
            key={h.id + i}
            className="hall-hotspot"
            style={{ left: `${h.l}%`, top: `${h.t}%`, width: `${h.w}%`, height: `${h.h}%` }}
            onMouseEnter={() => audio.tick('whisper')}
            onClick={() => handle(h.id)}
            aria-label={label}
            title={label}
          />
        );
      })}

      {onPrev && (
        <button className="hall-nav hall-nav-back" onClick={() => { audio.tick('tick'); onPrev(); }}
                onMouseEnter={() => audio.tick('whisper')} aria-label="turn back">
          <span className="hall-nav-glyph">↶</span>
          <span className="hall-nav-text">turn&nbsp;back</span>
        </button>
      )}
      {onNext && (
        <button className="hall-nav hall-nav-fwd" onClick={() => { audio.tick('tick'); onNext(); }}
                onMouseEnter={() => audio.tick('whisper')} aria-label="walk forward">
          <span className="hall-nav-text">walk&nbsp;forward</span>
          <span className="hall-nav-glyph">↑</span>
        </button>
      )}
      <button className="hall-nav hall-nav-right"
              onClick={() => { audio.tick('tick'); onDoor('__turn-right'); }}
              onMouseEnter={() => audio.tick('whisper')} aria-label="turn right">
        <span className="hall-nav-text">turn&nbsp;right</span>
        <span className="hall-nav-glyph">↻</span>
      </button>
    </div>
  );
}

function Hub({ onNavigate, tweaks, audio }) {
  // 'wide' = full corridor, 'close' = three-door close-up, 'shrine' = alcove
  const [view, setView] = React.useState('wide');
  const [bookOpen, setBookOpen] = React.useState(false);

  const forward = view === 'wide' ? 'close' : view === 'close' ? 'shrine' : null;
  const back    = view === 'shrine' ? 'close' : view === 'close' ? 'wide' : null;

  const handleDoor = (id) => {
    if (id === '__turn-right') {
      setView(view === 'wide' ? 'shrine' : 'wide');
      return;
    }
    onNavigate(id);
  };

  return (
    <div className="hub hub--hall">
      <HallScene
        view={view}
        onPrev={back ? () => setView(back) : null}
        onNext={forward ? () => setView(forward) : null}
        onDoor={handleDoor}
        onBook={() => setBookOpen(true)}
        audio={audio}
      />

      {bookOpen && (
        <div className="amazon-overlay" onClick={() => setBookOpen(false)}>
          <div className="amazon-card amazon-card--bio" onClick={(e) => e.stopPropagation()}>
            <div className="amazon-eyebrow">— about the author —</div>
            <h3 className="amazon-title">Narbeh Der-Gevorkian</h3>
            <div className="amazon-rule" />
            <div className="bio-body">
              <p>Narbeh Der-Gevorkian is a dedicated educator in health, psychology, and sociology, currently serving as the director of a Wellness Center within his professional role. With a strong commitment to fostering well-being and personal development, he integrates both academic knowledge and practical experience into his work, helping individuals better understand the connection between mind, body, and society.</p>
              <p>Narbeh earned his undergraduate degree in Psychology from California State University, Long Beach. He then continued his academic journey internationally at the University of Sydney in Australia, where he obtained his Master&rsquo;s degree in Education with a concentration in Educational Psychology. Further strengthening his credentials, he completed his teaching certification at San Diego State University, specializing in health science and social science education.</p>
              <p>A lifelong advocate for healthy living, Narbeh has spent the past 28 years committed to fitness, nutrition, and overall wellness. His passion for health extends beyond the classroom, as he actively promotes balanced lifestyles and sustainable habits.</p>
              <p>In addition to his professional and academic pursuits, Narbeh has a deep appreciation for storytelling&mdash;particularly darker, psychologically complex narratives. Influenced by works such as <em>The Devil in the White City</em>, <em>American Psycho</em>, <em>Fight Club</em>, and <em>A Clockwork Orange</em>, his own writing reflects a fascination with the human psyche and the intricacies of behavior.</p>
              <p>Through his work, Narbeh Der-Gevorkian brings together education, wellness, and storytelling to inspire thoughtful reflection and meaningful change.</p>
            </div>
            <button className="amazon-close" onClick={() => setBookOpen(false)}>close</button>
          </div>
        </div>
      )}

      <div className="hub-hud hub-hud-tl">
        <div className="hud-mark">— I —</div>
        <div className="hud-text">the corridor of seven days</div>
      </div>
      <div className="hub-hud hub-hud-bl">
        <div className="hud-text">{view === 'shrine' ? 'a book waits on the pedestal' : 'a door opens when you call its name'}</div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Chapter (Monday). Reader interface: paginated, side-margin artifacts.

function ChapterReader({ dayId, onBack, onPoem, audio }) {
  const ch = (CHAPTERS && CHAPTERS[dayId]) || CHAPTERS.mon;
  const [page, setPage] = React.useState(0);
  React.useEffect(() => { setPage(0); }, [dayId]);
  const total = ch.pages.length;

  const go = (delta) => {
    const next = Math.max(0, Math.min(total - 1, page + delta));
    if (next === page) return;
    audio.tick('tick');
    setPage(next);
  };

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowRight') go(1);
      if (e.key === 'ArrowLeft') go(-1);
      if (e.key === 'Escape') onBack();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  return (
    <div className="chapter">
      <div className="chapter-frame">
        <header className="chapter-head">
          <button className="chapter-back" onClick={() => { audio.tick('thud'); onBack(); }}>
            ← back to the corridor
          </button>
          <div className="chapter-meta">
            <span>{ch.day.toUpperCase()}</span>
            <span className="dot">·</span>
            <span>{ch.part}</span>
          </div>
        </header>

        <div className="chapter-body">
          <aside className="chapter-aside chapter-aside-l">
            <div className="aside-mark">— a chapter —</div>
            <h2 className="chapter-title">{ch.title}</h2>
            <div className="aside-rule" />
            <div className="aside-page">
              <span className="aside-page-num">{String(page + 1).padStart(2, '0')}</span>
              <span className="aside-page-of">/ {String(total).padStart(2, '0')}</span>
            </div>
          </aside>

          <main className="chapter-page">
            <div className="page-edge page-edge-l" />
            <div className="page-edge page-edge-r" />
            <div className="page-inner" key={page}>
              {ch.pages[page][0] === '__cta__' ? (
                <div className="page-cta">
                  <div className="page-cta-eyebrow">— end of sample —</div>
                  <h3 className="page-cta-title">Continue {ch.day}'s descent in the book.</h3>
                  <p className="page-cta-body">
                    This is a small window into <em>{ch.title.replace(/ — .*/, '')}</em>.
                    The full chapter — and the six other days that braid around it —
                    waits in the printed manuscript.
                  </p>
                  <a className="page-cta-btn" href={AMAZON_URL}
                     target="_blank" rel="noopener noreferrer"
                     onMouseEnter={() => audio.tick('whisper')}
                     onClick={() => audio.tick('thud')}>
                    <span>Get the book on Amazon</span>
                    <span className="page-cta-arrow">→</span>
                  </a>
                  <div className="page-cta-foot">
                    Venom as My Silhouette &middot; Narbeh Der-Gevorkian
                  </div>
                </div>
              ) : (
                ch.pages[page].map((para, i) => (
                  <p key={i} className="page-para" style={{ '--i': i }}>{para}</p>
                ))
              )}
            </div>
            <div className="page-folio">
              <span>The Normal Life of Tom Buxom</span>
              <span>·</span>
              <span>{ch.day}</span>
            </div>
          </main>

          <aside className="chapter-aside chapter-aside-r">
            <div className="aside-mark">— side artifacts —</div>
            <div className="aside-artifacts">
              {ch.artifacts.map((a) => (
                <button key={a.id} className={`artifact artifact--${a.kind.replace(' ', '-')}`}
                        onMouseEnter={() => audio.tick('whisper')}
                        onClick={() => { audio.tick('thud'); onPoem(a.id); }}>
                  <span className="artifact-kind">[{a.kind}]</span>
                  <span className="artifact-label">{a.label}</span>
                  <span className="artifact-hint">{a.hint}</span>
                </button>
              ))}
            </div>
            <div className="aside-rule" />
            <div className="aside-note">
              {PLACEHOLDER_NOTICE}
            </div>
            <a className="aside-amazon" href={AMAZON_URL}
               target="_blank" rel="noopener noreferrer"
               onMouseEnter={() => audio.tick('whisper')}
               onClick={() => audio.tick('thud')}>
              <span>Get the book</span>
              <span className="aside-amazon-arrow">→</span>
            </a>
          </aside>
        </div>

        <footer className="chapter-foot">
          <button className="pager pager-prev" disabled={page === 0}
                  onClick={() => go(-1)}>
            <span>←</span><span>previous page</span>
          </button>
          <div className="pager-track">
            {Array.from({ length: total }).map((_, i) => (
              <span key={i} className={`pager-dot ${i === page ? 'is-on' : ''}`} />
            ))}
          </div>
          <button className="pager pager-next" disabled={page === total - 1}
                  onClick={() => go(1)}>
            <span>next page</span><span>→</span>
          </button>
        </footer>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// Poem scene — single-image micro-scene with text. Photographic noir placeholder
// "image" rendered as CSS layers (striped grain + red bleed) with a caption that
// names what the AI illustration would depict.

function PoemScene({ poemId, onBack, audio }) {
  const poem = POEMS[poemId];
  if (!poem) return null;
  const [revealed, setRevealed] = React.useState(false);

  React.useEffect(() => {
    const t = setTimeout(() => setRevealed(true), 700);
    return () => clearTimeout(t);
  }, [poemId]);

  return (
    <div className={`poem ${revealed ? 'is-revealed' : ''}`}>
      <header className="poem-head">
        <button className="chapter-back" onClick={() => { audio.tick('thud'); onBack(); }}>
          ← back
        </button>
        <div className="poem-meta">
          <span>{poem.part.toUpperCase()}</span>
          <span className="dot">·</span>
          <span>register: {poem.register}</span>
        </div>
      </header>

      <div className="poem-body">
        <figure className="poem-figure">
          <div className="poem-image" data-poem={poem.id}>
            {poem.image && (
              <img className="poem-image-photo" src={poem.image} alt=""
                   draggable="false"
                   onError={(e) => { e.currentTarget.style.display = 'none'; }} />
            )}
            <div className="poem-image-grain" />
            <div className="poem-image-bleed" />
            <div className="poem-image-vignette" />
          </div>
          <figcaption className="poem-figcaption">
            <span className="poem-figcaption-mark">[ image plate ]</span>
            <span className="poem-figcaption-cue">{poem.visualCue}</span>
          </figcaption>
        </figure>

        <article className="poem-text">
          <div className="poem-eyebrow">— a poem —</div>
          <h2 className="poem-title">{poem.title}</h2>
          <div className="poem-rule" />
          <div className="poem-lines">
            {poem.lines.map((l, i) => (
              <p key={i} className={`poem-line ${l === '' ? 'is-blank' : ''}`}
                 style={{ '--i': i }}>{l || '\u00A0'}</p>
            ))}
          </div>
          <div className="poem-rule" />
          <div className="poem-foot">{PLACEHOLDER_NOTICE}</div>
        </article>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// MOBILE — single-scroll informational page. The interactive desktop site is
// keyboard/cursor-driven and not usable on touch; mobile readers get a clean
// presentational version with the same colors and typography.

function MobileSite() {
  // Simple stack-based navigation: 'home' | { kind:'day', id } | { kind:'poem', id }
  const [view, setView] = React.useState({ kind: 'home' });

  // Scroll to top on every navigation.
  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'auto' }); }, [view]);

  const goHome  = () => setView({ kind: 'home' });
  const goDay   = (id) => setView({ kind: 'day',  id });
  const goPoem  = (id) => setView({ kind: 'poem', id });

  if (view.kind === 'day')  return <MobileDay  dayId={view.id}  onBack={goHome} onPoem={goPoem} />;
  if (view.kind === 'poem') return <MobilePoem poemId={view.id} onBack={goHome} />;
  return <MobileHome onDay={goDay} onPoem={goPoem} />;
}

function MobileHome({ onDay, onPoem }) {
  return (
    <div className="mobile">
      <header className="m-hero">
        <img className="m-hero-bg" src="assets/cover-bg.png" alt="" />
        <div className="m-hero-scrim" />
        <div className="m-hero-inner">
          <div className="m-eyebrow">— a book —</div>
          <h1 className="m-title">
            <span>VENOM</span>
            <span className="m-title-mid">AS&nbsp;MY</span>
            <span>SILHOUETTE</span>
          </h1>
          <div className="m-byline">Narbeh Der-Gevorkian</div>
          <a className="m-btn m-btn-primary" href={AMAZON_URL}
             target="_blank" rel="noopener noreferrer">
            <span>Get the book on Amazon</span><span className="m-arrow">→</span>
          </a>
        </div>
      </header>

      <section className="m-section">
        <div className="m-section-mark">— about the book —</div>
        <p>
          <em>Venom as My Silhouette</em> is a hybrid work of dark fiction
          and poetry that follows seven days in the unraveling of Tom Buxom
          — a ritualistic Los Angeles attorney whose immaculate routine
          begins to fracture when the masks he defends in court start
          matching the one he wears at home.
        </p>
        <p>
          Across seven days — Routine and Fracture, Masks and Machines,
          Descent, The Supernatural Spiral, Collapse, Revelation, Renewal —
          the novella is interrupted by short poems that read like evidence
          pulled from the case file: torn pages, photographs, confessions.
        </p>
      </section>

      <section className="m-section">
        <div className="m-section-mark">— the seven days —</div>
        <p className="m-section-hint">Tap a day to read a sample.</p>
        <ol className="m-days">
          {DAYS.map((d, i) => {
            const ch = CHAPTERS[d.id];
            const teaser = ch && ch.pages[0] && Array.isArray(ch.pages[0])
              ? (ch.pages[0][0] || '').slice(0, 160).trimEnd() + '…'
              : '';
            return (
              <li key={d.id}>
                <button className="m-day m-day-btn" onClick={() => onDay(d.id)}>
                  <div className="m-day-head">
                    <span className="m-day-num">{String(i + 1).padStart(2, '0')}</span>
                    <span className="m-day-name">{d.label}</span>
                    <span className="m-day-part">{d.part}</span>
                  </div>
                  <p className="m-day-teaser">{teaser}</p>
                  <span className="m-day-cta">read sample <span className="m-arrow">→</span></span>
                </button>
              </li>
            );
          })}
        </ol>
      </section>

      <section className="m-section">
        <div className="m-section-mark">— the poems —</div>
        <p className="m-section-hint">Short pieces between the days.</p>
        <ul className="m-poems">
          {Object.values(POEMS).map((p) => (
            <li key={p.id}>
              <button className="m-poem-card" onClick={() => onPoem(p.id)}>
                {p.image && (
                  <img className="m-poem-thumb" src={p.image} alt=""
                       onError={(e) => { e.currentTarget.style.display = 'none'; }} />
                )}
                <div className="m-poem-meta">
                  <span className="m-poem-kind">{p.register}</span>
                  <span className="m-poem-title">{p.title}</span>
                  <span className="m-poem-part">{p.part}</span>
                </div>
                <span className="m-arrow">→</span>
              </button>
            </li>
          ))}
        </ul>
      </section>

      <section className="m-section">
        <div className="m-section-mark">— about the author —</div>
        <p>
          Narbeh Der-Gevorkian is a dedicated educator in health, psychology,
          and sociology, currently serving as the director of a Wellness
          Center. He integrates academic knowledge and practical experience
          to help individuals understand the connection between mind, body,
          and society.
        </p>
        <p>
          He holds a Psychology degree from California State University,
          Long Beach, and a Master's in Education (Educational Psychology)
          from the University of Sydney. His teaching certification is from
          San Diego State University in health and social science education.
        </p>
        <p>
          Influenced by works such as <em>The Devil in the White City</em>,
          <em> American Psycho</em>, <em>Fight Club</em>, and
          <em> A Clockwork Orange</em>, his writing reflects a fascination
          with the human psyche and the intricacies of behavior.
        </p>
      </section>

      <footer className="m-foot">
        <a className="m-btn m-btn-primary" href={AMAZON_URL}
           target="_blank" rel="noopener noreferrer">
          <span>Get the book on Amazon</span><span className="m-arrow">→</span>
        </a>
        <div className="m-foot-credit">
          Created and written by<br/><em>Narbeh Der-Gevorkian</em>
        </div>
      </footer>
    </div>
  );
}

function MobileDay({ dayId, onBack, onPoem }) {
  const ch = CHAPTERS[dayId] || CHAPTERS.mon;
  // Flatten narrative paragraphs (skip the CTA marker page).
  const paragraphs = ch.pages
    .filter((pg) => pg[0] !== '__cta__')
    .flat();

  return (
    <div className="mobile mobile--reader">
      <nav className="m-topbar">
        <button className="m-back" onClick={onBack}>
          <span className="m-back-arrow">←</span> all days
        </button>
        <span className="m-topbar-meta">{ch.day} · {ch.part}</span>
      </nav>

      <article className="m-article">
        <div className="m-eyebrow">— a sample chapter —</div>
        <h1 className="m-article-title">{ch.title}</h1>

        <div className="m-article-rule" />

        {paragraphs.map((para, i) => (
          <p key={i} className="m-article-para">{para}</p>
        ))}

        {ch.artifacts && ch.artifacts.length > 0 && (
          <>
            <div className="m-article-rule" />
            <div className="m-section-mark">— artifacts —</div>
            <ul className="m-poems">
              {ch.artifacts.map((a) => (
                <li key={a.id}>
                  <button className="m-poem-card" onClick={() => onPoem(a.id)}>
                    <div className="m-poem-meta">
                      <span className="m-poem-kind">[{a.kind}]</span>
                      <span className="m-poem-title">{a.label}</span>
                      <span className="m-poem-part">{a.hint}</span>
                    </div>
                    <span className="m-arrow">→</span>
                  </button>
                </li>
              ))}
            </ul>
          </>
        )}

        <div className="m-cta-block">
          <div className="m-eyebrow">— end of sample —</div>
          <p>Continue {ch.day}'s descent in the book.</p>
          <a className="m-btn m-btn-primary" href={AMAZON_URL}
             target="_blank" rel="noopener noreferrer">
            <span>Get the book on Amazon</span><span className="m-arrow">→</span>
          </a>
        </div>
      </article>
    </div>
  );
}

function MobilePoem({ poemId, onBack }) {
  const poem = POEMS[poemId];
  if (!poem) return null;

  return (
    <div className="mobile mobile--reader">
      <nav className="m-topbar">
        <button className="m-back" onClick={onBack}>
          <span className="m-back-arrow">←</span> back
        </button>
        <span className="m-topbar-meta">{poem.part} · {poem.register}</span>
      </nav>

      <article className="m-article m-poem">
        {poem.image && (
          <div className="m-poem-image">
            <img src={poem.image} alt=""
                 onError={(e) => { e.currentTarget.parentElement.style.display = 'none'; }} />
          </div>
        )}
        <div className="m-eyebrow">— a poem —</div>
        <h1 className="m-article-title">{poem.title}</h1>
        <div className="m-article-rule" />
        <div className="m-poem-lines">
          {poem.lines.map((l, i) => (
            <p key={i} className={`m-poem-line ${l === '' ? 'is-blank' : ''}`}>
              {l || '\u00A0'}
            </p>
          ))}
        </div>
        <div className="m-article-rule" />
        <div className="m-cta-block">
          <a className="m-btn m-btn-primary" href={AMAZON_URL}
             target="_blank" rel="noopener noreferrer">
            <span>Get the book on Amazon</span><span className="m-arrow">→</span>
          </a>
        </div>
      </article>
    </div>
  );
}

Object.assign(window, { Cover, Hub, ChapterReader, PoemScene, MobileSite });