// Mobile homepage — 390 wide
function MobileHome() {
  const featured = SAMPLE_COLORS.slice(0, 6);
  const seasons = [
    { jp: "春", name: "Spring", cols: ["#F1C6C1", "#E8B8C5", "#C7B3D4", "#A8B98A"] },
    { jp: "夏", name: "Summer", cols: ["#264653", "#5F9EA0", "#19313D", "#7A8B55"] },
    { jp: "秋", name: "Autumn", cols: ["#B33A3A", "#D8A431", "#8B5A2B", "#6B4C2A"] },
    { jp: "冬", name: "Winter", cols: ["#1B1B1B", "#F4EFE6", "#7C7A73", "#6B4C7A"] },
  ];
  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" },
  ];

  return (
    <div className="jca" style={{ background: "var(--washi)", width: "100%", height: "100%", overflow: "hidden", display: "flex", flexDirection: "column" }}>

      {/* status bar */}
      <div className="row" style={{ padding: "12px 22px 6px", justifyContent: "space-between", fontSize: 13, fontWeight: 600 }}>
        <span>9:41</span>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--nezumi)" }}>JCA · 002</span>
        <span style={{ display: "flex", gap: 4, alignItems: "center" }}>
          <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><rect x="0" y="6" width="3" height="4"/><rect x="4" y="4" width="3" height="6"/><rect x="8" y="2" width="3" height="8"/><rect x="12" y="0" width="3" height="10"/></svg>
          <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="1" y="3" width="10" height="4" rx="1"/><rect x="12" y="4" width="1.5" height="2" fill="currentColor"/></svg>
        </span>
      </div>

      {/* Header */}
      <div className="row" style={{ padding: "8px 22px 16px", justifyContent: "space-between", alignItems: "center" }}>
        <div className="col" style={{ lineHeight: 1 }}>
          <span className="mono" style={{ fontSize: 8.5, letterSpacing: "0.22em", color: "var(--nezumi)" }}>CHROMA CATHAY</span>
          <span className="serif" style={{ fontSize: 14, marginTop: 4 }}>Japanese Color Atlas</span>
        </div>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><circle cx="7" cy="7" r="5"/><path d="M11 11l4 4"/></svg>
          <svg width="18" height="14" viewBox="0 0 18 14" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M1 1h16M1 7h16M1 13h16"/></svg>
        </div>
      </div>

      {/* Scroll area */}
      <div style={{ flex: 1, overflow: "hidden" }}>

        {/* Hero — dark */}
        <section className="ink-tex" style={{ background: "var(--deep-ink)", color: "var(--washi)", padding: "26px 22px 28px", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", right: -30, top: 10, fontFamily: "var(--serif)", fontSize: 240, lineHeight: 0.85, color: "rgba(244,239,230,0.05)" }}>色</div>
          <Eyebrow num="VOL. II / 002" color="rgba(244,239,230,0.62)">A Chroma Cathay Atlas</Eyebrow>
          <h1 className="serif" style={{ fontSize: 40, lineHeight: 1, margin: "14px 0 8px", letterSpacing: "-0.02em", fontWeight: 400 }}>
            Japanese<br/>Color Atlas
          </h1>
          <div className="serif" style={{ fontSize: 18, color: "rgba(244,239,230,0.55)", letterSpacing: 0 }}>日本色譜</div>
          <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "rgba(244,239,230,0.78)", margin: "16px 0 22px" }}>
            Japanese color vocabulary, traditional pigments, and design-ready exports.
          </p>

          {/* search */}
          <div style={{ background: "rgba(244,239,230,0.06)", border: "1px solid var(--soft-border)", padding: "12px 14px", display: "flex", alignItems: "center", gap: 10 }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" 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.5)" }}>Search sakura, ai-iro…</span>
          </div>

          <button className="btn btn--primary" style={{ marginTop: 14, width: "100%", justifyContent: "space-between" }}>
            Explore colors <span className="arrow">→</span>
          </button>

          <div className="row gap-2" style={{ marginTop: 14, flexWrap: "wrap" }}>
            <Badge tone="washi" dot>Source-aware</Badge>
            <Badge tone="washi" dot>Digital approx.</Badge>
          </div>
        </section>

        {/* Featured strip — vertical */}
        <section>
          {featured.map((c, i) => {
            const isDark = ["#1B1B1B", "#264653", "#19313D", "#6B4C7A"].includes(c.hex);
            return (
              <div key={i} style={{ background: c.hex, padding: "14px 22px", color: isDark ? "rgba(244,239,230,0.92)" : "rgba(27,27,27,0.85)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div className="row gap-3" style={{ alignItems: "baseline" }}>
                  <span className="mono" style={{ fontSize: 10, opacity: 0.7 }}>{String(i + 1).padStart(3, "0")}</span>
                  <span className="serif" style={{ fontSize: 22 }}>{c.kanji}</span>
                  <span style={{ fontSize: 11, opacity: 0.75 }}>{c.romaji}</span>
                </div>
                <span className="mono" style={{ fontSize: 11, opacity: 0.85 }}>{c.hex}</span>
              </div>
            );
          })}
        </section>

        {/* Vocab */}
        <section style={{ padding: "32px 22px 28px" }}>
          <Eyebrow num="02">Vocabulary</Eyebrow>
          <h2 className="serif" style={{ fontSize: 26, margin: "10px 0 16px", fontWeight: 400, letterSpacing: "-0.01em" }}>Colors in Japanese.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {vocab.map((v, i) => (
              <div key={i} style={{ border: "1px solid var(--paper-border)", padding: "16px 14px 14px" }}>
                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                  <span className="cat-num">№ {String(i + 1).padStart(2, "0")}</span>
                  <div style={{ width: 14, height: 14, background: v.hex, border: "1px solid rgba(0,0,0,0.08)" }}></div>
                </div>
                <div className="serif" style={{ fontSize: 44, lineHeight: 1, margin: "16px 0 8px" }}>{v.kanji}</div>
                <div style={{ fontSize: 11 }}>{v.kana}</div>
                <div style={{ fontSize: 10, color: "var(--nezumi)" }}>{v.en}</div>
              </div>
            ))}
          </div>
          <a className="mono" style={{ display: "block", marginTop: 16, fontSize: 10, letterSpacing: "0.15em", textAlign: "right" }}>FULL VOCAB GUIDE →</a>
        </section>

        {/* Seasons */}
        <section style={{ padding: "0 22px 28px" }}>
          <Eyebrow num="03">Seasons · 四季</Eyebrow>
          <h2 className="serif" style={{ fontSize: 24, margin: "10px 0 16px", fontWeight: 400 }}>The year in palettes.</h2>
          <div className="col gap-3">
            {seasons.map((s, i) => (
              <div key={i} className="row" style={{ border: "1px solid var(--paper-border)", height: 64, alignItems: "stretch" }}>
                <div style={{ width: 70, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 14px" }}>
                  <span className="serif" style={{ fontSize: 22 }}>{s.jp}</span>
                  <span style={{ fontSize: 10, color: "var(--nezumi)" }}>{s.name}</span>
                </div>
                <div className="row" style={{ flex: 1, borderLeft: "1px solid var(--paper-border)" }}>
                  {s.cols.map((c, j) => <div key={j} style={{ flex: 1, background: c }}></div>)}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Tool teaser dark */}
        <section className="ink-tex" style={{ background: "var(--sumi)", color: "var(--washi)", padding: "28px 22px 32px", position: "relative" }}>
          <Eyebrow num="04" color="rgba(244,239,230,0.62)">Tooling</Eyebrow>
          <h3 className="serif" style={{ fontSize: 28, margin: "10px 0 12px", fontWeight: 400, letterSpacing: "-0.01em", lineHeight: 1.1 }}>
            Build palettes,<br/>export to your stack.
          </h3>
          <p style={{ fontSize: 13, color: "rgba(244,239,230,0.7)", lineHeight: 1.55, margin: "0 0 18px" }}>
            HEX · CSS variables · Tailwind tokens · JSON · ASE
          </p>
          <button className="btn btn--primary" style={{ width: "100%", justifyContent: "space-between" }}>
            Open builder <span className="arrow">→</span>
          </button>
        </section>

        {/* Footer mini */}
        <section style={{ background: "var(--warm-paper)", padding: "28px 22px 36px" }} className="washi-tex">
          <div className="row gap-3" style={{ alignItems: "center", marginBottom: 16 }}>
            <Hanko char="印" size={32} />
            <div className="col" style={{ lineHeight: 1.3 }}>
              <span className="eyebrow muted">Issue Nº 002</span>
              <span className="serif" style={{ fontSize: 13 }}>Spring · 春 · 2026</span>
            </div>
          </div>
          <p style={{ fontSize: 12, color: "var(--nezumi)", lineHeight: 1.55, margin: 0 }}>
            Japanese Color Atlas is a Chroma Cathay project. Built for designers and language learners.
          </p>
          <div className="mon-rule" style={{ margin: "20px 0", color: "var(--nezumi)" }}>
            <span className="line"></span><span className="mon"></span><span className="line"></span>
          </div>
          <div className="row gap-2" style={{ flexWrap: "wrap" }}>
            {["Chroma Cathay", "Chinese Atlas", "Methodology", "Resources"].map(l => (
              <span key={l} className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", padding: "5px 9px", border: "1px solid var(--paper-border)" }}>{l.toUpperCase()}</span>
            ))}
          </div>
        </section>
      </div>

      {/* Bottom tab bar */}
      <div className="row" style={{ borderTop: "1px solid var(--paper-border)", background: "var(--washi)", padding: "10px 0 18px", 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: 18, lineHeight: 1 }}>{t.glyph}</span>
            <span style={{ fontSize: 10, letterSpacing: "0.08em" }} className="mono">{t.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
window.MobileHome = MobileHome;