// Alt C — Editorial magazine spread (誌面)
// Dense type, marginalia, folio numbers, footnotes — like IDEA magazine or
// 工芸 monograph. Two-column grid with hairline rules. Mono + serif.

function AltEditorial() {
  return (
    <div className="jca" style={{ background: "var(--washi)", color: "var(--sumi)", minHeight: "100%", padding: "0", position: "relative" }}>

      {/* Top folio bar */}
      <div className="row mono" style={{ padding: "20px 64px", fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)", borderBottom: "1px solid var(--paper-border)", justifyContent: "space-between" }}>
        <span>CHROMA CATHAY / VOL. II / ISSUE Nº 002 / SPRING 2026</span>
        <span>FOLIO 001 — 004</span>
        <span>JAPANESE COLOR ATLAS · 日本色譜</span>
      </div>

      {/* Masthead */}
      <header style={{ padding: "32px 64px 28px", borderBottom: "2px solid var(--sumi)" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            <div className="serif" style={{ fontSize: 13, letterSpacing: "0.04em" }}>The Atlas — Quarterly</div>
            <h1 className="serif" style={{ fontSize: 96, margin: "8px 0 0", letterSpacing: "-0.03em", lineHeight: 0.9, fontWeight: 400 }}>
              色 <span style={{ fontStyle: "italic", fontWeight: 300 }}>Iro</span>
            </h1>
          </div>
          <div className="col" style={{ alignItems: "flex-end", gap: 6 }}>
            <Hanko char="朱" size={48} rotate={-4} />
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--nezumi)" }}>EDITED BY CHROMA CATHAY</span>
          </div>
        </div>
        <div className="row mono" style={{ marginTop: 18, fontSize: 10, letterSpacing: "0.2em", color: "var(--sumi)", gap: 28 }}>
          <span>· FEATURES ·</span>
          <span>81 RECORDS</span>
          <span>FOUR SEASONS</span>
          <span>WAGOTOBA &amp; KANJI</span>
          <span>PALETTE TOOLS</span>
          <span>SOURCES</span>
        </div>
      </header>

      {/* The spread — two columns */}
      <main style={{ display: "grid", gridTemplateColumns: "84px 1fr 1fr 84px", borderBottom: "1px solid var(--paper-border)" }}>

        {/* LEFT margin — vertical text + folio */}
        <aside style={{ borderRight: "1px solid var(--paper-border)", padding: "40px 12px", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center" }}>
          <div className="tate serif" style={{ fontSize: 12, letterSpacing: "0.5em", color: "var(--nezumi)" }}>第一巻 · 序論</div>
          <div className="mono" style={{ writingMode: "vertical-rl", fontSize: 9, letterSpacing: "0.25em", color: "var(--nezumi)" }}>FEATURE — A.01</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--sumi)" }}>001</div>
        </aside>

        {/* COLUMN 1 — Lead article */}
        <article style={{ borderRight: "1px solid var(--paper-border)", padding: "48px 40px 56px" }}>
          <Eyebrow num="A · LEAD ESSAY">On the Japanese palette</Eyebrow>
          <h2 className="serif" style={{ fontSize: 56, lineHeight: 0.95, margin: "20px 0 18px", fontWeight: 400, letterSpacing: "-0.02em", textWrap: "balance" }}>
            A thousand names<br/>
            for <span style={{ fontStyle: "italic", color: "var(--beni)" }}>pink</span>, <span style={{ fontStyle: "italic", color: "var(--aizome)" }}>blue</span>,<br/>
            and the space<br/>between.
          </h2>
          <div className="row gap-3" style={{ marginBottom: 24, alignItems: "center" }}>
            <span style={{ width: 32, height: 32, borderRadius: 16, background: "var(--warm-paper)", border: "1px solid var(--paper-border)" }}></span>
            <div className="col" style={{ lineHeight: 1.3 }}>
              <span style={{ fontSize: 12 }} className="serif">by the Chroma Cathay editorial desk</span>
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--nezumi)" }}>2,400 WORDS · 12 MIN READ</span>
            </div>
          </div>

          {/* Drop cap paragraph */}
          <p style={{ fontSize: 14.5, lineHeight: 1.7, margin: "0 0 14px", textIndent: 0 }}>
            <span className="serif" style={{ float: "left", fontSize: 84, lineHeight: 0.85, marginRight: 12, marginTop: 4, color: "var(--beni)", fontWeight: 400 }}>桜</span>
            -iro <em>(さくらいろ)</em> is not the pink of a single petal but of the bloom seen against a grey March sky.<sup className="mono" style={{ fontSize: 9, color: "var(--beni)" }}>[1]</sup> It is one of 81 current source-aware records catalogued in this atlas — each with a kanji, a kana, a romaji, a source, and a digital approximation of its hex.
          </p>
          <p style={{ fontSize: 14.5, lineHeight: 1.7, margin: "0 0 14px" }}>
            The traditional Japanese palette is, in one reading, a record of dyes and pigments — <span className="serif">藍 ai</span>, fermented indigo; <span className="serif">紅 beni</span>, safflower crimson; <span className="serif">山吹 yamabuki</span>, kerria yellow. In another, it is a record of <em>scene</em> — the color of moss after rain, the color of charcoal one minute before the kettle whistles.<sup className="mono" style={{ fontSize: 9, color: "var(--beni)" }}>[2]</sup>
          </p>
          <p style={{ fontSize: 14.5, lineHeight: 1.7, margin: "0 0 14px" }}>
            Modernity demands a hex. We give one — labelled, always, with the badge <Badge tone="muted">DIGITAL APPROX.</Badge> A swatch on a screen is not a textile, a pigment, or a season. It is a useful lie.
          </p>

          {/* Pullquote */}
          <blockquote style={{ margin: "32px 0", padding: "0 0 0 24px", borderLeft: "2px solid var(--beni)" }}>
            <p className="serif" style={{ fontSize: 22, fontStyle: "italic", lineHeight: 1.4, margin: 0, color: "var(--sumi)" }}>
              &ldquo;Traditional color values vary by source — textile, pigment, era, and screen. We list sources, not vibes.&rdquo;
            </p>
            <cite className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--nezumi)", marginTop: 14, display: "block" }}>— METHODOLOGY, FOLIO 087</cite>
          </blockquote>

          {/* Footnotes */}
          <div style={{ marginTop: 32, paddingTop: 18, borderTop: "1px solid var(--paper-border)" }}>
            <p className="mono" style={{ fontSize: 10, letterSpacing: "0.04em", color: "var(--nezumi)", lineHeight: 1.6, margin: "0 0 4px" }}>
              <sup style={{ color: "var(--beni)" }}>[1]</sup> See &quot;A genealogy of pink&quot; — Chinese Color Atlas, Vol. I, pp. 142.
            </p>
            <p className="mono" style={{ fontSize: 10, letterSpacing: "0.04em", color: "var(--nezumi)", lineHeight: 1.6, margin: 0 }}>
              <sup style={{ color: "var(--beni)" }}>[2]</sup> Compare: <em>Iro no Jiten</em>, Heibonsha, 1989 — entries 014, 057, 098.
            </p>
          </div>
        </article>

        {/* COLUMN 2 — Specimen catalogue */}
        <article style={{ padding: "48px 40px 56px", background: "var(--washi)" }}>
          <Eyebrow num="B · SPECIMEN PLATE">Eight pigments, plated</Eyebrow>
          <h3 className="serif" style={{ fontSize: 22, margin: "18px 0 22px", fontWeight: 400, letterSpacing: "-0.01em" }}>
            From the spring section of the catalogue, numbered as filed.
          </h3>

          <div className="col">
            {SAMPLE_COLORS.map((c, i) => (
              <div key={i} className="row" style={{ borderTop: "1px solid var(--paper-border)", padding: "14px 0", alignItems: "center", gap: 16 }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--nezumi)", width: 36 }}>{String(i + 1).padStart(3, "0")}</span>
                <div style={{ width: 56, height: 56, background: c.hex, border: "1px solid rgba(0,0,0,0.08)" }}></div>
                <div className="col" style={{ flex: 1, lineHeight: 1.3 }}>
                  <span className="serif" style={{ fontSize: 20 }}>{c.kanji} <span style={{ fontSize: 13, color: "var(--nezumi)", marginLeft: 4 }}>{c.romaji}</span></span>
                  <span style={{ fontSize: 11, color: "var(--nezumi)" }}>{c.kana} · {c.en}</span>
                </div>
                <span className="mono" style={{ fontSize: 13 }}>{c.hex}</span>
                <span className="mono" style={{ fontSize: 10, color: i % 2 ? "var(--matcha)" : "var(--nezumi)", letterSpacing: "0.12em" }}>{i % 2 ? "MEASURED" : "ATTRIBUTED"}</span>
              </div>
            ))}
            <div style={{ borderTop: "1px solid var(--paper-border)", padding: "14px 0", display: "flex", justifyContent: "space-between" }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>+ 176 MORE SPECIMENS</span>
              <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--sumi)" }}>OPEN INDEX →</a>
            </div>
          </div>

          {/* small inset — seasonal strip */}
          <div style={{ marginTop: 32, paddingTop: 18, borderTop: "2px solid var(--sumi)" }}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
              <Eyebrow>C · seasonal palette</Eyebrow>
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--nezumi)" }}>SPRING / 春</span>
            </div>
            <div className="row" style={{ height: 56, border: "1px solid var(--paper-border)" }}>
              {["#F1C6C1", "#E8B8C5", "#C7B3D4", "#A8B98A", "#E8DDCB", "#D8A431", "#7A8B55"].map((c, i, a) => (
                <div key={i} style={{ flex: 1, background: c, borderRight: i < a.length - 1 ? "1px solid rgba(0,0,0,0.06)" : "none" }}></div>
              ))}
            </div>
            <p style={{ fontSize: 12, color: "var(--nezumi)", lineHeight: 1.55, margin: "10px 0 0", fontStyle: "italic" }}>
              Sakura, peach blossom, wisteria, willow, washi, kerria yellow, matcha — the spring band of the seasonal index.
            </p>
          </div>
        </article>

        {/* RIGHT margin */}
        <aside style={{ borderLeft: "1px solid var(--paper-border)", padding: "40px 12px", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center" }}>
          <div className="tate serif" style={{ fontSize: 12, letterSpacing: "0.5em", color: "var(--nezumi)" }}>誌面 · 二〇二六春</div>
          <div className="mono" style={{ writingMode: "vertical-rl", fontSize: 9, letterSpacing: "0.25em", color: "var(--nezumi)" }}>SPECIMEN PLATE — B.01</div>
          <div className="mono" style={{ fontSize: 11, color: "var(--sumi)" }}>002</div>
        </aside>
      </main>

      {/* Sidebar strip beneath — tools, contents */}
      <section style={{ display: "grid", gridTemplateColumns: "84px 1fr 1fr 1fr 84px", borderBottom: "1px solid var(--paper-border)" }}>
        <aside style={{ borderRight: "1px solid var(--paper-border)" }}></aside>

        <div style={{ padding: "32px 28px", borderRight: "1px solid var(--paper-border)" }}>
          <Eyebrow>D · Tools</Eyebrow>
          <h4 className="serif" style={{ fontSize: 26, margin: "10px 0 10px", fontWeight: 400, letterSpacing: "-0.01em", lineHeight: 1.1 }}>The palette builder.</h4>
          <p style={{ fontSize: 12, color: "var(--nezumi)", lineHeight: 1.6, margin: "0 0 14px" }}>
            Compose a palette from the atlas. Lock, swap, export to HEX, CSS, Tailwind, JSON, or ASE.
          </p>
          <div className="row" style={{ height: 28, marginBottom: 12 }}>
            {["#F1C6C1", "#264653", "#1B1B1B", "#D8A431", "#7A8B55"].map((c, i) => <div key={i} style={{ flex: 1, background: c }}></div>)}
          </div>
          <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em" }}>OPEN BUILDER →</a>
        </div>

        <div style={{ padding: "32px 28px", borderRight: "1px solid var(--paper-border)" }}>
          <Eyebrow>E · Language</Eyebrow>
          <h4 className="serif" style={{ fontSize: 26, margin: "10px 0 10px", fontWeight: 400, letterSpacing: "-0.01em", lineHeight: 1.1 }}>Colors in Japanese.</h4>
          <p style={{ fontSize: 12, color: "var(--nezumi)", lineHeight: 1.6, margin: "0 0 14px" }}>
            Six words, four い-adjectives, two の-nouns, and the grammar that holds them together.
          </p>
          <div className="row gap-3">
            {["赤", "青", "緑", "黒", "白"].map(k => <span key={k} className="serif" style={{ fontSize: 24, color: "var(--sumi)" }}>{k}</span>)}
          </div>
          <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", marginTop: 12, display: "inline-block" }}>READ THE GUIDE →</a>
        </div>

        <div style={{ padding: "32px 28px", background: "var(--sumi)", color: "var(--washi)" }} className="ink-tex">
          <Eyebrow color="rgba(244,239,230,0.6)">F · Resources</Eyebrow>
          <h4 className="serif" style={{ fontSize: 26, margin: "10px 0 10px", fontWeight: 400, letterSpacing: "-0.01em", lineHeight: 1.1, color: "var(--washi)" }}>Design exports.</h4>
          <p style={{ fontSize: 12, color: "rgba(244,239,230,0.7)", lineHeight: 1.6, margin: "0 0 14px" }}>
            CSS variables, Tailwind tokens, Figma file, Procreate swatches, ASE, JSON.
          </p>
          <div className="row gap-2" style={{ flexWrap: "wrap" }}>
            {["CSS", "TAILWIND", "FIGMA", "JSON", "ASE"].map(t => (
              <span key={t} className="mono" style={{ fontSize: 9, padding: "4px 7px", border: "1px solid var(--soft-border)", letterSpacing: "0.12em" }}>{t}</span>
            ))}
          </div>
          <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", marginTop: 14, display: "inline-block", color: "var(--yamabuki)" }}>GET SAMPLE PACK →</a>
        </div>

        <aside style={{ borderLeft: "1px solid var(--paper-border)" }}></aside>
      </section>

      {/* Bottom folio + colophon */}
      <footer style={{ padding: "32px 64px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)" }}>JCA · VOL. II · ISSUE 002 · SPRING 2026</div>
        <div className="serif" style={{ fontSize: 14, fontStyle: "italic", color: "var(--nezumi)" }}>— a Chroma Cathay publication —</div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)" }}>FOLIO 004 / NEXT: METHODOLOGY →</div>
      </footer>
    </div>
  );
}
window.AltEditorial = AltEditorial;