// Alt L — Chiyogami stack (千代紙)
// A paper merchant's stack of patterned washi sheets, fanned and overlapping.
// Top sheet is fully visible (today's color); the rest peek out from beneath.
// Each carries the merchant's stamp, paper weight, fiber notes, and price.

function AltChiyogami() {

  // Patterned SVG backgrounds — built inline (asanoha / seigaiha / shippō /
  // kikkō / nami / hishi). We build a small Pattern component that returns a
  // tile filled with the requested motif in the chosen color.
  function Pattern({ kind, fg, bg }) {
    const id = "p-" + kind + "-" + (fg + "" + bg).replace(/[^a-z0-9]/gi, "");
    return (
      <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
        <defs>
          {kind === "asanoha" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="28" height="48">
              <rect width="28" height="48" fill={bg} />
              <g stroke={fg} strokeWidth="0.7" fill="none">
                <line x1="14" y1="0"  x2="14" y2="48"/>
                <line x1="0"  y1="12" x2="28" y2="12"/>
                <line x1="0"  y1="36" x2="28" y2="36"/>
                <line x1="0"  y1="0"  x2="14" y2="12"/>
                <line x1="28" y1="0"  x2="14" y2="12"/>
                <line x1="0"  y1="36" x2="14" y2="48"/>
                <line x1="28" y1="36" x2="14" y2="48"/>
                <line x1="14" y1="12" x2="0"  y2="36"/>
                <line x1="14" y1="12" x2="28" y2="36"/>
              </g>
            </pattern>
          )}
          {kind === "seigaiha" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="32" height="16">
              <rect width="32" height="16" fill={bg} />
              <g stroke={fg} strokeWidth="0.8" fill="none">
                <circle cx="16" cy="16" r="14"/>
                <circle cx="16" cy="16" r="10"/>
                <circle cx="16" cy="16" r="6"/>
                <circle cx="0"  cy="16" r="14"/>
                <circle cx="0"  cy="16" r="10"/>
                <circle cx="0"  cy="16" r="6"/>
                <circle cx="32" cy="16" r="14"/>
                <circle cx="32" cy="16" r="10"/>
                <circle cx="32" cy="16" r="6"/>
              </g>
            </pattern>
          )}
          {kind === "shippo" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="36" height="36">
              <rect width="36" height="36" fill={bg} />
              <g stroke={fg} strokeWidth="0.9" fill="none">
                <circle cx="0"  cy="18" r="14"/>
                <circle cx="36" cy="18" r="14"/>
                <circle cx="18" cy="0"  r="14"/>
                <circle cx="18" cy="36" r="14"/>
              </g>
            </pattern>
          )}
          {kind === "kikko" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="32" height="56">
              <rect width="32" height="56" fill={bg} />
              <g stroke={fg} strokeWidth="0.7" fill="none">
                <polygon points="16,4 30,14 30,30 16,40 2,30 2,14" />
                <polygon points="16,16 22,20 22,28 16,32 10,28 10,20" />
              </g>
            </pattern>
          )}
          {kind === "nami" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="24" height="12">
              <rect width="24" height="12" fill={bg} />
              <path d="M0 9 Q 6 3, 12 9 T 24 9" stroke={fg} strokeWidth="0.9" fill="none"/>
            </pattern>
          )}
          {kind === "hishi" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="22" height="22">
              <rect width="22" height="22" fill={bg} />
              <g stroke={fg} strokeWidth="0.8" fill="none">
                <polygon points="11,2 20,11 11,20 2,11" />
              </g>
            </pattern>
          )}
          {kind === "tatewaku" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="14" height="48">
              <rect width="14" height="48" fill={bg} />
              <path d="M0 0 Q 7 12, 14 0 M0 24 Q 7 36, 14 24 M0 12 Q 7 24, 14 12 M0 36 Q 7 48, 14 36" stroke={fg} strokeWidth="0.7" fill="none"/>
            </pattern>
          )}
          {kind === "kanoko" && (
            <pattern id={id} patternUnits="userSpaceOnUse" width="14" height="14">
              <rect width="14" height="14" fill={bg} />
              <circle cx="7" cy="7" r="2.5" fill={fg}/>
            </pattern>
          )}
        </defs>
        <rect width="100%" height="100%" fill={`url(#${id})`} />
      </svg>
    );
  }

  // Sheets — top one is "today's"; numerical order layered front-to-back.
  const sheets = [
    { id: "S1", kanji: "桜色",   romaji: "Sakura-iro",   hex: "#F1C6C1", bg: "#F4EFE6", fg: "#B33A3A", pattern: "asanoha",  weight: "70 g/m²", origin: "Echizen 越前", price: "¥820" },
    { id: "S2", kanji: "藍色",   romaji: "Ai-iro",       hex: "#264653", bg: "#264653", fg: "#7BB2C4", pattern: "seigaiha", weight: "85 g/m²", origin: "Mino 美濃",    price: "¥980" },
    { id: "S3", kanji: "山吹色", romaji: "Yamabuki",     hex: "#D8A431", bg: "#D8A431", fg: "#8B5A2B", pattern: "shippo",   weight: "55 g/m²", origin: "Tosa 土佐",   price: "¥720" },
    { id: "S4", kanji: "墨色",   romaji: "Sumi-iro",     hex: "#1B1B1B", bg: "#1B1B1B", fg: "#7C7A73", pattern: "kikko",    weight: "100 g/m²", origin: "Nara 奈良",   price: "¥1,180" },
    { id: "S5", kanji: "抹茶色", romaji: "Matcha-iro",   hex: "#7A8B55", bg: "#7A8B55", fg: "#3B4A2A", pattern: "nami",     weight: "70 g/m²", origin: "Uji 宇治",    price: "¥860" },
    { id: "S6", kanji: "紫",     romaji: "Murasaki",     hex: "#6B4C7A", bg: "#6B4C7A", fg: "#C7B3D4", pattern: "hishi",    weight: "70 g/m²", origin: "Echizen",    price: "¥1,040" },
    { id: "S7", kanji: "浅葱",   romaji: "Asagi-iro",    hex: "#5F9EA0", bg: "#5F9EA0", fg: "#1B3438", pattern: "tatewaku", weight: "60 g/m²", origin: "Awa 阿波",     price: "¥780" },
    { id: "S8", kanji: "紅",     romaji: "Beni",         hex: "#B33A3A", bg: "#B33A3A", fg: "#F4EFE6", pattern: "kanoko",   weight: "75 g/m²", origin: "Yamagata",    price: "¥1,260" },
  ];
  const top = sheets[0];

  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" }}>
        <span>CHROMA CATHAY · JAPANESE COLOR ATLAS</span>
        <span>SUB-ATLAS Nº 06 / 千代紙</span>
        <span>SEARCH · INDEX · PALETTES</span>
      </div>

      {/* Masthead */}
      <header style={{ padding: "40px 48px 28px", display: "grid", gridTemplateColumns: "1fr 320px", gap: 48, alignItems: "flex-end" }}>
        <div>
          <Eyebrow num="SHOP Nº 06">A paper merchant's stack</Eyebrow>
          <h1 className="serif" style={{ fontSize: 72, margin: "12px 0 12px", letterSpacing: "-0.02em", fontWeight: 400, lineHeight: 0.95 }}>
            千代紙 <span style={{ fontStyle: "italic", color: "var(--nezumi)", fontSize: 48 }}>· Chiyogami</span>
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.65, margin: 0, maxWidth: 600, opacity: 0.85 }}>
            Each color in the atlas is also a sheet of patterned washi — pulled by hand, stamped by a Kyoto merchant, sold by weight. Pull a sheet from the stack to read its file.
          </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)" }}>8 SHEETS · 6 PATTERNS</span>
          <span className="serif" style={{ fontSize: 12, fontStyle: "italic", color: "var(--nezumi)" }}>Honden Shōten · 京 · 本店</span>
        </div>
      </header>

      {/* Main stack */}
      <main style={{ padding: "16px 48px 32px", display: "grid", gridTemplateColumns: "1.4fr 360px", gap: 32, alignItems: "flex-start" }}>

        {/* The fanned paper stack */}
        <div style={{ position: "relative", height: 600, perspective: "1400px" }}>
          {/* Stack base (table) */}
          <div style={{ position: "absolute", inset: 0, background: "rgba(60,40,20,0.06)", border: "1px dashed rgba(60,40,20,0.3)" }}></div>

          {sheets.slice().reverse().map((s, ri) => {
            const realIdx = sheets.length - 1 - ri;
            const isTop = realIdx === 0;
            const angle = isTop ? 0 : -6 + realIdx * 1.4;
            const offsetX = isTop ? 0 : 60 + realIdx * 20;
            const offsetY = isTop ? 30 : 30 + realIdx * 8;
            const opacity = isTop ? 1 : 0.96;
            return (
              <div key={s.id} style={{
                position: "absolute",
                left: `${offsetX}px`,
                top: `${offsetY}px`,
                width: 360,
                height: 460,
                transform: `rotate(${angle}deg)`,
                transformOrigin: "left bottom",
                background: "#F4EFE6",
                boxShadow: isTop
                  ? "0 18px 32px rgba(0,0,0,0.25), 0 4px 0 rgba(0,0,0,0.04)"
                  : "0 4px 10px rgba(0,0,0,0.18)",
                border: "1px solid rgba(60,40,20,0.35)",
                opacity,
                overflow: "hidden",
              }}>
                {/* the pattern fills the sheet */}
                <div style={{ position: "absolute", inset: 0 }}>
                  <Pattern kind={s.pattern} fg={s.fg} bg={s.bg} />
                </div>

                {/* corner stamp / label */}
                {isTop ? (
                  <>
                    <div style={{ position: "absolute", top: 16, left: 16, padding: "8px 12px", background: "#F4EFE6", border: "1px solid rgba(60,40,20,0.5)", boxShadow: "0 1px 0 rgba(0,0,0,0.05)" }}>
                      <span className="mono" style={{ fontSize: 9, color: "var(--nezumi)", letterSpacing: "0.18em" }}>LOT 014 · MAR</span>
                      <div className="serif" style={{ fontSize: 28, lineHeight: 1.1, marginTop: 4 }}>{s.kanji}</div>
                      <div style={{ fontSize: 11, color: "var(--nezumi)", fontStyle: "italic" }}>{s.romaji}</div>
                    </div>
                    {/* Merchant hanko bottom-right */}
                    <div style={{ position: "absolute", bottom: 18, right: 18 }}>
                      <Hanko char="本" size={44} rotate={-4} />
                    </div>
                    {/* tag with twine */}
                    <div style={{ position: "absolute", top: -2, right: 60 }}>
                      <div style={{ width: 1, height: 20, background: "rgba(60,40,20,0.6)", margin: "0 auto" }}></div>
                      <div style={{ background: "#F4EFE6", border: "1px solid rgba(60,40,20,0.4)", padding: "4px 8px", marginTop: 2, textAlign: "center", boxShadow: "0 1px 0 rgba(0,0,0,0.05)" }}>
                        <span className="mono" style={{ fontSize: 9, color: "var(--sumi)", letterSpacing: "0.15em" }}>{s.price}</span>
                      </div>
                    </div>
                  </>
                ) : (
                  // peek-out label for lower sheets — just kanji + hex showing past the top sheet's edge
                  <div style={{ position: "absolute", right: 14, top: 12, background: "rgba(244,239,230,0.92)", padding: "4px 8px", border: "1px solid rgba(60,40,20,0.4)" }}>
                    <span className="serif" style={{ fontSize: 16 }}>{s.kanji}</span>
                    <span className="mono" style={{ fontSize: 9, marginLeft: 6, color: "var(--nezumi)" }}>{s.hex}</span>
                  </div>
                )}
              </div>
            );
          })}

          {/* Caption beneath stack */}
          <div className="row mono" style={{ position: "absolute", left: 0, bottom: -22, fontSize: 10, letterSpacing: "0.2em", color: "var(--nezumi)", justifyContent: "space-between", width: "100%" }}>
            <span>← FAN HOVER TO PULL A SHEET FORWARD</span>
            <span>TOP: SAKURA-IRO · LOT 014</span>
          </div>
        </div>

        {/* Side panel — file card for the top sheet */}
        <aside style={{ background: "var(--washi)", border: "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" }}>
            <Eyebrow>Today's sheet</Eyebrow>
            <span className="mono" style={{ fontSize: 9.5, color: "var(--nezumi)", letterSpacing: "0.18em" }}>LOT 014</span>
          </div>

          {/* sheet swatch */}
          <div style={{ height: 160, background: top.hex, position: "relative" }}>
            <span className="serif" style={{ position: "absolute", left: 22, top: 16, fontSize: 80, lineHeight: 0.9, color: "rgba(27,27,27,0.75)" }}>{top.kanji}</span>
            <span className="mono" style={{ position: "absolute", right: 16, bottom: 14, fontSize: 14, letterSpacing: "0.04em", color: "rgba(27,27,27,0.7)" }}>{top.hex}</span>
          </div>

          {/* details */}
          <div className="col" style={{ padding: "18px 20px 18px", gap: 0 }}>
            <span className="serif" style={{ fontSize: 24 }}>{top.romaji}</span>
            <span style={{ fontSize: 12, color: "var(--nezumi)" }}>さくらいろ · cherry blossom pink</span>

            <div className="col gap-2" style={{ marginTop: 16 }}>
              {[
                ["Pattern",  "Asanoha · 麻の葉"],
                ["Weight",   top.weight],
                ["Origin",   top.origin + " · hand-pulled"],
                ["Fiber",    "kōzo · mulberry, 100%"],
                ["Sheet",    "190 × 270 mm · single-side"],
                ["Edition",  "Spring 2026, 1 of 240"],
                ["Status",   "ATTRIBUTED · MEASURED"],
              ].map((r, i, a) => (
                <div key={i} className="row" style={{ justifyContent: "space-between", padding: "6px 0", borderTop: i ? "1px dashed rgba(60,40,20,0.18)" : "none", fontSize: 12 }}>
                  <span className="mono" style={{ color: "var(--nezumi)", letterSpacing: "0.12em", fontSize: 10 }}>{r[0].toUpperCase()}</span>
                  <span className={i === a.length - 1 ? "mono" : "serif"} style={{ fontSize: i === a.length - 1 ? 10 : 13, letterSpacing: i === a.length - 1 ? "0.12em" : 0, color: "var(--sumi)" }}>{r[1]}</span>
                </div>
              ))}
            </div>

            <div className="row gap-2" style={{ marginTop: 16 }}>
              <button className="btn btn--solid-ink" style={{ flex: 1, fontSize: 12, justifyContent: "center" }}>Add to basket <span className="arrow">→</span></button>
              <button className="btn btn--ghost-dark" style={{ fontSize: 12 }}>Open file</button>
            </div>
          </div>
        </aside>
      </main>

      {/* Pattern legend */}
      <section style={{ padding: "32px 48px 36px", borderTop: "1px solid rgba(60,40,20,0.3)" }}>
        <Eyebrow num="02">Patterns in the stack · 文様一覧</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 12, marginTop: 16 }}>
          {[
            { kind: "asanoha",  name: "麻の葉", romaji: "asanoha"  },
            { kind: "seigaiha", name: "青海波", romaji: "seigaiha" },
            { kind: "shippo",   name: "七宝",   romaji: "shippō"   },
            { kind: "kikko",    name: "亀甲",   romaji: "kikkō"    },
            { kind: "nami",     name: "波",     romaji: "nami"     },
            { kind: "hishi",    name: "菱",     romaji: "hishi"    },
            { kind: "tatewaku", name: "立涌",   romaji: "tatewaku" },
            { kind: "kanoko",   name: "鹿の子", romaji: "kanoko"   },
          ].map((p, i) => (
            <div key={p.kind} style={{ border: "1px solid rgba(60,40,20,0.35)", background: "var(--washi)" }}>
              <div style={{ height: 84, position: "relative", overflow: "hidden" }}>
                <Pattern kind={p.kind} fg="#1B1B1B" bg="#F4EFE6" />
              </div>
              <div className="col" style={{ padding: "10px 12px 12px", gap: 2 }}>
                <span className="serif" style={{ fontSize: 16 }}>{p.name}</span>
                <span className="mono" style={{ fontSize: 9.5, color: "var(--nezumi)", letterSpacing: "0.12em" }}>{p.romaji.toUpperCase()}</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
window.AltChiyogami = AltChiyogami;