// Desktop homepage — Japanese Color Atlas

function DesktopHome() {
  const featured = SAMPLE_COLORS;
  const vocab = [
    { kanji: "赤", kana: "あか", en: "Red",   hex: "#B33A3A" },
    { kanji: "青", kana: "あお", en: "Blue",  hex: "#264653" },
    { kanji: "緑", kana: "みどり", en: "Green", hex: "#7A8B55" },
    { kanji: "黒", kana: "くろ", en: "Black", hex: "#1B1B1B" },
    { kanji: "白", kana: "しろ", en: "White", hex: "#F4EFE6" },
    { kanji: "桃", kana: "もも", en: "Pink",  hex: "#F1C6C1" },
  ];
  const seasons = [
    { name: "Spring", jp: "春", desc: "Sakura, wisteria, fresh willow",
      cols: ["#F1C6C1", "#E8B8C5", "#C7B3D4", "#A8B98A", "#E8DDCB"] },
    { name: "Summer", jp: "夏", desc: "Indigo dye, deep sea, lotus",
      cols: ["#264653", "#5F9EA0", "#19313D", "#7A8B55", "#F4EFE6"] },
    { name: "Autumn", jp: "秋", desc: "Maple, persimmon, golden grass",
      cols: ["#B33A3A", "#D8A431", "#8B5A2B", "#6B4C2A", "#3B2A1E"] },
    { name: "Winter", jp: "冬", desc: "Sumi ink, snow, plum bark",
      cols: ["#1B1B1B", "#F4EFE6", "#7C7A73", "#6B4C7A", "#A8A49B"] },
  ];

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

      {/* ─────────── HERO (dark ink) ─────────── */}
      <section className="washi-tex ink-tex" style={{ background: "var(--deep-ink)", color: "var(--washi)", position: "relative", overflow: "hidden" }}>
        <SiteHeader dark />
        {/* big decorative kanji */}
        <div style={{ position: "absolute", right: -60, top: 80, fontFamily: "var(--serif)", fontSize: 520, lineHeight: 0.85, color: "rgba(244,239,230,0.04)", pointerEvents: "none", userSelect: "none" }}>色</div>
        {/* tategaki margin */}
        <div className="tate" style={{ position: "absolute", left: 18, top: 140, fontSize: 11, color: "rgba(244,239,230,0.45)", letterSpacing: "0.5em" }}>
          日本伝統色 · 春夏秋冬
        </div>

        <div style={{ padding: "80px 56px 0", maxWidth: 1280, margin: "0 auto", position: "relative" }}>
          <Eyebrow num="VOL. II / 002" color="rgba(244,239,230,0.62)">A Chroma Cathay Atlas</Eyebrow>
          <h1 className="serif" style={{ fontSize: 96, lineHeight: 0.98, margin: "26px 0 18px", letterSpacing: "-0.02em", maxWidth: 1000, fontWeight: 400 }}>
            Japanese Color Atlas
            <span style={{ display: "block", fontSize: 38, color: "rgba(244,239,230,0.55)", marginTop: 14, letterSpacing: 0 }}>
              日本色譜 — <span style={{ fontStyle: "italic" }}>nihon&nbsp;shikifu</span>
            </span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, maxWidth: 620, color: "rgba(244,239,230,0.78)", margin: "0 0 40px" }}>
            Japanese color vocabulary, traditional pigments, seasonal palettes, and design-ready exports — researched and published by Chroma Cathay.
          </p>

          {/* Search bar */}
          <div style={{ background: "rgba(244,239,230,0.04)", border: "1px solid var(--soft-border)", padding: "8px 8px 8px 24px", display: "flex", alignItems: "center", gap: 16, maxWidth: 760 }}>
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" style={{ color: "rgba(244,239,230,0.6)" }}><circle cx="7" cy="7" r="5"/><path d="M11 11l4 4"/></svg>
            <span style={{ flex: 1, fontSize: 16, color: "rgba(244,239,230,0.45)" }}>Search <span style={{ color: "var(--washi)" }}>sakura</span>, ai-iro, "red in Japanese"…</span>
            <span className="mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.4)", letterSpacing: "0.15em" }}>⌘ K</span>
            <button className="btn btn--primary">Search <span className="arrow">→</span></button>
          </div>

          {/* CTAs */}
          <div className="row gap-3" style={{ marginTop: 24 }}>
            <button className="btn btn--primary">Explore colors <span className="arrow">→</span></button>
            <button className="btn btn--ghost-light">Colors in Japanese</button>
            <button className="btn btn--ghost-light">View palettes</button>
          </div>

          {/* Trust label */}
          <div className="row gap-4" style={{ marginTop: 36, color: "rgba(244,239,230,0.6)", alignItems: "center" }}>
            <Badge tone="washi" dot>Source-aware records</Badge>
            <Badge tone="washi" dot>Digital approximations</Badge>
            <Badge tone="washi" dot>Chroma Cathay project</Badge>
          </div>
        </div>

        {/* Featured color strip */}
        <div style={{ marginTop: 100, padding: "0 56px 0", maxWidth: 1280, marginLeft: "auto", marginRight: "auto" }}>
          <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 18 }}>
            <Eyebrow num="01" color="rgba(244,239,230,0.62)">Featured · Six pigments to begin with</Eyebrow>
            <span className="mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.45)", letterSpacing: "0.15em" }}>SEE ALL 81 →</span>
          </div>
        </div>
        <div className="row" style={{ borderTop: "1px solid var(--soft-border)" }}>
          {featured.slice(0, 6).map((c, i) => {
            const isDark = ["#1B1B1B", "#264653", "#19313D", "#6B4C7A"].includes(c.hex);
            return (
              <div key={i} style={{ flex: 1, background: c.hex, padding: "32px 22px 40px", color: isDark ? "rgba(244,239,230,0.92)" : "rgba(27,27,27,0.85)", borderRight: i < 5 ? "1px solid rgba(27,27,27,0.08)" : "none", position: "relative", minHeight: 220 }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", opacity: 0.7 }}>{String(i + 1).padStart(3, "0")}</span>
                <div className="serif" style={{ fontSize: 40, lineHeight: 1, marginTop: 70 }}>{c.kanji}</div>
                <div style={{ fontSize: 12, marginTop: 8, opacity: 0.8 }}>{c.kana}</div>
                <div className="mono" style={{ fontSize: 11, marginTop: 6, opacity: 0.85 }}>{c.hex}</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* ─────────── VOCABULARY ─────────── */}
      <section style={{ padding: "100px 56px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36 }}>
          <div className="col gap-3">
            <Eyebrow num="02">Vocabulary · Core color words</Eyebrow>
            <h2 className="serif" style={{ fontSize: 44, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>Six colors, six characters.</h2>
            <p className="muted" style={{ fontSize: 14, maxWidth: 480, margin: 0, lineHeight: 1.55 }}>
              Start with the everyday words. Each card includes kana, romaji, and a grammar note for adjectival use.
            </p>
          </div>
          <a className="mono" style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--sumi)" }}>FULL GUIDE →</a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0, border: "1px solid var(--paper-border)" }}>
          {vocab.map((v, i) => (
            <div key={i} style={{ padding: "28px 20px 24px", borderRight: i < 5 ? "1px solid var(--paper-border)" : "none", display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                <span className="cat-num">№ {String(i + 1).padStart(2, "0")}</span>
                <div style={{ width: 18, height: 18, background: v.hex, border: "1px solid rgba(0,0,0,0.1)" }}></div>
              </div>
              <div className="serif" style={{ fontSize: 64, lineHeight: 1, marginTop: 16 }}>{v.kanji}</div>
              <div className="col gap-1" style={{ marginTop: 4 }}>
                <span style={{ fontSize: 12 }}>{v.kana}</span>
                <span style={{ fontSize: 11, color: "var(--nezumi)" }}>{v.en}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ─────────── TRADITIONAL COLORS ─────────── */}
      <section style={{ padding: "60px 56px 100px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36 }}>
          <div className="col gap-3">
            <Eyebrow num="03">Traditional · 伝統色</Eyebrow>
            <h2 className="serif" style={{ fontSize: 44, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>One hundred and eighty-four pigments,<br/>catalogued by source.</h2>
          </div>
          <div className="row gap-2" style={{ alignItems: "center" }}>
            <button className="btn btn--ghost-dark" style={{ fontSize: 12, padding: "8px 14px" }}>Filter</button>
            <button className="btn btn--solid-ink" style={{ fontSize: 12, padding: "8px 14px" }}>Open atlas <span className="arrow">→</span></button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
          {SAMPLE_COLORS.map((c, i) => (
            <SwatchCard key={i} c={c} num={`Nº ${String(i + 1).padStart(3, "0")}`} />
          ))}
        </div>
      </section>

      {/* ─────────── SEASONS BAND ─────────── */}
      <section style={{ padding: "0 56px 100px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36 }}>
          <div className="col gap-3">
            <Eyebrow num="04">Seasons · 四季</Eyebrow>
            <h2 className="serif" style={{ fontSize: 44, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>The year in palettes.</h2>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {seasons.map((s, i) => (
            <article key={i} style={{ background: "var(--warm-paper)", padding: 0, border: "1px solid var(--paper-border)", display: "flex", flexDirection: "column" }} className="washi-tex">
              <div className="row" style={{ height: 90 }}>
                {s.cols.map((cc, j) => (
                  <div key={j} style={{ flex: 1, background: cc }}></div>
                ))}
              </div>
              <div style={{ padding: "20px 18px 22px", display: "flex", flexDirection: "column", gap: 8 }}>
                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div className="col">
                    <span className="serif" style={{ fontSize: 28, lineHeight: 1 }}>{s.name}</span>
                    <span style={{ fontSize: 12, color: "var(--nezumi)", marginTop: 4 }}>{s.jp} · season {String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <span className="serif" style={{ fontSize: 38, opacity: 0.4, lineHeight: 1 }}>{s.jp}</span>
                </div>
                <p style={{ fontSize: 12, color: "var(--nezumi)", margin: "8px 0 0", lineHeight: 1.5 }}>{s.desc}</p>
                <div className="mon-rule" style={{ marginTop: 12, color: "var(--nezumi)" }}>
                  <span className="line"></span><span className="mon"></span><span className="line"></span>
                </div>
                <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", marginTop: 4 }}>OPEN PALETTE →</a>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ─────────── PALETTE BUILDER PREVIEW (dark) ─────────── */}
      <section style={{ background: "var(--sumi)", color: "var(--washi)", padding: "100px 56px", position: "relative", overflow: "hidden" }} className="ink-tex">
        <div style={{ position: "absolute", left: -40, bottom: -120, fontFamily: "var(--serif)", fontSize: 360, lineHeight: 0.8, color: "rgba(244,239,230,0.04)" }}>譜</div>

        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "flex-start" }}>
          <div className="col gap-4">
            <Eyebrow num="05" color="rgba(244,239,230,0.62)">Tooling</Eyebrow>
            <h2 className="serif" style={{ fontSize: 56, margin: 0, letterSpacing: "-0.02em", lineHeight: 1.05, fontWeight: 400 }}>
              Build palettes that ship to your code.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(244,239,230,0.7)", maxWidth: 460, margin: "8px 0 0" }}>
              Lock, swap, reorder. Export to HEX, CSS variables, Tailwind tokens, JSON, or ASE. Contrast warnings included. Built for designers.
            </p>
            <div className="row gap-3" style={{ marginTop: 20 }}>
              <button className="btn btn--primary">Open builder <span className="arrow">→</span></button>
              <button className="btn btn--ghost-light">See exports</button>
            </div>

            <div className="col gap-3" style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid var(--soft-border)" }}>
              {["Add, lock and reorder up to 8 swatches", "Export to HEX · CSS · Tailwind · JSON · ASE", "WCAG contrast warnings inline", "Save and share named palettes"].map((t, i) => (
                <div key={i} className="row gap-3" style={{ alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: 10, color: "var(--yamabuki)", letterSpacing: "0.1em" }}>○{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ fontSize: 13, color: "rgba(244,239,230,0.82)" }}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Builder mock */}
          <div style={{ background: "rgba(244,239,230,0.03)", border: "1px solid var(--soft-border)" }}>
            <div className="row" style={{ borderBottom: "1px solid var(--soft-border)", padding: "14px 20px", justifyContent: "space-between", alignItems: "center" }}>
              <div className="row gap-3" style={{ alignItems: "center" }}>
                <Hanko char="譜" size={26} rotate={-3} />
                <span className="serif" style={{ fontSize: 15 }}>Untitled palette · 名前未設定</span>
              </div>
              <span className="mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.5)", letterSpacing: "0.15em" }}>6 / 8 SWATCHES</span>
            </div>
            <div className="row" style={{ height: 280, borderBottom: "1px solid var(--soft-border)" }}>
              {SAMPLE_COLORS.slice(0, 6).map((c, i) => {
                const isDark = ["#1B1B1B", "#264653", "#19313D", "#6B4C7A"].includes(c.hex);
                return (
                  <div key={i} style={{ flex: 1, background: c.hex, position: "relative", borderRight: i < 5 ? "1px solid rgba(0,0,0,0.1)" : "none", color: isDark ? "rgba(244,239,230,0.9)" : "rgba(27,27,27,0.78)" }}>
                    {i === 1 && (
                      <span style={{ position: "absolute", top: 10, right: 10, width: 18, height: 18, borderRadius: 9, background: "var(--yamabuki)", color: "var(--sumi)", fontSize: 10, display: "flex", alignItems: "center", justifyContent: "center" }}>🔒</span>
                    )}
                    <div style={{ position: "absolute", bottom: 14, left: 14, right: 14 }}>
                      <div className="serif" style={{ fontSize: 18, lineHeight: 1 }}>{c.kanji}</div>
                      <div className="mono" style={{ fontSize: 10, marginTop: 6, opacity: 0.85 }}>{c.hex}</div>
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="row" style={{ padding: "16px 20px", justifyContent: "space-between", alignItems: "center" }}>
              <div className="row gap-2">
                {["HEX", "CSS", "TAILWIND", "JSON", "ASE"].map(f => (
                  <span key={f} className="mono" style={{ fontSize: 10, padding: "5px 10px", border: "1px solid var(--soft-border)", color: "rgba(244,239,230,0.8)", letterSpacing: "0.12em" }}>{f}</span>
                ))}
              </div>
              <span className="mono" style={{ fontSize: 10, color: "var(--yamabuki)", letterSpacing: "0.12em" }}>⚠ CONTRAST: 2 PAIRS BELOW AA</span>
            </div>
          </div>
        </div>
      </section>

      {/* ─────────── METHODOLOGY + ECOSYSTEM ─────────── */}
      <section style={{ background: "var(--warm-paper)", padding: "100px 56px", position: "relative" }} className="washi-tex">
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80 }}>
          <div>
            <Eyebrow num="06">Methodology · 方法</Eyebrow>
            <h3 className="serif" style={{ fontSize: 32, margin: "20px 0 18px", letterSpacing: "-0.01em", fontWeight: 400, lineHeight: 1.2 }}>
              Traditional color values vary by source — textile, pigment, era, and screen.
            </h3>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--sumi)", maxWidth: 540, margin: 0 }}>
              Every record carries a source badge: <Badge tone="ink">Attributed</Badge> for colors with named historical references, <Badge tone="indigo">Measured reference</Badge> reserved for per-record physical-sample evidence, and <Badge tone="muted">Digital approximation</Badge> when the swatch is a screen-only interpretation. We list sources, not vibes.
            </p>
            <a className="mono" style={{ display: "inline-block", marginTop: 24, fontSize: 11, letterSpacing: "0.15em" }}>READ THE FULL METHODOLOGY →</a>
          </div>

          <div className="col gap-4">
            <Eyebrow num="07">Ecosystem · 系列</Eyebrow>
            <h3 className="serif" style={{ fontSize: 24, margin: "8px 0 4px", fontWeight: 400 }}>Part of Chroma Cathay.</h3>
            <p style={{ fontSize: 13, color: "var(--nezumi)", lineHeight: 1.6, margin: 0, maxWidth: 440 }}>
              A studio publishing source-aware color atlases. Japanese Color Atlas sits alongside its sister projects.
            </p>
            <div className="col" style={{ marginTop: 16, border: "1px solid var(--paper-border)" }}>
              {[
                { title: "Chinese Color Atlas",       jp: "中国色譜",   status: "Flagship · 384 colors" },
                { title: "Japanese Color Atlas",      jp: "日本色譜",   status: "You are here · 81 records", current: true },
                { title: "Architecture Color Atlas",  jp: "建築色譜",   status: "Live · 240 surfaces" },
                { title: "Photo Palette Extractor",   jp: "写真調色",   status: "Tool · shared surface" },
              ].map((it, i, arr) => (
                <div key={i} className="row" style={{ justifyContent: "space-between", alignItems: "center", padding: "18px 20px", borderBottom: i < arr.length - 1 ? "1px solid var(--paper-border)" : "none", background: it.current ? "rgba(27,27,27,0.04)" : "transparent" }}>
                  <div className="col" style={{ lineHeight: 1.3 }}>
                    <span className="serif" style={{ fontSize: 16 }}>{it.title} <span style={{ color: "var(--nezumi)", fontSize: 13, marginLeft: 6 }}>{it.jp}</span></span>
                    <span style={{ fontSize: 11, color: "var(--nezumi)", marginTop: 4 }} className="mono">{it.status.toUpperCase()}</span>
                  </div>
                  <span className="serif" style={{ fontSize: 18 }}>{it.current ? "●" : "→"}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <SiteFooter dark />
    </div>
  );
}

window.DesktopHome = DesktopHome;