// Alt J — Old map of color origins (古地図)
// An Edo-era hand-drawn map of Japan. Each pigment is pinned to the place
// it was historically produced. The atlas is navigated geographically.

function AltOldMap() {
  // Provinces & their seminal pigments — pinned to a stylised Japan outline.
  // x/y in a 1000×640 viewport.
  const pins = [
    { x: 690, y: 250, region: "Tokushima · 阿波", color: "#264653", name: "藍", romaji: "Ai-iro",      note: "Sukumo indigo from the Yoshino river basin." },
    { x: 600, y: 200, region: "Yamagata · 山形", color: "#B33A3A", name: "紅", romaji: "Beni",         note: "Safflower benibana, dried in summer rain." },
    { x: 540, y: 320, region: "Kyoto · 京",     color: "#D8A431", name: "山吹", romaji: "Yamabuki",    note: "Court yellow, kerria pigment, Heian capital." },
    { x: 615, y: 305, region: "Uji · 宇治",       color: "#7A8B55", name: "抹茶", romaji: "Matcha-iro", note: "Pulverised tencha tea, Uji gardens." },
    { x: 575, y: 350, region: "Nara · 奈良",     color: "#1B1B1B", name: "墨", romaji: "Sumi-iro",     note: "Pine-soot ink, ground in Kohōchi." },
    { x: 650, y: 235, region: "Musashino · 武蔵野", color: "#6B4C7A", name: "紫", romaji: "Murasaki", note: "Gromwell root, rare and slow." },
    { x: 770, y: 175, region: "Aomori · 青森",   color: "#5F9EA0", name: "浅葱", romaji: "Asagi-iro",  note: "Northern pale-blue, dyed shallow." },
    { x: 500, y: 310, region: "Wajima · 輪島",   color: "#3B2A1E", name: "漆黒", romaji: "Shikkoku",   note: "Urushi black lacquer, hundred coats." },
    { x: 480, y: 380, region: "Hiroshima · 安芸", color: "#F1C6C1", name: "桜", romaji: "Sakura-iro", note: "Miyajima cherries, March bloom." },
    { x: 360, y: 470, region: "Kagoshima · 薩摩", color: "#B5A78A", name: "鈍", romaji: "Nibi-iro",    note: "Southern lava grey, after eruption." },
  ];
  const focusIdx = 0; // Ai-iro · Tokushima

  return (
    <div className="jca" style={{ background: "#E8DDCB", color: "var(--sumi)", minHeight: "100%", position: "relative" }}>
      <div className="washi-tex" style={{ position: "absolute", inset: 0, pointerEvents: "none" }}></div>

      {/* Top folio */}
      <div className="row mono" style={{ padding: "16px 48px", fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)", borderBottom: "1px solid rgba(60,40,20,0.3)", justifyContent: "space-between", position: "relative" }}>
        <span>CHROMA CATHAY · JAPANESE COLOR ATLAS</span>
        <span>MAP · 国 / KUNI · 二〇二六</span>
        <span>SEARCH · INDEX · PALETTES</span>
      </div>

      {/* Masthead */}
      <header style={{ padding: "36px 48px 18px", display: "grid", gridTemplateColumns: "1fr 320px", gap: 36, alignItems: "flex-end", position: "relative" }}>
        <div>
          <Eyebrow num="MAP Nº 04">A map of pigment origins</Eyebrow>
          <h1 className="serif" style={{ fontSize: 64, margin: "12px 0 12px", letterSpacing: "-0.02em", fontWeight: 400, lineHeight: 0.95 }}>
            日本色 <span style={{ fontStyle: "italic", color: "var(--nezumi)" }}>· where colors come from</span>
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.65, margin: 0, maxWidth: 640, opacity: 0.85 }}>
            Before pigments were industrial, they were regional. Aizome indigo grew in Tokushima; safflower red came from Yamagata; pine-soot ink was ground in Nara. Browse the atlas by the land that made it.
          </p>
        </div>
        <div className="col" style={{ alignItems: "flex-end", gap: 10 }}>
          <Hanko char="国" size={48} rotate={-3} />
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--nezumi)" }}>10 PROVINCES · 81 RECORDS</span>
          <span className="serif" style={{ fontSize: 12, fontStyle: "italic", color: "var(--nezumi)" }}>after pre-Meiji production records</span>
        </div>
      </header>

      {/* MAIN: map + region detail */}
      <main style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 0, padding: "0 48px 36px", position: "relative" }}>

        {/* MAP */}
        <div style={{ background: "var(--washi)", border: "1px solid rgba(60,40,20,0.4)", padding: 24, position: "relative" }}>
          {/* compass + scale */}
          <div className="row mono" style={{ position: "absolute", left: 24, top: 18, fontSize: 9.5, letterSpacing: "0.15em", color: "var(--nezumi)", gap: 24 }}>
            <span>SCALE — APPROX. 1 / 4,000,000</span>
            <span>BASE — KAEI 6 / 1853</span>
          </div>
          <div style={{ position: "absolute", right: 24, top: 18, width: 48, height: 48, border: "1px solid rgba(60,40,20,0.5)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div className="serif" style={{ fontSize: 14, color: "var(--beni)" }}>北</div>
            <div style={{ position: "absolute", top: -4, left: "50%", width: 1, height: 8, background: "var(--beni)" }}></div>
          </div>

          {/* Map SVG */}
          <svg viewBox="0 0 1000 640" style={{ width: "100%", height: 520, marginTop: 40 }}>
            <defs>
              <pattern id="sea" patternUnits="userSpaceOnUse" width="12" height="12">
                <path d="M0 6 Q3 4 6 6 T12 6" stroke="rgba(60,80,100,0.25)" fill="none" strokeWidth="0.8" />
              </pattern>
            </defs>
            {/* sea */}
            <rect width="1000" height="640" fill="url(#sea)" />

            {/* stylised Japan — four main islands as soft polygons */}
            {/* Hokkaido */}
            <path d="M 740 60 C 800 50 900 70 920 130 C 920 180 880 210 820 200 C 770 195 740 170 730 130 Z" fill="#F4EFE6" stroke="rgba(60,40,20,0.65)" strokeWidth="1.4" />
            {/* Honshu */}
            <path d="M 720 200 C 750 195 780 200 810 215 L 820 250 L 800 280 L 760 290 L 720 290 L 670 300 L 620 320 L 560 340 L 510 360 L 470 365 L 440 350 L 420 320 L 430 280 L 460 260 L 510 245 L 560 235 L 610 225 L 660 215 Z" fill="#F4EFE6" stroke="rgba(60,40,20,0.65)" strokeWidth="1.4" />
            {/* Shikoku */}
            <path d="M 620 400 C 660 395 700 410 700 440 C 695 460 670 470 640 465 C 615 460 605 440 615 415 Z" fill="#F4EFE6" stroke="rgba(60,40,20,0.65)" strokeWidth="1.4" />
            {/* Kyushu */}
            <path d="M 360 410 C 400 395 440 400 460 430 C 470 470 440 510 400 510 C 360 510 335 480 340 445 Z" fill="#F4EFE6" stroke="rgba(60,40,20,0.65)" strokeWidth="1.4" />

            {/* hand-drawn small islands */}
            <ellipse cx="160" cy="540" rx="12" ry="6" fill="#F4EFE6" stroke="rgba(60,40,20,0.65)" />
            <ellipse cx="220" cy="560" rx="9" ry="5" fill="#F4EFE6" stroke="rgba(60,40,20,0.65)" />
            <ellipse cx="290" cy="580" rx="11" ry="5" fill="#F4EFE6" stroke="rgba(60,40,20,0.65)" />

            {/* fuji icon */}
            <g transform="translate(610,300)">
              <path d="M 0 0 L 10 -20 L 16 -10 L 22 -20 L 32 0 Z" fill="#A8A49B" stroke="rgba(60,40,20,0.5)" strokeWidth="0.6" />
              <path d="M 8 -16 L 12 -10 L 16 -8 L 20 -10 L 24 -16" stroke="white" fill="white" />
            </g>

            {/* hand-drawn lines: Tokaido road */}
            <path d="M 540 320 Q 600 310 670 310 Q 720 300 750 290" stroke="rgba(60,40,20,0.4)" strokeWidth="1" strokeDasharray="3 4" fill="none" />
            <text x="630" y="295" className="mono" style={{ fontSize: "10px", fill: "rgba(60,40,20,0.55)", letterSpacing: "0.1em" }}>東海道</text>

            {/* pins */}
            {pins.map((p, i) => {
              const isFocus = i === focusIdx;
              const isDark = ["#1B1B1B", "#264653", "#3B2A1E", "#6B4C7A", "#B33A3A"].includes(p.color);
              return (
                <g key={i} transform={`translate(${p.x},${p.y})`}>
                  {/* shadow */}
                  <ellipse cx="0" cy="22" rx="10" ry="2" fill="rgba(0,0,0,0.18)" />
                  {/* pin stem */}
                  <line x1="0" y1="20" x2="0" y2="0" stroke="#3B2A1E" strokeWidth="1.4" />
                  {/* color flag */}
                  <rect x="-18" y="-18" width="36" height="18" fill={p.color} stroke="#3B2A1E" strokeWidth={isFocus ? "1.4" : "0.8"} />
                  <text x="0" y="-5" textAnchor="middle" style={{ fontFamily: "var(--serif)", fontSize: "13px", fill: isDark ? "#F4EFE6" : "#1B1B1B" }}>{p.name}</text>
                  {/* region label */}
                  <text x="0" y="-26" textAnchor="middle" style={{ fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.12em", fill: "rgba(27,27,27,0.7)" }}>
                    {p.region.split(" · ")[1] || p.region}
                  </text>
                </g>
              );
            })}

            {/* cartouche bottom-right */}
            <g transform="translate(820,520)">
              <rect width="160" height="100" fill="#F4EFE6" stroke="rgba(60,40,20,0.55)" strokeWidth="1" />
              <text x="80" y="20" textAnchor="middle" style={{ fontFamily: "var(--serif)", fontSize: "14px", fill: "#1B1B1B" }}>朱華 · 古地図</text>
              <line x1="14" y1="30" x2="146" y2="30" stroke="rgba(60,40,20,0.4)" />
              <text x="14" y="48" style={{ fontFamily: "var(--mono)", fontSize: "9px", fill: "rgba(60,40,20,0.7)", letterSpacing: "0.1em" }}>JAPANESE PIGMENT ORIGINS</text>
              <text x="14" y="62" style={{ fontFamily: "var(--mono)", fontSize: "9px", fill: "rgba(60,40,20,0.7)", letterSpacing: "0.1em" }}>COMPILED — CHROMA CATHAY</text>
              <text x="14" y="76" style={{ fontFamily: "var(--mono)", fontSize: "9px", fill: "rgba(60,40,20,0.7)", letterSpacing: "0.1em" }}>VOL. II — 002 — 2026</text>
              <text x="14" y="92" style={{ fontFamily: "var(--serif)", fontSize: "11px", fill: "rgba(60,40,20,0.85)", fontStyle: "italic" }}>after Edo provincial records</text>
            </g>
          </svg>

          {/* legend */}
          <div className="row" style={{ marginTop: 16, padding: "12px 16px", borderTop: "1px dashed rgba(60,40,20,0.3)", justifyContent: "space-between", alignItems: "center" }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>LEGEND</span>
            <div className="row gap-4 mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--sumi)", flexWrap: "wrap" }}>
              <span>● PIGMENT ORIGIN</span>
              <span>— EDO HIGHWAY</span>
              <span style={{ color: "var(--beni)" }}>北 NORTH MARK</span>
              <span>10 PROVINCES SHOWN</span>
            </div>
          </div>
        </div>

        {/* Side detail panel */}
        <aside style={{ background: "var(--washi)", borderTop: "1px solid rgba(60,40,20,0.4)", borderBottom: "1px solid rgba(60,40,20,0.4)", borderRight: "1px solid rgba(60,40,20,0.4)", padding: 0 }}>
          <div className="row" style={{ padding: "14px 18px", borderBottom: "1px solid rgba(60,40,20,0.2)", justifyContent: "space-between", alignItems: "center" }}>
            <Eyebrow>Selected · 阿波</Eyebrow>
            <span className="mono" style={{ fontSize: 9, color: "var(--nezumi)", letterSpacing: "0.15em" }}>PROVINCE 01 / 10</span>
          </div>
          {/* hero swatch */}
          <div style={{ background: pins[focusIdx].color, height: 180, position: "relative", color: "rgba(244,239,230,0.92)" }}>
            <span className="serif" style={{ position: "absolute", left: 24, top: 18, fontSize: 96, lineHeight: 0.9 }}>{pins[focusIdx].name}</span>
            <span className="mono" style={{ position: "absolute", right: 16, top: 14, fontSize: 11, letterSpacing: "0.12em" }}>SPECIMEN N° 057</span>
            <span className="mono" style={{ position: "absolute", right: 16, bottom: 14, fontSize: 14, letterSpacing: "0.04em" }}>{pins[focusIdx].color}</span>
          </div>
          <div style={{ padding: "20px 22px 18px" }}>
            <div className="row" style={{ alignItems: "baseline", justifyContent: "space-between" }}>
              <span className="serif" style={{ fontSize: 22 }}>{pins[focusIdx].romaji}</span>
              <span className="serif" style={{ fontSize: 14, color: "var(--nezumi)", fontStyle: "italic" }}>{pins[focusIdx].region}</span>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--sumi)", margin: "12px 0 16px", opacity: 0.85 }}>
              The fermented sukumo indigo of the Yoshino river basin in old Awa province (modern Tokushima). Long winters and damp summers produced dye lots so deep they were called "Japan blue" by visiting Englishmen.
            </p>

            <Eyebrow>Source notes</Eyebrow>
            <div className="col gap-2" style={{ marginTop: 8 }}>
              {[
                ["Crop", "Polygonum tinctorium (tade-ai)"],
                ["Vat", "Fermented, lime + lye, 60 days"],
                ["Sample", "Tokushima Aizome Council, 2024"],
                ["Status", "MEASURED · ATTRIBUTED"],
              ].map((r, i) => (
                <div key={i} className="row" style={{ justifyContent: "space-between", fontSize: 12, borderTop: i ? "1px dashed rgba(60,40,20,0.18)" : "none", padding: "6px 0" }}>
                  <span style={{ color: "var(--nezumi)" }}>{r[0]}</span>
                  <span className={i === 3 ? "mono" : "serif"} style={{ fontSize: i === 3 ? 10 : 13, letterSpacing: i === 3 ? "0.12em" : 0 }}>{r[1]}</span>
                </div>
              ))}
            </div>

            <button className="btn btn--solid-ink" style={{ width: "100%", justifyContent: "space-between", fontSize: 12, marginTop: 18 }}>
              Open color page · 開く <span className="arrow">→</span>
            </button>
          </div>
        </aside>
      </main>

      {/* PROVINCE LIST */}
      <section style={{ padding: "0 48px 48px", position: "relative" }}>
        <div className="row" style={{ marginTop: 8, justifyContent: "space-between", alignItems: "flex-end", marginBottom: 16 }}>
          <Eyebrow num="02">All ten provinces · 十国</Eyebrow>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--nezumi)" }}>TAP A FLAG ON THE MAP TO SCROLL HERE</span>
        </div>
        <div style={{ border: "1px solid rgba(60,40,20,0.4)", background: "var(--washi)" }}>
          <div className="row mono" style={{ background: "var(--sumi)", color: "var(--washi)", padding: "10px 18px", fontSize: 10, letterSpacing: "0.18em" }}>
            <span style={{ width: 60 }}>N°</span>
            <span style={{ width: 240 }}>PROVINCE / MODERN</span>
            <span style={{ width: 140 }}>PIGMENT</span>
            <span style={{ flex: 1 }}>SOURCE NOTE</span>
            <span style={{ width: 90, textAlign: "right" }}>HEX</span>
          </div>
          {pins.map((p, i) => (
            <div key={i} className="row" style={{ padding: "12px 18px", borderTop: "1px solid rgba(60,40,20,0.15)", alignItems: "center", background: i === focusIdx ? "rgba(216,164,49,0.08)" : "transparent" }}>
              <span style={{ width: 60 }} className="mono">{String(i + 1).padStart(3, "0")}</span>
              <span style={{ width: 240 }} className="serif">{p.region}</span>
              <div style={{ width: 140, display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 18, height: 18, background: p.color, border: "1px solid rgba(0,0,0,0.15)" }}></span>
                <span className="serif" style={{ fontSize: 16 }}>{p.name}</span>
                <span style={{ fontSize: 11, color: "var(--nezumi)" }}>{p.romaji}</span>
              </div>
              <span style={{ flex: 1, fontSize: 12, color: "var(--sumi)", fontStyle: "italic" }} className="serif">{p.note}</span>
              <span style={{ width: 90, textAlign: "right" }} className="mono">{p.color}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
window.AltOldMap = AltOldMap;