// Alt G — Kasane no irome (襲の色目)
// The original Japanese color "system" is not single hexes but pairs:
// Heian-era court robes were layered, and what people saw was the stack
// of edges at the sleeve. Each named "kasane" is actually two colors.

function AltKasane() {
  // Each pairing: outer silk color (top), lining color (bottom). Era-attested
  // names with approximated hex.
  const kasane = [
    { name: "桜襲",   romaji: "Sakura-gasane",   season: "春 · early spring", top: "#F4EFE6", bottom: "#F1C6C1", note: "white over red — petals against sky" },
    { name: "紅梅",   romaji: "Kōbai",           season: "春 · plum bloom",   top: "#B33A3A", bottom: "#F1C6C1", note: "deep crimson over pale pink — plum branch" },
    { name: "山吹襲", romaji: "Yamabuki-gasane", season: "春 · late spring",  top: "#D8A431", bottom: "#B33A3A", note: "kerria yellow over red — riverbank flowers" },
    { name: "萌黄",   romaji: "Moegi",           season: "春→夏",             top: "#9AAE7A", bottom: "#B33A3A", note: "spring green over red — new shoots" },
    { name: "松襲",   romaji: "Matsu-gasane",    season: "通年 · evergreen",  top: "#5C6B5A", bottom: "#6B4C7A", note: "pine green over purple — winter pine" },
    { name: "葡萄",   romaji: "Ebizome",         season: "秋 · grape harvest",top: "#6B4C7A", bottom: "#C7B3D4", note: "purple over pale lilac — ripe grape" },
    { name: "朽葉",   romaji: "Kuchiba",         season: "秋 · falling leaf", top: "#8B5A2B", bottom: "#B33A3A", note: "decayed brown over dark red — late autumn" },
    { name: "雪の下", romaji: "Yuki-no-shita",   season: "冬 · under snow",   top: "#F4EFE6", bottom: "#7A8B55", note: "white over moss — snow over moss" },
  ];

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

      {/* Top folio */}
      <div className="row mono" style={{ padding: "16px 56px", fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)", borderBottom: "1px solid var(--paper-border)", justifyContent: "space-between" }}>
        <span>CHROMA CATHAY · JAPANESE COLOR ATLAS</span>
        <span>SUB-ATLAS · 03 / KASANE NO IROME</span>
        <span>SEARCH · INDEX · PALETTES</span>
      </div>

      {/* Masthead — vertical Japanese as the main title */}
      <header style={{ padding: "48px 56px 36px", display: "grid", gridTemplateColumns: "180px 1fr 280px", gap: 32, alignItems: "flex-end", borderBottom: "1px solid var(--paper-border)" }}>
        <div className="tate serif" style={{ fontSize: 56, letterSpacing: "0.12em", lineHeight: 1, color: "var(--sumi)", fontWeight: 400 }}>
          襲<br/>の<br/>色<br/>目
        </div>
        <div className="col">
          <Eyebrow num="SUB-ATLAS Nº 03">Layered court robes · Heian era</Eyebrow>
          <h1 className="serif" style={{ fontSize: 64, lineHeight: 1, margin: "16px 0 14px", letterSpacing: "-0.02em", fontWeight: 400 }}>
            Kasane <span style={{ fontStyle: "italic", color: "var(--nezumi)" }}>no irome</span>
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.65, margin: 0, color: "var(--sumi)", maxWidth: 640, opacity: 0.85 }}>
            Before there were hexes, there were robes. Heian-period women layered up to twelve silks; what you read as a single "color name" was actually the edge of two — outer silk over inner silk, seen at the sleeve. This is Japan's oldest color system.
          </p>
        </div>
        <div className="col" style={{ alignItems: "flex-end", gap: 10 }}>
          <Hanko char="襲" size={56} rotate={-4} />
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--nezumi)" }}>26 PAIRINGS · 4 SEASONS</span>
          <span className="serif" style={{ fontSize: 12, fontStyle: "italic", color: "var(--nezumi)" }}>after Genji-e &amp; Yūsoku records</span>
        </div>
      </header>

      {/* HOW TO READ — diagram */}
      <section style={{ padding: "44px 56px 32px", display: "grid", gridTemplateColumns: "1fr 320px", gap: 56, alignItems: "flex-start", borderBottom: "1px solid var(--paper-border)" }}>
        <div>
          <Eyebrow num="01">How to read a pairing</Eyebrow>
          <h2 className="serif" style={{ fontSize: 28, margin: "12px 0 18px", fontWeight: 400, letterSpacing: "-0.01em", maxWidth: 600 }}>
            Two silks, one name. The reading is always outer-over-inner.
          </h2>

          {/* The diagram itself */}
          <div className="row" style={{ alignItems: "stretch", gap: 28, marginTop: 28, maxWidth: 700 }}>
            {/* Sample stacked-silk specimen */}
            <div className="col" style={{ flex: "0 0 220px", position: "relative" }}>
              <div style={{ height: 38, background: "#F4EFE6", border: "1px solid var(--paper-border)", borderBottom: "none", boxShadow: "inset 0 4px 8px rgba(0,0,0,0.04)", position: "relative" }}>
                <span className="mono" style={{ position: "absolute", left: 10, top: 12, fontSize: 10, color: "rgba(27,27,27,0.55)", letterSpacing: "0.15em" }}>UWAGI · 外</span>
              </div>
              <div style={{ height: 38, background: "#F1C6C1", border: "1px solid var(--paper-border)", borderTop: "1px dashed var(--paper-border)", position: "relative" }}>
                <span className="mono" style={{ position: "absolute", left: 10, top: 12, fontSize: 10, color: "rgba(27,27,27,0.55)", letterSpacing: "0.15em" }}>SHITAGASANE · 下</span>
              </div>
              <div className="row mono" style={{ marginTop: 12, justifyContent: "space-between", fontSize: 10, color: "var(--nezumi)", letterSpacing: "0.12em" }}>
                <span>#F4EFE6</span>
                <span>+</span>
                <span>#F1C6C1</span>
              </div>
              <div className="row" style={{ alignItems: "center", gap: 10, marginTop: 14 }}>
                <Hanko char="桜" size={32} rotate={-3} />
                <div className="col" style={{ lineHeight: 1.3 }}>
                  <span className="serif" style={{ fontSize: 20 }}>桜襲</span>
                  <span style={{ fontSize: 11, color: "var(--nezumi)" }}>sakura-gasane</span>
                </div>
              </div>
            </div>

            <div className="col" style={{ flex: 1, lineHeight: 1.7, fontSize: 14, color: "var(--sumi)" }}>
              <p style={{ margin: "0 0 10px" }}>
                The outer silk (<em>uwagi</em>) was usually thin, almost translucent. The inner silk (<em>shitagasane</em>) showed through and at the sleeve edge.
              </p>
              <p style={{ margin: "0 0 10px" }}>
                The pairing was named not for the silks but for the <strong>scene</strong> they conjured — <span className="serif">桜襲</span> evokes cherry petals against sky; <span className="serif">松襲</span> evokes pine bark in twilight.
              </p>
              <p style={{ margin: 0, color: "var(--nezumi)", fontStyle: "italic" }}>
                A traditional <em>kasane</em> set could have up to twelve layers. We catalogue here the canonical edge pairs.
              </p>
            </div>
          </div>
        </div>

        {/* Search */}
        <aside style={{ background: "var(--warm-paper)", border: "1px solid var(--paper-border)", padding: "20px 22px" }} className="washi-tex">
          <Eyebrow>Find a pairing</Eyebrow>
          <div className="row" style={{ marginTop: 14, background: "var(--washi)", border: "1px solid var(--paper-border)", padding: "10px 12px", alignItems: "center", gap: 10 }}>
            <span className="serif" style={{ fontSize: 20, color: "var(--beni)" }}>尋</span>
            <span style={{ flex: 1, fontSize: 13, color: "var(--nezumi)", fontStyle: "italic" }} className="serif">"sakura", "plum bloom", "moss under snow"…</span>
          </div>
          <div className="col gap-2" style={{ marginTop: 16 }}>
            {[["By season", "春 / 夏 / 秋 / 冬"], ["By outer color", "26 hues"], ["By scene", "Genji-e references"]].map((r, i) => (
              <div key={i} className="row" style={{ padding: "8px 0", borderTop: i ? "1px dashed var(--paper-border)" : "none", justifyContent: "space-between", fontSize: 12 }}>
                <span style={{ color: "var(--sumi)" }}>{r[0]}</span>
                <span className="serif" style={{ color: "var(--nezumi)" }}>{r[1]}</span>
              </div>
            ))}
          </div>
        </aside>
      </section>

      {/* CATALOGUE — the 8 pairings as long horizontal silk strips */}
      <section style={{ padding: "44px 56px 32px" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 22 }}>
          <Eyebrow num="02">The pairings · 二十六色目</Eyebrow>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--nezumi)" }}>SHOWING 8 / 26 →</span>
        </div>

        <div className="col" style={{ border: "1px solid var(--paper-border)" }}>
          {kasane.map((k, i) => {
            const isTopDark = ["#1B1B1B", "#B33A3A", "#5C6B5A", "#6B4C7A", "#8B5A2B"].includes(k.top);
            return (
              <div key={i} className="row" style={{ alignItems: "stretch", borderTop: i ? "1px solid var(--paper-border)" : "none", minHeight: 132 }}>
                {/* Number + name on left */}
                <div className="col" style={{ width: 220, padding: "20px 22px", justifyContent: "space-between", background: "var(--washi)", borderRight: "1px solid var(--paper-border)" }}>
                  <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                    <span className="cat-num">№ {String(i + 1).padStart(3, "0")}</span>
                    <span className="mono" style={{ fontSize: 9, letterSpacing: "0.15em", color: "var(--nezumi)" }}>{k.season}</span>
                  </div>
                  <div className="col" style={{ lineHeight: 1.1, marginTop: 12 }}>
                    <span className="serif" style={{ fontSize: 44, letterSpacing: "0.04em" }}>{k.name}</span>
                    <span style={{ fontSize: 12, color: "var(--nezumi)", marginTop: 6, fontStyle: "italic" }} className="serif">{k.romaji}</span>
                  </div>
                </div>

                {/* The two silk layers as full-bleed bars */}
                <div className="col" style={{ flex: 1 }}>
                  <div style={{ flex: 1, background: k.top, position: "relative" }}>
                    <span className="mono" style={{ position: "absolute", left: 16, top: 12, fontSize: 9.5, letterSpacing: "0.18em", color: isTopDark ? "rgba(244,239,230,0.7)" : "rgba(27,27,27,0.5)" }}>OUTER · 外</span>
                    <span className="mono" style={{ position: "absolute", right: 16, top: 12, fontSize: 12, letterSpacing: "0.04em", color: isTopDark ? "rgba(244,239,230,0.85)" : "rgba(27,27,27,0.7)" }}>{k.top}</span>
                  </div>
                  <div style={{ flex: 1, background: k.bottom, position: "relative", borderTop: "1px dashed rgba(0,0,0,0.18)" }}>
                    <span className="mono" style={{ position: "absolute", left: 16, top: 12, fontSize: 9.5, letterSpacing: "0.18em", color: ["#1B1B1B", "#B33A3A", "#6B4C7A", "#7A8B55"].includes(k.bottom) ? "rgba(244,239,230,0.7)" : "rgba(27,27,27,0.5)" }}>INNER · 内</span>
                    <span className="mono" style={{ position: "absolute", right: 16, top: 12, fontSize: 12, letterSpacing: "0.04em", color: ["#1B1B1B", "#B33A3A", "#6B4C7A", "#7A8B55"].includes(k.bottom) ? "rgba(244,239,230,0.85)" : "rgba(27,27,27,0.7)" }}>{k.bottom}</span>
                  </div>
                </div>

                {/* Scene note on the right */}
                <div className="col" style={{ width: 300, padding: "20px 24px", justifyContent: "space-between", borderLeft: "1px solid var(--paper-border)", background: "var(--washi)" }}>
                  <p style={{ fontSize: 13, color: "var(--sumi)", margin: 0, lineHeight: 1.6, fontStyle: "italic" }} className="serif">
                    "{k.note}"
                  </p>
                  <div className="row gap-2" style={{ marginTop: 12 }}>
                    <span className="mono" style={{ fontSize: 9, padding: "4px 7px", border: "1px solid var(--paper-border)", letterSpacing: "0.12em" }}>OPEN →</span>
                    <span className="mono" style={{ fontSize: 9, padding: "4px 7px", border: "1px solid var(--paper-border)", letterSpacing: "0.12em" }}>ADD TO PALETTE</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Bottom: explanation strip + ecosystem */}
      <section style={{ padding: "36px 56px 56px", borderTop: "1px solid var(--paper-border)", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "flex-start" }}>
        <div>
          <Eyebrow num="03">Why a pair, not a single name?</Eyebrow>
          <p className="serif" style={{ fontSize: 22, lineHeight: 1.45, margin: "14px 0 0", maxWidth: 580, fontWeight: 400, fontStyle: "italic" }}>
            Because the Heian eye saw the <em>relationship</em>. A single bolt of silk had a color. A robe — twelve silks layered, sleeves trailing across the floor — had a season.
          </p>
        </div>
        <div className="col gap-3">
          <Eyebrow num="04">Companion sub-atlases</Eyebrow>
          <div className="col" style={{ marginTop: 8, border: "1px solid var(--paper-border)" }}>
            {[
              ["81 source-aware colors", "日本伝統色"],
              ["Seasonal palettes",      "四季の配色"],
              ["Edo period mon",          "江戸の家紋"],
              ["Yūsoku patterns",         "有職文様"],
            ].map((s, i, a) => (
              <a key={i} className="row" style={{ padding: "14px 18px", borderTop: i ? "1px solid var(--paper-border)" : "none", justifyContent: "space-between", alignItems: "center" }}>
                <span className="serif" style={{ fontSize: 15 }}>{s[0]}</span>
                <span className="serif" style={{ fontSize: 14, color: "var(--nezumi)" }}>{s[1]} →</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
window.AltKasane = AltKasane;