// Artists index — three directions for the "all artists" page.
// Direction A · Directory grid + chip filters
// Direction B · Magazine spread (Members + Student cohorts)
// Direction C · County map + filtered list

const AI = {
  paper: "#FBF7EE",
  stone: "#E8E2D3",
  navy: "#01234B",
  ink: "#1F1B2E",
  mute: "#6B6577",
  council: "#45217A",
  pine: "#2F7A2E",
  pineDeep: "#1A461A",
  meadow: "#78BE4D",
  artists: "#01234B",
  artistsDeep: "#000E22",
  artistsLake: "#1F5A8C",
  artistsSky: "#6E94BC",
  artistsWhisper: "#DCE7F1",
  amber: "#FF9B3D",
  yellow: "#F3CF03",
};

// Shared chrome: nav + footer reused from homepage-final's intent.
function ArtistsNav({ activeStream = "artists" }) {
  const items = [
    { label: "What's on", stream: "events",  path: "#/events" },
    { label: "Artists",   stream: "artists", path: "#/artists", active: activeStream === "artists" },
    { label: "Programs",  stream: "council", path: "#/about" },
    { label: "News",      stream: "news",    path: "#/news" },
    { label: "Visit",     stream: "council", path: "#/about" },
  ];
  return (
    <header style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "24px 80px", borderBottom: `1px solid ${AI.stone}`,
      background: AI.paper,
    }}>
      <a href="#/"><Logo height={48} /></a>
      <nav style={{ display: "flex", gap: 4 }}>
        {items.map((n) => (
          <a key={n.label} href={n.path} style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "8px 14px", borderRadius: 999,
            fontWeight: 600, fontSize: 15, color: AI.navy,
            background: n.active ? "rgba(1,35,75,0.10)" : "transparent",
          }}>
            <StreamDot stream={n.stream} />
            {n.label}
          </a>
        ))}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a href="#/events" style={{ fontWeight: 600, fontSize: 15, color: AI.navy }}>Events</a>
        <a href="#/events" style={{
          padding: "10px 20px", borderRadius: 999,
          background: AI.pine, color: AI.paper,
          fontWeight: 700, fontSize: 14, display: "inline-flex", alignItems: "center",
        }}>See what's on</a>
      </div>
    </header>
  );
}

function ArtistsFooter() {
  return (
    <footer style={{ background: "#000000", color: AI.paper, padding: "48px 80px 28px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7 }}>
        <span>© 2026 RoCo Arts Council</span>
        <span>The Annex · 119 N Main · Stockton, KS</span>
        <span>hello@rocoarts.org</span>
      </div>
    </footer>
  );
}

// ════════════════════════════════════════════════════════════════
// Direction A — Directory grid + chip filters
// ════════════════════════════════════════════════════════════════
function ArtistsIndexA() {
  const all = ARTISTS;
  const mediums = ["Painting", "Photography", "Quilting", "Printmaking", "Ceramics", "Woodworking", "Fiber", "Sculpture", "Music", "Drawing", "Glass"];
  const towns = ["Stockton", "Plainville", "Palco", "Webster", "Damar", "Logan", "Zurich", "Woodston"];
  return (
    <div className="roco-root" style={{ background: AI.paper, color: AI.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <ArtistsNav />

      {/* Hero header (Artists stream eyebrow — black bg) */}
      <section style={{ background: "#000000", color: AI.paper, padding: "72px 80px 56px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <Eyebrow color={AI.artistsSky} style={{ marginBottom: 16 }}>Artists · Directory</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 72, lineHeight: 1.0, letterSpacing: "-0.025em",
              color: AI.paper, margin: 0,
            }}>
              All thirty-six makers,<br />in one county.
            </h1>
          </div>
          <div style={{ paddingBottom: 14 }}>
            <p style={{ fontSize: 16, lineHeight: 1.6, opacity: 0.85, margin: 0, marginBottom: 16, maxWidth: 440 }}>
              Twenty-eight RoCo members and eight student artists from county high schools.
              Filter, sort, or drop in during an Open Studios weekend.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              {/* THE one Amber pop CTA on this Artists-led page */}
              <a href="#/contact" style={{
                padding: "14px 24px", borderRadius: 999, background: AI.amber, color: AI.artistsDeep,
                fontWeight: 700, fontSize: 14.5, display: "inline-flex", alignItems: "center", gap: 8,
              }}>Submit your profile <span>→</span></a>
              <a href="#/contact" style={{
                padding: "13px 22px", borderRadius: 999,
                border: "1.5px solid rgba(251,247,238,0.4)", color: AI.paper, fontWeight: 700, fontSize: 14.5,
              }}>Apply as a student</a>
            </div>
          </div>
        </div>
      </section>

      {/* Filters */}
      <section style={{ padding: "32px 80px 0", background: AI.paper, borderBottom: `1px solid ${AI.stone}` }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18, gap: 24 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: AI.mute }}>Search</span>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "10px 16px", border: `1.5px solid rgba(1,35,75,0.18)`,
              borderRadius: 999, minWidth: 320, color: AI.mute, fontSize: 14,
            }}>
              <span>⌕</span>
              <span>Search by name, medium, town…</span>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 13.5, color: AI.mute }}>
            <span>Sort:</span>
            <span style={{ fontWeight: 700, color: AI.navy, display: "inline-flex", alignItems: "center", gap: 6 }}>A – Z <span>▾</span></span>
            <span style={{ marginLeft: 16, color: AI.navy, fontWeight: 600 }}>36 artists</span>
          </div>
        </div>

        <ChipRow label="Type">
          <Chip active count={36} color={AI.artists}>All</Chip>
          <Chip count={28} color={AI.artists}>Members</Chip>
          <Chip count={8} color={AI.artists}>Student artists</Chip>
          <Chip count={1} color={AI.artists}>Honorary</Chip>
        </ChipRow>

        <ChipRow label="Medium">
          {mediums.map((m) => {
            const n = all.filter(a => a.medium.includes(m)).length;
            return n > 0 ? <Chip key={m} count={n} color={AI.artists}>{m}</Chip> : null;
          })}
        </ChipRow>

        <ChipRow label="Town">
          {towns.map((t) => {
            const n = all.filter(a => a.town === t).length;
            return n > 0 ? <Chip key={t} count={n} color={AI.artists}>{t}</Chip> : null;
          })}
        </ChipRow>

        <ChipRow label="Filters" pad={26}>
          <Toggle on color={AI.artistsLake}>Open Studios participant ({all.filter(a => a.visitable).length})</Toggle>
          <Toggle color={AI.artistsLake}>Commissions open ({all.filter(a => a.commissions === "open").length})</Toggle>
          <Toggle color={AI.artistsLake}>Quilt Wall artist ({all.filter(a => a.tags && a.tags.includes("Quilt Wall artist")).length})</Toggle>
          <Toggle color={AI.artistsLake}>New this year ({all.filter(a => a.joined >= 2025).length})</Toggle>
        </ChipRow>
      </section>

      {/* Grid + pagination */}
      <section style={{ padding: "40px 80px 88px", background: AI.paper }}>
        {/* top pager strip */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingBottom: 18, marginBottom: 28,
          borderBottom: `1px solid ${AI.stone}`,
          fontSize: 13.5, color: AI.mute,
        }}>
          <div>
            <span style={{ color: AI.navy, fontWeight: 700 }}>Showing 1 – 24</span>
            <span style={{ margin: "0 8px" }}>of</span>
            <span style={{ color: AI.navy, fontWeight: 700 }}>36</span>
            <span style={{ marginLeft: 6 }}>artists</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <span>Per page</span>
            <div style={{
              display: "inline-flex", border: `1.5px solid rgba(1,35,75,0.18)`, borderRadius: 999,
              overflow: "hidden",
            }}>
              {["24", "48", "All"].map((n, i) => (
                <span key={n} style={{
                  padding: "7px 14px", fontWeight: 700, fontSize: 13,
                  background: i === 0 ? AI.artists : "transparent",
                  color: i === 0 ? AI.paper : AI.navy,
                }}>{n}</span>
              ))}
            </div>
          </div>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 18,
        }}>
          {all.slice(0, 24).map((a) => <ArtistTile key={a.id} a={a} size="md" />)}
        </div>

        {/* bottom pagination */}
        <div style={{
          marginTop: 56, paddingTop: 28, borderTop: `1px solid ${AI.stone}`,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 13.5, color: AI.mute,
        }}>
          <div>
            <span style={{ color: AI.navy, fontWeight: 700 }}>Page 1 of 2</span>
            <span style={{ marginLeft: 12 }}>· Updated weekly</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <PagerBtn disabled>← Prev</PagerBtn>
            <PagerBtn active>1</PagerBtn>
            <PagerBtn>2</PagerBtn>
            <PagerBtn>Next →</PagerBtn>
          </div>
        </div>
      </section>

      <ArtistsFooter />
    </div>
  );
}

function PagerBtn({ active, disabled, children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center",
      padding: "8px 14px", borderRadius: 6,
      fontSize: 13.5, fontWeight: 700,
      background: active ? AI.artists : "transparent",
      color: active ? AI.paper : (disabled ? "rgba(1,35,75,0.3)" : AI.navy),
      border: `1.5px solid ${active ? AI.artists : "rgba(1,35,75,0.18)"}`,
    }}>{children}</span>
  );
}

function ChipRow({ label, children, pad = 14 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: `0 0 ${pad}px`, flexWrap: "wrap" }}>
      <span style={{ minWidth: 70, fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: AI.mute }}>{label}</span>
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>{children}</div>
    </div>
  );
}

function Toggle({ on, color, children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "8px 14px 8px 10px", borderRadius: 999,
      border: `1.5px solid ${on ? color : "rgba(1,35,75,0.18)"}`,
      background: on ? color : "transparent",
      color: on ? "#FBF7EE" : AI.navy,
      fontWeight: 600, fontSize: 13.5,
    }}>
      <span style={{
        width: 26, height: 14, borderRadius: 999,
        background: on ? "rgba(251,247,238,0.4)" : "rgba(1,35,75,0.15)",
        position: "relative",
      }}>
        <span style={{
          position: "absolute", top: 1, left: on ? 13 : 1,
          width: 12, height: 12, borderRadius: 999,
          background: on ? "#FBF7EE" : AI.mute,
        }} />
      </span>
      {children}
    </span>
  );
}


window.ArtistsIndexA = ArtistsIndexA;