// Alt B — Ma (間) · Extreme negative space
// One huge silent color field. Type pushed to the corners. Like a Yohji
// Yamamoto or auction catalog homepage. The product asks you to slow down.

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

      {/* ── Top chrome — almost nothing ─────────────── */}
      <div className="row" style={{ padding: "32px 56px", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--paper-border)" }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)" }}>JAPANESE COLOR ATLAS · 日本色譜</span>
        <div className="row gap-8 mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)" }}>
          <a>ATLAS</a><a>PALETTES</a><a>GUIDES</a><a>SEARCH +</a>
        </div>
      </div>

      {/* ── HERO · Full-bleed sakura field, 100vh ─────────────── */}
      <section style={{ background: "#F1C6C1", height: 900, position: "relative", overflow: "hidden" }}>
        {/* Tategaki season mark — bottom-left */}
        <div className="tate serif" style={{ position: "absolute", left: 56, top: 56, fontSize: 16, letterSpacing: "0.5em", color: "rgba(27,27,27,0.55)" }}>
          春 · 二〇二六年 · 初版
        </div>

        {/* Single huge kanji, anchored to center-left, off-canvas right */}
        <div className="serif" style={{ position: "absolute", left: 200, top: 200, fontSize: 480, lineHeight: 0.8, letterSpacing: "-0.04em", color: "rgba(27,27,27,0.92)", fontWeight: 300 }}>
          桜
        </div>

        {/* Hex, romaji — small, top-right corner */}
        <div className="col" style={{ position: "absolute", right: 56, top: 56, alignItems: "flex-end", gap: 4 }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(27,27,27,0.6)" }}>SPECIMEN N° 014 / 081</span>
          <span className="mono" style={{ fontSize: 22, letterSpacing: "0.04em" }}>#F1C6C1</span>
          <span style={{ fontSize: 13, color: "rgba(27,27,27,0.65)" }}>RGB · 241 198 193</span>
          <span style={{ fontSize: 13, color: "rgba(27,27,27,0.65)" }}>LAB · 84.1 13.2 5.4</span>
        </div>

        {/* Bottom-right: name + romaji */}
        <div style={{ position: "absolute", right: 56, bottom: 56, textAlign: "right" }}>
          <div className="serif" style={{ fontSize: 18, color: "rgba(27,27,27,0.55)" }}>さくらいろ</div>
          <div className="serif" style={{ fontSize: 32, marginTop: 4, letterSpacing: "-0.01em" }}>Sakura-iro</div>
        </div>

        {/* Bottom-left: subtle product title */}
        <div style={{ position: "absolute", left: 56, bottom: 56, maxWidth: 360 }}>
          <div style={{ fontSize: 12, color: "rgba(27,27,27,0.6)", lineHeight: 1.6 }}>
            <em>Sakura-iro</em>, the pale pink of cherry blossom against an overcast spring sky. Catalogued in court color tables of the Heian period.
          </div>
        </div>

        {/* Tiny scroll mark */}
        <div className="mono" style={{ position: "absolute", left: "50%", bottom: 56, transform: "translateX(-50%)", fontSize: 9, letterSpacing: "0.4em", color: "rgba(27,27,27,0.6)" }}>
          ↓ &nbsp; SCROLL &nbsp; ↓
        </div>
      </section>

      {/* ── Single-line about, lots of space ─────────────── */}
      <section style={{ padding: "180px 56px 180px", maxWidth: 1100, margin: "0 auto", borderBottom: "1px solid var(--paper-border)" }}>
        <Eyebrow>01 · About</Eyebrow>
        <h2 className="serif" style={{ fontSize: 80, lineHeight: 1.05, margin: "60px 0 0", fontWeight: 300, letterSpacing: "-0.02em", maxWidth: 980 }}>
          One hundred and eighty-four<br/>
          <span style={{ color: "var(--nezumi)" }}>Japanese pigments</span>,<br/>
          catalogued by source.
        </h2>
        <div className="row" style={{ marginTop: 100, justifyContent: "space-between", alignItems: "flex-end" }}>
          <p style={{ fontSize: 16, lineHeight: 1.65, maxWidth: 380, color: "var(--nezumi)", margin: 0 }}>
            A Chroma Cathay project. Built slowly. Read slowly. Every record carries a source — textile, pigment, era, or screen approximation.
          </p>
          <a className="serif" style={{ fontSize: 24, fontStyle: "italic", color: "var(--sumi)", borderBottom: "1px solid currentColor", paddingBottom: 4 }}>Read the methodology →</a>
        </div>
      </section>

      {/* ── Single specimen — Ai-iro, full bleed ─────────────── */}
      <section style={{ background: "#264653", color: "var(--washi)", height: 760, position: "relative", overflow: "hidden" }} className="ink-tex">
        <div className="tate serif" style={{ position: "absolute", right: 56, top: 56, fontSize: 14, letterSpacing: "0.5em", color: "rgba(244,239,230,0.55)" }}>
          夏 · 藍染 · 武家の色
        </div>
        <div className="serif" style={{ position: "absolute", right: 200, top: 180, fontSize: 480, lineHeight: 0.8, color: "rgba(244,239,230,0.92)", fontWeight: 300, textAlign: "right" }}>
          藍
        </div>
        <div className="col" style={{ position: "absolute", left: 56, top: 56, gap: 4 }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(244,239,230,0.6)" }}>SPECIMEN N° 057 / 081</span>
          <span className="mono" style={{ fontSize: 22, letterSpacing: "0.04em" }}>#264653</span>
        </div>
        <div style={{ position: "absolute", left: 56, bottom: 56 }}>
          <div className="serif" style={{ fontSize: 18, color: "rgba(244,239,230,0.55)" }}>あいいろ</div>
          <div className="serif" style={{ fontSize: 32, marginTop: 4 }}>Ai-iro · Indigo</div>
        </div>
        <div style={{ position: "absolute", right: 56, bottom: 56, maxWidth: 340, textAlign: "right" }}>
          <div style={{ fontSize: 12, color: "rgba(244,239,230,0.7)", lineHeight: 1.6 }}>
            Fermented indigo dye — the color of Edo-era farmers' jackets, samurai under-robes, and the deep evening sky just before night.
          </div>
        </div>
      </section>

      {/* ── Index — single column, tabular ─────────────── */}
      <section style={{ padding: "180px 56px 180px", maxWidth: 1100, margin: "0 auto" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 80 }}>
          <div>
            <Eyebrow>02 · Index</Eyebrow>
            <h2 className="serif" style={{ fontSize: 64, margin: "40px 0 0", fontWeight: 300, letterSpacing: "-0.02em" }}>Eight pigments<br/>to begin with.</h2>
          </div>
          <a className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--sumi)" }}>VIEW ALL 81 →</a>
        </div>

        <div className="col">
          {SAMPLE_COLORS.map((c, i) => (
            <a key={i} className="row" style={{ alignItems: "center", padding: "32px 0", borderTop: "1px solid var(--paper-border)", borderBottom: i === SAMPLE_COLORS.length - 1 ? "1px solid var(--paper-border)" : "none", gap: 32 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--nezumi)", width: 60 }}>{String(i + 1).padStart(3, "0")}</span>
              <span className="serif" style={{ fontSize: 56, width: 140, lineHeight: 0.9, letterSpacing: "-0.01em" }}>{c.kanji}</span>
              <div className="col" style={{ flex: 1, lineHeight: 1.4 }}>
                <span className="serif" style={{ fontSize: 22 }}>{c.romaji}</span>
                <span style={{ fontSize: 13, color: "var(--nezumi)" }}>{c.kana} · {c.en}</span>
              </div>
              <span className="mono" style={{ fontSize: 18, letterSpacing: "0.04em", width: 110, textAlign: "right" }}>{c.hex}</span>
              <div style={{ width: 80, height: 80, background: c.hex, border: "1px solid rgba(0,0,0,0.06)" }}></div>
              <span className="serif" style={{ fontSize: 24, color: "var(--nezumi)", width: 32, textAlign: "right" }}>→</span>
            </a>
          ))}
        </div>
      </section>

      {/* ── Closing — searchable ─────────────── */}
      <section style={{ background: "var(--sumi)", color: "var(--washi)", padding: "140px 56px 80px" }} className="ink-tex">
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <Eyebrow color="rgba(244,239,230,0.6)">03 · Find</Eyebrow>
          <h2 className="serif" style={{ fontSize: 72, lineHeight: 1.05, margin: "40px 0 60px", fontWeight: 300, letterSpacing: "-0.02em" }}>
            Looking for a word,<br/>or a color?
          </h2>
          <div style={{ borderTop: "1px solid var(--soft-border)", borderBottom: "1px solid var(--soft-border)", padding: "24px 0", display: "flex", alignItems: "center", gap: 20 }}>
            <span className="serif" style={{ fontSize: 36, color: "rgba(244,239,230,0.6)" }}>尋</span>
            <span style={{ flex: 1, fontSize: 20, color: "rgba(244,239,230,0.55)" }}>sakura · ai-iro · "the red of autumn maple"…</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "rgba(244,239,230,0.55)" }}>SEARCH ⌘K</span>
          </div>

          <div className="row" style={{ marginTop: 100, justifyContent: "space-between", alignItems: "flex-end" }}>
            <div className="col gap-2">
              <Hanko char="朱" size={36} rotate={-3} />
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "rgba(244,239,230,0.55)", marginTop: 8 }}>CHROMA CATHAY · 朱華</span>
              <span style={{ fontSize: 13, color: "rgba(244,239,230,0.6)" }} className="serif">Vol. II · Japanese · 2026</span>
            </div>
            <div className="row gap-8 mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "rgba(244,239,230,0.55)" }}>
              <a>METHODOLOGY</a><a>CHINESE ATLAS</a><a>ARCHITECTURE</a><a>NEWSLETTER</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.AltMa = AltMa;