// Final About / Methodology page (combined, per PRD section 4 + 6).
// Must include: publisher signal, source statuses, disclaimers, sister-atlas
// cross-links, and a short studio note.

function FinalAbout() {
  return (
    <div className="jca" style={{ background: "var(--washi)", color: "var(--sumi)", minHeight: "100%" }}>
      <SiteHeader dark={false} />

      {/* Breadcrumb */}
      <div style={{ padding: "20px 56px 0", maxWidth: 1180, margin: "0 auto" }}>
        <div className="row gap-3 mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>
          <a>HOME</a><span>/</span><span style={{ color: "var(--sumi)" }}>ABOUT &amp; METHODOLOGY</span>
        </div>
      </div>

      {/* Hero */}
      <section style={{ padding: "40px 56px 60px", maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "flex-start" }}>
        <div>
          <Eyebrow num="ABOUT 00">A note from the studio</Eyebrow>
          <h1 className="serif" style={{ fontSize: 84, lineHeight: 0.96, margin: "16px 0 18px", letterSpacing: "-0.02em", fontWeight: 400 }}>
            We list sources,<br/>not vibes.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.65, margin: 0, maxWidth: 620, color: "var(--sumi)", opacity: 0.85 }}>
            The Japanese Color Atlas is a Chroma Cathay project — a slow archive of 81 current source-aware Japanese pigments and the language that names them. Each record carries a source status: <em>measured</em>, <em>source-backed</em>, <em>attributed</em>, or <em>disputed</em>. We tell you which.
          </p>
        </div>
        <aside className="col" style={{ background: "var(--warm-paper)", border: "1px solid var(--paper-border)", padding: "20px 22px" }}>
          <div className="row" style={{ alignItems: "center", gap: 14, marginBottom: 14 }}>
            <Hanko char="朱" size={44} rotate={-3} />
            <div className="col" style={{ lineHeight: 1.3 }}>
              <span className="serif" style={{ fontSize: 17 }}>Chroma Cathay</span>
              <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--nezumi)" }}>PUBLISHER · STUDIO · EST. 2023</span>
            </div>
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--sumi)", margin: 0, opacity: 0.85 }}>
            Chroma Cathay publishes source-aware color atlases. Japanese Color Atlas is Volume II — sister to the Chinese Color Atlas, the Architecture Color Atlas, and the Photo Palette Extractor.
          </p>
          <div className="mon-rule" style={{ margin: "16px 0", color: "var(--nezumi)" }}>
            <span className="line"></span><span className="mon"></span><span className="line"></span>
          </div>
          <div className="row mono" style={{ justifyContent: "space-between", fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>
            <span>VOL. II · 002</span><span>SPRING · 2026</span>
          </div>
        </aside>
      </section>

      {/* ────────── METHODOLOGY · the 4 source statuses ────────── */}
      <section style={{ padding: "48px 56px 16px", maxWidth: 1180, margin: "0 auto", borderTop: "1px solid var(--paper-border)" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32 }}>
          <div className="col gap-2">
            <Eyebrow num="01">Methodology · 方法</Eyebrow>
            <h2 className="serif" style={{ fontSize: 40, margin: "8px 0 0", fontWeight: 400, letterSpacing: "-0.02em" }}>Four ways a color can be cited.</h2>
          </div>
          <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em" }}>READ FULL METHODOLOGY →</a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--paper-border)" }}>
          {[
            { tone: "matcha", num: "01", title: "Measured",        jp: "実測",       note: "Reserved for per-record spectrophotometer, conservation, or material-sample evidence. No record is promoted until that evidence is attached.", count: "future tier" },
            { tone: "indigo", num: "02", title: "Source-backed",   jp: "出典あり",   note: "Color name and usage supported by reliable textual, museum, dictionary, or historical source.",       count: "verified records" },
            { tone: "ink",    num: "03", title: "Attributed",      jp: "伝聞",       note: "Appears in modern traditional-color compilations but still needs deeper source verification.",          count: "review records" },
            { tone: "beni",   num: "04", title: "Disputed",        jp: "異説あり",   note: "Conflicting claims, unstable mapping, or known source uncertainty. Use with care.",                     count: "flagged records" },
          ].map((s, i, a) => (
            <article key={i} style={{ padding: "26px 24px 24px", borderRight: i < a.length - 1 ? "1px solid var(--paper-border)" : "none", display: "flex", flexDirection: "column", gap: 14, minHeight: 280 }}>
              <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                <span className="cat-num">Nº {s.num}</span>
                <Badge tone={s.tone} dot>{s.title.toUpperCase()}</Badge>
              </div>
              <div className="col gap-1">
                <span className="serif" style={{ fontSize: 28, lineHeight: 1, marginTop: 8 }}>{s.title}</span>
                <span style={{ fontSize: 13, color: "var(--nezumi)", fontStyle: "italic" }} className="serif">{s.jp}</span>
              </div>
              <p style={{ fontSize: 12.5, lineHeight: 1.6, color: "var(--sumi)", margin: 0, opacity: 0.88 }}>{s.note}</p>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)", marginTop: "auto" }}>{s.count.toUpperCase()}</span>
            </article>
          ))}
        </div>
      </section>

      {/* ────────── Disclaimer pull ────────── */}
      <section style={{ padding: "48px 56px", maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ background: "var(--sumi)", color: "var(--washi)", padding: "44px 48px", position: "relative", overflow: "hidden" }} className="ink-tex">
          <div style={{ position: "absolute", right: -40, top: -80, fontFamily: "var(--serif)", fontSize: 360, lineHeight: 0.8, color: "rgba(244,239,230,0.04)" }}>注</div>
          <Eyebrow color="rgba(244,239,230,0.62)">Required disclaimer</Eyebrow>
          <p className="serif" style={{ fontSize: 30, lineHeight: 1.45, margin: "18px 0 0", maxWidth: 920, fontWeight: 400, letterSpacing: "-0.01em" }}>
            Traditional Japanese color names do not have one universal modern HEX value. The digital colors in this atlas are design approximations — based on cited sources, modern references, and Chroma Cathay's source-status review. Measured records require explicit per-record physical-sample evidence.
          </p>
          <div className="row" style={{ marginTop: 28, gap: 16, alignItems: "center" }}>
            <Hanko char="注" size={36} rotate={-3} />
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "rgba(244,239,230,0.6)" }}>POSTED ON EVERY METHODOLOGY · RESOURCE · COLOR PAGE</span>
          </div>
        </div>
      </section>

      {/* ────────── Ecosystem ────────── */}
      <section style={{ padding: "32px 56px 56px", maxWidth: 1180, margin: "0 auto" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 28 }}>
          <div>
            <Eyebrow num="02">Ecosystem · 系列</Eyebrow>
            <h2 className="serif" style={{ fontSize: 40, margin: "10px 0 0", fontWeight: 400, letterSpacing: "-0.02em" }}>Part of Chroma Cathay.</h2>
            <p style={{ fontSize: 14, color: "var(--nezumi)", lineHeight: 1.6, margin: "10px 0 0", maxWidth: 540 }}>
              Each atlas stands on its own. Chinese Color Atlas is the flagship; Japanese Color Atlas is its sister, not its child.
            </p>
          </div>
        </div>

        <div className="col" style={{ border: "1px solid var(--paper-border)" }}>
          {[
            { title: "Chinese Color Atlas",       jp: "中国色譜",    role: "Flagship sibling",        stat: "384 colors · methodology precedent", url: "chromacathay.cn", current: false },
            { title: "Japanese Color Atlas",      jp: "日本色譜",    role: "You are here",            stat: "81 records · Vol. II / 002 / 2026",    url: "chromacathay.jp", current: true  },
            { title: "Architecture Color Atlas",  jp: "建築色譜",    role: "Live sister atlas",       stat: "240 surfaces · live",                  url: "chromacathay.archi", current: false },
            { title: "Photo Palette Extractor",   jp: "写真調色",    role: "Shared tool surface",     stat: "Cross-atlas tool",                     url: "chromacathay.tools", current: false },
          ].map((row, i, arr) => (
            <a key={i} className="row" style={{
              padding: "20px 24px", justifyContent: "space-between", alignItems: "center",
              borderTop: i ? "1px solid var(--paper-border)" : "none",
              background: row.current ? "rgba(27,27,27,0.04)" : "transparent",
            }}>
              <div className="row gap-4" style={{ alignItems: "center" }}>
                <span style={{ width: 36, height: 36, background: row.current ? "var(--beni)" : "transparent", color: row.current ? "var(--washi)" : "var(--sumi)", border: "1px solid var(--paper-border-strong)", display: "flex", alignItems: "center", justifyContent: "center" }} className="serif">
                  {row.current ? "●" : (i === 0 ? "中" : i === 2 ? "建" : "調")}
                </span>
                <div className="col" style={{ lineHeight: 1.3 }}>
                  <span className="serif" style={{ fontSize: 19 }}>{row.title} <span style={{ color: "var(--nezumi)", fontSize: 14, marginLeft: 6 }}>{row.jp}</span></span>
                  <span className="mono" style={{ fontSize: 10, color: "var(--nezumi)", letterSpacing: "0.15em", marginTop: 3 }}>{row.role.toUpperCase()} · {row.stat.toUpperCase()}</span>
                </div>
              </div>
              <div className="row gap-4" style={{ alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--nezumi)" }}>{row.url}</span>
                <span className="serif" style={{ fontSize: 18 }}>{row.current ? "—" : "↗"}</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* ────────── Editorial principles + Studio note ────────── */}
      <section style={{ padding: "0 56px 56px", maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }}>
        <div>
          <Eyebrow num="03">Editorial principles</Eyebrow>
          <div className="col" style={{ marginTop: 14 }}>
            {[
              "Every color carries a source status. No exceptions.",
              "A swatch on a screen is not a textile, pigment, or season.",
              "Names predate hexes by a thousand years. We respect that order.",
              "We do not scrape Nippon Colors or Colordic. We cite our work.",
              "If we do not know, we say we do not know.",
            ].map((p, i) => (
              <div key={i} className="row" style={{ padding: "14px 0", borderTop: i ? "1px dashed var(--paper-border)" : "1px solid var(--paper-border)", borderBottom: i === 4 ? "1px solid var(--paper-border)" : "none", alignItems: "flex-start", gap: 18 }}>
                <span className="cat-num" style={{ minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontSize: 15, lineHeight: 1.55 }} className="serif">{p}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <Eyebrow num="04">A note on what we are not</Eyebrow>
          <p style={{ fontSize: 16, lineHeight: 1.7, margin: "14px 0 16px", color: "var(--sumi)" }} className="serif">
            We are not the keepers of Japanese color. The dyers in Tokushima, the printers in Kyoto, the weavers in Echigo — they are. This atlas is a <em>reading</em>, indexed by people who care about both source and design utility.
          </p>
          <p style={{ fontSize: 14, color: "var(--nezumi)", lineHeight: 1.65, margin: "0 0 20px" }}>
            Corrections welcome. Names matter; sources matter more.
          </p>

          <Eyebrow>Get in touch</Eyebrow>
          <div className="col" style={{ marginTop: 12, border: "1px solid var(--paper-border)" }}>
            {[
              ["Newsletter",     "Quarterly · publishes every kō", "subscribe →"],
              ["Email the desk", "edit@chromacathay.jp",            "write →"],
              ["File a source",  "Suggest a citation or correction", "submit →"],
            ].map((r, i, a) => (
              <div key={i} className="row" style={{ padding: "14px 18px", justifyContent: "space-between", alignItems: "center", borderTop: i ? "1px solid var(--paper-border)" : "none" }}>
                <div className="col" style={{ lineHeight: 1.3 }}>
                  <span className="serif" style={{ fontSize: 14 }}>{r[0]}</span>
                  <span style={{ fontSize: 11, color: "var(--nezumi)", fontStyle: "italic" }}>{r[1]}</span>
                </div>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--sumi)" }}>{r[2].toUpperCase()}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}
window.FinalAbout = FinalAbout;