/* Page components — Home, Security, Servers, Documentation */

const { useState, useMemo } = React;

/* ---------- shared ---------- */
const Section = ({ id, title, sub, children, kicker, className = "" }) => (
  <section
    id={id}
    className={"relative mx-auto w-full max-w-6xl px-5 sm:px-8 py-14 sm:py-20 " + className}
    style={{ scrollMarginTop: "88px" }}
  >
    {kicker && (
      <div
        className="mb-3 text-[11px] uppercase"
        style={{ fontFamily: "var(--font-mono)", color: "var(--text-3)", letterSpacing: "0.4em" }}
      >
        {kicker}
      </div>
    )}
    {title && (
      <h2
        className="mb-4 text-3xl sm:text-4xl md:text-5xl"
        style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 500, lineHeight: 1.1 }}
      >
        {title}
      </h2>
    )}
    {sub && (
      <p className="mb-10 max-w-2xl text-base sm:text-lg" style={{ color: "var(--text-2)", fontFamily: "var(--font-body)" }}>
        {sub}
      </p>
    )}
    {children}
  </section>
);

const Btn = ({ kind = "primary", as = "button", href, children, icon, ...rest }) => {
  const Comp = as;
  const base =
    "inline-flex items-center gap-2 px-5 py-3 text-[13px] uppercase tracking-[0.2em] transition-all duration-200 select-none";
  const styles =
    kind === "primary"
      ? {
          background: "var(--blood)",
          color: "#f5e7e7",
          border: "1px solid var(--blood-bright)",
          boxShadow: "0 0 0 0 rgba(139,0,0,0)",
        }
      : kind === "ghost"
      ? {
          background: "transparent",
          color: "var(--text)",
          border: "1px solid var(--border-strong)",
        }
      : {
          background: "var(--panel)",
          color: "var(--text)",
          border: "1px solid var(--border)",
        };
  return (
    <Comp
      href={href}
      className={base + " group"}
      style={{ ...styles, fontFamily: "var(--font-mono)" }}
      onMouseEnter={(e) => {
        if (kind === "primary") e.currentTarget.style.boxShadow = "0 0 24px 0 rgba(139,0,0,0.55)";
        if (kind === "ghost") {
          e.currentTarget.style.borderColor = "var(--blood)";
          e.currentTarget.style.color = "#fff";
        }
      }}
      onMouseLeave={(e) => {
        if (kind === "primary") e.currentTarget.style.boxShadow = "0 0 0 0 rgba(139,0,0,0)";
        if (kind === "ghost") {
          e.currentTarget.style.borderColor = "var(--border-strong)";
          e.currentTarget.style.color = "var(--text)";
        }
      }}
      {...rest}
    >
      {icon}
      <span>{children}</span>
    </Comp>
  );
};

const Card = ({ children, className = "", hoverable = true }) => {
  const [hov, setHov] = useState(false);
  return (
    <div
      onMouseEnter={() => hoverable && setHov(true)}
      onMouseLeave={() => hoverable && setHov(false)}
      className={"rounded-sm transition-all duration-300 " + className}
      style={{
        background: "var(--panel)",
        border: "1px solid",
        borderColor: hov ? "var(--blood-deep)" : "var(--border)",
        boxShadow: hov ? "0 0 0 1px rgba(139,0,0,0.18) inset" : "none",
      }}
    >
      {children}
    </div>
  );
};

/* ---------- HOME ---------- */

const StackTable = ({ t }) => {
  const [open, setOpen] = useState(false);
  return (
    <Card hoverable={false} className="overflow-hidden">
      <button
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center justify-between px-5 py-4 text-left transition-colors"
        style={{ background: "transparent", color: "var(--text)" }}
        onMouseEnter={(e) => (e.currentTarget.style.background = "var(--panel-2, rgba(255,255,255,0.02))")}
        onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
        aria-expanded={open}
      >
        <span className="flex items-center gap-3">
          <span
            className="text-[11px] uppercase"
            style={{ fontFamily: "var(--font-mono)", color: "var(--text-3)", letterSpacing: "0.3em" }}
          >
            {t.home.stack.length} {t.home.stackCols.component.toLowerCase()}
          </span>
          <span className="text-sm sm:text-base" style={{ color: "var(--text-2)", fontFamily: "var(--font-mono)" }}>
            {open ? "—" : "+"} {open ? (t.home.collapse || "свернуть") : (t.home.expand || "развернуть")}
          </span>
        </span>
        <span
          aria-hidden="true"
          style={{
            display: "inline-block",
            transition: "transform 200ms ease",
            transform: open ? "rotate(180deg)" : "rotate(0deg)",
            color: "var(--blood-bright)",
            fontFamily: "var(--font-mono)",
          }}
        >
          ▾
        </span>
      </button>
      <div
        style={{
          display: "grid",
          gridTemplateRows: open ? "1fr" : "0fr",
          transition: "grid-template-rows 260ms ease",
        }}
      >
        <div style={{ overflow: "hidden" }}>
          <div
            className="grid grid-cols-12 px-5 py-3 text-[11px] uppercase tracking-[0.2em]"
            style={{ borderTop: "1px solid var(--border)", color: "var(--text-3)", fontFamily: "var(--font-mono)" }}
          >
            <div className="col-span-4">{t.home.stackCols.component}</div>
            <div className="col-span-4">{t.home.stackCols.tech}</div>
            <div className="col-span-4">{t.home.stackCols.purpose}</div>
          </div>
          {t.home.stack.map((row, i) => (
            <div
              key={i}
              className="grid grid-cols-12 gap-3 items-center px-5 py-3.5"
              style={{ borderTop: "1px solid var(--border)" }}
            >
              <div className="col-span-12 sm:col-span-4 text-sm" style={{ color: "var(--text)", fontFamily: "var(--font-display)", fontWeight: 600 }}>
                {row[0]}
              </div>
              <div className="col-span-12 sm:col-span-4 text-sm" style={{ color: "var(--text)", fontFamily: "var(--font-mono)" }}>
                {row[1]}
              </div>
              <div className="col-span-12 sm:col-span-4 text-sm" style={{ color: "var(--text-2)" }}>
                {row[2]}
              </div>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
};

const HomePage = ({ t, lang, onGo, theme, showHand = true, bannerSrc = null }) => {
  const [tab, setTab] = useState("win");
  const [open, setOpen] = useState(false);
  const art = window.ARTIFACTS[tab];
  const verifyCmd = window.VERIFY_CMDS[tab];

  // Live status of FEAR servers — polled every 30s from /api/status.json
  const [statusMap, setStatusMap] = useState({}); // id -> { status, ping_ms }
  useEffect(() => {
    let cancelled = false;
    const fetchStatus = async () => {
      try {
        const r = await fetch("/api/status.json", { cache: "no-store" });
        if (!r.ok) return;
        const data = await r.json();
        if (cancelled) return;
        const map = {};
        for (const s of (data.servers || [])) map[s.id] = s;
        setStatusMap(map);
      } catch (e) { /* ignore — show as checking */ }
    };
    fetchStatus();
    const id = setInterval(fetchStatus, 30000);
    return () => { cancelled = true; clearInterval(id); };
  }, []);

  const overallOk = window.SERVERS.some((s) => statusMap[s.id]?.status === "ok");
  return (
    <main>
      {/* Hero — server status pinned top-left of the page, banner centered */}
      <div className="relative mx-auto w-full max-w-7xl px-3 sm:px-6 pt-3 sm:pt-4">
        {/* Server status — anchored top-left, just under the header */}
        <div
          className="sm:absolute sm:left-1 sm:top-3 sm:z-20 max-w-full sm:max-w-sm sm:w-[300px] mx-auto sm:mx-0 mb-4 sm:mb-0"
          style={{
            background: "rgba(26, 39, 51, 0.85)",
            border: "1px solid var(--border)",
            borderRadius: "2px",
            backdropFilter: "blur(6px)",
          }}
        >
          <div
            className="flex items-center justify-between px-3.5 py-2 border-b"
            style={{ borderColor: "var(--border)" }}
          >
            <div
              className="text-[10px] uppercase tracking-[0.3em]"
              style={{ fontFamily: "var(--font-mono)", color: "var(--text-3)" }}
            >
              {t.home.statusTitle}
            </div>
            <span className="relative flex h-2 w-2">
              <span
                className="absolute inline-flex h-full w-full animate-ping rounded-full"
                style={{ background: overallOk ? "var(--ok)" : "var(--err, #b91c1c)", opacity: 0.55 }}
              />
              <span
                className="relative inline-flex h-2 w-2 rounded-full"
                style={{ background: overallOk ? "var(--ok)" : "var(--err, #b91c1c)" }}
              />
            </span>
          </div>
          {window.SERVERS.map((s, i) => {
            const live = statusMap[s.id];
            const isOk = live?.status === "ok";
            const isOff = live && live.status !== "ok";
            const dotColor = isOk ? "var(--ok)" : isOff ? "var(--err, #b91c1c)" : "var(--text-3)";
            const labelColor = dotColor;
            const label = isOk ? t.home.online : isOff ? t.home.offline : t.home.checking;
            const subLine = isOk && live.ping_ms != null
              ? `ping · ${live.ping_ms} ms`
              : (s.host ? s.host : "");
            return (
              <div
                key={s.id}
                className="flex items-center justify-between px-3.5 py-2"
                style={{ borderTop: i ? "1px solid var(--border)" : "none" }}
              >
                <div className="min-w-0 flex-1">
                  <div
                    className="text-[12px] truncate"
                    style={{ color: "var(--text)", fontFamily: "var(--font-display)" }}
                  >
                    {lang === "ru" ? s.regionRu : s.regionEn}
                  </div>
                  <div
                    className="text-[9px] uppercase tracking-[0.2em]"
                    style={{ color: "var(--text-3)", fontFamily: "var(--font-mono)" }}
                  >
                    {subLine}
                  </div>
                </div>
                <div
                  className="flex items-center gap-1.5 text-[9px] uppercase tracking-[0.25em]"
                  style={{ color: labelColor, fontFamily: "var(--font-mono)" }}
                >
                  <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: dotColor }}/>
                  {label}
                </div>
              </div>
            );
          })}
        </div>

        {/* Banner — centered, smaller */}
        <div className="relative">
          <window.HeroArt variant={theme} showHand={showHand} bannerSrc={bannerSrc} />
        </div>

        <div className="mx-auto -mt-2 sm:-mt-3 max-w-3xl px-3 text-center">
          <p
            className="mt-4 text-xl sm:text-2xl md:text-3xl italic"
            style={{ fontFamily: "var(--font-display)", color: "#cfcfd4", fontWeight: 400 }}
          >
            {t.hero.slogan}
          </p>
          <p className="mx-auto mt-5 max-w-xl text-sm sm:text-base" style={{ color: "var(--text-2)" }}>
            {t.hero.sub}
          </p>
          <div className="mt-7 flex flex-wrap items-center justify-center gap-3">
            <Btn kind="primary" icon={<window.Ic.Download size={16}/>} onClick={() => onGo("home", "download")}>
              {t.hero.download}
            </Btn>
            <Btn
              kind="ghost"
              as="a"
              href="https://github.com/shchuchkin-pkims/fear"
              target="_blank"
              rel="noreferrer"
              icon={<window.Ic.Github size={16}/>}
            >
              {t.hero.github}
            </Btn>
          </div>
        </div>
      </div>

      {/* What */}
      <Section id="what" title={t.home.whatTitle}>
        <div
          className="max-w-5xl text-lg sm:text-xl leading-relaxed space-y-5"
          style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 400, textAlign: "justify", textWrap: "pretty", hyphens: "none" }}
        >
          {t.home.whatBody.split(/\n\n+/).map((para, i) => (
            <p key={i}>{para}</p>
          ))}
        </div>
      </Section>

      {/* Features */}
      <Section id="features" title={t.home.featuresTitle}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {t.home.features.map((f, i) => {
            const Icon = [window.Ic.Lock, window.Ic.Network, window.Ic.Brace][i];
            return (
              <Card key={i} className="p-6">
                <div style={{ color: "var(--blood-bright)" }} className="mb-4">
                  <Icon size={26}/>
                </div>
                <h3 className="text-xl mb-2" style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 600 }}>
                  {f.t}
                </h3>
                <p style={{ color: "var(--text-2)" }} className="text-sm leading-relaxed">
                  {f.d}
                </p>
              </Card>
            );
          })}
        </div>
      </Section>

      {/* Status section removed from main flow — lives as overlay in the hero. */}

      {/* Tech stack */}
      <Section id="stack" title={t.home.stackTitle}>
        <StackTable t={t}/>
      </Section>

      {/* Download */}
      <Section id="download" title={t.home.downloadTitle} sub={t.home.downloadSub}>
        <Card hoverable={false} className="p-5 sm:p-7">
          <div className="flex flex-wrap gap-2 mb-5 border-b" style={{ borderColor: "var(--border)" }}>
            {Object.entries(t.home.tabs).map(([k, v]) => (
              <button
                key={k}
                onClick={() => setTab(k)}
                className="relative px-4 py-2.5 text-[12px] uppercase tracking-[0.2em] transition-colors"
                style={{
                  fontFamily: "var(--font-mono)",
                  color: tab === k ? "var(--text)" : "var(--text-3)",
                }}
                aria-current={tab === k}
              >
                {v}
                {tab === k && (
                  <span
                    className="absolute -bottom-px left-0 right-0 h-px"
                    style={{ background: "var(--blood-bright)" }}
                  />
                )}
              </button>
            ))}
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start">
            <div className="lg:col-span-2">
              <div
                className="text-[11px] uppercase mb-1.5 tracking-[0.25em]"
                style={{ color: "var(--text-3)", fontFamily: "var(--font-mono)" }}
              >
                Filename
              </div>
              <div
                className="text-base mb-4"
                style={{ color: "var(--text)", fontFamily: "var(--font-mono)", wordBreak: "break-all" }}
              >
                {art.file}
              </div>
              <div
                className="text-[11px] uppercase mb-1.5 tracking-[0.25em]"
                style={{ color: "var(--text-3)", fontFamily: "var(--font-mono)" }}
              >
                {t.home.sha256}
              </div>
              {art.sha
                ? <window.CopyBlock value={art.sha} label={t.home.copy} copied={t.home.copied} />
                : <div style={{ color: "var(--text-3)", fontFamily: "var(--font-mono)", fontSize: 12 }}>
                    {art.note || "—"}
                  </div>}
            </div>
            <div className="flex flex-col gap-2.5">
              <Btn
                kind="primary"
                as="a"
                href={art.url}
                target="_blank"
                rel="noopener"
                icon={<window.Ic.Download size={16}/>}
              >
                {art.file.split(".").pop().toUpperCase()}
              </Btn>
            </div>
          </div>

          <button
            onClick={() => setOpen((v) => !v)}
            className="mt-6 flex items-center gap-2 text-[12px] uppercase tracking-[0.2em]"
            style={{ color: "var(--text-2)", fontFamily: "var(--font-mono)" }}
          >
            <span style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 200ms" }}>
              <window.Ic.Chevron size={16}/>
            </span>
            {t.home.verifyHow}
          </button>
          {open && (
            <div className="mt-3">
              <window.CopyBlock value={verifyCmd} label={t.home.copy} copied={t.home.copied} multiline />
            </div>
          )}

          {/* Cross-link to the self-host quick-start. Distinct from the per-platform
              client downloads above — Docker is the server side, lives in Servers. */}
          <div
            className="mt-6 pt-4 flex items-center gap-2 flex-wrap text-[12px]"
            style={{
              borderTop: "1px solid var(--border)",
              color: "var(--text-3)",
              fontFamily: "var(--font-mono)",
            }}
          >
            <span>{t.home.selfHostHint}</span>
            <a
              href="#srv-intro"
              onClick={(e) => { e.preventDefault(); onGo && onGo("servers"); }}
              style={{ color: "var(--accent, #5288C1)", textDecoration: "underline" }}
            >
              {t.home.selfHostLink}
            </a>
          </div>
        </Card>
      </Section>
    </main>
  );
};

/* ---------- SECURITY ---------- */
const SecurityPage = ({ t }) => {
  const [open, setOpen] = useState(0);
  return (
    <main>
      <Section id="sec-intro" title={t.sec.title} sub={t.sec.intro}/>

      <Section id="crypto" title={t.sec.cryptoTitle}>
        <Card hoverable={false} className="overflow-hidden">
          {t.sec.crypto.map(([k, v], i) => (
            <div
              key={k}
              className="grid grid-cols-12 gap-3 items-center px-5 sm:px-7 py-4"
              style={{ borderTop: i ? "1px solid var(--border)" : "none" }}
            >
              <div className="col-span-5 sm:col-span-4 text-sm" style={{ color: "var(--text-2)" }}>
                {k}
              </div>
              <div
                className="col-span-7 sm:col-span-8 text-sm sm:text-right"
                style={{ color: "var(--text)", fontFamily: "var(--font-mono)" }}
              >
                {v}
              </div>
            </div>
          ))}
        </Card>
      </Section>

      <div className="mx-auto w-full max-w-6xl px-5 sm:px-8 grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
        <Card hoverable={false} className="p-6">
          <h3 className="text-2xl mb-4 flex items-center gap-2" style={{ fontFamily: "var(--font-display)", color: "var(--text)" }}>
            <span style={{ color: "var(--ok)" }}><window.Ic.Check size={20}/></span>
            {t.sec.noSeeTitle}
          </h3>
          <ul className="space-y-2.5">
            {t.sec.noSee.map((x, i) => (
              <li key={i} className="flex items-start gap-2.5 text-sm" style={{ color: "var(--text-2)" }}>
                <span className="mt-0.5" style={{ color: "var(--ok)" }}><window.Ic.Check size={14}/></span>
                {x}
              </li>
            ))}
          </ul>
        </Card>
        <Card hoverable={false} className="p-6">
          <h3 className="text-2xl mb-4 flex items-center gap-2" style={{ fontFamily: "var(--font-display)", color: "var(--text)" }}>
            <span style={{ color: "var(--warn)" }}><window.Ic.Eye size={20}/></span>
            {t.sec.seeTitle}
          </h3>
          <ul className="space-y-2.5">
            {t.sec.see.map((x, i) => (
              <li key={i} className="flex items-start gap-2.5 text-sm" style={{ color: "var(--text-2)" }}>
                <span className="mt-0.5" style={{ color: "var(--warn)" }}><window.Ic.Alert size={14}/></span>
                {x}
              </li>
            ))}
          </ul>
        </Card>
      </div>

      <Section id="threat" title={t.sec.threatTitle}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
          <Card hoverable={false} className="p-6" >
            <div className="text-[11px] uppercase mb-3 tracking-[0.3em]" style={{ color: "var(--ok)", fontFamily: "var(--font-mono)" }}>
              {t.sec.defendTitle}
            </div>
            <ul className="space-y-2.5">
              {t.sec.defend.map((x, i) => (
                <li key={i} className="text-sm flex gap-2" style={{ color: "var(--text)" }}>
                  <span style={{ color: "var(--ok)" }}>＋</span>{x}
                </li>
              ))}
            </ul>
          </Card>
          <Card hoverable={false} className="p-6" >
            <div className="text-[11px] uppercase mb-3 tracking-[0.3em]" style={{ color: "var(--blood-bright)", fontFamily: "var(--font-mono)" }}>
              {t.sec.noDefendTitle}
            </div>
            <ul className="space-y-2.5">
              {t.sec.noDefend.map((x, i) => (
                <li key={i} className="text-sm flex gap-2" style={{ color: "var(--text)" }}>
                  <span style={{ color: "var(--blood-bright)" }}>－</span>{x}
                </li>
              ))}
            </ul>
          </Card>
        </div>
      </Section>

      <Section id="known" title={t.sec.knownTitle}>
        <div className="space-y-2">
          {t.sec.known.map((k, i) => {
            const isOpen = open === i;
            return (
              <Card key={i} hoverable={false} className="overflow-hidden">
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="w-full flex items-center gap-3 px-5 py-4 text-left"
                  aria-expanded={isOpen}
                >
                  <span
                    className="text-[10px] uppercase tracking-[0.2em] px-2 py-0.5 border"
                    style={{
                      fontFamily: "var(--font-mono)",
                      borderColor: k.s === "open" ? "var(--blood)" : "var(--border)",
                      color: k.s === "open" ? "var(--blood-bright)" : "var(--ok)",
                    }}
                  >
                    {k.s}
                  </span>
                  <span className="flex-1 text-base" style={{ color: "var(--text)", fontFamily: "var(--font-display)" }}>
                    {k.t}
                  </span>
                  <span style={{ color: "var(--text-3)", transform: isOpen ? "rotate(180deg)" : "none", transition: "transform 200ms" }}>
                    <window.Ic.Chevron size={16}/>
                  </span>
                </button>
                {isOpen && (
                  <div className="px-5 pb-5 pt-1 border-t" style={{ borderColor: "var(--border)" }}>
                    <p className="text-sm mb-3 mt-3" style={{ color: "var(--text-2)" }}>{k.d}</p>
                    <div
                      className="text-[11px] uppercase mb-1.5 tracking-[0.25em]"
                      style={{ color: "var(--text-3)", fontFamily: "var(--font-mono)" }}
                    >
                      Workaround
                    </div>
                    <p className="text-sm" style={{ color: "var(--text)" }}>{k.w}</p>
                  </div>
                )}
              </Card>
            );
          })}
        </div>
      </Section>
    </main>
  );
};

/* ---------- SERVERS ---------- */
const ServersPage = ({ t }) => {
  return (
    <main>
      <Section id="srv-intro" title={t.srv.title}>
        <div
          className="border-l-2 px-5 py-4 text-sm sm:text-base"
          style={{
            background: "rgba(74,4,4,0.35)",
            borderColor: "var(--blood)",
            color: "var(--text)",
            fontFamily: "var(--font-display)",
          }}
        >
          <div className="flex items-start gap-3">
            <span style={{ color: "var(--blood-bright)" }} className="mt-0.5"><window.Ic.Alert size={18}/></span>
            <span>{t.srv.warn}</span>
          </div>
        </div>
      </Section>

      <Section id="pick" title={t.srv.pickTitle}>
        <ol className="space-y-3">
          {t.srv.pick.map((x, i) => (
            <li key={i} className="flex gap-4">
              <span
                className="shrink-0 text-[11px] tracking-[0.2em]"
                style={{ color: "var(--blood-bright)", fontFamily: "var(--font-mono)" }}
              >
                {String(i + 1).padStart(2, "0")}
              </span>
              <span style={{ color: "var(--text)" }}>{x}</span>
            </li>
          ))}
        </ol>
      </Section>

      <div className="mx-auto w-full max-w-6xl px-5 sm:px-8 grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
        <Card hoverable={false} className="p-6">
          <h3 className="text-xl mb-3" style={{ fontFamily: "var(--font-display)", color: "var(--text)" }}>
            {t.srv.storedTitle}
          </h3>
          <ul className="space-y-2 text-sm" style={{ color: "var(--text-2)" }}>
            {t.srv.stored.map((x, i) => (
              <li key={i}>· {x}</li>
            ))}
          </ul>
        </Card>
        <Card hoverable={false} className="p-6">
          <h3 className="text-xl mb-3" style={{ fontFamily: "var(--font-display)", color: "var(--text)" }}>
            {t.srv.offTitle}
          </h3>
          <p className="text-sm" style={{ color: "var(--text-2)" }}>{t.srv.offBody}</p>
          <div className="h-px my-4" style={{ background: "var(--border)" }}/>
          <h3 className="text-xl mb-3" style={{ fontFamily: "var(--font-display)", color: "var(--text)" }}>
            {t.srv.fallbackTitle}
          </h3>
          <p className="text-sm" style={{ color: "var(--text-2)" }}>{t.srv.fallback}</p>
        </Card>
      </div>

      <Section id="quickstart" title={t.srv.qsTitle} sub={t.srv.qsSub}>
        {/* Requirements — not a numbered step, just a prerequisite list. */}
        {t.srv.qsRequirements && (
          <div
            className="mb-6 p-5 rounded-sm"
            style={{ background: "var(--panel)", border: "1px solid var(--border)" }}
          >
            <h4
              className="text-base mb-2"
              style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 600 }}
            >
              {t.srv.qsRequirementsTitle}
            </h4>
            <ul className="space-y-1.5 text-sm" style={{ color: "var(--text-2)" }}>
              {t.srv.qsRequirements.map((r, i) => (
                <li key={i}>· {r}</li>
              ))}
            </ul>
          </div>
        )}

        {/* Numbered steps — install + run + verify. */}
        <ol className="space-y-5">
          {t.srv.steps.map((s, i) => (
            <li key={i} className="grid grid-cols-12 gap-4 sm:gap-6">
              <div className="col-span-12 sm:col-span-2">
                <div
                  className="text-[11px] uppercase tracking-[0.25em]"
                  style={{ color: "var(--text-3)", fontFamily: "var(--font-mono)" }}
                >
                  {t.srv.step}
                </div>
                <div
                  className="text-3xl sm:text-4xl"
                  style={{ fontFamily: "var(--font-display)", color: "var(--blood-bright)", fontWeight: 600 }}
                >
                  {String(i + 1).padStart(2, "0")}
                </div>
              </div>
              <div className="col-span-12 sm:col-span-10">
                <h4
                  className="text-xl mb-1"
                  style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 600 }}
                >
                  {s.t}
                </h4>
                <p className="text-sm mb-3" style={{ color: "var(--text-2)" }}>{s.d}</p>
                {s.code && (
                  <window.CopyBlock value={s.code} multiline />
                )}
              </div>
            </li>
          ))}
        </ol>

        {/* "Next" — operational topics that aren't part of the launch sequence. */}
        {t.srv.qsAfter && (
          <div className="mt-10">
            <h3
              className="text-2xl mb-4"
              style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 600 }}
            >
              {t.srv.qsAfterTitle}
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {t.srv.qsAfter.map((it, i) => (
                <div
                  key={i}
                  className="p-5 rounded-sm"
                  style={{ background: "var(--panel)", border: "1px solid var(--border)" }}
                >
                  <h4
                    className="text-lg mb-2"
                    style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 600 }}
                  >
                    {it.t}
                  </h4>
                  <p className="text-sm mb-3" style={{ color: "var(--text-2)" }}>{it.d}</p>
                  {it.code && (
                    <window.CopyBlock value={it.code} multiline />
                  )}
                </div>
              ))}
            </div>
          </div>
        )}
      </Section>
    </main>
  );
};

/* ---------- DOCS ---------- */
const DocsPage = ({ t }) => (
  <main>
    <Section id="doc-intro" title={t.doc.title} sub={t.doc.intro}>
      <div
        className="rounded-sm p-7 sm:p-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-5"
        style={{
          background: "linear-gradient(135deg, var(--panel) 0%, rgba(74,4,4,0.3) 100%)",
          border: "1px solid var(--border)",
        }}
      >
        <div>
          <div
            className="text-[11px] uppercase mb-2 tracking-[0.3em]"
            style={{ color: "var(--text-3)", fontFamily: "var(--font-mono)" }}
          >
            github.com/shchuchkin-pkims/fear/wiki
          </div>
          <h3
            className="text-2xl sm:text-3xl"
            style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 500 }}
          >
            {t.doc.intro}
          </h3>
        </div>
        <Btn
          kind="primary"
          as="a"
          href="https://github.com/shchuchkin-pkims/fear/wiki"
          target="_blank"
          rel="noreferrer"
          icon={<window.Ic.Ext size={14}/>}
        >
          {t.doc.goto}
        </Btn>
      </div>
    </Section>

    <Section id="doc-list">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {t.doc.sections.map((s, i) => (
          <Card key={i} className="p-6 group cursor-pointer">
            <h3
              className="text-xl mb-2"
              style={{ fontFamily: "var(--font-display)", color: "var(--text)", fontWeight: 600 }}
            >
              {s.t}
            </h3>
            <p className="text-sm mb-4" style={{ color: "var(--text-2)" }}>{s.d}</p>
            <a
              href={s.href || "https://github.com/shchuchkin-pkims/fear/wiki"}
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center gap-2 text-[12px] uppercase tracking-[0.25em]"
              style={{ color: "var(--blood-bright)", fontFamily: "var(--font-mono)" }}
            >
              → {t.doc.readWiki} <window.Ic.Ext size={12}/>
            </a>
          </Card>
        ))}
      </div>
    </Section>
  </main>
);

window.HomePage = HomePage;
window.SecurityPage = SecurityPage;
window.ServersPage = ServersPage;
window.DocsPage = DocsPage;