// Shared components for Japanese Color Atlas screens
// Loaded globally via window assignment at end.

const SAMPLE_COLORS = [
  { kanji: "桜色",   romaji: "Sakura-iro",   kana: "さくらいろ", en: "Cherry blossom pink", hex: "#F1C6C1" },
  { kanji: "藍色",   romaji: "Ai-iro",       kana: "あいいろ",   en: "Indigo",              hex: "#264653" },
  { kanji: "紅",     romaji: "Beni",         kana: "べに",       en: "Crimson",             hex: "#B33A3A" },
  { kanji: "紫",     romaji: "Murasaki",     kana: "むらさき",   en: "Purple",              hex: "#6B4C7A" },
  { kanji: "山吹色", romaji: "Yamabuki-iro", kana: "やまぶきいろ", en: "Golden yellow",     hex: "#D8A431" },
  { kanji: "墨色",   romaji: "Sumi-iro",     kana: "すみいろ",   en: "Ink black",           hex: "#1B1B1B" },
  { kanji: "抹茶色", romaji: "Matcha-iro",   kana: "まっちゃいろ", en: "Matcha green",       hex: "#7A8B55" },
  { kanji: "浅葱色", romaji: "Asagi-iro",    kana: "あさぎいろ",  en: "Pale blue-green",    hex: "#5F9EA0" },
];

/* ────────── Hanko (seal) ────────── */
function Hanko({ char = "色", size = 38, rotate = -2 }) {
  return (
    <span className="hanko" style={{ width: size, height: size, fontSize: size * 0.42, transform: `rotate(${rotate}deg)` }}>
      {char}
    </span>
  );
}

/* ────────── Eyebrow / Section heading ────────── */
function Eyebrow({ num, children, color }) {
  return (
    <div className="row gap-3" style={{ alignItems: "center", color: color || "inherit" }}>
      {num && <span className="mono" style={{ fontSize: 10, opacity: 0.55, letterSpacing: "0.15em" }}>{num}</span>}
      <span className="eyebrow">{children}</span>
    </div>
  );
}

/* ────────── Mon ornament divider ────────── */
function MonRule({ color }) {
  return (
    <div className="mon-rule" style={{ color: color || "currentColor" }}>
      <span className="line"></span>
      <span className="mon"></span>
      <span className="line"></span>
    </div>
  );
}

/* ────────── Badge (status pill) ────────── */
function Badge({ children, tone = "ink", dot }) {
  const color =
    tone === "ink"     ? "var(--sumi)" :
    tone === "washi"   ? "var(--washi)" :
    tone === "indigo"  ? "var(--aizome)" :
    tone === "beni"    ? "var(--beni)" :
    tone === "gold"    ? "var(--yamabuki)" :
    tone === "matcha"  ? "var(--matcha)" :
    tone === "muted"   ? "var(--nezumi)" : "currentColor";
  return (
    <span className="badge" style={{ color }}>
      {dot && <span className="dot"></span>}
      {children}
    </span>
  );
}

/* ────────── Site header / nav ────────── */
function SiteHeader({ dark = true, narrow = false }) {
  const fg = dark ? "var(--washi)" : "var(--sumi)";
  const dim = dark ? "rgba(244,239,230,0.62)" : "var(--nezumi)";
  const border = dark ? "var(--soft-border)" : "var(--paper-border)";
  return (
    <header style={{ borderBottom: `1px solid ${border}`, color: fg, padding: "20px 56px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <div className="row gap-6" style={{ alignItems: "center" }}>
        <div className="col" style={{ lineHeight: 1 }}>
          <span className="mono" style={{ fontSize: 9, letterSpacing: "0.22em", color: dim, textTransform: "uppercase" }}>Chroma Cathay</span>
          <span className="serif" style={{ fontSize: 18, marginTop: 6 }}>Japanese Color Atlas <span style={{ marginLeft: 4, opacity: 0.55, fontSize: 14 }}>日本色譜</span></span>
        </div>
      </div>
      {!narrow && (
        <nav className="row gap-6" style={{ fontSize: 13, color: dim }}>
          {[
            ["Colors", false],
            ["Palettes", false],
            ["Guides", false],
            ["Resources", false],
            ["Methodology", false],
          ].map(([l, active]) => (
            <a key={l} style={{ color: active ? fg : dim, position: "relative", paddingBottom: 2 }}>
              {l}
              {active && <span style={{ position: "absolute", left: 0, right: 0, bottom: -4, height: 1, background: fg }} />}
            </a>
          ))}
        </nav>
      )}
      <div className="row gap-4" style={{ alignItems: "center", fontSize: 13, color: dim }}>
        <div className="row gap-2" style={{ alignItems: "center" }}>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="7" cy="7" r="5"/><path d="M11 11l3 3"/></svg>
          <span>Search</span>
        </div>
        <span style={{ opacity: 0.4 }}>·</span>
        <a style={{ color: fg }}>Chroma Cathay ↗</a>
      </div>
    </header>
  );
}

/* ────────── Site footer ────────── */
function SiteFooter({ dark = false }) {
  const bg = dark ? "var(--deep-ink)" : "var(--warm-paper)";
  const fg = dark ? "var(--washi)" : "var(--sumi)";
  const dim = dark ? "rgba(244,239,230,0.6)" : "var(--nezumi)";
  const border = dark ? "var(--soft-border)" : "var(--paper-border)";
  return (
    <footer style={{ background: bg, color: fg, padding: "56px 56px 36px", borderTop: `1px solid ${border}` }}>
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start", gap: 48 }}>
        <div className="col gap-4" style={{ maxWidth: 360 }}>
          <span className="serif" style={{ fontSize: 22 }}>Japanese Color Atlas</span>
          <p style={{ color: dim, fontSize: 13, lineHeight: 1.6, margin: 0 }}>
            Japanese Color Atlas is a Chroma Cathay project. Built for designers and language learners who want source-aware records, not Pinterest swatches.
          </p>
          <div className="row gap-3" style={{ marginTop: 8 }}>
            <Hanko char="印" size={32} />
            <div className="col" style={{ justifyContent: "center", lineHeight: 1.3 }}>
              <span className="eyebrow" style={{ color: dim }}>Issue Nº 002</span>
              <span style={{ fontSize: 12 }} className="serif">Spring · 春 · 2026</span>
            </div>
          </div>
        </div>
        <div className="row gap-8">
          {[
            { h: "Atlas", links: ["Colors", "Palette Builder", "Colors in Japanese", "Seasons"] },
            { h: "Ecosystem", links: ["Chroma Cathay", "Chinese Color Atlas", "Architecture Color Atlas", "Photo Palette Extractor"] },
            { h: "Studio", links: ["Methodology", "Resources", "Newsletter", "Contact"] },
          ].map(col => (
            <div key={col.h} className="col gap-3" style={{ minWidth: 140 }}>
              <span className="eyebrow" style={{ color: dim }}>{col.h}</span>
              {col.links.map(l => <a key={l} style={{ color: fg, fontSize: 13 }}>{l}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 56, borderTop: `1px solid ${border}`, paddingTop: 18, display: "flex", justifyContent: "space-between", fontSize: 11, color: dim }} className="mono">
        <span>© 2026 CHROMA CATHAY · 朱華</span>
        <span>VOL. II · JAPANESE COLOR ATLAS · DIGITAL APPROXIMATION</span>
      </div>
    </footer>
  );
}

/* ────────── Color swatch card (museum specimen) ────────── */
function SwatchCard({ c, num }) {
  const isDark = ["#1B1B1B", "#264653", "#19313D", "#6B4C7A"].includes(c.hex);
  return (
    <div className="swatch-card">
      <div className="chip" style={{ background: c.hex, position: "relative" }}>
        <div style={{ position: "absolute", top: 10, left: 12, color: isDark ? "rgba(244,239,230,0.9)" : "rgba(27,27,27,0.6)" }}>
          <span className="mono" style={{ fontSize: 9, letterSpacing: "0.15em" }}>{num || "N°"}</span>
        </div>
        <div style={{ position: "absolute", bottom: 10, right: 12, color: isDark ? "rgba(244,239,230,0.9)" : "rgba(27,27,27,0.6)" }}>
          <span className="mono" style={{ fontSize: 10 }}>{c.hex}</span>
        </div>
      </div>
      <div className="meta">
        <span className="serif" style={{ fontSize: 22, lineHeight: 1.05 }}>{c.kanji}</span>
        <span style={{ fontSize: 12, color: "var(--nezumi)" }}>{c.kana} · {c.romaji}</span>
        <span style={{ fontSize: 11, color: "var(--nezumi)", marginTop: 2 }}>{c.en}</span>
      </div>
    </div>
  );
}

/* ────────── Big seal corner mark (decoration) ────────── */
function CornerSeal({ char = "色譜", style }) {
  return (
    <div className="tate" style={{ fontSize: 14, color: "var(--washi)", opacity: 0.55, letterSpacing: "0.4em", ...style }}>
      {char}
    </div>
  );
}

Object.assign(window, {
  SAMPLE_COLORS,
  Hanko, Eyebrow, MonRule, Badge,
  SiteHeader, SiteFooter, SwatchCard, CornerSeal,
});