// screens-b.jsx — Objects, Events, Writing (screens 04-06)

/* ════════════════════════════════════════════════════════════
   04 · OBJECTS — clues stitch a case back together
   ════════════════════════════════════════════════════════════ */
function ObjectGlyph({ kind }) {
  // Tiny ink-style sketches for each object kind. Loose, monochrome.
  const map = {
    "半截竹杖": (
      <svg viewBox="0 0 100 60" aria-hidden="true">
        <path d="M14 36 L 78 22" stroke="#3A2412" strokeWidth="3" strokeLinecap="round" opacity=".85"/>
        <path d="M30 32 l3 1 M48 28 l3 1 M66 24 l3 1" stroke="#3A2412" strokeWidth=".8" strokeLinecap="round" opacity=".6"/>
        <circle cx="80" cy="22" r="3" fill="#7a1f1f" opacity=".55"/>
        <path d="M82 25 q3 2 5 1" stroke="#7a1f1f" strokeWidth="1" fill="none" opacity=".55"/>
      </svg>
    ),
    "血染袖口": (
      <svg viewBox="0 0 100 60" aria-hidden="true">
        <path d="M16 38 Q 38 20 70 28 Q 88 30 90 44 L 14 44 Z"
              fill="#e8dfc8" stroke="#3A2412" strokeWidth=".8" opacity=".95"/>
        <path d="M58 34 q4 4 10 2 q3 -1 6 2" stroke="#7a1f1f" strokeWidth="1" fill="none" opacity=".7"/>
        <circle cx="72" cy="36" r="2.5" fill="#7a1f1f" opacity=".7"/>
      </svg>
    ),
    "旧信": (
      <svg viewBox="0 0 100 60" aria-hidden="true">
        <rect x="22" y="14" width="56" height="36" rx="2" fill="#efe6cd" stroke="#3A2412" strokeOpacity=".5" strokeWidth=".8"/>
        <path d="M30 22 h40 M30 28 h32 M30 34 h36 M30 40 h22" stroke="#3A2412" strokeOpacity=".4" strokeWidth=".7"/>
      </svg>
    ),
    "铜令牌": (
      <svg viewBox="0 0 100 60" aria-hidden="true">
        <circle cx="50" cy="30" r="16" fill="#c9a574" stroke="#3A2412" strokeWidth=".8" opacity=".95"/>
        <text x="50" y="34" textAnchor="middle" fontSize="14" fontFamily="serif" fill="#3A2412" opacity=".85">巡</text>
        <path d="M50 14 q4 -6 10 -4" stroke="#3A2412" strokeWidth=".7" fill="none" opacity=".6"/>
      </svg>
    ),
    "油纸包": (
      <svg viewBox="0 0 100 60" aria-hidden="true">
        <path d="M20 18 L 80 18 L 78 46 L 22 46 Z" fill="#e0d2a8" stroke="#3A2412" strokeWidth=".7" opacity=".95"/>
        <path d="M22 18 L 50 32 L 78 18" stroke="#3A2412" strokeOpacity=".4" strokeWidth=".7" fill="none"/>
        <path d="M30 14 q20 -6 40 0" stroke="#3A2412" strokeOpacity=".5" strokeWidth=".7" fill="none"/>
      </svg>
    ),
  };
  return map[kind] || null;
}

function Screen04Objects({ copy }) {
  const s = copy.screens.objects;
  return (
    <ScreenShell
      id="screen-objects"
      num={s.num} label={s.label}
      title={s.title} sub={s.sub}
      copy={copy}
      nextLabel={s.nextLabel} nextHref="#screen-events"
      divider={{ variant: "chapter", label: "雨中客 · RAINY GUEST" }}
    >
      <ScreenWindow chrome={<BrowserChrome />}>
        <div className="sc04">
          <div className="sc04__bar">
            <button className="sc04__back">← 返回列表</button>
            <div className="sc04__title">{s.winTitle}<span className="sc04__caret">⌄</span></div>
            <div className="sc04__filters">
              <button>{s.filterStatus}<span className="sc04__caret">⌄</span></button>
              <button>{s.filterSort}<span className="sc04__caret">⌄</span></button>
              <button className="sc04__view"><span /><span /><span /><span /></button>
            </div>
          </div>

          <div className="sc04__grid">
            {s.cards.map((c, i) => (
              <article key={i} className={`sc04__card sc04__card--${c.level === "关键" ? "key" : c.level === "重要" ? "imp" : "bg"}`}>
                <header>
                  <h5>{c.name}</h5>
                  <span className={`sc04__tag sc04__tag--${c.level === "关键" ? "key" : c.level === "重要" ? "imp" : "bg"}`}>
                    {c.level}线索
                  </span>
                  <span className="sc04__bookmark" aria-hidden="true">▍</span>
                </header>
                <div className="sc04__art">
                  <ObjectGlyph kind={c.name} />
                </div>
                <dl>
                  <dt>持有人</dt><dd>{c.holder}</dd>
                  <dt>首次出现</dt><dd>{c.firstAt}</dd>
                  <dt>当前状态</dt><dd>{c.state}</dd>
                  <dt>关联人物</dt><dd>{c.related}</dd>
                  <dt>剧情作用</dt><dd>{c.role}</dd>
                </dl>
                <footer>
                  <span>线索状态</span>
                  <span className={`sc04__clue sc04__clue--${c.clue === "已发现" ? "done" : "part"}`}>
                    <span className="sc04__clue-dot" />{c.clue}
                  </span>
                </footer>
              </article>
            ))}
            <button className="sc04__add">
              <span aria-hidden="true">＋</span>
              <span className="sc04__add-h">添加物件</span>
              <span className="sc04__add-p">记录新的线索或旧物</span>
            </button>
          </div>

          <div className="sc04__trace">
            <h5>{s.traceHead}</h5>
            <div className="sc04__trace-row">
              <div className="sc04__trace-chip">
                <b>{s.traceFrom}</b>
                <small>{s.traceFromHint}</small>
              </div>
              <span className="sc04__trace-arrow">{s.traceArrow}</span>
              <div className="sc04__trace-chip sc04__trace-chip--person">
                <span className="sc04__trace-avatar" aria-hidden="true">
                  <svg viewBox="0 0 40 40">
                    <circle cx="20" cy="16" r="6" fill="#3A2412" opacity=".8"/>
                    <path d="M8 36c2-7 8-10 12-10s10 3 12 10" fill="#3A2412" opacity=".8"/>
                  </svg>
                </span>
                <b>{s.traceTo}</b>
                <small>{s.traceToHint}</small>
              </div>
            </div>
          </div>
        </div>
      </ScreenWindow>
    </ScreenShell>
  );
}

/* ════════════════════════════════════════════════════════════
   05 · EVENTS — turn fragments into events and foreshadowing
   ════════════════════════════════════════════════════════════ */
function Screen05Events({ copy }) {
  const s = copy.screens.events;
  return (
    <ScreenShell
      id="screen-events"
      num={s.num} label={s.label}
      title={s.title} sub={s.sub}
      copy={copy}
      nextLabel={s.nextLabel} nextHref="#screen-writing"
      divider={{ variant: "wave" }}
    >
      <ScreenWindow chrome={<BrowserChrome />}>
        <div className="sc05">
          <div className="sc05__bar">
            <h4>{s.winTitle}</h4>
            <div className="sc05__bar-right">
              <span className="sc05__view-lbl">{s.viewLabel}</span>
              <div className="sc05__seg">
                {s.views.map((v, i) => (
                  <button key={i} className={i === 0 ? "is-on" : ""}>{v}</button>
                ))}
              </div>
              <button className="sc05__filter">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="none"
                     stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
                  <path d="M4 6h16M7 12h10M10 18h4"/>
                </svg>
                {s.filter}
              </button>
            </div>
          </div>

          <h5 className="sc05__h">{s.tlHead}</h5>
          <p className="sc05__sub">{s.tlSub}</p>

          <div className="sc05__timeline">
            <span className="sc05__tl-line" />
            {s.timeline.map((e, i) => (
              <div key={i} className={`sc05__tl-item ${e.done ? "is-done" : "is-pending"}`}>
                <span className="sc05__tl-dot" />
                <div className="sc05__tl-card">
                  <div className="sc05__tl-head">
                    <span className="sc05__tl-num">{e.n}</span>
                    <span className="sc05__tl-title">{e.h}</span>
                  </div>
                  <p>{e.p}</p>
                  <span className="sc05__tl-ch">{e.ch}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="sc05__bottom">
            <div className="sc05__col">
              <h5>{s.foreshadowHead}</h5>
              <p className="sc05__sub">{s.foreshadowSub}</p>
              <ul className="sc05__list">
                {s.foreshadows.map((f, i) => (
                  <li key={i}>
                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none"
                         stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M6 4h12v18l-6-4-6 4z"/>
                    </svg>
                    <span>{f.t}</span>
                    <em>{f.ch}</em>
                  </li>
                ))}
              </ul>
            </div>

            <div className="sc05__col">
              <h5>{s.causalHead}</h5>
              <p className="sc05__sub">{s.causalSub}</p>
              <div className="sc05__causal">
                {s.causal.map((row, i) => (
                  <div key={i} className="sc05__causal-row">
                    {row.map((node, j) => (
                      <React.Fragment key={j}>
                        <span className="sc05__causal-node">{node}</span>
                        {j < row.length - 1 && <span className="sc05__causal-arrow">→</span>}
                      </React.Fragment>
                    ))}
                  </div>
                ))}
              </div>
            </div>

            <div className="sc05__col">
              <h5>{s.indexHead}</h5>
              <p className="sc05__sub">{s.indexSub}</p>
              <ul className="sc05__index">
                {s.index.map((c, i) => <li key={i}>{c}</li>)}
              </ul>
            </div>
          </div>
        </div>
      </ScreenWindow>
    </ScreenShell>
  );
}

/* ════════════════════════════════════════════════════════════
   06 · WRITING — all the structure exists so you can write
   ════════════════════════════════════════════════════════════ */
function Screen06Writing({ copy }) {
  const s = copy.screens.writing;
  return (
    <ScreenShell
      id="screen-writing"
      num={s.num} label={s.label}
      title={s.title} sub={s.sub}
      copy={copy}
    >
      <ScreenWindow chrome={<BrowserChrome />} className="bw-frame--wide">
        <div className="sc06">
          {/* Left: book + chapter list */}
          <aside className="sc06__left">
            <div className="sc06__book">
              <span>{s.bookSelect}</span>
              <span className="sc06__caret">⌄</span>
              <span className="sc06__gear" aria-hidden="true">⚙</span>
            </div>
            <div className="sc06__tabs">
              {s.tabs.map((t, i) => (
                <button key={i} className={i === 1 ? "is-on" : ""}>{t}</button>
              ))}
            </div>
            <ul className="sc06__chapters">
              {s.chapters.map((c, i) => (
                <li key={i} className={c.active ? "is-active" : ""}>
                  {c.active && <span className="sc06__pin" aria-hidden="true">›</span>}
                  {c.title}
                  {c.active && <span className="sc06__arrow" aria-hidden="true">›</span>}
                </li>
              ))}
            </ul>
            <button className="sc06__new">{s.newChapter}</button>
          </aside>

          {/* Middle: prose */}
          <article className="sc06__prose">
            <header>
              <h3>{s.proseTitle}</h3>
              <span className="sc06__words">{s.proseWords}</span>
              <span className="sc06__tools" aria-hidden="true">↺ ↻ ⋯</span>
            </header>
            <div className="sc06__body">
              {s.proseParas.map((p, i) => (
                <p key={i}>{p}{i === s.proseParas.length - 1 && <span className="sc01__caret" />}</p>
              ))}
            </div>
            <footer>
              <span>{s.statusBar.words}</span>
              <span>{s.statusBar.speed}</span>
              <span>· {s.statusBar.today}</span>
              <span>{s.statusBar.saved}</span>
              <span style={{ marginLeft: "auto" }}>{s.statusBar.auto}</span>
            </footer>
          </article>

          {/* Right: quick references */}
          <aside className="sc06__right">
            <h5>
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none"
                   stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
                <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/>
              </svg>
              {s.refHead}
            </h5>
            {s.refs.map((r, i) => (
              <div key={i} className="sc06__ref">
                <div className="sc06__ref-head">
                  <span className="sc06__ref-kind">{r.kind}：{r.title}</span>
                  {r.hasPortrait && <div className="sc06__ref-portrait"><CharacterSilhouette idx={0} /></div>}
                </div>
                <ul>
                  {r.lines.map((l, j) => <li key={j}>{l}</li>)}
                </ul>
              </div>
            ))}
          </aside>
        </div>
      </ScreenWindow>

      <div className="sc06__end">
        <div className="sc06__end-line">
          <span /><span className="sc06__end-cloud" aria-hidden="true">☁</span><span />
        </div>
        <h3 className="sc06__end-head">{s.endHead}</h3>
        <div className="sc06__end-cta">
          <a href="/app/" className="btn btn-primary">
            {s.endCtaPrimary}
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
                 stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
                 style={{ marginLeft: 6 }}>
              <path d="M20 6L9 17l-5-5"/>
            </svg>
          </a>
          <a href="/download/" className="btn btn-ghost">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
                 stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
                 style={{ marginRight: 8 }}>
              <path d="M12 3v12M6 11l6 6 6-6M5 21h14"/>
            </svg>
            {s.endCtaSecondary}
          </a>
        </div>
        <p className="sc06__end-note">{s.endNote}</p>
      </div>
    </ScreenShell>
  );
}

function ScreenFAQItem({ item, index, isOpen, onToggle }) {
  const buttonId = `faq-trigger-${index}`;
  const panelId = `faq-panel-${index}`;
  return (
    <div className={`faq-item${isOpen ? " is-open" : ""}`}>
      <button
        id={buttonId}
        className="faq-trigger"
        type="button"
        aria-expanded={isOpen}
        aria-controls={panelId}
        onClick={onToggle}
      >
        <span className="faq-question">{item.q}</span>
        <span className="plus" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </span>
      </button>
      <div
        id={panelId}
        className="faq-panel"
        role="region"
        aria-labelledby={buttonId}
        aria-hidden={!isOpen}
      >
        <div className="faq-panel-inner">
          <div className="ans">{item.a}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Screen04Objects, Screen05Events, Screen06Writing, ObjectGlyph,
  ScreenFAQItem, Screen08FAQ,
});

/* 07 FAQ - same shell, FAQ grid as body. */
function Screen08FAQ({ copy }) {
  const s = copy.screens.faq;
  const [openIndex, setOpenIndex] = React.useState(null);
  const toggle = (index) => setOpenIndex((current) => current === index ? null : index);
  return (
    <ScreenShell
      id="screen-faq"
      num={s.num} label={s.label}
      title={s.title} sub={s.sub}
      copy={copy}
    >
      <div className="sc08" id="faq">
        <div className="faq-grid">
          {[0, 1].map((column) => (
            <div className="faq-column" key={column}>
              {copy.faq.items.map((item, index) => (
                index % 2 === column && (
                  <ScreenFAQItem
                    key={index}
                    item={item}
                    index={index}
                    isOpen={openIndex === index}
                    onToggle={() => toggle(index)}
                  />
                )
              ))}
            </div>
          ))}
        </div>
      </div>
    </ScreenShell>
  );
}