// Colors in Japanese guide page
function GuidePage() {
  const rows = [
    { en: "Red",    jp: "赤",   kana: "あか",   romaji: "aka",     adj: "赤い akai",     hex: "#B33A3A" },
    { en: "Blue",   jp: "青",   kana: "あお",   romaji: "ao",      adj: "青い aoi",      hex: "#264653" },
    { en: "Green",  jp: "緑",   kana: "みどり", romaji: "midori",  adj: "緑の midori no", hex: "#7A8B55" },
    { en: "Yellow", jp: "黄色", kana: "きいろ", romaji: "kiiro",   adj: "黄色い kiiroi", hex: "#D8A431" },
    { en: "Black",  jp: "黒",   kana: "くろ",   romaji: "kuro",    adj: "黒い kuroi",    hex: "#1B1B1B" },
    { en: "White",  jp: "白",   kana: "しろ",   romaji: "shiro",   adj: "白い shiroi",   hex: "#F4EFE6" },
    { en: "Pink",   jp: "桃色", kana: "ももいろ", romaji: "momoiro", adj: "桃色の momoiro no", hex: "#F1C6C1" },
    { en: "Purple", jp: "紫",   kana: "むらさき", romaji: "murasaki", adj: "紫の murasaki no", hex: "#6B4C7A" },
    { en: "Brown",  jp: "茶色", kana: "ちゃいろ", romaji: "chairo", adj: "茶色い chairoi", hex: "#6B4C2A" },
    { en: "Gray",   jp: "灰色", kana: "はいいろ", romaji: "haiiro", adj: "灰色の haiiro no", hex: "#7C7A73" },
  ];

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

      <section style={{ padding: "56px 56px 0", maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "200px 1fr", gap: 48 }}>
        {/* TOC */}
        <aside style={{ position: "sticky", top: 24, alignSelf: "flex-start" }}>
          <Eyebrow num="GUIDE 03">Contents</Eyebrow>
          <div className="col gap-3" style={{ marginTop: 18, fontSize: 12 }}>
            {[
              ["01", "Quick answer", true],
              ["02", "Vocabulary table"],
              ["03", "Common colors"],
              ["04", "Grammar · adjectives"],
              ["05", "Saying colors aloud"],
              ["06", "Next: traditional"],
            ].map(([n, l, a]) => (
              <a key={n} className="row gap-3" style={{ alignItems: "center", color: a ? "var(--sumi)" : "var(--nezumi)" }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", width: 18 }}>{n}</span>
                <span style={{ borderBottom: a ? "1px solid currentColor" : "none", paddingBottom: 1 }}>{l}</span>
              </a>
            ))}
          </div>
          <div style={{ marginTop: 28, padding: 14, background: "var(--warm-paper)", border: "1px solid var(--paper-border)" }} className="washi-tex">
            <Hanko char="学" size={28} />
            <p style={{ fontSize: 11, lineHeight: 1.55, margin: "10px 0 0", color: "var(--sumi)" }}>
              A language-learning companion to the Traditional Color Atlas.
            </p>
          </div>
        </aside>

        <article>
          {/* H1 */}
          <Eyebrow num="GUIDE Nº 003">Language</Eyebrow>
          <h1 className="serif" style={{ fontSize: 72, lineHeight: 1, margin: "16px 0 12px", letterSpacing: "-0.02em", fontWeight: 400 }}>
            Colors in Japanese
            <span style={{ display: "block", fontSize: 30, color: "var(--nezumi)", marginTop: 12 }}>日本語の色 — <em>nihongo no iro</em></span>
          </h1>

          {/* Quick answer */}
          <div style={{ background: "var(--warm-paper)", padding: "24px 28px", border: "1px solid var(--paper-border)", margin: "28px 0 48px" }} className="washi-tex">
            <Eyebrow>Quick answer</Eyebrow>
            <p style={{ fontSize: 17, lineHeight: 1.65, margin: "12px 0 0", maxWidth: 720 }}>
              The basic Japanese color words are <span className="serif">赤 (aka, red)</span>, <span className="serif">青 (ao, blue)</span>, <span className="serif">緑 (midori, green)</span>, <span className="serif">黄色 (kiiro, yellow)</span>, <span className="serif">黒 (kuro, black)</span>, and <span className="serif">白 (shiro, white)</span>. Four of them — <em>aka, ao, kuro, shiro</em> — also work as <span className="serif">い-adjectives</span> (<em>akai, aoi, kuroi, shiroi</em>); the rest need <span className="serif">の</span> to attach to nouns.
            </p>
          </div>

          {/* Table */}
          <Eyebrow num="02">Vocabulary table</Eyebrow>
          <h2 className="serif" style={{ fontSize: 28, margin: "10px 0 20px", fontWeight: 400 }}>Ten colors you actually use.</h2>
          <div style={{ border: "1px solid var(--paper-border)", background: "var(--washi)" }}>
            <div className="row mono" style={{ background: "var(--sumi)", color: "var(--washi)", padding: "12px 18px", fontSize: 10, letterSpacing: "0.18em" }}>
              <div style={{ width: 48 }}>·</div>
              <div style={{ width: 110 }}>ENGLISH</div>
              <div style={{ width: 90 }}>JAPANESE</div>
              <div style={{ width: 110 }}>KANA</div>
              <div style={{ width: 130 }}>ROMAJI</div>
              <div style={{ flex: 1 }}>ADJECTIVE FORM</div>
              <div style={{ width: 90, textAlign: "right" }}>HEX</div>
            </div>
            {rows.map((r, i) => (
              <div key={i} className="row" style={{ padding: "14px 18px", alignItems: "center", borderTop: "1px solid var(--paper-border)", fontSize: 14 }}>
                <div style={{ width: 48, display: "flex", alignItems: "center", gap: 10 }}>
                  <span className="cat-num">{String(i + 1).padStart(2, "0")}</span>
                  <div style={{ width: 16, height: 16, background: r.hex, border: "1px solid rgba(0,0,0,0.1)" }}></div>
                </div>
                <div style={{ width: 110 }}>{r.en}</div>
                <div style={{ width: 90 }} className="serif">{r.jp}</div>
                <div style={{ width: 110 }}>{r.kana}</div>
                <div style={{ width: 130, fontStyle: "italic", color: "var(--nezumi)" }}>{r.romaji}</div>
                <div style={{ flex: 1 }} className="serif">{r.adj}</div>
                <div style={{ width: 90, textAlign: "right" }} className="mono">{r.hex}</div>
              </div>
            ))}
          </div>

          {/* Common color cards */}
          <div style={{ marginTop: 56 }}>
            <Eyebrow num="03">Common colors</Eyebrow>
            <h2 className="serif" style={{ fontSize: 28, margin: "10px 0 20px", fontWeight: 400 }}>Cards for the everyday six.</h2>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
              {rows.slice(0, 6).map((r, i) => (
                <div key={i} style={{ border: "1px solid var(--paper-border)" }}>
                  <div style={{ height: 90, background: r.hex, position: "relative" }}>
                    <span className="serif" style={{ position: "absolute", left: 14, top: 10, fontSize: 56, color: r.hex === "#F4EFE6" ? "rgba(27,27,27,0.6)" : "rgba(244,239,230,0.85)", lineHeight: 0.9 }}>{r.jp}</span>
                  </div>
                  <div style={{ padding: "14px 16px 16px" }}>
                    <div className="row" style={{ justifyContent: "space-between" }}>
                      <span className="serif" style={{ fontSize: 17 }}>{r.romaji}</span>
                      <span className="mono" style={{ fontSize: 11, color: "var(--nezumi)" }}>{r.hex}</span>
                    </div>
                    <div style={{ fontSize: 12, color: "var(--nezumi)", marginTop: 4 }}>{r.kana} · {r.en.toLowerCase()}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Grammar */}
          <div style={{ marginTop: 64 }}>
            <Eyebrow num="04">Grammar · 文法</Eyebrow>
            <h2 className="serif" style={{ fontSize: 28, margin: "10px 0 8px", fontWeight: 400 }}>い-adjectives vs. の.</h2>
            <p style={{ fontSize: 14, color: "var(--nezumi)", lineHeight: 1.6, maxWidth: 640, margin: "0 0 24px" }}>
              Old, native color words behave like adjectives. Borrowed or compound names take <span className="serif">の</span>.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
              {[
                { label: "い-adjective", title: "赤 / 赤い", note: "“red” / “(it is) red”. Native, attaches directly: 赤い車 a red car.", color: "#B33A3A" },
                { label: "の-noun", title: "緑 / 緑の", note: "“green” as a noun. Attaches with の: 緑の葉 a green leaf.", color: "#7A8B55" },
                { label: "irregular い-adj.", title: "茶色 / 茶色い", note: "“brown”. Compound, but takes い: 茶色い犬 a brown dog.", color: "#6B4C2A" },
              ].map((g, i) => (
                <div key={i} style={{ border: "1px solid var(--paper-border)", padding: 0 }}>
                  <div style={{ height: 6, background: g.color }}></div>
                  <div style={{ padding: "16px 18px 18px" }}>
                    <Badge tone="ink">{g.label.toUpperCase()}</Badge>
                    <div className="serif" style={{ fontSize: 28, margin: "12px 0 8px" }}>{g.title}</div>
                    <p style={{ fontSize: 13, color: "var(--sumi)", lineHeight: 1.6, margin: 0 }}>{g.note}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* CTA to traditional */}
          <div style={{ marginTop: 64, background: "var(--sumi)", color: "var(--washi)", padding: "40px 36px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32 }} className="ink-tex">
            <div>
              <Eyebrow color="rgba(244,239,230,0.62)">Next</Eyebrow>
              <h3 className="serif" style={{ fontSize: 32, margin: "10px 0 8px", fontWeight: 400, letterSpacing: "-0.01em" }}>Now learn the 81 source-aware names.</h3>
              <p style={{ fontSize: 14, color: "rgba(244,239,230,0.7)", margin: 0, maxWidth: 520, lineHeight: 1.55 }}>
                Beyond the basics: Aizome indigo, Yamabuki gold, Sakura pink. Each catalogued with sources.
              </p>
            </div>
            <button className="btn btn--primary">Open Traditional Atlas <span className="arrow">→</span></button>
          </div>
        </article>
      </section>

      <div style={{ height: 80 }}></div>
      <SiteFooter />
    </div>
  );
}
window.GuidePage = GuidePage;