// Resources / design exports page
function ResourcesPage() {
  const packs = [
    { kanji: "CSS", title: "CSS Variables",      jp: "変数",    note: "Current 81 records as :root custom properties + dark/light pairs.", status: "Ready", tone: "matcha" },
    { kanji: "TW",  title: "Tailwind Tokens",    jp: "標識",    note: "tailwind.config drop-in. Scales, families, dark mode included.",  status: "Ready", tone: "matcha" },
    { kanji: "FIG", title: "Figma Variables",    jp: "図",      note: "Native variables file with modes for season and surface.",       status: "Ready", tone: "matcha" },
    { kanji: "PRO", title: "Procreate Swatches", jp: "筆",      note: ".swatches palette grouped by family. Ten sets.",                  status: "Beta",  tone: "gold" },
    { kanji: "ASE", title: "Adobe ASE",          jp: "色帳",    note: "For Photoshop, Illustrator, InDesign. CMYK fallback included.",  status: "Ready", tone: "matcha" },
    { kanji: "AI",  title: "AI Prompt Pack",     jp: "詞",      note: "Color-aware prompts for Midjourney, DALL·E, Nano Banana.",       status: "Coming", tone: "muted" },
    { kanji: "JSN", title: "Full JSON Dataset",  jp: "全",      note: "Every record with sources, kana, romaji, kanji, RGB, LAB.",      status: "Ready", tone: "matcha" },
    { kanji: "PDF", title: "Printable Atlas",    jp: "冊子",    note: "A3 spreads. Numbered, source-cited, archival.",                   status: "Soon",  tone: "gold" },
  ];

  return (
    <div className="jca" style={{ background: "var(--washi)", minHeight: "100%" }}>
      <SiteHeader dark={false} />

      {/* Hero */}
      <section style={{ padding: "64px 56px 36px", maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", gap: 48 }}>
          <div>
            <Eyebrow num="RESOURCES 05">Design Exports · 配付素材</Eyebrow>
            <h1 className="serif" style={{ fontSize: 80, margin: "16px 0 0", lineHeight: 1, letterSpacing: "-0.02em", fontWeight: 400 }}>
              Japanese Color<br/>Design Exports
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--sumi)", maxWidth: 540, margin: "20px 0 0", opacity: 0.85 }}>
              Drop-in design assets built from the same source records as the atlas. CSS, Tailwind, Figma, Procreate, ASE, and a full JSON dataset.
            </p>
          </div>
          <div className="col" style={{ alignItems: "flex-end", gap: 12 }}>
            <Hanko char="配" size={56} rotate={-3} />
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: "var(--nezumi)" }}>VOL. II · ISSUE 002</span>
          </div>
        </div>
        <div className="mon-rule" style={{ marginTop: 40, color: "var(--nezumi)" }}>
          <span className="line"></span><span className="mon"></span><span className="line"></span>
        </div>
      </section>

      {/* Pack grid */}
      <section style={{ padding: "16px 56px 60px", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--paper-border)" }}>
          {packs.map((p, i) => {
            const col = i % 4;
            const row = Math.floor(i / 4);
            const total = packs.length;
            return (
              <article key={i} style={{
                padding: "26px 22px 22px",
                borderRight: col < 3 ? "1px solid var(--paper-border)" : "none",
                borderBottom: row < Math.floor((total - 1) / 4) ? "1px solid var(--paper-border)" : "none",
                background: "var(--washi)",
                minHeight: 260,
                display: "flex", flexDirection: "column", gap: 16,
                position: "relative",
              }}>
                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div className="col gap-2">
                    <span className="cat-num">№ {String(i + 1).padStart(2, "0")}</span>
                    <span className="serif" style={{ fontSize: 36, lineHeight: 1, color: "var(--sumi)" }}>{p.kanji}</span>
                  </div>
                  <Badge tone={p.tone === "matcha" ? "matcha" : p.tone === "gold" ? "gold" : "muted"} dot>{p.status.toUpperCase()}</Badge>
                </div>
                <div className="col gap-2">
                  <span className="serif" style={{ fontSize: 22, lineHeight: 1.1 }}>{p.title}</span>
                  <span style={{ fontSize: 12, color: "var(--nezumi)" }}>{p.jp}</span>
                  <p style={{ fontSize: 12.5, color: "var(--sumi)", lineHeight: 1.55, margin: "8px 0 0", opacity: 0.85 }}>{p.note}</p>
                </div>
                <div style={{ marginTop: "auto" }}>
                  <a className="mono" style={{ fontSize: 10, letterSpacing: "0.15em", color: p.status === "Coming" || p.status === "Soon" ? "var(--nezumi)" : "var(--sumi)" }}>
                    {p.status === "Ready" ? "DOWNLOAD →" : p.status === "Beta" ? "TRY BETA →" : "JOIN WAITLIST →"}
                  </a>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      {/* CTA dark band */}
      <section style={{ background: "var(--sumi)", color: "var(--washi)", padding: "64px 56px", position: "relative", overflow: "hidden" }} className="ink-tex">
        <div style={{ position: "absolute", right: -40, bottom: -120, fontFamily: "var(--serif)", fontSize: 360, lineHeight: 0.8, color: "rgba(244,239,230,0.04)" }}>配</div>

        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <Eyebrow color="rgba(244,239,230,0.62)">Sample · 試し</Eyebrow>
            <h2 className="serif" style={{ fontSize: 48, lineHeight: 1.05, margin: "14px 0 16px", letterSpacing: "-0.02em", fontWeight: 400 }}>
              Get the free sample pack.
            </h2>
            <p style={{ fontSize: 15, color: "rgba(244,239,230,0.7)", lineHeight: 1.6, maxWidth: 460, margin: "0 0 28px" }}>
              Twelve traditional colors as CSS variables, Tailwind tokens, and a Figma file. No account needed. Updates when the atlas updates.
            </p>
            <div className="row gap-3" style={{ marginBottom: 16 }}>
              <div style={{ display: "flex", flex: 1, maxWidth: 380, border: "1px solid var(--soft-border)", padding: "10px 14px", alignItems: "center" }}>
                <span style={{ flex: 1, fontSize: 13, color: "rgba(244,239,230,0.55)" }}>you@studio.jp</span>
              </div>
              <button className="btn btn--primary">Get sample <span className="arrow">→</span></button>
            </div>
            <p className="mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.5)", margin: 0, letterSpacing: "0.12em" }}>
              ALSO AVAILABLE · WAITLIST FOR FULL PACK · 4,200 DESIGNERS
            </p>
          </div>

          {/* Proof block */}
          <div style={{ border: "1px solid var(--soft-border)", padding: 28 }}>
            <Eyebrow color="rgba(244,239,230,0.62)">Proof</Eyebrow>
            <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, margin: "14px 0 20px", color: "var(--washi)" }}>
              "From the same studio behind <span style={{ borderBottom: "1px solid var(--yamabuki)", paddingBottom: 1 }}>Chinese Color Atlas</span> resource packs."
            </p>
            <div className="row gap-3" style={{ alignItems: "center", paddingTop: 16, borderTop: "1px solid var(--soft-border)" }}>
              <Hanko char="朱" size={32} rotate={-4} />
              <div className="col" style={{ lineHeight: 1.3 }}>
                <span style={{ fontSize: 13, color: "var(--washi)" }}>Chroma Cathay</span>
                <span className="mono" style={{ fontSize: 10, color: "rgba(244,239,230,0.55)", letterSpacing: "0.12em" }}>STUDIO · EST. 2023</span>
              </div>
            </div>
            <div className="row gap-6" style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--soft-border)" }}>
              {[["384", "CHINESE COLORS"], ["81", "JAPANESE RECORDS"], ["240", "ARCHITECTURE"]].map(([n, l]) => (
                <div key={l} className="col">
                  <span className="serif" style={{ fontSize: 28, color: "var(--washi)" }}>{n}</span>
                  <span className="mono" style={{ fontSize: 9, color: "rgba(244,239,230,0.55)", letterSpacing: "0.15em" }}>{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Caveat */}
      <section style={{ padding: "48px 56px", maxWidth: 1280, margin: "0 auto" }}>
        <div className="row gap-4" style={{ alignItems: "flex-start", padding: "20px 24px", background: "var(--warm-paper)", border: "1px solid var(--paper-border)" }} className="washi-tex">
          <Hanko char="注" size={36} />
          <div>
            <Eyebrow>A note before you download</Eyebrow>
            <p style={{ fontSize: 13.5, lineHeight: 1.65, color: "var(--sumi)", margin: "10px 0 0", maxWidth: 720 }}>
              These exports describe colors as on-screen approximations. Traditional Japanese pigments — beni, ai-iro, urushi black, yamabuki — vary by source, dye batch, fiber, and era. Calibrate for your medium.
            </p>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}
window.ResourcesPage = ResourcesPage;