// Alt K — Sōan tea room (茶室)
// A cross-section view of a sukiya-style tea room. The tokonoma alcove
// holds "today's color"; the tatami floor is a structural grid; shoji
// screens slide aside to reveal palette, vocabulary, methodology, exports.

function AltTeaRoom() {
  const todayColor = { kanji: "桜色", romaji: "Sakura-iro", kana: "さくらいろ", hex: "#F1C6C1", scene: "Cherry blossoms first open." };

  // a single tatami unit
  function Tatami({ orient = "h", color = "#D4C5A0" }) {
    const w = orient === "h" ? 200 : 100;
    const h = orient === "h" ? 100 : 200;
    return (
      <div style={{ width: w, height: h, background: color, border: "1px solid rgba(60,40,20,0.5)", boxShadow: "inset 0 0 0 4px " + color + ", inset 0 0 0 5px rgba(60,40,20,0.18)", position: "relative" }}>
        {/* edging — heri trim */}
        <div style={{ position: "absolute", inset: 0, border: "4px solid #3B2A1E", opacity: 0.35 }}></div>
      </div>
    );
  }

  return (
    <div className="jca" style={{ background: "#1F1A14", color: "var(--washi)", minHeight: "100%", position: "relative", overflow: "hidden" }}>
      <div className="ink-tex" style={{ position: "absolute", inset: 0, pointerEvents: "none" }}></div>

      {/* Header — wooden beam */}
      <div style={{ background: "linear-gradient(#3B2A1E, #2A1E13 60%, #1F140A)", padding: "16px 48px", borderBottom: "2px solid #0A0604", display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative", zIndex: 2 }}>
        <span className="serif" style={{ fontSize: 16, letterSpacing: "0.06em", color: "#E8DDCB" }}>茶室 · Japanese Color Atlas</span>
        <div className="row gap-6 mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "rgba(232,221,203,0.7)" }}>
          <a>ATLAS</a><a>PALETTES</a><a>GUIDES</a><a>METHODOLOGY</a>
        </div>
        <Hanko char="茶" size={32} rotate={-3} />
      </div>

      {/* The tea-room interior — side section view */}
      <main style={{ padding: "32px 48px 24px", position: "relative" }}>
        {/* "Architectural" section frame */}
        <div style={{ position: "relative", height: 760, background: "linear-gradient(180deg, #2A1E13 0%, #1F1A14 25%, #1F1A14 100%)", border: "1px solid rgba(232,221,203,0.15)" }}>

          {/* Top beam (kamoi) */}
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 38, background: "linear-gradient(#5C4332, #3B2A1E)", borderBottom: "1px solid #0A0604" }}>
            <span className="tate serif" style={{ position: "absolute", right: 24, top: 8, fontSize: 18, letterSpacing: "0.3em", color: "#E8DDCB", opacity: 0.85 }}>一期一会</span>
          </div>

          {/* The room split into three "bays" */}
          <div className="row" style={{ position: "absolute", top: 38, left: 0, right: 0, bottom: 200 }}>

            {/* BAY 1 — Tokonoma alcove */}
            <div style={{ width: 360, position: "relative", borderRight: "1px solid rgba(232,221,203,0.15)" }}>
              {/* alcove inset shadow */}
              <div style={{ position: "absolute", inset: "16px 24px 16px 24px", background: "#0F0B07", border: "1px solid #5C4332", display: "flex", flexDirection: "column", alignItems: "center", padding: "24px 18px 18px" }}>
                <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.22em", color: "rgba(232,221,203,0.55)" }}>床の間 · TOKONOMA</span>

                {/* Hanging scroll (kakejiku) */}
                <div style={{ marginTop: 18, width: 130, position: "relative" }}>
                  {/* top roller */}
                  <div style={{ height: 10, background: "linear-gradient(#5C4332, #3B2A1E)", border: "1px solid #0A0604" }}></div>
                  {/* scroll body */}
                  <div style={{ background: "#E8DDCB", border: "1px solid #3B2A1E", padding: "20px 12px 24px", textAlign: "center", boxShadow: "0 0 0 6px #3B2A1E inset", position: "relative" }} className="washi-tex">
                    <span className="mono" style={{ fontSize: 8.5, letterSpacing: "0.2em", color: "#7C6B45" }}>本日の色</span>
                    <div className="serif" style={{ fontSize: 56, lineHeight: 0.9, margin: "16px 0 12px", color: "#1B1B1B" }}>{todayColor.kanji}</div>
                    {/* color block */}
                    <div style={{ width: 64, height: 28, background: todayColor.hex, margin: "0 auto", border: "1px solid rgba(0,0,0,0.18)" }}></div>
                    <div className="mono" style={{ marginTop: 10, fontSize: 9, color: "#7C6B45", letterSpacing: "0.08em" }}>{todayColor.hex}</div>
                    <Hanko char="桜" size={22} rotate={-4} />
                  </div>
                  {/* bottom roller */}
                  <div style={{ height: 10, background: "linear-gradient(#3B2A1E, #5C4332)", border: "1px solid #0A0604", marginTop: -1 }}></div>
                </div>

                {/* Floor flower arrangement — chabana */}
                <div style={{ marginTop: 18, display: "flex", alignItems: "flex-end", gap: 4 }}>
                  <div style={{ width: 30, height: 36, background: "#3B2A1E", borderRadius: "4px 4px 16px 16px" }}></div>
                  <div className="serif" style={{ fontSize: 22, color: todayColor.hex, marginBottom: 12 }}>桜</div>
                </div>
                <span className="serif" style={{ fontSize: 12, color: "rgba(232,221,203,0.6)", marginTop: 12, fontStyle: "italic" }}>{todayColor.kana} · {todayColor.scene}</span>
              </div>
            </div>

            {/* BAY 2 — Sliding shoji screens (each is a navigation panel) */}
            <div className="row" style={{ flex: 1, borderRight: "1px solid rgba(232,221,203,0.15)" }}>
              {[
                { label: "INDEX", kanji: "色", note: "All 81 source-aware colors" },
                { label: "PALETTES", kanji: "譜", note: "Build palettes, export tokens" },
                { label: "GUIDES", kanji: "学", note: "Colors in Japanese, grammar" },
              ].map((s, i) => (
                <div key={i} style={{ flex: 1, padding: "20px 16px", borderRight: i < 2 ? "1px solid rgba(232,221,203,0.15)" : "none", position: "relative", background: "linear-gradient(180deg, rgba(232,221,203,0.06), rgba(232,221,203,0.02))" }}>
                  {/* shoji lattice */}
                  <div style={{ position: "absolute", inset: 12, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gridTemplateRows: "1fr 1fr 1fr 1fr 1fr 1fr", gap: 0, opacity: 0.85 }}>
                    {Array.from({ length: 24 }).map((_, k) => (
                      <div key={k} style={{ background: "rgba(232,221,203,0.16)", border: "1px solid rgba(232,221,203,0.45)" }}></div>
                    ))}
                  </div>
                  {/* label & glyph centered */}
                  <div className="col" style={{ position: "absolute", inset: 12, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12 }}>
                    <span className="serif" style={{ fontSize: 88, lineHeight: 0.9, color: "#E8DDCB", textShadow: "0 0 28px rgba(232,221,203,0.4)" }}>{s.kanji}</span>
                    <span className="mono" style={{ fontSize: 10, letterSpacing: "0.25em", color: "rgba(232,221,203,0.8)" }}>{s.label}</span>
                    <span style={{ fontSize: 11, color: "rgba(232,221,203,0.6)", textAlign: "center", maxWidth: 160, lineHeight: 1.5, fontStyle: "italic" }} className="serif">{s.note}</span>
                  </div>
                  {/* handle */}
                  <span style={{ position: "absolute", left: "50%", bottom: 24, transform: "translateX(-50%)", width: 8, height: 24, background: "#3B2A1E", border: "1px solid #5C4332", borderRadius: 2 }}></span>
                </div>
              ))}
            </div>

            {/* BAY 3 — Hearth (ro) corner with palette of the day */}
            <div style={{ width: 280, padding: "20px 22px", position: "relative" }}>
              <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.22em", color: "rgba(232,221,203,0.55)" }}>炉 · HEARTH</span>
              <h4 className="serif" style={{ fontSize: 22, margin: "8px 0 14px", fontWeight: 400, color: "#E8DDCB", lineHeight: 1.2 }}>Today's palette</h4>

              {/* Tea bowl swatch */}
              <div className="col gap-2">
                {[
                  { kanji: "桜", romaji: "Sakura-iro", hex: "#F1C6C1" },
                  { kanji: "藍", romaji: "Ai-iro",     hex: "#264653" },
                  { kanji: "山吹", romaji: "Yamabuki", hex: "#D8A431" },
                  { kanji: "墨", romaji: "Sumi-iro",   hex: "#1B1B1B" },
                  { kanji: "抹茶", romaji: "Matcha",   hex: "#7A8B55" },
                ].map((c, i) => (
                  <div key={i} className="row" style={{ alignItems: "center", gap: 10, padding: "6px 10px", border: "1px solid rgba(232,221,203,0.12)", background: "rgba(232,221,203,0.04)" }}>
                    <span style={{ width: 22, height: 22, background: c.hex, border: "1px solid rgba(232,221,203,0.18)" }}></span>
                    <span className="serif" style={{ fontSize: 16, color: "#E8DDCB" }}>{c.kanji}</span>
                    <span style={{ flex: 1, fontSize: 11, color: "rgba(232,221,203,0.55)", fontStyle: "italic" }} className="serif">{c.romaji}</span>
                    <span className="mono" style={{ fontSize: 10, color: "rgba(232,221,203,0.55)" }}>{c.hex}</span>
                  </div>
                ))}
              </div>
              <button className="btn" style={{ width: "100%", justifyContent: "space-between", fontSize: 11, marginTop: 14, background: "#D8A431", color: "#1B1B1B", borderColor: "#D8A431" }}>Take palette · 持ち帰る <span className="arrow">→</span></button>

              {/* hearth glyph */}
              <div style={{ position: "absolute", left: 22, bottom: 22, width: 60, height: 60, background: "#0A0604", border: "1px solid #5C4332", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span className="serif" style={{ fontSize: 16, color: "#D8A431", letterSpacing: "0.2em" }}>湯</span>
              </div>
            </div>
          </div>

          {/* TATAMI FLOOR */}
          <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 200, background: "linear-gradient(180deg, #2A1E13 0%, #1A130C 60%)", padding: "20px 48px", display: "flex", alignItems: "flex-start", gap: 4, perspective: "800px" }}>
            <div style={{ display: "flex", gap: 4, transform: "rotateX(50deg)", transformOrigin: "top center", width: "100%", justifyContent: "center" }}>
              {Array.from({ length: 8 }).map((_, i) => (
                <Tatami key={i} orient={i % 3 === 0 ? "v" : "h"} color={i % 4 === 0 ? "#C7B589" : "#D4C5A0"} />
              ))}
            </div>
          </div>
        </div>

        {/* small subtitle below the room */}
        <div className="row" style={{ marginTop: 16, justifyContent: "space-between", alignItems: "center" }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "rgba(232,221,203,0.55)" }}>SECTION VIEW · SUKIYA STYLE · 4.5 TATAMI</span>
          <span className="serif" style={{ fontSize: 13, fontStyle: "italic", color: "rgba(232,221,203,0.55)" }}>Slide a screen to enter the atlas.</span>
        </div>
      </main>

      {/* BOTTOM — guest book + ecosystem */}
      <section style={{ padding: "20px 48px 36px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 36, borderTop: "1px solid rgba(232,221,203,0.15)" }}>
        <div>
          <Eyebrow color="rgba(232,221,203,0.55)">From the host</Eyebrow>
          <p className="serif" style={{ fontSize: 22, lineHeight: 1.5, margin: "12px 0 0", maxWidth: 640, fontStyle: "italic", color: "#E8DDCB", fontWeight: 400 }}>
            "Each session features one color. Today, sakura. Tomorrow, an indigo from Tokushima. The atlas is the rest of the tea house — please walk through."
          </p>
          <div className="row gap-3" style={{ marginTop: 20 }}>
            <button className="btn btn--primary" style={{ fontSize: 12 }}>Enter the atlas · 入る <span className="arrow">→</span></button>
            <button className="btn btn--ghost-light" style={{ fontSize: 12 }}>Read the methodology</button>
          </div>
        </div>
        <div className="col gap-2">
          <Eyebrow color="rgba(232,221,203,0.55)">Companion rooms</Eyebrow>
          <div className="col" style={{ marginTop: 6, border: "1px solid rgba(232,221,203,0.15)" }}>
            {[
              ["Chinese Color Atlas",       "茶室 · 中国"],
              ["Architecture Color Atlas",  "茶室 · 建築"],
              ["Photo Palette Extractor",   "道具 · 調色"],
            ].map((s, i, a) => (
              <a key={i} className="row" style={{ padding: "12px 16px", borderTop: i ? "1px solid rgba(232,221,203,0.1)" : "none", justifyContent: "space-between", color: "#E8DDCB" }}>
                <span className="serif" style={{ fontSize: 14 }}>{s[0]}</span>
                <span className="serif" style={{ fontSize: 13, color: "rgba(232,221,203,0.55)" }}>{s[1]} →</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
window.AltTeaRoom = AltTeaRoom;