// Palette builder page
function PaletteBuilder() {
  const palette = [
    SAMPLE_COLORS[0], // sakura
    SAMPLE_COLORS[1], // ai
    SAMPLE_COLORS[5], // sumi
    SAMPLE_COLORS[4], // yamabuki
    SAMPLE_COLORS[6], // matcha
  ];
  const library = SAMPLE_COLORS;

  return (
    <div className="jca jca--dark" style={{ background: "var(--deep-ink)", color: "var(--washi)", minHeight: "100%" }}>
      <SiteHeader dark />

      <div style={{ padding: "28px 56px 0", maxWidth: 1440, margin: "0 auto" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            <Eyebrow num="TOOL 04" color="rgba(244,239,230,0.62)">Palette Builder · 調色</Eyebrow>
            <h1 className="serif" style={{ fontSize: 44, margin: "12px 0 0", fontWeight: 400, letterSpacing: "-0.01em" }}>
              <span style={{ borderBottom: "1px dashed rgba(244,239,230,0.4)", paddingBottom: 4 }} contentEditable suppressContentEditableWarning>Hanami · 花見 spring set</span>
            </h1>
            <div className="row gap-4" style={{ marginTop: 12, color: "rgba(244,239,230,0.6)", fontSize: 12 }}>
              <span className="mono" style={{ letterSpacing: "0.12em" }}>5 / 8 SWATCHES</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span className="mono" style={{ letterSpacing: "0.12em" }}>EDITED 2 MIN AGO</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span className="mono" style={{ letterSpacing: "0.12em" }}>SHARED</span>
            </div>
          </div>
          <div className="row gap-2">
            <button className="btn btn--ghost-light" style={{ fontSize: 12 }}>Share link</button>
            <button className="btn btn--primary" style={{ fontSize: 12 }}>Save palette <span className="arrow">→</span></button>
          </div>
        </div>
      </div>

      <div style={{ padding: "32px 56px 80px", maxWidth: 1440, margin: "0 auto", display: "grid", gridTemplateColumns: "300px 1fr 320px", gap: 28 }}>
        {/* LEFT: library */}
        <aside style={{ background: "rgba(244,239,230,0.03)", border: "1px solid var(--soft-border)", padding: 0, alignSelf: "flex-start" }}>
          <div className="row" style={{ padding: "14px 16px", borderBottom: "1px solid var(--soft-border)", alignItems: "center", gap: 10 }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" style={{ opacity: 0.6 }}><circle cx="7" cy="7" r="5"/><path d="M11 11l4 4"/></svg>
            <span style={{ fontSize: 13, color: "rgba(244,239,230,0.55)", flex: 1 }}>Search 81 colors…</span>
          </div>
          <div className="row gap-2" style={{ padding: "10px 14px", borderBottom: "1px solid var(--soft-border)", flexWrap: "wrap" }}>
            {["All", "Spring", "Indigo", "Earth", "Black"].map((t, i) => (
              <span key={t} className="mono" style={{ fontSize: 9.5, padding: "4px 8px", border: "1px solid var(--soft-border)", letterSpacing: "0.12em", background: i === 0 ? "var(--washi)" : "transparent", color: i === 0 ? "var(--sumi)" : "rgba(244,239,230,0.7)" }}>{t.toUpperCase()}</span>
            ))}
          </div>
          <div className="col" style={{ maxHeight: 460, overflow: "hidden" }}>
            {library.map((c, i) => (
              <div key={i} className="row" style={{ alignItems: "center", gap: 12, padding: "10px 14px", borderBottom: i < library.length - 1 ? "1px solid rgba(244,239,230,0.06)" : "none", cursor: "grab" }}>
                <div style={{ width: 32, height: 32, background: c.hex, border: "1px solid rgba(0,0,0,0.2)" }}></div>
                <div className="col" style={{ flex: 1, lineHeight: 1.3 }}>
                  <span className="serif" style={{ fontSize: 14 }}>{c.kanji} <span style={{ color: "rgba(244,239,230,0.55)", fontSize: 11, marginLeft: 4 }}>{c.romaji}</span></span>
                  <span className="mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.45)" }}>{c.hex}</span>
                </div>
                <button style={{ width: 24, height: 24, border: "1px solid var(--soft-border)", background: "transparent", color: "rgba(244,239,230,0.7)", fontSize: 14, lineHeight: 1, cursor: "pointer" }}>+</button>
              </div>
            ))}
          </div>
        </aside>

        {/* CENTER: palette strip + preview */}
        <main className="col gap-4">
          {/* The palette strip */}
          <div style={{ border: "1px solid var(--soft-border)" }}>
            <div className="row" style={{ padding: "12px 16px", borderBottom: "1px solid var(--soft-border)", justifyContent: "space-between", alignItems: "center" }}>
              <div className="row gap-3" style={{ alignItems: "center" }}>
                <Hanko char="譜" size={28} rotate={-3} />
                <span className="eyebrow" style={{ color: "rgba(244,239,230,0.62)" }}>Working palette</span>
              </div>
              <div className="row gap-3 mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.55)", letterSpacing: "0.12em" }}>
                <span>↺ UNDO</span><span>SHUFFLE</span><span>EXPORT ALL</span>
              </div>
            </div>
            <div className="row" style={{ height: 360 }}>
              {palette.map((c, i) => {
                const isDark = ["#1B1B1B", "#264653", "#19313D", "#6B4C7A"].includes(c.hex);
                const fg = isDark ? "rgba(244,239,230,0.92)" : "rgba(27,27,27,0.85)";
                return (
                  <div key={i} style={{ flex: 1, background: c.hex, position: "relative", color: fg, borderRight: i < palette.length - 1 ? "1px solid rgba(0,0,0,0.18)" : "none", padding: 18 }}>
                    {/* lock icon for first */}
                    <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                      <span className="mono" style={{ fontSize: 10, opacity: 0.75, letterSpacing: "0.12em" }}>{String(i + 1).padStart(2, "0")} / {palette.length}</span>
                      <div className="row gap-2" style={{ alignItems: "center" }}>
                        {i === 1 && <span style={{ fontSize: 11, padding: "2px 6px", background: "var(--yamabuki)", color: "var(--sumi)" }} className="mono">LOCK</span>}
                        <span style={{ fontSize: 14, opacity: 0.7 }}>⋮</span>
                      </div>
                    </div>
                    <div style={{ position: "absolute", bottom: 22, left: 18, right: 18 }}>
                      <div className="serif" style={{ fontSize: 28, lineHeight: 1 }}>{c.kanji}</div>
                      <div style={{ fontSize: 11, marginTop: 6, opacity: 0.8 }}>{c.romaji}</div>
                      <div className="mono" style={{ fontSize: 12, marginTop: 8, opacity: 0.9, letterSpacing: "0.04em" }}>{c.hex}</div>
                      <div className="row gap-2" style={{ marginTop: 14 }}>
                        <span className="mono" style={{ fontSize: 9, padding: "3px 7px", border: `1px solid ${fg}`, opacity: 0.85, letterSpacing: "0.12em" }}>COPY</span>
                        <span className="mono" style={{ fontSize: 9, padding: "3px 7px", border: `1px solid ${fg}`, opacity: 0.85, letterSpacing: "0.12em" }}>SWAP</span>
                      </div>
                    </div>
                  </div>
                );
              })}
              {/* add slot */}
              <div style={{ width: 100, background: "rgba(244,239,230,0.04)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, color: "rgba(244,239,230,0.55)", borderLeft: "1px dashed var(--soft-border)" }}>
                <span style={{ fontSize: 28, fontWeight: 200 }}>+</span>
                <span className="mono" style={{ fontSize: 9, letterSpacing: "0.15em" }}>ADD</span>
              </div>
            </div>
          </div>

          {/* Preview tabs */}
          <div style={{ border: "1px solid var(--soft-border)" }}>
            <div className="row" style={{ borderBottom: "1px solid var(--soft-border)", padding: "0 16px" }}>
              {[["Landing Page", true], ["Tea Packaging"], ["Mobile UI"], ["Print Spread"]].map(([l, a]) => (
                <span key={l} style={{ padding: "14px 16px", fontSize: 12, color: a ? "var(--washi)" : "rgba(244,239,230,0.55)", borderBottom: a ? "2px solid var(--yamabuki)" : "2px solid transparent", marginBottom: -1 }}>{l}</span>
              ))}
              <span style={{ marginLeft: "auto", padding: "14px 0", fontSize: 10, color: "rgba(244,239,230,0.55)" }} className="mono">PREVIEW ↗</span>
            </div>
            <div style={{ background: "var(--warm-paper)", padding: 32, position: "relative" }} className="washi-tex">
              {/* Mock landing page preview */}
              <div className="row" style={{ justifyContent: "space-between", marginBottom: 28, color: "var(--sumi)" }}>
                <span className="serif" style={{ fontSize: 18 }}>春茶 Spring Tea Co.</span>
                <div className="row gap-4" style={{ fontSize: 11, color: "var(--nezumi)" }}>
                  <span>Shop</span><span>Origin</span><span>Journal</span><span>Cart (2)</span>
                </div>
              </div>
              <div className="row gap-6" style={{ alignItems: "flex-start" }}>
                <div style={{ flex: 1, color: "var(--sumi)" }}>
                  <Badge tone="beni">NEW · 新茶</Badge>
                  <h4 className="serif" style={{ fontSize: 38, margin: "12px 0 12px", lineHeight: 1, fontWeight: 400, color: "var(--aizome)" }}>
                    First-flush sencha,<br/>picked at dawn.
                  </h4>
                  <p style={{ fontSize: 13, color: "var(--sumi)", lineHeight: 1.55, maxWidth: 320, margin: "0 0 16px", opacity: 0.85 }}>
                    From a single Uji garden. Sakura-leaf wrapping, indigo tin, hand-stamped seal.
                  </p>
                  <div className="row gap-2">
                    <span style={{ padding: "8px 14px", background: "var(--aizome)", color: "var(--washi)", fontSize: 12 }}>Order · ¥3,800</span>
                    <span style={{ padding: "8px 14px", border: "1px solid var(--sumi)", color: "var(--sumi)", fontSize: 12 }}>Learn more</span>
                  </div>
                </div>
                <div style={{ width: 200, height: 220, background: "var(--sakura)", position: "relative", border: "1px solid rgba(0,0,0,0.06)" }}>
                  <div style={{ position: "absolute", inset: 16, background: "var(--washi)", border: `1px solid var(--aizome)` }}>
                    <div style={{ position: "absolute", inset: 12, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                      <span className="mono" style={{ fontSize: 9, color: "var(--aizome)", letterSpacing: "0.18em" }}>SENCHA · 煎茶</span>
                      <div className="serif" style={{ fontSize: 28, color: "var(--aizome)", lineHeight: 1 }}>春<br/>茶</div>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                        <span className="mono" style={{ fontSize: 9, color: "var(--matcha)" }}>50g</span>
                        <Hanko char="春" size={24} rotate={-3} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style={{ position: "absolute", bottom: 12, right: 16 }} className="mono">
                <span style={{ fontSize: 9, color: "var(--nezumi)", letterSpacing: "0.15em" }}>LIVE PREVIEW · 1 / 4</span>
              </div>
            </div>
          </div>
        </main>

        {/* RIGHT: export + contrast */}
        <aside className="col gap-4" style={{ alignSelf: "flex-start" }}>
          {/* Export */}
          <div style={{ border: "1px solid var(--soft-border)" }}>
            <div className="row" style={{ padding: "14px 16px", borderBottom: "1px solid var(--soft-border)", justifyContent: "space-between" }}>
              <span className="eyebrow" style={{ color: "rgba(244,239,230,0.62)" }}>Export</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--yamabuki)", letterSpacing: "0.12em" }}>CSS</span>
            </div>
            <div className="row gap-2" style={{ padding: "12px 12px", flexWrap: "wrap" }}>
              {[["HEX", true], ["CSS", true], ["TAILWIND"], ["JSON"], ["ASE"], ["FIGMA"]].map(([f, a]) => (
                <span key={f} className="mono" style={{ fontSize: 10, padding: "5px 9px", border: "1px solid var(--soft-border)", letterSpacing: "0.12em", background: a ? "var(--washi)" : "transparent", color: a ? "var(--sumi)" : "rgba(244,239,230,0.7)" }}>{f}</span>
              ))}
            </div>
            <div style={{ padding: "12px 16px 16px", fontSize: 11.5, lineHeight: 1.75, fontFamily: "var(--mono)", color: "rgba(244,239,230,0.85)", borderTop: "1px solid var(--soft-border)" }}>
              <div style={{ color: "rgba(244,239,230,0.4)" }}>/* hanami spring set */</div>
              <div><span style={{ color: "var(--asagi)" }}>--jp-sakura</span>: <span style={{ color: "var(--sakura)" }}>#F1C6C1</span>;</div>
              <div><span style={{ color: "var(--asagi)" }}>--jp-ai</span>:     <span style={{ color: "var(--asagi)" }}>#264653</span>;</div>
              <div><span style={{ color: "var(--asagi)" }}>--jp-sumi</span>:   <span style={{ color: "rgba(244,239,230,0.7)" }}>#1B1B1B</span>;</div>
              <div><span style={{ color: "var(--asagi)" }}>--jp-yamabuki</span>: <span style={{ color: "var(--yamabuki)" }}>#D8A431</span>;</div>
              <div><span style={{ color: "var(--asagi)" }}>--jp-matcha</span>: <span style={{ color: "var(--matcha)" }}>#7A8B55</span>;</div>
            </div>
            <button className="btn btn--primary" style={{ width: "100%", borderRadius: 0, justifyContent: "center", borderTop: "1px solid var(--soft-border)" }}>
              Copy snippet <span className="arrow">→</span>
            </button>
          </div>

          {/* Contrast warning */}
          <div style={{ border: "1px solid var(--yamabuki)", background: "rgba(216,164,49,0.06)", padding: "16px 18px" }}>
            <div className="row gap-3" style={{ alignItems: "center", marginBottom: 8 }}>
              <span style={{ width: 22, height: 22, borderRadius: 11, background: "var(--yamabuki)", color: "var(--sumi)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600 }}>!</span>
              <span className="eyebrow" style={{ color: "var(--yamabuki)" }}>Contrast notice</span>
            </div>
            <p style={{ fontSize: 12, lineHeight: 1.55, margin: "0 0 10px", color: "rgba(244,239,230,0.85)" }}>
              Two pairings fall below WCAG AA when used as body text:
            </p>
            <div className="col gap-2">
              {[["Sakura on Washi", "1.4 : 1", "fail"], ["Yamabuki on Washi", "2.1 : 1", "fail"], ["Ai on Washi", "8.3 : 1", "pass"]].map((p, i) => (
                <div key={i} className="row" style={{ justifyContent: "space-between", fontSize: 11 }}>
                  <span>{p[0]}</span>
                  <span className="mono" style={{ color: p[2] === "fail" ? "var(--yamabuki)" : "var(--matcha)" }}>{p[1]} · {p[2].toUpperCase()}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Share */}
          <div style={{ border: "1px solid var(--soft-border)", padding: "16px 18px" }}>
            <span className="eyebrow" style={{ color: "rgba(244,239,230,0.62)" }}>Share</span>
            <div className="row gap-2" style={{ marginTop: 12, alignItems: "center", padding: "8px 10px", border: "1px solid var(--soft-border)" }}>
              <span className="mono" style={{ fontSize: 11, color: "rgba(244,239,230,0.85)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>chromacathay.jp/p/hanami-mz9</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--yamabuki)", letterSpacing: "0.12em" }}>COPY</span>
            </div>
          </div>
        </aside>
      </div>

      <SiteFooter dark />
    </div>
  );
}
window.PaletteBuilder = PaletteBuilder;