// Alt F — Designer's terminal (型録 · Kataloku)
// The anti-museum direction: a power-user tool surface. Linear/Figma plugin
// feel — dark canvas, tabbed sidebars, dense tables, keyboard shortcuts
// visible. Japanese typography appears as DATA, not decoration.

function AltTerminal() {
  const list = [
    ...SAMPLE_COLORS,
    { kanji: "撫子色", romaji: "Nadeshiko-iro", kana: "なでしこいろ", en: "Dianthus pink", hex: "#E8B8C5" },
    { kanji: "鶸色",   romaji: "Hiwa-iro",     kana: "ひわいろ",     en: "Greenfinch yellow", hex: "#D8C857" },
    { kanji: "鴇色",   romaji: "Toki-iro",     kana: "ときいろ",     en: "Crane pink", hex: "#EBA9A2" },
    { kanji: "群青",   romaji: "Gunjō",        kana: "ぐんじょう",   en: "Ultramarine", hex: "#3B5998" },
  ];
  const selected = list[0];

  return (
    <div style={{ background: "#0E0F11", color: "#E6E2D9", minHeight: "100%", fontFamily: "var(--sans)", display: "flex", flexDirection: "column" }} className="jca jca--dark">

      {/* Top bar — like a code editor */}
      <div className="row" style={{ height: 38, borderBottom: "1px solid #1F2226", padding: "0 14px", alignItems: "center", justifyContent: "space-between", background: "#0A0B0D" }}>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <div className="row gap-2">
            <span style={{ width: 11, height: 11, borderRadius: 6, background: "#3B2A1E" }}></span>
            <span style={{ width: 11, height: 11, borderRadius: 6, background: "#3B2A1E" }}></span>
            <span style={{ width: 11, height: 11, borderRadius: 6, background: "#3B2A1E" }}></span>
          </div>
          <span className="mono" style={{ fontSize: 11, color: "#7A7468", letterSpacing: "0.04em", marginLeft: 8 }}>
            chromacathay/japanese-color-atlas <span style={{ color: "#4A4A40", margin: "0 6px" }}>·</span>
            <span style={{ color: "#D8A431" }}>atlas › traditional › spring ›</span> <span style={{ color: "#E6E2D9" }}>sakura-iro.color</span>
          </span>
        </div>
        <div className="row gap-4 mono" style={{ fontSize: 10, color: "#7A7468", letterSpacing: "0.08em" }}>
          <span>⌘K SEARCH</span><span>⌘E EXPORT</span><span>⌘P PALETTE</span><span>·</span><span style={{ color: "#7A8B55" }}>● CONNECTED</span>
        </div>
      </div>

      {/* Workspace: three panes */}
      <div className="row" style={{ flex: 1, alignItems: "stretch" }}>

        {/* LEFT: filters + list */}
        <aside style={{ width: 320, borderRight: "1px solid #1F2226", background: "#0A0B0D", display: "flex", flexDirection: "column" }}>
          {/* Search */}
          <div className="row" style={{ padding: "12px 14px", gap: 10, borderBottom: "1px solid #1F2226", alignItems: "center" }}>
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#7A7468" strokeWidth="1.5"><circle cx="7" cy="7" r="5"/><path d="M11 11l4 4"/></svg>
            <input style={{ flex: 1, background: "transparent", border: "none", color: "#E6E2D9", fontSize: 12, outline: "none", fontFamily: "var(--mono)" }} defaultValue="" placeholder="sakura | #F1C6C1 | 桜…" />
            <span className="mono" style={{ fontSize: 9, color: "#7A7468", padding: "2px 5px", border: "1px solid #1F2226", letterSpacing: "0.08em" }}>⌘ K</span>
          </div>

          {/* Filter tabs */}
          <div className="row" style={{ padding: "8px 10px", gap: 4, borderBottom: "1px solid #1F2226", flexWrap: "wrap" }}>
            {[["all", true, "81"], ["spring", false, "20"], ["summer", false, "12"], ["autumn", false, "20"], ["winter", false, "10"], ["indigo", false, "12"]].map(([t, a, c]) => (
              <span key={t} className="mono" style={{ fontSize: 10, padding: "4px 8px", letterSpacing: "0.06em", background: a ? "#1F2226" : "transparent", color: a ? "#E6E2D9" : "#7A7468", display: "flex", alignItems: "center", gap: 5 }}>
                {t}<span style={{ color: a ? "#D8A431" : "#4A4A40", fontSize: 9 }}>{c}</span>
              </span>
            ))}
          </div>

          {/* List header */}
          <div className="row mono" style={{ padding: "6px 14px", fontSize: 9, color: "#4A4A40", letterSpacing: "0.12em", borderBottom: "1px solid #1F2226" }}>
            <span style={{ width: 22 }}>·</span>
            <span style={{ width: 14 }}></span>
            <span style={{ flex: 1, marginLeft: 14 }}>NAME</span>
            <span>HEX</span>
          </div>

          {/* List items */}
          <div className="col" style={{ overflow: "hidden", flex: 1 }}>
            {list.map((c, i) => {
              const isSel = i === 0;
              return (
                <div key={i} className="row" style={{
                  padding: "9px 14px",
                  alignItems: "center",
                  gap: 14,
                  borderLeft: isSel ? "2px solid #D8A431" : "2px solid transparent",
                  background: isSel ? "#13151A" : "transparent",
                  cursor: "pointer",
                }}>
                  <span className="mono" style={{ fontSize: 9, color: "#4A4A40", width: 22 }}>{String(i + 1).padStart(3, "0")}</span>
                  <span style={{ width: 14, height: 14, background: c.hex, border: "1px solid rgba(255,255,255,0.06)" }}></span>
                  <div className="col" style={{ flex: 1, lineHeight: 1.3 }}>
                    <span style={{ fontSize: 12, color: isSel ? "#F4EFE6" : "#C9C2B3", fontFamily: "var(--mono)" }}>
                      <span className="serif" style={{ fontSize: 13, marginRight: 6 }}>{c.kanji}</span>{c.romaji.toLowerCase()}
                    </span>
                  </div>
                  <span className="mono" style={{ fontSize: 10, color: isSel ? "#D8A431" : "#7A7468", letterSpacing: "0.04em" }}>{c.hex}</span>
                </div>
              );
            })}
          </div>

          <div className="row mono" style={{ borderTop: "1px solid #1F2226", padding: "8px 14px", justifyContent: "space-between", fontSize: 9, color: "#4A4A40", letterSpacing: "0.12em" }}>
            <span>81 · LOADED 12</span>
            <span>↑↓ NAVIGATE · ↵ OPEN</span>
          </div>
        </aside>

        {/* CENTER: inspector */}
        <main style={{ flex: 1, padding: 0, display: "flex", flexDirection: "column", background: "#0E0F11" }}>
          {/* tabs */}
          <div className="row" style={{ borderBottom: "1px solid #1F2226", padding: "0 22px", alignItems: "center" }}>
            {[["sakura-iro.color", true], ["ai-iro.color"], ["+"]].map(([l, a], i) => (
              <span key={i} className="mono" style={{ fontSize: 11, padding: "10px 14px", color: a ? "#E6E2D9" : "#7A7468", borderBottom: a ? "2px solid #D8A431" : "2px solid transparent", marginBottom: -1, letterSpacing: "0.02em" }}>{l}</span>
            ))}
            <span style={{ marginLeft: "auto", color: "#4A4A40", fontSize: 10, padding: "10px 0" }} className="mono">⌘W CLOSE</span>
          </div>

          {/* HERO: big specimen */}
          <div style={{ padding: "32px 32px 24px", display: "grid", gridTemplateColumns: "320px 1fr", gap: 24, borderBottom: "1px solid #1F2226" }}>
            <div style={{ background: selected.hex, height: 240, position: "relative", border: "1px solid rgba(255,255,255,0.06)" }}>
              <div className="serif" style={{ position: "absolute", left: 20, top: 14, fontSize: 110, lineHeight: 0.9, color: "rgba(27,27,27,0.8)" }}>{selected.kanji}</div>
              <span className="mono" style={{ position: "absolute", right: 14, top: 12, fontSize: 10, color: "rgba(27,27,27,0.55)", letterSpacing: "0.12em" }}>014 / 081</span>
              <span className="mono" style={{ position: "absolute", right: 14, bottom: 12, fontSize: 12, color: "rgba(27,27,27,0.7)" }}>{selected.hex}</span>
            </div>
            <div className="col">
              <div className="row" style={{ alignItems: "baseline", gap: 14 }}>
                <span className="serif" style={{ fontSize: 44, color: "#F4EFE6", letterSpacing: "-0.01em" }}>{selected.kanji} {selected.romaji}</span>
                <span style={{ fontSize: 14, color: "#7A7468" }} className="mono">{selected.kana}</span>
              </div>
              <div className="row gap-2" style={{ marginTop: 12 }}>
                {["ATTRIBUTED", "DIGITAL APPROX.", "TOKEN-READY"].map((b, i) => (
                  <span key={b} className="mono" style={{ fontSize: 9, padding: "4px 7px", border: "1px solid #1F2226", color: ["#7A8B55", "#7A7468", "#D8A431"][i], letterSpacing: "0.12em" }}>● {b}</span>
                ))}
              </div>

              {/* Quick data grid */}
              <div className="row mono" style={{ marginTop: 22, fontSize: 11, gap: 0, border: "1px solid #1F2226" }}>
                {[
                  ["HEX",  selected.hex.toUpperCase()],
                  ["RGB",  "241 198 193"],
                  ["HSL",  "5° 67% 85%"],
                  ["LAB",  "84.1 13.2 5.4"],
                  ["LCH",  "84.1 14.3 22°"],
                ].map((p, i, a) => (
                  <div key={i} className="col" style={{ flex: 1, padding: "10px 12px", borderRight: i < a.length - 1 ? "1px solid #1F2226" : "none" }}>
                    <span style={{ color: "#4A4A40", fontSize: 9, letterSpacing: "0.15em" }}>{p[0]}</span>
                    <span style={{ color: "#E6E2D9", marginTop: 4, letterSpacing: "0.04em" }}>{p[1]}</span>
                  </div>
                ))}
              </div>

              <p style={{ fontSize: 12, color: "#9A9384", lineHeight: 1.6, margin: "18px 0 0", maxWidth: 540 }}>
                Pale, slightly warm pink of cherry blossom petals against overcast sky. Recorded in Heian-period color tables for layered court robes. Family: 桃色 (momo-iro / pink). Source ID: <span style={{ color: "#D8A431" }}>nihon-shikifu/014</span>.
              </p>
            </div>
          </div>

          {/* Code panel — tokens */}
          <div style={{ flex: 1, padding: "20px 32px", overflow: "hidden" }}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 14, alignItems: "center" }}>
              <Eyebrow color="#7A7468">Tokens · output</Eyebrow>
              <div className="row gap-2 mono" style={{ fontSize: 9, letterSpacing: "0.12em" }}>
                {[["css", true], ["tailwind"], ["json"], ["figma"], ["ase"]].map(([t, a]) => (
                  <span key={t} style={{ padding: "4px 8px", background: a ? "#1F2226" : "transparent", color: a ? "#D8A431" : "#7A7468", border: "1px solid #1F2226" }}>{t.toUpperCase()}</span>
                ))}
              </div>
            </div>
            <pre style={{ background: "#0A0B0D", border: "1px solid #1F2226", padding: "18px 22px", margin: 0, fontFamily: "var(--mono)", fontSize: 12.5, lineHeight: 1.8, color: "#C9C2B3", borderLeft: "2px solid #D8A431" }}>
<span style={{ color: "#4A4A40" }}>{`/* Generated from chromacathay.jp/atlas/sakura-iro */`}</span>
{`\n`}<span style={{ color: "#7A8B55" }}>:root</span> {`{`}
{`\n  `}<span style={{ color: "#5F9EA0" }}>--jp-sakura-iro</span>:           <span style={{ color: "#F1C6C1" }}>#F1C6C1</span>;
{`\n  `}<span style={{ color: "#5F9EA0" }}>--jp-sakura-iro-rgb</span>:       <span style={{ color: "#D8A431" }}>241 198 193</span>;
{`\n  `}<span style={{ color: "#5F9EA0" }}>--jp-sakura-iro-on-light</span>:  <span style={{ color: "#F1C6C1" }}>oklch(82% 0.04 22)</span>;
{`\n  `}<span style={{ color: "#5F9EA0" }}>--jp-sakura-iro-on-dark</span>:   <span style={{ color: "#F1C6C1" }}>oklch(72% 0.05 22)</span>;
{`\n  `}<span style={{ color: "#5F9EA0" }}>--jp-sakura-iro-contrast</span>:  <span style={{ color: "#7A7468" }}>#1B1B1B</span>;  <span style={{ color: "#4A4A40" }}>{`/* AA ✓ */`}</span>
{`\n}`}</pre>
            <div className="row" style={{ marginTop: 12, justifyContent: "space-between", alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 10, color: "#7A7468", letterSpacing: "0.1em" }}>5 LINES · 137 BYTES · ALSO IN .scss / .less / .json / .ase</span>
              <div className="row gap-2">
                <button style={{ background: "transparent", color: "#E6E2D9", border: "1px solid #1F2226", padding: "7px 12px", fontSize: 11, cursor: "pointer", fontFamily: "var(--mono)", letterSpacing: "0.1em" }}>COPY ⌘C</button>
                <button style={{ background: "#D8A431", color: "#0E0F11", border: "1px solid #D8A431", padding: "7px 12px", fontSize: 11, cursor: "pointer", fontFamily: "var(--mono)", letterSpacing: "0.1em", fontWeight: 600 }}>ADD TO PALETTE ⌘+</button>
              </div>
            </div>
          </div>
        </main>

        {/* RIGHT: working palette */}
        <aside style={{ width: 280, borderLeft: "1px solid #1F2226", background: "#0A0B0D", padding: 0, display: "flex", flexDirection: "column" }}>
          <div className="row" style={{ padding: "12px 14px", borderBottom: "1px solid #1F2226", justifyContent: "space-between", alignItems: "center" }}>
            <span className="mono" style={{ fontSize: 11, color: "#E6E2D9", letterSpacing: "0.06em" }}>palette.scratch</span>
            <span className="mono" style={{ fontSize: 9, color: "#D8A431", letterSpacing: "0.12em" }}>● UNSAVED · 5/8</span>
          </div>
          <div className="col" style={{ flex: 1 }}>
            {list.slice(0, 5).map((c, i) => (
              <div key={i} className="row" style={{ padding: "12px 14px", alignItems: "center", gap: 12, borderBottom: i < 4 ? "1px solid #1F2226" : "none" }}>
                <span className="mono" style={{ fontSize: 9, color: "#4A4A40", width: 14 }}>{i + 1}</span>
                <div style={{ width: 36, height: 36, background: c.hex, border: "1px solid rgba(255,255,255,0.06)" }}></div>
                <div className="col" style={{ flex: 1, lineHeight: 1.3 }}>
                  <span className="serif" style={{ fontSize: 14, color: "#F4EFE6" }}>{c.kanji}</span>
                  <span className="mono" style={{ fontSize: 9.5, color: "#7A7468", letterSpacing: "0.04em" }}>{c.hex}</span>
                </div>
                <div className="col gap-1" style={{ color: "#4A4A40", fontSize: 11 }}>
                  <span>⋮</span>
                </div>
              </div>
            ))}
            {/* add */}
            <div className="row" style={{ padding: "16px 14px", alignItems: "center", gap: 12, color: "#4A4A40", border: "1px dashed #1F2226", margin: 12 }}>
              <span style={{ fontSize: 18, lineHeight: 1 }}>+</span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.12em" }}>ADD CURRENT · ⌘+</span>
            </div>
          </div>

          <div className="col" style={{ padding: "10px 14px", borderTop: "1px solid #1F2226", gap: 8 }}>
            <span className="mono" style={{ fontSize: 9, color: "#4A4A40", letterSpacing: "0.15em" }}>CONTRAST · WCAG AA</span>
            {[["sakura → sumi", "8.4:1", "pass"], ["yamabuki → washi", "2.1:1", "fail"]].map((p, i) => (
              <div key={i} className="row mono" style={{ fontSize: 10, justifyContent: "space-between" }}>
                <span style={{ color: "#9A9384" }}>{p[0]}</span>
                <span style={{ color: p[2] === "fail" ? "#D8A431" : "#7A8B55" }}>{p[1]} · {p[2].toUpperCase()}</span>
              </div>
            ))}
            <button style={{ marginTop: 6, background: "#1F2226", color: "#E6E2D9", border: "1px solid #1F2226", padding: "9px 12px", fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.1em", cursor: "pointer" }}>EXPORT ALL · ⌘E</button>
          </div>
        </aside>
      </div>

      {/* Bottom status bar */}
      <div className="row mono" style={{ borderTop: "1px solid #1F2226", background: "#0A0B0D", padding: "6px 14px", fontSize: 10, letterSpacing: "0.08em", color: "#7A7468", justifyContent: "space-between" }}>
        <div className="row gap-4">
          <span><span style={{ color: "#7A8B55" }}>●</span> japanese-color-atlas · vol II</span>
          <span>UTF-8</span>
          <span>LN 14, COL 6</span>
        </div>
        <div className="row gap-4">
          <span>81 records · source-aware · 72 kō</span>
          <span style={{ color: "#D8A431" }}>READY</span>
        </div>
      </div>
    </div>
  );
}
window.AltTerminal = AltTerminal;