// Component style guide
function ComponentsGuide() {
  return (
    <div className="jca" style={{ background: "var(--washi)", minHeight: "100%", padding: "48px 56px 64px" }}>
      {/* header */}
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36, paddingBottom: 24, borderBottom: "1px solid var(--paper-border)" }}>
        <div>
          <Eyebrow num="STYLE GUIDE 00">Components · 部品</Eyebrow>
          <h1 className="serif" style={{ fontSize: 56, margin: "12px 0 0", lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400 }}>
            Atlas Components
          </h1>
        </div>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <Hanko char="部" size={42} rotate={-3} />
          <div className="col" style={{ lineHeight: 1.3 }}>
            <span className="eyebrow muted">15 components · 4 ranges</span>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--nezumi)" }}>VERSION 2.6 · 2026</span>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>

        {/* COLOR */}
        <Block title="Color · 色" num="01" subtitle="The base palette. Sumi for ink, washi for paper, ai/beni/yamabuki for accent, matcha as quiet support.">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
            {[
              ["Sumi",       "#1B1B1B"],
              ["Deep Ink",   "#111111"],
              ["Washi",      "#F4EFE6"],
              ["Warm Paper", "#E8DDCB"],
              ["Aizome",     "#264653"],
              ["Beni",       "#B33A3A"],
              ["Sakura",     "#F1C6C1"],
              ["Yamabuki",   "#D8A431"],
              ["Matcha",     "#7A8B55"],
              ["Murasaki",   "#6B4C7A"],
              ["Asagi",      "#5F9EA0"],
              ["Nezumi",     "#7C7A73"],
            ].map(([n, h]) => {
              const isDark = ["#1B1B1B", "#111111", "#264653", "#19313D", "#6B4C7A"].includes(h);
              return (
                <div key={n} style={{ background: h, height: 84, padding: 10, color: isDark ? "rgba(244,239,230,0.92)" : "rgba(27,27,27,0.85)", display: "flex", flexDirection: "column", justifyContent: "space-between", border: "1px solid rgba(0,0,0,0.06)" }}>
                  <span style={{ fontSize: 11 }} className="serif">{n}</span>
                  <span className="mono" style={{ fontSize: 9, opacity: 0.85 }}>{h}</span>
                </div>
              );
            })}
          </div>
        </Block>

        {/* TYPE */}
        <Block title="Typography · 字" num="02" subtitle="Noto Serif JP for display + kanji. Inter for UI. JetBrains Mono for labels.">
          <div className="col gap-3">
            <div className="row" style={{ alignItems: "baseline", justifyContent: "space-between", borderBottom: "1px solid var(--paper-border)", paddingBottom: 10 }}>
              <span className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em" }}>桜色 Sakura-iro</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--nezumi)", letterSpacing: "0.12em" }}>SERIF · 56 / 400</span>
            </div>
            <div className="row" style={{ alignItems: "baseline", justifyContent: "space-between", borderBottom: "1px solid var(--paper-border)", paddingBottom: 10 }}>
              <span className="serif" style={{ fontSize: 28 }}>Editorial heading</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--nezumi)", letterSpacing: "0.12em" }}>SERIF · 28 / 400</span>
            </div>
            <div className="row" style={{ alignItems: "baseline", justifyContent: "space-between", borderBottom: "1px solid var(--paper-border)", paddingBottom: 10 }}>
              <span style={{ fontSize: 16 }}>Body text — pale pink against ivory needs care. Always pair with a hex value.</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--nezumi)", letterSpacing: "0.12em", whiteSpace: "nowrap" }}>SANS · 16 / 400</span>
            </div>
            <div className="row" style={{ alignItems: "baseline", justifyContent: "space-between" }}>
              <span className="mono" style={{ fontSize: 12, letterSpacing: "0.15em" }}>SOURCE-BACKED · DIGITAL APPROXIMATION</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--nezumi)", letterSpacing: "0.12em" }}>MONO · 12 / 500</span>
            </div>
          </div>
        </Block>

        {/* BADGES */}
        <Block title="Status badges" num="03" subtitle="Every color record carries one or more. Plain border, no fills.">
          <div className="row gap-2" style={{ flexWrap: "wrap" }}>
            <Badge tone="ink" dot>SOURCE-BACKED</Badge>
            <Badge tone="ink" dot>ATTRIBUTED</Badge>
            <Badge tone="indigo" dot>MEASURED REFERENCE</Badge>
            <Badge tone="muted" dot>DIGITAL APPROXIMATION</Badge>
            <Badge tone="matcha" dot>DESIGN TOKEN READY</Badge>
            <Badge tone="beni" dot>NEW · 新</Badge>
            <Badge tone="gold" dot>BETA</Badge>
          </div>
        </Block>

        {/* BUTTONS */}
        <Block title="Buttons" num="04" subtitle="Square corners. Hairline borders. No drop shadows. The hover state is a fill swap, not a glow.">
          <div className="row gap-3" style={{ flexWrap: "wrap" }}>
            <button className="btn btn--solid-ink">Primary action <span className="arrow">→</span></button>
            <button className="btn btn--ghost-dark">Secondary</button>
            <button className="btn" style={{ background: "var(--beni)", color: "var(--washi)", borderColor: "var(--beni)" }}>Beni accent</button>
            <button className="btn" style={{ background: "var(--aizome)", color: "var(--washi)", borderColor: "var(--aizome)" }}>Aizome</button>
          </div>
          <div className="row gap-3" style={{ flexWrap: "wrap", marginTop: 12 }}>
            <span style={{ padding: "5px 10px", border: "1px solid var(--paper-border)", fontSize: 10, letterSpacing: "0.12em" }} className="mono">SEGMENT · IDLE</span>
            <span style={{ padding: "5px 10px", background: "var(--sumi)", color: "var(--washi)", fontSize: 10, letterSpacing: "0.12em" }} className="mono">SEGMENT · ACTIVE</span>
            <span style={{ padding: "5px 10px", border: "1px solid var(--paper-border)", fontSize: 10, letterSpacing: "0.12em", color: "var(--nezumi)" }} className="mono">SEGMENT · DISABLED</span>
          </div>
        </Block>

        {/* HANKO + ORNAMENTS */}
        <Block title="Hanko & ornaments" num="05" subtitle="Red seal stamps for issue marks. Mon ornament as horizontal divider.">
          <div className="row gap-4" style={{ alignItems: "center", marginBottom: 18 }}>
            <Hanko char="色" size={56} rotate={-4} />
            <Hanko char="印" size={44} rotate={-2} />
            <Hanko char="春" size={36} />
            <Hanko char="朱" size={32} rotate={-3} />
          </div>
          <div className="mon-rule" style={{ color: "var(--sumi)" }}>
            <span className="line"></span><span className="mon"></span><span className="line"></span>
          </div>
          <p style={{ fontSize: 11, color: "var(--nezumi)", marginTop: 12 }}>Use sparingly. Never more than one hanko per viewport unless it's a row of catalog stamps.</p>
        </Block>

        {/* SWATCH CARD */}
        <Block title="Swatch card" num="06" subtitle="The atomic unit of the atlas — chip, name, kana, hex.">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            {SAMPLE_COLORS.slice(0, 3).map((c, i) => (
              <SwatchCard key={i} c={c} num={`Nº ${String(i + 1).padStart(3, "0")}`} />
            ))}
          </div>
        </Block>

        {/* TABLE ROW */}
        <Block title="Vocab table" num="07" subtitle="Warm paper rows, ink header, square cells. No zebra striping.">
          <div style={{ border: "1px solid var(--paper-border)" }}>
            <div className="row mono" style={{ background: "var(--sumi)", color: "var(--washi)", padding: "10px 14px", fontSize: 9.5, letterSpacing: "0.18em" }}>
              <div style={{ width: 90 }}>ENGLISH</div>
              <div style={{ width: 80 }}>KANJI</div>
              <div style={{ flex: 1 }}>ROMAJI</div>
              <div style={{ width: 70, textAlign: "right" }}>HEX</div>
            </div>
            {[["Red", "赤", "aka", "#B33A3A"], ["Blue", "青", "ao", "#264653"], ["Green", "緑", "midori", "#7A8B55"]].map((r, i) => (
              <div key={i} className="row" style={{ padding: "10px 14px", borderTop: "1px solid var(--paper-border)", fontSize: 13, alignItems: "center" }}>
                <div style={{ width: 90 }}>{r[0]}</div>
                <div style={{ width: 80 }} className="serif">{r[1]}</div>
                <div style={{ flex: 1, fontStyle: "italic", color: "var(--nezumi)" }}>{r[2]}</div>
                <div style={{ width: 70, textAlign: "right" }} className="mono">{r[3]}</div>
              </div>
            ))}
          </div>
        </Block>

        {/* MOBILE NAV */}
        <Block title="Mobile tab bar" num="08" subtitle="Glyph + label. The kanji is the icon.">
          <div className="row" style={{ border: "1px solid var(--paper-border)", padding: "12px 0", background: "var(--washi)", justifyContent: "space-around" }}>
            {[
              { label: "Atlas", glyph: "色", active: true },
              { label: "Search", glyph: "尋" },
              { label: "Palettes", glyph: "譜" },
              { label: "Guides", glyph: "学" },
            ].map((t, i) => (
              <div key={i} className="col" style={{ alignItems: "center", gap: 4, color: t.active ? "var(--sumi)" : "var(--nezumi)" }}>
                <span className="serif" style={{ fontSize: 22, lineHeight: 1 }}>{t.glyph}</span>
                <span style={{ fontSize: 10 }} className="mono">{t.label}</span>
              </div>
            ))}
          </div>
        </Block>

      </div>

      <div className="mon-rule" style={{ marginTop: 48, color: "var(--nezumi)" }}>
        <span className="line"></span><span className="mon"></span><span className="line"></span>
      </div>
      <p className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)", textAlign: "center", marginTop: 16 }}>
        END · 終 · CHROMA CATHAY VOL. II · 002
      </p>
    </div>
  );
}

function Block({ title, num, subtitle, children }) {
  return (
    <section style={{ background: "var(--washi)", padding: "24px 24px 26px", border: "1px solid var(--paper-border)" }}>
      <div className="row" style={{ justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
        <span className="serif" style={{ fontSize: 22, fontWeight: 400 }}>{title}</span>
        <span className="cat-num">{num}</span>
      </div>
      {subtitle && <p style={{ fontSize: 12, color: "var(--nezumi)", margin: "0 0 20px", lineHeight: 1.55, maxWidth: 480 }}>{subtitle}</p>}
      {children}
    </section>
  );
}

window.ComponentsGuide = ComponentsGuide;