// Alt E — Koyomi (七十二候 · 72 micro-seasons calendar)
// The entire homepage is a calendar. Japan traditionally divided the year
// into 72 micro-seasons of about 5 days each — Risshun, Kōu, Keichitsu, etc.
// Each micro-season here is paired with one traditional color.

function AltKoyomi() {
  // 72 micro-seasons, paired with a representative pigment.
  const seasons = [
    // SPRING 春 (1-18)
    ["立春初", "東風解凍", "haru tatsu", "#E8DDCB"],
    ["立春次", "黄鶯睍睆", "kō ō kenkan", "#D8A431"],
    ["立春末", "魚上氷",   "uo kōri ni izuru", "#A8B98A"],
    ["雨水初", "土脉潤起", "tsuchi uruou", "#B5A78A"],
    ["雨水次", "霞始靆",   "kasumi tanabiku", "#D5CDC4"],
    ["雨水末", "草木萠動", "sōmoku mebae", "#7A8B55"],
    ["啓蟄初", "蟄虫啓戸", "chitchū to o hiraku", "#6B4C2A"],
    ["啓蟄次", "桃始笑",   "momo hajimete saku", "#F1C6C1"],
    ["啓蟄末", "菜虫化蝶", "namushi chō to naru", "#EBC76A"],
    ["春分初", "雀始巣",   "suzume hajimete sukū", "#8B7A5A"],
    ["春分次", "桜始開",   "sakura hajimete hiraku", "#F1C6C1"],
    ["春分末", "雷乃発声", "kaminari sunawachi koe o hassu", "#5F6B7A"],
    ["清明初", "玄鳥至",   "tsubame kitaru", "#19313D"],
    ["清明次", "鴻雁北",   "kōgan kaeru", "#B5A78A"],
    ["清明末", "虹始見",   "niji hajimete arawaru", "#B33A3A"],
    ["穀雨初", "葭始生",   "ashi hajimete shōzu", "#9AAE7A"],
    ["穀雨次", "霜止出苗", "shimo yamite nae izuru", "#C7B3D4"],
    ["穀雨末", "牡丹華",   "botan hana saku", "#C06B7A"],
    // SUMMER 夏 (19-36)
    ["立夏初", "蛙始鳴",   "kawazu hajimete naku", "#7A8B55"],
    ["立夏次", "蚯蚓出",   "mimizu izuru", "#6B4C2A"],
    ["立夏末", "竹笋生",   "takenoko shōzu", "#8FA565"],
    ["小満初", "蚕起食桑", "kaiko okite kuwa o hamu", "#E8DDCB"],
    ["小満次", "紅花栄",   "benibana sakau", "#B33A3A"],
    ["小満末", "麦秋至",   "mugi no toki itaru", "#D8A431"],
    ["芒種初", "蟷螂生",   "kamakiri shōzu", "#7A8B55"],
    ["芒種次", "腐草為蛍", "kusaretaru kusa hotaru to naru", "#1B1B1B"],
    ["芒種末", "梅子黄",   "ume no mi kibamu", "#D8A431"],
    ["夏至初", "乃東枯",   "natsukarekusa karuru", "#6B4C2A"],
    ["夏至次", "菖蒲華",   "ayame hana saku", "#6B4C7A"],
    ["夏至末", "半夏生",   "hange shōzu", "#5F9EA0"],
    ["小暑初", "温風至",   "atsukaze itaru", "#D8A431"],
    ["小暑次", "蓮始開",   "hasu hajimete hiraku", "#F1C6C1"],
    ["小暑末", "鷹乃学習", "taka sunawachi waza o narau", "#19313D"],
    ["大暑初", "桐始結花", "kiri hajimete hana o musubu", "#6B4C7A"],
    ["大暑次", "土潤溽暑", "tsuchi uruoute mushi atsushi", "#3B2A1E"],
    ["大暑末", "大雨時行", "taiu tokidoki furu", "#264653"],
    // AUTUMN 秋 (37-54)
    ["立秋初", "涼風至",   "suzukaze itaru", "#5F9EA0"],
    ["立秋次", "寒蝉鳴",   "higurashi naku", "#7C7A73"],
    ["立秋末", "蒙霧升降", "fukaki kiri matō", "#A8A49B"],
    ["処暑初", "綿柎開",   "wata no hana shibe hiraku", "#F4EFE6"],
    ["処暑次", "天地始粛", "tenchi hajimete samushi", "#5C6B6A"],
    ["処暑末", "禾乃登",   "kokumono sunawachi minoru", "#D8A431"],
    ["白露初", "草露白",   "kusa no tsuyu shiroshi", "#E8DDCB"],
    ["白露次", "鶺鴒鳴",   "sekirei naku", "#19313D"],
    ["白露末", "玄鳥去",   "tsubame saru", "#1B1B1B"],
    ["秋分初", "雷乃収声", "kaminari sunawachi koe o osamu", "#5C6B6A"],
    ["秋分次", "蟄虫坏戸", "mushi kakurete to o tozasu", "#6B4C2A"],
    ["秋分末", "水始涸",   "mizu hajimete karuru", "#B5A78A"],
    ["寒露初", "鴻雁来",   "kōgan kitaru", "#8B7A5A"],
    ["寒露次", "菊花開",   "kiku no hana hiraku", "#D8A431"],
    ["寒露末", "蟋蟀在戸", "kirigirisu to ni ari", "#3B2A1E"],
    ["霜降初", "霜始降",   "shimo hajimete furu", "#D5CDC4"],
    ["霜降次", "霎時施",   "kosame tokidoki furu", "#7C7A73"],
    ["霜降末", "楓蔦黄",   "momiji tsuta kibamu", "#B33A3A"],
    // WINTER 冬 (55-72)
    ["立冬初", "山茶始開", "tsubaki hajimete hiraku", "#B33A3A"],
    ["立冬次", "地始凍",   "chi hajimete kōru", "#5C6B6A"],
    ["立冬末", "金盞香",   "kinsenka saku", "#D8A431"],
    ["小雪初", "虹蔵不見", "niji kakurete miezu", "#7C7A73"],
    ["小雪次", "朔風払葉", "kitakaze ko no ha o harau", "#3B2A1E"],
    ["小雪末", "橘始黄",   "tachibana hajimete kibamu", "#D8A431"],
    ["大雪初", "閉塞成冬", "sora samuku fuyu to naru", "#19313D"],
    ["大雪次", "熊蟄穴",   "kuma ana ni komoru", "#1B1B1B"],
    ["大雪末", "鱖魚群",   "sake no uo muragaru", "#6B4C7A"],
    ["冬至初", "乃東生",   "natsukarekusa shōzu", "#3B2A1E"],
    ["冬至次", "麋角解",   "sawashika no tsuno otsuru", "#5C6B6A"],
    ["冬至末", "雪下出麦", "yuki watarite mugi nobiru", "#F4EFE6"],
    ["小寒初", "芹乃栄",   "seri sunawachi sakau", "#7A8B55"],
    ["小寒次", "水泉動",   "shimizu atataka o fukumu", "#5F9EA0"],
    ["小寒末", "雉始雊",   "kiji hajimete naku", "#264653"],
    ["大寒初", "款冬華",   "fuki no hana saku", "#A8B98A"],
    ["大寒次", "水沢腹堅", "sawamizu kōri tsumeru", "#D5CDC4"],
    ["大寒末", "鶏始乳",   "niwatori hajimete toya ni tsuku", "#F4EFE6"],
  ];

  const today = 11; // sakura hajimete hiraku — "cherry blossoms first open"

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

      {/* Top folio */}
      <div className="row mono" style={{ padding: "18px 48px", justifyContent: "space-between", fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)", borderBottom: "1px solid var(--paper-border)" }}>
        <span>CHROMA CATHAY · JAPANESE COLOR ATLAS · 日本色譜</span>
        <span>VOL. II · 002</span>
        <span>SEARCH · INDEX · PALETTES · GUIDES</span>
      </div>

      {/* Masthead: massive year */}
      <header style={{ padding: "36px 48px 24px", borderBottom: "1px solid var(--paper-border)" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
          <div className="col">
            <Eyebrow num="七十二候">A koyomi atlas</Eyebrow>
            <h1 className="serif" style={{ fontSize: 80, margin: "10px 0 4px", fontWeight: 400, lineHeight: 0.95, letterSpacing: "-0.02em" }}>
              二〇二六 <span style={{ fontStyle: "italic", color: "var(--nezumi)" }}>· The seventy-two micro-seasons</span>
            </h1>
            <p style={{ fontSize: 14, color: "var(--nezumi)", margin: "10px 0 0", maxWidth: 720, lineHeight: 1.6 }}>
              The traditional Japanese year was divided into seventy-two <em>kō</em> of about five days each. Each one is paired here with a traditional pigment — the color of its scene.
            </p>
          </div>
          <div className="col" style={{ alignItems: "flex-end", gap: 6 }}>
            <Hanko char="今" size={44} rotate={-3} />
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--nezumi)" }}>TODAY · KŌ Nº 11</span>
          </div>
        </div>
      </header>

      {/* MAIN — calendar grid + today panel */}
      <main style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 0 }}>

        {/* The 72-cell grid: 12 columns x 6 rows ish, but more readable as 8 columns x 9 rows */}
        <div style={{ padding: "28px 48px 36px", borderRight: "1px solid var(--paper-border)" }}>
          <div className="row" style={{ marginBottom: 14, justifyContent: "space-between", alignItems: "baseline" }}>
            <Eyebrow>The 72 kō · 候</Eyebrow>
            <div className="row gap-3 mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--nezumi)" }}>
              <span>春 1—18</span><span>夏 19—36</span><span>秋 37—54</span><span>冬 55—72</span>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", border: "1px solid var(--paper-border)" }}>
            {seasons.map((s, i) => {
              const num = i + 1;
              const isToday = num === today;
              const seasonMark =
                num <= 18 ? "春" :
                num <= 36 ? "夏" :
                num <= 54 ? "秋" : "冬";
              const isDark = ["#1B1B1B", "#264653", "#19313D", "#6B4C7A", "#3B2A1E"].includes(s[3]);
              return (
                <div key={i} style={{
                  padding: "10px 10px 12px",
                  borderRight: ((i + 1) % 8 !== 0) ? "1px solid var(--paper-border)" : "none",
                  borderBottom: i < seasons.length - 8 ? "1px solid var(--paper-border)" : "none",
                  background: isToday ? "var(--sumi)" : "transparent",
                  color: isToday ? "var(--washi)" : "var(--sumi)",
                  position: "relative",
                  minHeight: 100,
                  display: "flex", flexDirection: "column", justifyContent: "space-between",
                }}>
                  <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                    <span className="mono" style={{ fontSize: 9, letterSpacing: "0.1em", opacity: isToday ? 0.9 : 0.55 }}>{String(num).padStart(2, "0")}</span>
                    <span className="serif" style={{ fontSize: 10, opacity: isToday ? 0.85 : 0.5 }}>{seasonMark}</span>
                  </div>
                  <div className="col gap-1" style={{ marginTop: 8 }}>
                    <span className="serif" style={{ fontSize: 14, lineHeight: 1.15, letterSpacing: "0.04em" }}>{s[1]}</span>
                    <span style={{ fontSize: 8.5, color: isToday ? "rgba(244,239,230,0.65)" : "var(--nezumi)", fontStyle: "italic", lineHeight: 1.3, marginTop: 2 }}>{s[2]}</span>
                  </div>
                  <div style={{ marginTop: 8, height: 8, background: s[3], border: isDark ? "1px solid rgba(244,239,230,0.15)" : "1px solid rgba(0,0,0,0.06)" }}></div>
                  {isToday && (
                    <span style={{ position: "absolute", top: 8, right: 8, fontSize: 8, color: "var(--beni)", fontWeight: 600 }} className="mono">●</span>
                  )}
                </div>
              );
            })}
          </div>
          <p className="mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--nezumi)", marginTop: 16, textAlign: "center" }}>
            ← TAP A KŌ TO OPEN ITS COLOR · KEYBOARD ← / → TO SCAN THE YEAR →
          </p>
        </div>

        {/* TODAY panel */}
        <aside style={{ background: "#F1C6C1", color: "rgba(27,27,27,0.85)", padding: "32px 28px 36px", position: "relative" }}>
          <div className="tate serif" style={{ position: "absolute", right: 16, top: 32, fontSize: 12, letterSpacing: "0.4em", color: "rgba(27,27,27,0.6)" }}>
            春 · 二〇二六年 三月二十六日
          </div>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "rgba(27,27,27,0.65)" }}>TODAY · KŌ Nº 11 / 72</span>
          <div className="serif" style={{ fontSize: 64, lineHeight: 0.95, margin: "16px 0 6px", letterSpacing: "0.04em", fontWeight: 400 }}>
            桜始開
          </div>
          <div className="serif" style={{ fontSize: 16, fontStyle: "italic", color: "rgba(27,27,27,0.7)" }}>sakura hajimete hiraku</div>
          <p style={{ fontSize: 13, color: "rgba(27,27,27,0.85)", lineHeight: 1.6, margin: "18px 0 22px" }}>
            "Cherry blossoms first open." The 11th of seventy-two micro-seasons. Roughly March 25 — March 29.
          </p>

          <div className="mon-rule" style={{ color: "rgba(27,27,27,0.4)" }}>
            <span className="line"></span><span className="mon"></span><span className="line"></span>
          </div>

          <div className="row" style={{ marginTop: 22, gap: 16, alignItems: "center" }}>
            <div style={{ width: 88, height: 88, background: "#F1C6C1", border: "1px solid rgba(27,27,27,0.18)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <span className="serif" style={{ fontSize: 44, color: "rgba(27,27,27,0.8)" }}>桜</span>
            </div>
            <div className="col" style={{ flex: 1, lineHeight: 1.4 }}>
              <span className="serif" style={{ fontSize: 22 }}>Sakura-iro</span>
              <span style={{ fontSize: 12, color: "rgba(27,27,27,0.6)" }}>さくらいろ · cherry pink</span>
              <span className="mono" style={{ fontSize: 13, marginTop: 6, letterSpacing: "0.04em" }}>#F1C6C1</span>
            </div>
          </div>

          <button className="btn btn--solid-ink" style={{ fontSize: 12, width: "100%", justifyContent: "space-between", marginTop: 22 }}>
            Open color page <span className="arrow">→</span>
          </button>

          <div className="col gap-2" style={{ marginTop: 22, paddingTop: 18, borderTop: "1px solid rgba(27,27,27,0.18)" }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "rgba(27,27,27,0.65)" }}>NEIGHBOURING KŌ</span>
            {[
              ["10", "雀始巣", "suzume hajimete sukū", "#8B7A5A"],
              ["12", "雷乃発声", "kaminari koe o hassu", "#5F6B7A"],
            ].map((n, i) => (
              <div key={i} className="row" style={{ alignItems: "center", gap: 12, padding: "6px 0" }}>
                <span className="mono" style={{ fontSize: 10, color: "rgba(27,27,27,0.6)", width: 24 }}>{n[0]}</span>
                <div style={{ width: 14, height: 14, background: n[3] }}></div>
                <span className="serif" style={{ fontSize: 14 }}>{n[1]} <span style={{ fontSize: 11, color: "rgba(27,27,27,0.6)", fontStyle: "italic" }}>{n[2]}</span></span>
              </div>
            ))}
          </div>
        </aside>
      </main>

      {/* Bottom band: tools row */}
      <section style={{ borderTop: "1px solid var(--paper-border)", padding: "28px 48px 36px", display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 28 }}>
        <div>
          <Eyebrow>This atlas, used as a calendar</Eyebrow>
          <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, margin: "12px 0 0", fontWeight: 400, fontStyle: "italic", color: "var(--sumi)" }}>
            One color every five days. Search the whole year, or follow it forward.
          </p>
          <div className="row gap-3" style={{ marginTop: 18 }}>
            <button className="btn btn--solid-ink" style={{ fontSize: 12 }}>Subscribe to today's kō <span className="arrow">→</span></button>
            <button className="btn btn--ghost-dark" style={{ fontSize: 12 }}>Search all 81</button>
          </div>
        </div>
        {[
          { num: "01", t: "Search any color",   note: "By name, hex, family, or season." },
          { num: "02", t: "Build a palette",    note: "Lock, swap, export to your stack." },
          { num: "03", t: "Read the methodology", note: "Why each kō has the color it has." },
        ].map(c => (
          <div key={c.num} className="col gap-2" style={{ paddingLeft: 24, borderLeft: "1px solid var(--paper-border)" }}>
            <span className="cat-num">{c.num}</span>
            <span className="serif" style={{ fontSize: 18 }}>{c.t}</span>
            <span style={{ fontSize: 12, color: "var(--nezumi)", lineHeight: 1.55 }}>{c.note}</span>
            <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", marginTop: 4 }}>OPEN →</a>
          </div>
        ))}
      </section>
    </div>
  );
}
window.AltKoyomi = AltKoyomi;