// Color detail page — Sakura-iro 桜色
function ColorDetail() {
  const c = { kanji: "桜色", romaji: "Sakura-iro", kana: "さくらいろ", en: "Cherry blossom pink", hex: "#F1C6C1" };
  const rgb = "241 · 198 · 193";
  const hsl = "5° · 67% · 85%";
  const cmyk = "0 · 18 · 20 · 5";
  const related = SAMPLE_COLORS.filter(x => x.romaji !== "Sakura-iro").slice(0, 4);

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

      {/* Breadcrumb */}
      <div style={{ padding: "20px 56px 0", maxWidth: 1280, margin: "0 auto" }}>
        <div className="row gap-3 mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>
          <a>ATLAS</a><span>/</span><a>TRADITIONAL</a><span>/</span><a>PINK FAMILY</a><span>/</span><span style={{ color: "var(--sumi)" }}>SAKURA-IRO</span>
          <span style={{ flex: 1 }}></span>
          <span>Nº 014 / 081</span>
        </div>
      </div>

      {/* Hero color field */}
      <section style={{ padding: "32px 56px 0", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ position: "relative", background: c.hex, height: 440, border: "1px solid var(--paper-border)", overflow: "hidden" }}>
          {/* big kanji */}
          <div className="serif" style={{ position: "absolute", left: 48, top: 32, fontSize: 280, lineHeight: 0.85, color: "rgba(27,27,27,0.18)" }}>{c.kanji}</div>
          {/* tategaki on right */}
          <div className="tate" style={{ position: "absolute", right: 36, top: 36, fontSize: 12, color: "rgba(27,27,27,0.5)", letterSpacing: "0.4em" }}>
            桜 · 春 · 軟調
          </div>
          {/* hanko */}
          <div style={{ position: "absolute", top: 32, right: 80 }}>
            <Hanko char="桜" size={56} rotate={-4} />
          </div>
          {/* footer label */}
          <div style={{ position: "absolute", left: 36, bottom: 28, right: 36, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
            <div className="col gap-1">
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "rgba(27,27,27,0.55)" }}>SPECIMEN Nº 014</span>
              <span className="serif" style={{ fontSize: 22, color: "rgba(27,27,27,0.85)" }}>{c.kana}</span>
            </div>
            <span className="mono" style={{ fontSize: 36, color: "rgba(27,27,27,0.75)", letterSpacing: "0.04em" }}>{c.hex}</span>
          </div>
        </div>
      </section>

      {/* Main layout */}
      <section style={{ padding: "40px 56px 80px", maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "flex-start" }}>
        {/* Left: name + tabs + content */}
        <div>
          <div className="row gap-2" style={{ marginBottom: 14 }}>
            <Badge tone="ink" dot>ATTRIBUTED</Badge>
            <Badge tone="muted" dot>DIGITAL APPROXIMATION</Badge>
            <Badge tone="indigo" dot>DESIGN TOKEN READY</Badge>
          </div>

          <h1 className="serif" style={{ fontSize: 88, margin: "0 0 4px", lineHeight: 0.95, letterSpacing: "-0.02em", fontWeight: 400 }}>
            {c.kanji}
            <span style={{ fontSize: 38, color: "var(--nezumi)", marginLeft: 16, letterSpacing: 0 }}>Sakura-iro</span>
          </h1>
          <p style={{ fontSize: 16, color: "var(--nezumi)", margin: "8px 0 28px" }}>{c.kana} · {c.en} · family <span style={{ color: "var(--sumi)" }}>桃色 / pink</span></p>

          <div className="tabrow" style={{ marginBottom: 28 }}>
            {[["Meaning", true], ["Design Use"], ["Sources"], ["Exports"], ["Related"]].map(([l, a]) => (
              <span key={l} className={"tab" + (a ? " is-active" : "")}>{l}</span>
            ))}
          </div>

          <h3 className="serif" style={{ fontSize: 22, margin: "0 0 12px", fontWeight: 400 }}>A color named after the bloom, not the tree.</h3>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--sumi)", margin: "0 0 18px", maxWidth: 620 }}>
            桜色 (sakura-iro) is the pale, slightly warm pink of cherry blossom petals against an overcast spring sky. In the traditional Japanese palette it sits between 桃色 (momo-iro, peach) and 撫子色 (nadeshiko-iro, pink dianthus), softer than either.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--sumi)", margin: "0 0 28px", maxWidth: 620 }}>
            Recorded in the Heian-period color tables for layered court robes, the name predates modern hex values by roughly a thousand years. The value here is a screen approximation, not a textile measurement.
          </p>

          {/* Usage examples */}
          <Eyebrow num="USAGE">Where it works</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginTop: 16, marginBottom: 36 }}>
            {[
              { t: "Branding", note: "Skincare, stationery, soft luxury" },
              { t: "Packaging", note: "Tea, confectionery, hanami goods" },
              { t: "Illustration", note: "Spring scenes, soft fills" },
              { t: "UI accent", note: "Surface tint, subtle highlight" },
            ].map((u, i) => (
              <div key={i} style={{ padding: "16px 14px", border: "1px solid var(--paper-border)", background: "var(--washi)" }}>
                <div style={{ height: 36, background: `linear-gradient(135deg, ${c.hex}, ${c.hex}cc)`, marginBottom: 12, border: "1px solid rgba(0,0,0,0.06)" }}></div>
                <div className="serif" style={{ fontSize: 16 }}>{u.t}</div>
                <div style={{ fontSize: 11, color: "var(--nezumi)", marginTop: 4, lineHeight: 1.45 }}>{u.note}</div>
              </div>
            ))}
          </div>

          {/* Related */}
          <Eyebrow num="RELATED">In the same family</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginTop: 16 }}>
            {related.map((r, i) => (
              <div key={i} style={{ border: "1px solid var(--paper-border)" }}>
                <div style={{ background: r.hex, height: 70 }}></div>
                <div style={{ padding: "12px 12px 14px", display: "flex", flexDirection: "column", gap: 2 }}>
                  <span className="serif" style={{ fontSize: 16 }}>{r.kanji}</span>
                  <span style={{ fontSize: 10, color: "var(--nezumi)" }}>{r.romaji}</span>
                  <span className="mono" style={{ fontSize: 10, marginTop: 4 }}>{r.hex}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right rail: data + exports */}
        <aside className="col gap-4" style={{ position: "sticky", top: 24 }}>
          {/* values */}
          <div style={{ border: "1px solid var(--paper-border)" }}>
            <div className="row" style={{ borderBottom: "1px solid var(--paper-border)", padding: "14px 18px", justifyContent: "space-between", alignItems: "center" }}>
              <span className="eyebrow">Color values</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--nezumi)", letterSpacing: "0.12em" }}>sRGB</span>
            </div>
            {[
              ["HEX",  c.hex.toUpperCase(),  true],
              ["RGB",  rgb],
              ["HSL",  hsl],
              ["CMYK", cmyk],
              ["LAB",  "84.1 · 13.2 · 5.4"],
            ].map(([k, v, primary], i, a) => (
              <div key={k} className="row" style={{ padding: "14px 18px", justifyContent: "space-between", borderBottom: i < a.length - 1 ? "1px solid var(--paper-border)" : "none", alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--nezumi)", letterSpacing: "0.12em" }}>{k}</span>
                <div className="row gap-3" style={{ alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: primary ? 16 : 13, fontWeight: primary ? 600 : 500 }}>{v}</span>
                  <button style={{ width: 24, height: 24, border: "1px solid var(--paper-border)", background: "transparent", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="2" y="2" width="7" height="7"/><rect x="4.5" y="4.5" width="5" height="5" fill="var(--washi)"/></svg>
                  </button>
                </div>
              </div>
            ))}
          </div>

          {/* export */}
          <div style={{ border: "1px solid var(--paper-border)", background: "var(--sumi)", color: "var(--washi)" }}>
            <div className="row" style={{ padding: "14px 18px", borderBottom: "1px solid var(--soft-border)", justifyContent: "space-between", alignItems: "center" }}>
              <span className="eyebrow" style={{ color: "rgba(244,239,230,0.7)" }}>Design tokens</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--yamabuki)", letterSpacing: "0.12em" }}>READY</span>
            </div>
            <div style={{ padding: 16, fontSize: 12, lineHeight: 1.8, fontFamily: "var(--mono)", color: "rgba(244,239,230,0.88)" }}>
              <div><span style={{ color: "var(--asagi)" }}>--jp-sakura-iro</span>: <span style={{ color: "var(--sakura)" }}>#F1C6C1</span>;</div>
              <div style={{ marginTop: 8 }}><span style={{ color: "var(--asagi)" }}>sakura</span>: {`{`} hex: <span style={{ color: "var(--sakura)" }}>"#F1C6C1"</span> {`}`}</div>
            </div>
            <div className="row" style={{ padding: "12px 12px 14px", gap: 6, flexWrap: "wrap" }}>
              {["HEX", "CSS", "TAILWIND", "JSON", "ASE"].map(f => (
                <span key={f} className="mono" style={{ fontSize: 10, padding: "5px 9px", border: "1px solid var(--soft-border)", letterSpacing: "0.12em" }}>{f}</span>
              ))}
            </div>
          </div>

          {/* methodology */}
          <div style={{ border: "1px solid var(--paper-border)", background: "var(--warm-paper)", padding: 18 }} className="washi-tex">
            <div className="row gap-3" style={{ alignItems: "center", marginBottom: 10 }}>
              <Hanko char="注" size={28} />
              <span className="eyebrow">Note on sources</span>
            </div>
            <p style={{ fontSize: 12, lineHeight: 1.6, margin: 0, color: "var(--sumi)" }}>
              Traditional color values vary by source — textile, pigment, era, and screen display. This record is a <em>digital approximation</em>; physical samples may differ.
            </p>
            <a className="mono" style={{ display: "inline-block", marginTop: 10, fontSize: 10, letterSpacing: "0.15em" }}>VIEW SOURCES (3) →</a>
          </div>
        </aside>
      </section>

      <SiteFooter />
    </div>
  );
}
window.ColorDetail = ColorDetail;