// Alt A — Emakimono (絵巻物) horizontal scroll
// A handscroll that unrolls right-to-left. Tate-gaki dominant. The whole page
// is one wide horizontal canvas; panels read like sections of a painted scroll.

function AltEmakimono() {
  const panels = [
    { kind: "title" },
    { kind: "color", c: { kanji: "桜色",   romaji: "Sakura-iro",   kana: "さくらいろ", hex: "#F1C6C1" }, season: "春", num: "014" },
    { kind: "color", c: { kanji: "藍色",   romaji: "Ai-iro",       kana: "あいいろ",   hex: "#264653" }, season: "夏", num: "057" },
    { kind: "color", c: { kanji: "山吹色", romaji: "Yamabuki-iro", kana: "やまぶきいろ", hex: "#D8A431" }, season: "秋", num: "098" },
    { kind: "color", c: { kanji: "墨色",   romaji: "Sumi-iro",     kana: "すみいろ",   hex: "#1B1B1B" }, season: "冬", num: "172" },
    { kind: "search" },
    { kind: "season" },
    { kind: "colophon" },
  ];

  return (
    <div className="jca" style={{ background: "var(--washi)", width: "100%", height: "100%", overflow: "hidden", position: "relative" }}>
      {/* Vertical kana navigation rail — RIGHT side (reading start) */}
      <div className="tate" style={{ position: "absolute", right: 0, top: 0, bottom: 0, width: 64, borderLeft: "1px solid var(--paper-border)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", padding: "32px 0", background: "var(--washi)", zIndex: 5 }}>
        <div className="serif" style={{ fontSize: 13, letterSpacing: "0.5em", color: "var(--sumi)" }}>朱華 · CHROMA CATHAY</div>
        <div className="col" style={{ gap: 28, alignItems: "center" }}>
          {["色", "譜", "学", "具", "印"].map((g, i) => (
            <div key={i} className="col" style={{ alignItems: "center", gap: 6 }}>
              <span className="serif" style={{ fontSize: 17, color: i === 0 ? "var(--sumi)" : "var(--nezumi)" }}>{g}</span>
              <span style={{ width: 4, height: 4, borderRadius: 2, background: i === 0 ? "var(--beni)" : "transparent" }}></span>
            </div>
          ))}
        </div>
        <div className="mono" style={{ writingMode: "vertical-rl", fontSize: 9, letterSpacing: "0.3em", color: "var(--nezumi)" }}>NIHON SHIKIFU · VOL. II</div>
      </div>

      {/* LEFT edge — scroll progress / rolled scroll spine */}
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 8, background: "linear-gradient(to right, var(--beni) 0%, var(--beni) 50%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.15) 100%)", zIndex: 5 }}></div>

      {/* The scroll itself */}
      <div style={{ position: "absolute", inset: "0 64px 0 8px", overflow: "auto" }}>
        <div className="row" style={{ height: "100%", minWidth: "max-content" }}>

          {/* 1 · Title panel */}
          <section className="washi-tex" style={{ width: 760, height: "100%", borderRight: "1px solid var(--paper-border)", position: "relative", padding: "56px 56px 36px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
              <Eyebrow num="巻一 · ROLL ONE">A handscroll atlas</Eyebrow>
              <Hanko char="色" size={44} rotate={-4} />
            </div>

            <div style={{ position: "relative" }}>
              {/* Tategaki title — primary */}
              <div className="tate serif" style={{ fontSize: 96, lineHeight: 1.05, letterSpacing: "0.05em", color: "var(--sumi)", maxHeight: 600 }}>
                日本色譜
              </div>
              {/* Horizontal subtitle */}
              <div style={{ position: "absolute", left: 160, top: 24, maxWidth: 360 }}>
                <h1 className="serif" style={{ fontSize: 38, lineHeight: 1.05, margin: 0, fontWeight: 400, letterSpacing: "-0.01em" }}>Japanese<br/>Color Atlas</h1>
                <p style={{ fontSize: 14, color: "var(--nezumi)", lineHeight: 1.55, margin: "16px 0 0", maxWidth: 320 }}>
                  An unrolling catalogue of 81 source-aware Japanese pigments — read right to left, season by season.
                </p>
                <div className="row gap-2" style={{ marginTop: 18, flexWrap: "wrap" }}>
                  <Badge tone="ink" dot>SOURCE-AWARE</Badge>
                  <Badge tone="muted" dot>DIGITAL APPROX.</Badge>
                </div>
              </div>
            </div>

            <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
              <button className="btn btn--solid-ink" style={{ fontSize: 12 }}>Unroll →</button>
              <div className="mon-rule" style={{ width: 200, color: "var(--nezumi)" }}>
                <span className="line"></span><span className="mon"></span><span className="line"></span>
              </div>
            </div>
            {/* margin folio */}
            <div className="mono" style={{ position: "absolute", bottom: 16, right: 18, fontSize: 9, letterSpacing: "0.2em", color: "var(--nezumi)" }}>PANEL 01 / 07 →</div>
          </section>

          {/* 2-5 · Color panels */}
          {panels.filter(p => p.kind === "color").map((p, i) => {
            const c = p.c;
            const isDark = ["#1B1B1B", "#264653"].includes(c.hex);
            const fg = isDark ? "rgba(244,239,230,0.92)" : "rgba(27,27,27,0.85)";
            const dim = isDark ? "rgba(244,239,230,0.55)" : "rgba(27,27,27,0.55)";
            return (
              <section key={i} style={{ width: 520, height: "100%", borderRight: "1px solid rgba(0,0,0,0.1)", background: c.hex, color: fg, position: "relative", padding: "56px 36px 36px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div className="col" style={{ lineHeight: 1.2 }}>
                    <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: dim }}>SPECIMEN Nº {p.num}</span>
                    <span className="serif" style={{ fontSize: 14, marginTop: 4, color: dim }}>{p.season}</span>
                  </div>
                  <div className="tate" style={{ fontSize: 12, color: dim, letterSpacing: "0.4em" }}>
                    {c.kanji.split('').reverse().join('')}
                  </div>
                </div>

                <div>
                  <div className="serif" style={{ fontSize: 140, lineHeight: 0.85, letterSpacing: "-0.02em" }}>{c.kanji}</div>
                  <div style={{ marginTop: 24, fontSize: 16 }} className="serif">{c.kana}</div>
                  <div style={{ fontSize: 13, color: dim, marginTop: 2 }}>{c.romaji}</div>
                </div>

                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
                  <span className="mono" style={{ fontSize: 22, letterSpacing: "0.04em" }}>{c.hex}</span>
                  <span style={{ width: 28, height: 28, border: `1px solid ${fg}`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12 }} className="mono">+</span>
                </div>
              </section>
            );
          })}

          {/* 6 · Search panel */}
          <section className="washi-tex" style={{ width: 700, height: "100%", borderRight: "1px solid var(--paper-border)", padding: "56px 48px", position: "relative", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <Eyebrow num="巻二 · ROLL TWO">Lookup · 索引</Eyebrow>

            <div>
              <h2 className="serif" style={{ fontSize: 56, margin: "0 0 4px", fontWeight: 400, letterSpacing: "-0.02em", lineHeight: 0.95 }}>What color do you<br/>need a word for?</h2>
              <p style={{ fontSize: 14, color: "var(--nezumi)", lineHeight: 1.6, margin: "20px 0 24px", maxWidth: 460 }}>
                Type the name, the word, or the feeling. The atlas matches by hex, family, season, and source.
              </p>

              <div style={{ background: "var(--sumi)", color: "var(--washi)", padding: "16px 20px", display: "flex", alignItems: "center", gap: 14, maxWidth: 540 }}>
                <span className="serif" style={{ fontSize: 18 }}>尋 ›</span>
                <span style={{ flex: 1, fontSize: 15, color: "rgba(244,239,230,0.55)" }}>sakura · ai-iro · &quot;deep autumn red&quot;…</span>
                <span className="mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.55)", letterSpacing: "0.15em" }}>⌘ K</span>
              </div>

              <div className="row gap-2" style={{ marginTop: 18, flexWrap: "wrap" }}>
                {["Spring colors", "Indigo family", "Earth & soil", "Black pigments", "Court robes"].map(t => (
                  <span key={t} className="mono" style={{ fontSize: 10, padding: "6px 10px", border: "1px solid var(--paper-border)", letterSpacing: "0.12em" }}>{t.toUpperCase()}</span>
                ))}
              </div>
            </div>

            <div className="row" style={{ justifyContent: "space-between" }}>
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--nezumi)" }}>← PANEL 06 · UNROLL FURTHER →</span>
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--nezumi)" }}>81 RECORDS · 4 SEASONS</span>
            </div>
          </section>

          {/* 7 · Season strip */}
          <section style={{ width: 720, height: "100%", borderRight: "1px solid var(--paper-border)", display: "flex", flexDirection: "column" }}>
            <div className="washi-tex" style={{ padding: "32px 36px 20px", borderBottom: "1px solid var(--paper-border)" }}>
              <Eyebrow num="巻三 · ROLL THREE">Four seasons · 四季</Eyebrow>
              <h2 className="serif" style={{ fontSize: 36, margin: "12px 0 0", fontWeight: 400, letterSpacing: "-0.01em" }}>The year, in pigment.</h2>
            </div>
            <div className="row" style={{ flex: 1 }}>
              {[
                { jp: "春", en: "Spring", cols: ["#F1C6C1", "#E8B8C5", "#C7B3D4", "#A8B98A", "#E8DDCB"] },
                { jp: "夏", en: "Summer", cols: ["#264653", "#5F9EA0", "#19313D", "#7A8B55", "#F4EFE6"] },
                { jp: "秋", en: "Autumn", cols: ["#B33A3A", "#D8A431", "#8B5A2B", "#6B4C2A", "#3B2A1E"] },
                { jp: "冬", en: "Winter", cols: ["#1B1B1B", "#F4EFE6", "#7C7A73", "#6B4C7A", "#A8A49B"] },
              ].map((s, i) => (
                <div key={i} className="col" style={{ flex: 1, borderRight: i < 3 ? "1px solid var(--paper-border)" : "none" }}>
                  <div className="col" style={{ flex: 1 }}>
                    {s.cols.map((c, j) => <div key={j} style={{ flex: 1, background: c }}></div>)}
                  </div>
                  <div className="washi-tex" style={{ padding: "16px 14px", textAlign: "center", borderTop: "1px solid var(--paper-border)" }}>
                    <div className="serif" style={{ fontSize: 36, lineHeight: 1 }}>{s.jp}</div>
                    <div style={{ fontSize: 10, color: "var(--nezumi)", marginTop: 4 }} className="mono">{s.en.toUpperCase()}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* 8 · Colophon */}
          <section className="washi-tex" style={{ width: 540, height: "100%", padding: "56px 48px", position: "relative", display: "flex", flexDirection: "column", justifyContent: "space-between", background: "var(--warm-paper)" }}>
            <Eyebrow num="奥書 · COLOPHON">End of roll</Eyebrow>

            <div>
              <Hanko char="朱" size={64} rotate={-5} />
              <h3 className="serif" style={{ fontSize: 28, margin: "24px 0 12px", fontWeight: 400, lineHeight: 1.2 }}>
                Published by<br/>Chroma Cathay.
              </h3>
              <p style={{ fontSize: 13, color: "var(--sumi)", lineHeight: 1.65, margin: "0 0 20px", opacity: 0.85 }}>
                A studio publishing 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="col gap-2" style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--paper-border)" }}>
                {["Chinese Color Atlas · 中国色譜", "Architecture Color Atlas · 建築色譜", "Photo Palette Extractor · 写真調色"].map(l => (
                  <a key={l} style={{ fontSize: 12, color: "var(--sumi)" }} className="serif">→ {l}</a>
                ))}
              </div>
            </div>

            <div className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--nezumi)" }}>
              END OF ROLL · 終 · VOL. II / 2026
            </div>
          </section>

        </div>
      </div>

      {/* Bottom progress / chrome */}
      <div style={{ position: "absolute", left: 8, right: 64, bottom: 0, height: 36, borderTop: "1px solid var(--paper-border)", background: "var(--washi)", display: "flex", alignItems: "center", padding: "0 24px", justifyContent: "space-between", zIndex: 5 }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>← SCROLL HORIZONTALLY · 巻物</span>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--sumi)" }}>01 / 08</span>
          <div style={{ width: 160, height: 2, background: "var(--paper-border)", position: "relative" }}>
            <div style={{ position: "absolute", left: 0, top: -1, width: 26, height: 4, background: "var(--beni)" }}></div>
          </div>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>UNROLL →</span>
        </div>
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>81 RECORDS</span>
      </div>
    </div>
  );
}
window.AltEmakimono = AltEmakimono;