// screens-a.jsx — Hero, World, Characters (screens 01-03)

/* ════════════════════════════════════════════════════════════
   01 · HERO — let the story speak first
   ════════════════════════════════════════════════════════════ */
function Screen01Hero({ copy }) {
  const s = copy.screens.hero;
  return (
    <ScreenShell
      id="screen-hero"
      num={s.num} label={s.label}
      title={s.title} sub={s.sub}
      withCTA copy={copy}
      nextLabel={s.nextLabel} nextHref="#screen-world"
      divider={{ variant: "brush" }}
    >
      {/* Bare screenshot, no browser-chrome wrapper. Click to enlarge
          via Zoomable; backdrop click / Esc dismiss. */}
      <Zoomable
        src="uploads/scr-hero.webp"
        alt={s.book ? `\u7b14\u968f\u5199\u4f5c\u754c\u9762 \u00b7 ${s.book}` : "\u7b14\u968f\u5199\u4f5c\u754c\u9762"}
        className="hero-shot"
        imgProps={{ loading: "eager", decoding: "async", width: 2400, height: 1305 }}
      />
    </ScreenShell>
  );
}

/* ════════════════════════════════════════════════════════════
   02 · WORLD — one page, a whole world behind it
   ════════════════════════════════════════════════════════════ */
function Screen02World({ copy }) {
  const s = copy.screens.world;
  return (
    <ScreenShell
      id="screen-world"
      num={s.num} label={s.label}
      title={s.title} sub={s.sub}
      copy={copy}
      nextLabel={s.nextLabel} nextHref="#screen-characters"
      divider={{ variant: "dots" }}
    >
      {/* Bare screenshot, no browser-chrome wrapper. Click to enlarge
          via Zoomable; backdrop click / Esc dismiss. */}
      <Zoomable
        src="uploads/scr-overview.webp"
        alt={s.winTitle ? `本书总览 · ${s.winTitle}` : "本书总览"}
        className="hero-shot"
        imgProps={{ loading: "lazy", decoding: "async", width: 2048, height: 1152 }}
      />
    </ScreenShell>
  );
}

/* ════════════════════════════════════════════════════════════
   03 · CHARACTERS — a name carries a fate
   ════════════════════════════════════════════════════════════ */
function CharacterSilhouette({ idx }) {
  // Shared by the writing screen's reference chip.
  const seeds = [
    { hair: "M50 32 c12 0 18 8 18 18 v6 c0 3 -2 5 -5 6 c-8 2 -18 2 -26 0 c-3 -1 -5 -3 -5 -6 v-6 c0 -10 6 -18 18 -18 z" },
    { hair: "M50 26 c14 0 20 10 20 22 v6 c0 3 -2 5 -5 6 c-10 3 -20 3 -30 0 c-3 -1 -5 -3 -5 -6 v-6 c0 -12 6 -22 20 -22 z" },
    { hair: "M50 34 c14 0 22 6 22 14 v8 c0 3 -2 5 -5 6 c-10 2 -24 2 -34 0 c-3 -1 -5 -3 -5 -6 v-8 c0 -8 8 -14 22 -14 z" },
    { hair: "M30 34 q20 -16 40 0 v22 c0 3 -2 5 -5 6 c-10 3 -20 3 -30 0 c-3 -1 -5 -3 -5 -6 z" },
  ];
  const s = seeds[idx % seeds.length];
  return (
    <svg viewBox="0 0 100 80" className="sc03__avatar" aria-hidden="true">
      <defs>
        <radialGradient id={`bgg-${idx}`} cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="#fff" stopOpacity=".7" />
          <stop offset="100%" stopColor="#d9c9a8" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="100" height="80" fill={`url(#bgg-${idx})`} />
      <path
        d="M8 70 q12 -20 24 -10 M70 65 q12 -25 20 -8"
        stroke="#9c8b6e"
        strokeOpacity=".3"
        strokeWidth=".6"
        fill="none"
      />
      <path d={s.hair} fill="#3A2412" opacity=".85" />
    </svg>
  );
}

function Screen03Characters({ copy }) {
  const s = copy.screens.characters;
  return (
    <ScreenShell
      id="screen-characters"
      num={s.num} label={s.label}
      title={s.title} sub={s.sub}
      copy={copy}
      nextLabel={s.nextLabel} nextHref="#screen-objects"
      divider={{ variant: "seal" }}
    >
      {/* Bare screenshot, no browser-chrome wrapper. Click to enlarge
          via Zoomable; backdrop click / Esc dismiss. */}
      <Zoomable
        src="uploads/scr-characters.webp"
        alt={s.winTitle ? `人物库 · ${s.winTitle}` : "人物库"}
        className="hero-shot"
        imgProps={{ loading: "lazy", decoding: "async", width: 3390, height: 1920 }}
      />
    </ScreenShell>
  );
}

Object.assign(window, {
  Screen01Hero, Screen02World, Screen03Characters,
  CharacterSilhouette,
});