// components-rest.jsx — Workflow, big Mockup (single image slot), Agent, CTA, FAQ, Footer

/* ───────────── Workflow ───────────── */
function FlowArrow() {
  return (
    <div className="flow-arrow">
      <svg viewBox="0 0 60 24" fill="none">
        <path d="M2 12 H 50" stroke="currentColor" strokeWidth="1.2" strokeDasharray="2 4" />
        <path d="M44 6 L 56 12 L 44 18" stroke="currentColor" strokeWidth="1.4"
              strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function WorkflowDemoArt({ kind, lang }) {
  if (kind === "write") {
    const sample = lang === "zh"
      ? "他从怀里摸出一个油纸包，里面是半块"
      : "He pulled a paper-wrapped half-cake from his ";
    const highlight = lang === "zh" ? "干饼" : "sleeve";
    const action = lang === "zh" ? "建为词条" : "Add to codex";
    return (
      <div className="wf-demo wf-demo--write">
        <div className="wf-demo__line">
          {sample}
          <span className="wf-demo__hi">{highlight}</span>
          <span className="wf-demo__caret" />
        </div>
        <div className="wf-demo__kbd">⌘ E · {action}</div>
      </div>
    );
  }
  if (kind === "codex") {
    return (
      <div className="wf-demo wf-demo--codex">
        <div className="wf-demo__head">· {lang === "zh" ? "新建 · 物件" : "New · Object"}</div>
        <div className="wf-demo__title">
          {lang === "zh" ? "苦竹棒 · 江远舟" : "Bamboo staff · Jiang"}
        </div>
        <div className="wf-demo__desc">
          {lang === "zh"
            ? "拇指粗的苦竹，经手工打磨。日常挑水砍柴用——但能承受兵刃撞击不折。"
            : "A polished bamboo staff. For carrying water and chopping wood — yet it does not break against steel."}
        </div>
        <div className="wf-demo__tags">
          {(lang === "zh" ? ["兵器", "代用品", "第 1 章"] : ["weapon", "stand-in", "ch.1"]).map((t, i) => (
            <span key={i} className="wf-demo__tag">{t}</span>
          ))}
        </div>
      </div>
    );
  }
  if (kind === "ref") {
    return (
      <div className="wf-demo wf-demo--ref">
        <div className="wf-demo__line">
          {lang === "zh" ? "他靠在墙边的 " : "He leaned the "}
          <span className="wf-demo__chip">
            <svg viewBox="0 0 12 12" width="9" height="9">
              <path d="M2 8l4-4 4 4M6 4v7" stroke="currentColor" strokeWidth="1.4" fill="none" />
            </svg>
            {lang === "zh" ? "@苦竹棒" : "@bamboo-staff"}
          </span>
          {lang === "zh" ? "，没有起身。" : " against the wall, and did not stand."}
        </div>
        <div className="wf-demo__rule" />
        <div className="wf-demo__small">
          @ · {lang === "zh" ? "正在调用 1 条设定卡" : "1 codex card referenced"}
        </div>
      </div>
    );
  }
  return null;
}

function WorkflowSection({ copy, lang }) {
  const steps = copy.workflow.steps;
  return (
    <section className="workflow" id="workflow">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">{copy.workflow.eyebrow}</span>
            <h2 className="h2">{copy.workflow.title}</h2>
            <p>{copy.workflow.kicker}</p>
          </div>
        </div>
        <div className="flow">
          <FlowStep step={steps[0]} num="01" lang={lang} />
          <FlowArrow />
          <FlowStep step={steps[1]} num="02" lang={lang} />
          <FlowArrow />
          <FlowStep step={steps[2]} num="03" lang={lang} />
        </div>
      </div>
    </section>
  );
}
function FlowStep({ step, num, lang }) {
  return (
    <div className="flow-step">
      <span className="step-num">{num}</span>
      <div className="step-tag">{step.tag}</div>
      <h3>{step.h}</h3>
      <p>{step.p}</p>
      <div className="demo"><WorkflowDemoArt kind={step.demo} lang={lang} /></div>
    </div>
  );
}

/* ───────────── BIG MOCKUP ───────────── */
function MockupSection({ copy, lang }) {
  return (
    <section className="mockup">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">{copy.mockup.eyebrow}</span>
            <h2 className="h2">{copy.mockup.title}</h2>
            <p>{copy.mockup.kicker}</p>
          </div>
        </div>

        <div className="mockup-frame">
          <div className="mockup-bar">
            <div className="dots"><i></i><i></i><i></i></div>
            <span className="crumb">
              {lang === "zh"
                ? "设定库 / 雨中客 / 卷一 / 第 1 章 · 破庙夜雨"
                : "Codex / Rainy Guest / Book I / Ch. 1 · Rain at the Temple"}
            </span>
          </div>
          <PicSlot
            src="uploads/desk.webp"
            variant="desk"
            label={lang === "zh" ? "完整三栏写作界面" : "Full three-panel writing desk"}
            hint={lang === "zh"
              ? "左侧栏（设定库导航）+ 中间正文（破庙夜雨）+ 右侧栏（江远舟人物详情）"
              : "Left codex nav + center prose + right character detail"}
            aspect="16/9"
            style={{ borderRadius: 0, border: "none" }}
          />
        </div>

        <div className="mockup-legend">
          {copy.mockup.pins.map((p, i) => (
            <div key={i} className="legend-item">
              <span className="legend-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="legend-text">{p.t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── AGENT SECTION ───────────── */
function AgentSection({ copy, lang }) {
  return (
    <section className="agent">
      <div className="shell">
        <div className="agent-grid">
          <div>
            <span className="eyebrow">{copy.agent.eyebrow}</span>
            <h2 className="h2" style={{ marginTop: 14 }}>{copy.agent.title}</h2>
            <p style={{ marginTop: 18, color: "var(--ink-mute)", fontSize: 16, lineHeight: 1.7, maxWidth: "44ch" }}>
              {copy.agent.kicker}
            </p>
            <ul style={{ marginTop: 24, paddingLeft: 0, listStyle: "none" }}>
              {copy.agent.bullets.map((b, i) => (
                <li key={i} style={{
                  display: "flex", gap: 14, padding: "10px 0",
                  borderBottom: "1px solid var(--rule)",
                  fontSize: 15, color: "var(--ink-2)",
                }}>
                  <span style={{
                    width: 6, height: 6, marginTop: 9, borderRadius: 50,
                    background: "var(--brick)", flexShrink: 0,
                  }}/>
                  {b}
                </li>
              ))}
            </ul>
          </div>
          <AgentChat copy={copy} lang={lang} />
        </div>
      </div>
    </section>
  );
}

function AgentChat({ copy, lang }) {
  return (
    <div className="agent-chat">
      {copy.agent.chat.map((c, i) => (
        <div key={i} className={"bubble " + (c.who === "user" ? "user" : "bot")}>
          {c.text}
          {c.refs && (
            <div style={{ marginTop: 8, display: "flex", gap: 6, flexWrap: "wrap" }}>
              {c.refs.map((r, j) => <span className="ref" key={j}>{r}</span>)}
            </div>
          )}
        </div>
      ))}
      <div className="agent-input">
        <svg className="icon" viewBox="0 0 24 24" style={{ width: 14, height: 14 }}>
          <path d="M12 3v18M3 12h18" />
        </svg>
        <span>{copy.agent.chatInput}</span>
        <span className="send">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </span>
      </div>
    </div>
  );
}

/* ───────────── DOWNLOAD CTA ───────────── */
function ReleaseGlyph({ os }) {
  // Minimal mono glyphs for each platform — drawn as text, not SVG icons.
  // Kept understated so the brand stays paper-and-ink, not vendor logos.
  const map = {
    Windows: "WIN",
    macOS:   "MAC",
    Linux:   "TUX",
  };
  return <span className="rel-glyph">{map[os] || os}</span>;
}

function ReleaseCard({ rel }) {
  return (
    <a className="rel-card" href={rel.href}>
      <div className="rel-card__top">
        <span className="rel-card__os">{rel.os}</span>
        <ReleaseGlyph os={rel.os} />
      </div>
      <div className="rel-card__name">{rel.name}</div>
      <div className="rel-card__foot">
        <span className="rel-card__size">{rel.size}</span>
        <span className="rel-card__ext">·{rel.ext}</span>
        <span className="rel-card__arrow" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
               stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 4v14M6 12l6 6 6-6" />
          </svg>
        </span>
      </div>
    </a>
  );
}

function DownloadCTA({ copy }) {
  return (
    <section className="cta-block" id="download">
      <div className="shell">
        <span className="eyebrow" style={{ justifyContent: "center" }}>{copy.cta.eyebrow}</span>
        <h2 className="h2">{copy.cta.title}</h2>
        <p>{copy.cta.kicker}</p>
        <div className="cta-row">
          <a href="/app/" className="btn btn-primary">{copy.cta.primary}</a>
          <a href="#" className="btn btn-ghost">{copy.cta.secondary}</a>
        </div>

        {copy.cta.releases && (
          <div className="rel-block">
            <div className="rel-block__head">
              <span className="rel-block__line" />
              <span className="rel-block__label">{copy.cta.releaseHead}</span>
              <span className="rel-block__line" />
            </div>
            <div className="rel-grid">
              {copy.cta.releases.map((r, i) => <ReleaseCard rel={r} key={i} />)}
            </div>
            <a className="rel-all" href={copy.cta.releaseAllHref}>
              {copy.cta.releaseAll}
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none"
                   stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </a>
          </div>
        )}

        <div className="platform-row">
          {copy.cta.platforms.map((p, i) => (
            <span key={i}>
              <svg className="icon" viewBox="0 0 24 24" style={{ width: 12, height: 12 }}>
                <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>
              </svg>
              {p}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── FAQ ───────────── */
function FAQ({ copy }) {
  return (
    <section className="faq" id="faq">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow">{copy.faq.eyebrow}</span>
            <h2 className="h2">{copy.faq.title}</h2>
          </div>
        </div>
        <div className="faq-grid">
          {copy.faq.items.map((it, i) => (
            <details className="faq-item" key={i}>
              <summary>
                {it.q}
                <span className="plus">
                  <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>
              </summary>
              <div className="ans">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────────── FOOTER ───────────── */
function FooterSocial({ name }) {
  // Tiny inline SVG for each social — no clunky boxed labels.
  const map = {
    "微信":   <path d="M9 11a5 5 0 1 1 0-2M16 14a4 4 0 1 1 0-2M8 11l-2 2 1-3M16 14l1 2-2-1"/>,
    "WeChat": <path d="M9 11a5 5 0 1 1 0-2M16 14a4 4 0 1 1 0-2M8 11l-2 2 1-3M16 14l1 2-2-1"/>,
    "微博":   <path d="M12 16a5 4 0 1 1 0-8 5 4 0 0 1 0 8zM17 8a3 2 0 0 1 0 3M19 7a5 4 0 0 1 0 6"/>,
    "Weibo":  <path d="M12 16a5 4 0 1 1 0-8 5 4 0 0 1 0 8zM17 8a3 2 0 0 1 0 3M19 7a5 4 0 0 1 0 6"/>,
    "X":      <path d="M5 5l14 14M19 5L5 19"/>,
    "GitHub": <path d="M12 4a8 8 0 0 0-2.5 15.6c.4.1.5-.2.5-.4v-1.5c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.2 1.9.9 2.4.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-3.9 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8a7.7 7.7 0 0 1 4 0c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.5.8 1.2.8 2.1 0 3-1.8 3.7-3.6 3.9.3.3.5.7.5 1.5v2.2c0 .2.1.5.5.4A8 8 0 0 0 12 4z"/>,
    "Gi":     <path d="M12 4a8 8 0 0 0-2.5 15.6c.4.1.5-.2.5-.4v-1.5c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.2 1.9.9 2.4.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-3.9 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8a7.7 7.7 0 0 1 4 0c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.5.8 1.2.8 2.1 0 3-1.8 3.7-3.6 3.9.3.3.5.7.5 1.5v2.2c0 .2.1.5.5.4A8 8 0 0 0 12 4z"/>,
  };
  return (
    <a className="foot-soc" href="#" aria-label={name}>
      <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
           stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        {map[name] || <circle cx="12" cy="12" r="6" />}
      </svg>
      <span>{name}</span>
    </a>
  );
}

function Footer({ copy }) {
  return (
    <footer className="foot">
      <div className="foot-flourish" aria-hidden="true">
        <svg viewBox="0 0 800 18" preserveAspectRatio="none">
          <path d="M 20 9 C 80 3, 160 15, 240 9 C 320 3, 400 15, 480 9 C 560 3, 640 15, 720 9 C 760 6, 780 9, 790 9"
                stroke="currentColor" strokeWidth="1" fill="none" strokeLinecap="round"/>
        </svg>
      </div>

      <div className="foot-shell">
        <section className="foot-lead">
          <a href="#screen-hero" className="foot-brand" aria-label={copy.brand.name}>
            <img className="foot-brand-seal" src="uploads/seal-bi.png" alt="" draggable="false" />
            <div className="foot-brand-text">
              <span className="foot-brand-name">{copy.brand.name}</span>
              <span className="foot-brand-en">{copy.brand.en}</span>
            </div>
          </a>
          <p className="foot-tagline">{copy.foot.tagline}</p>
          <div className="foot-quote">
            <span className="foot-quote-rule" />
            <em>{copy.foot.quote}</em>
            <span className="foot-quote-rule" />
          </div>
        </section>

        <section className="foot-cols">
          {copy.foot.cols.map((col, i) => (
            <div className="foot-col" key={i}>
              <h5>{col.title}</h5>
              <ul>
                {col.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}
              </ul>
            </div>
          ))}
          <div className="foot-col foot-col--social">
            <h5>{copy.foot.socialsLabel || "同行"}</h5>
            <div className="foot-soc-row">
              {copy.foot.socials.map((s, i) => <FooterSocial key={i} name={s} />)}
            </div>
          </div>
        </section>

        <section className="foot-bot">
          <span className="foot-bot-mark" aria-hidden="true">·</span>
          <span className="foot-bot-legal">{copy.foot.legal}</span>
          {copy.foot.icp && (
            <a className="foot-bot-icp" href={copy.foot.icpHref || "https://beian.miit.gov.cn/"} target="_blank" rel="noreferrer">
              {copy.foot.icp}
            </a>
          )}
          {copy.foot.policeRecord && (
            <a className="foot-bot-police" href={copy.foot.policeRecordHref || "#"} target="_blank" rel="noreferrer">
              {copy.foot.policeRecord}
            </a>
          )}
          <span className="foot-bot-sep" aria-hidden="true">／</span>
          <span className="foot-bot-ver">{copy.foot.version || "笔随 · Novel Studio · v1.0.4"}</span>
        </section>
      </div>
    </footer>
  );
}

Object.assign(window, {
  FlowArrow, WorkflowSection, FlowStep, WorkflowDemoArt,
  MockupSection,
  AgentSection, AgentChat,
  DownloadCTA, ReleaseCard, ReleaseGlyph, FAQ, Footer,
});