// Alt D — Dye workshop (染物屋)
// The site is a dyer's workbench. Strips of dyed cloth hang from a horizontal
// beam; each strip carries a tag tied with twine. Tools laid on the bench
// below. Logbook on the side. Everything tactile, hand-made.

function AltWorkshop() {
  const strips = [
    { kanji: "桜色",   romaji: "Sakura-iro",   batch: "K-014",  hex: "#F1C6C1", date: "三月二日" },
    { kanji: "藍色",   romaji: "Ai-iro",       batch: "K-057",  hex: "#264653", date: "六月十一日" },
    { kanji: "紅",     romaji: "Beni",         batch: "K-031",  hex: "#B33A3A", date: "四月十八日" },
    { kanji: "山吹色", romaji: "Yamabuki-iro", batch: "K-098",  hex: "#D8A431", date: "九月四日" },
    { kanji: "抹茶色", romaji: "Matcha-iro",   batch: "K-076",  hex: "#7A8B55", date: "五月二十日" },
    { kanji: "紫",     romaji: "Murasaki",     batch: "K-122",  hex: "#6B4C7A", date: "七月七日" },
    { kanji: "墨色",   romaji: "Sumi-iro",     batch: "K-172",  hex: "#1B1B1B", date: "十二月一日" },
  ];

  return (
    <div className="jca washi-tex" style={{ background: "#E8DDCB", color: "var(--sumi)", minHeight: "100%", position: "relative", overflow: "hidden" }}>

      {/* ── Header — handwritten-feeling shop sign ─────────────── */}
      <div style={{ padding: "32px 56px 0", display: "flex", justifyContent: "space-between", alignItems: "flex-end", position: "relative", zIndex: 2 }}>
        <div>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--nezumi)" }}>CHROMA CATHAY · DYE WORKSHOP</span>
          <div className="row gap-3" style={{ alignItems: "baseline", marginTop: 6 }}>
            <span className="serif" style={{ fontSize: 52, lineHeight: 1, fontWeight: 500, letterSpacing: "0.04em" }}>染物屋</span>
            <span className="serif" style={{ fontSize: 22, fontStyle: "italic", color: "var(--nezumi)" }}>— Japanese Color Atlas</span>
          </div>
        </div>
        <div className="row gap-6 mono" style={{ fontSize: 11, letterSpacing: "0.15em", color: "var(--sumi)" }}>
          <a>INDEX</a><a>SEASONS</a><a>PALETTES</a><a>LOGBOOK</a><a>· VISIT THE SHOP</a>
        </div>
      </div>

      {/* Eyebrow strip */}
      <div className="row" style={{ padding: "20px 56px 32px", justifyContent: "space-between", alignItems: "center", borderBottom: "1px dashed rgba(27,27,27,0.25)" }}>
        <p style={{ fontSize: 14, fontStyle: "italic", color: "var(--sumi)", margin: 0, maxWidth: 520, lineHeight: 1.55 }} className="serif">
          A working dye-house of eighty-one source-aware pigments. Strips drying on the beam, recipes in the book, the kettle still warm.
        </p>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <Hanko char="染" size={42} rotate={-4} />
          <div className="col" style={{ lineHeight: 1.3 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>BATCH BOOK · Nº 002</span>
            <span style={{ fontSize: 12 }} className="serif">Spring · 二〇二六</span>
          </div>
        </div>
      </div>

      {/* ── HANGING BEAM + STRIPS ─────────────── */}
      <section style={{ position: "relative", padding: "56px 56px 24px", minHeight: 720 }}>
        {/* the beam */}
        <div style={{ position: "absolute", left: 56, right: 56, top: 80, height: 16, background: "linear-gradient(#3B2A1E, #2A1E13 60%, #1B130C)", boxShadow: "0 2px 0 rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.06)" }}>
          {/* beam nail heads */}
          {[10, 26, 42, 58, 74, 90].map((p, i) => (
            <span key={i} style={{ position: "absolute", left: `${p}%`, top: 4, width: 8, height: 8, borderRadius: 4, background: "#5C4332", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.15)" }}></span>
          ))}
        </div>

        {/* strips */}
        <div className="row" style={{ marginTop: 96, gap: 18, alignItems: "flex-start" }}>
          {strips.map((s, i) => {
            const isDark = ["#1B1B1B", "#264653", "#6B4C7A"].includes(s.hex);
            const tilt = (i % 2 === 0 ? -1 : 1) * (0.6 + (i % 3) * 0.4);
            return (
              <div key={i} className="col" style={{ flex: 1, alignItems: "center", transform: `rotate(${tilt}deg)`, transformOrigin: "top center" }}>
                {/* twine */}
                <div style={{ width: 1, height: 14, background: "rgba(60,40,20,0.6)" }}></div>
                {/* tag */}
                <div style={{ background: "#F4EFE6", border: "1px solid rgba(60,40,20,0.35)", padding: "8px 10px 9px", minWidth: 110, textAlign: "center", boxShadow: "0 1px 0 rgba(0,0,0,0.06)", position: "relative" }}>
                  <span className="mono" style={{ fontSize: 8.5, letterSpacing: "0.18em", color: "var(--nezumi)" }}>LOT {s.batch}</span>
                  <div className="serif" style={{ fontSize: 22, lineHeight: 1.1, marginTop: 4 }}>{s.kanji}</div>
                  <div className="mono" style={{ fontSize: 9, color: "var(--nezumi)", marginTop: 3 }}>{s.hex}</div>
                  {/* punched hole */}
                  <div style={{ position: "absolute", top: -1, left: "50%", transform: "translateX(-50%)", width: 8, height: 8, borderRadius: 4, background: "#E8DDCB", border: "1px solid rgba(60,40,20,0.35)" }}></div>
                </div>
                {/* twine to strip */}
                <div style={{ width: 1, height: 8, background: "rgba(60,40,20,0.6)" }}></div>
                {/* cloth strip */}
                <div style={{ width: "100%", maxWidth: 92, background: s.hex, height: 380, boxShadow: "inset 0 -20px 30px rgba(0,0,0,0.18), inset 0 2px 0 rgba(255,255,255,0.08), 1px 2px 4px rgba(0,0,0,0.18)", color: isDark ? "rgba(244,239,230,0.9)" : "rgba(27,27,27,0.85)", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "14px 8px 18px", position: "relative" }}>
                  <span className="mono" style={{ fontSize: 9, letterSpacing: "0.15em", textAlign: "center", opacity: 0.8 }}>{s.date}</span>
                  <div className="tate serif" style={{ fontSize: 13, letterSpacing: "0.4em", margin: "0 auto", opacity: 0.95 }}>{s.kanji}</div>
                  <span style={{ fontSize: 9, textAlign: "center", opacity: 0.7 }} className="mono">{s.romaji.toUpperCase()}</span>
                  {/* frayed bottom — fake threads */}
                  <div style={{ position: "absolute", bottom: -8, left: 0, right: 0, height: 12, background: `repeating-linear-gradient(90deg, ${s.hex} 0, ${s.hex} 2px, transparent 2px, transparent 4px)`, opacity: 0.7 }}></div>
                </div>
              </div>
            );
          })}
        </div>

        {/* handwritten notes */}
        <div style={{ position: "absolute", left: 88, bottom: 24, transform: "rotate(-3deg)", maxWidth: 200, background: "#fff8e6", padding: "10px 14px 12px", border: "1px solid rgba(60,40,20,0.18)", boxShadow: "0 2px 4px rgba(0,0,0,0.08)", fontFamily: "var(--serif)", fontSize: 13, fontStyle: "italic", lineHeight: 1.5 }}>
          Indigo vat <strong>Nº 3</strong> — too thin today.<br/>
          add 200g sukumo, leave overnight.
          <div className="mono" style={{ fontSize: 9, color: "var(--nezumi)", marginTop: 6, letterSpacing: "0.1em" }}>— 親方 ·  M.S.</div>
        </div>
      </section>

      {/* ── TWO COLUMN: Tools + Logbook ─────────────── */}
      <section style={{ padding: "0 56px 56px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 36 }}>

        {/* Tools row — laid out like on a workbench */}
        <div>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 16, alignItems: "flex-end" }}>
            <Eyebrow num="01">On the bench · 道具</Eyebrow>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>FIVE TOOLS</span>
          </div>
          <div className="row" style={{ background: "#D9CDB6", border: "1px solid rgba(60,40,20,0.25)", padding: 22, gap: 18, position: "relative" }}>
            {/* nailed-down feel: 4 corner pins */}
            {[[8,8],[null,8,8],[8,null,null,8],[null,8,null,8]].map((p, i) => null)}
            {[
              { glyph: "筆", label: "Search", note: "Find a color by word or hex", link: "Open atlas" },
              { glyph: "譜", label: "Palette builder", note: "Stack, lock, export to code", link: "Open builder" },
              { glyph: "学", label: "Language guide", note: "Six colors, six characters", link: "Read guide" },
              { glyph: "配", label: "Design exports", note: "CSS, Tailwind, Figma, ASE", link: "Get pack" },
            ].map((t, i, a) => (
              <div key={i} className="col" style={{ flex: 1, gap: 12, padding: "12px 4px", borderRight: i < a.length - 1 ? "1px dashed rgba(60,40,20,0.25)" : "none" }}>
                <span className="serif" style={{ fontSize: 56, lineHeight: 0.9, color: "var(--sumi)" }}>{t.glyph}</span>
                <div className="col gap-1">
                  <span className="serif" style={{ fontSize: 17 }}>{t.label}</span>
                  <span style={{ fontSize: 12, color: "var(--nezumi)", lineHeight: 1.5 }}>{t.note}</span>
                </div>
                <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", marginTop: "auto" }}>{t.link.toUpperCase()} →</a>
              </div>
            ))}
          </div>

          {/* Search input — like a recipe slip */}
          <div className="row" style={{ marginTop: 20, background: "var(--washi)", border: "1px solid rgba(60,40,20,0.3)", padding: "14px 18px", alignItems: "center", gap: 16, boxShadow: "0 1px 0 rgba(0,0,0,0.06)" }}>
            <span className="serif" style={{ fontSize: 24, color: "var(--beni)" }}>尋</span>
            <span style={{ flex: 1, fontSize: 14, color: "var(--nezumi)", fontStyle: "italic" }} className="serif">Find a recipe — &quot;sakura&quot;, &quot;ai-iro&quot;, or the red of ripe persimmon…</span>
            <button className="btn btn--solid-ink" style={{ fontSize: 11, padding: "8px 12px" }}>Open recipe <span className="arrow">→</span></button>
          </div>
        </div>

        {/* Logbook */}
        <aside style={{ background: "var(--washi)", border: "1px solid rgba(60,40,20,0.3)", padding: 0, position: "relative" }}>
          {/* ring binding */}
          <div style={{ position: "absolute", left: -4, top: 12, bottom: 12, width: 8, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
            {[1,2,3,4,5,6,7].map(i => (
              <div key={i} style={{ width: 8, height: 8, borderRadius: 4, background: "#1B1B1B", border: "1px solid #3B2A1E" }}></div>
            ))}
          </div>

          <div className="row" style={{ padding: "16px 22px 12px", borderBottom: "1px solid rgba(60,40,20,0.18)", justifyContent: "space-between", alignItems: "baseline" }}>
            <span className="serif" style={{ fontSize: 20 }}>Dyer's logbook</span>
            <span className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--nezumi)" }}>RECENT ENTRIES</span>
          </div>

          <div className="col" style={{ padding: "8px 0" }}>
            {[
              { date: "三・二", color: "#F1C6C1", title: "Sakura-iro, lot K-014",  note: "Calibrated against silk swatch from MFA Kyoto." },
              { date: "三・五", color: "#7A8B55", title: "Matcha-iro retested",     note: "Slight cool shift after sun-fast test." },
              { date: "三・八", color: "#264653", title: "Ai vat Nº 3 restarted",   note: "Added 200g sukumo + lime, pH 11.2." },
              { date: "三・十一", color: "#D8A431", title: "Yamabuki lot K-098",    note: "Source: kerria pigment, single supplier." },
              { date: "三・十四", color: "#B33A3A", title: "Beni lot K-031",        note: "Safflower second wash — too cool." },
            ].map((e, i) => (
              <div key={i} className="row" style={{ padding: "10px 22px", alignItems: "flex-start", borderBottom: i < 4 ? "1px dashed rgba(60,40,20,0.12)" : "none", gap: 14 }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--nezumi)", width: 44, paddingTop: 3 }}>{e.date}</span>
                <div style={{ width: 26, height: 26, background: e.color, border: "1px solid rgba(0,0,0,0.1)", marginTop: 1 }}></div>
                <div className="col" style={{ flex: 1, lineHeight: 1.4 }}>
                  <span className="serif" style={{ fontSize: 14 }}>{e.title}</span>
                  <span style={{ fontSize: 11, color: "var(--nezumi)" }}>{e.note}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="row" style={{ padding: "12px 22px 14px", borderTop: "1px solid rgba(60,40,20,0.18)", justifyContent: "space-between", alignItems: "center" }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--nezumi)" }}>81 RECORDS · SOURCE-AWARE</span>
            <a className="mono" style={{ fontSize: 10, letterSpacing: "0.18em" }}>OPEN BOOK →</a>
          </div>
        </aside>
      </section>

      {/* ── Master's signature footer ─────────────── */}
      <footer style={{ padding: "36px 56px 48px", borderTop: "1px dashed rgba(27,27,27,0.25)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="col gap-2">
          <span className="serif" style={{ fontSize: 28, letterSpacing: "0.06em", fontStyle: "italic" }}>染 ・ 朱華 ・ 二〇二六</span>
          <span style={{ fontSize: 11, color: "var(--nezumi)" }}>A working dye-house. Open for visiting designers and language learners. Part of Chroma Cathay.</span>
        </div>
        <div className="row gap-4">
          <Hanko char="親" size={36} rotate={-3} />
          <Hanko char="方" size={36} rotate={2} />
        </div>
      </footer>
    </div>
  );
}
window.AltWorkshop = AltWorkshop;