/* ART ADDA — Artists (grid + detail) */
function Artists({ go, artistId, setArtistId }) {
  useReveal();
  const D = window.ARTADDA;
  const [medium, setMedium] = React.useState("All");
  if (artistId) {
    const a = D.artistById(artistId);
    if (a) return <ArtistDetail artist={a} back={() => setArtistId(null)} go={go} />;
  }
  const counts = new Map();
  D.artists.forEach((a) => (a.mediums || []).forEach((m) => counts.set(m, (counts.get(m) || 0) + 1)));
  const mediums = [...counts.keys()].sort((a, b) => counts.get(b) - counts.get(a) || a.localeCompare(b));
  const shown = medium === "All" ? D.artists : D.artists.filter((a) => (a.mediums || []).includes(medium));
  return (
    <div className="rise-in">
      <section className="wrap page-intro">
        <p className="eyebrow reveal" style={{ marginBottom: 22 }}>The Artists</p>
        <h1 className="serif reveal">Hands behind<br />the work</h1>
        <p className="lede reveal" style={{ maxWidth: "54ch", marginTop: 26 }}>
          Self-taught painters, trained muralists, photographers, engineers-turned-artists — the people who've
          turned Sundays at Adda into a gallery.
        </p>
      </section>

      <section className="wrap section" style={{ paddingTop: "clamp(30px,4vw,50px)" }}>
        <div className="medium-filter reveal">
          {["All"].concat(mediums).map((m) => (
            <button key={m} className={"tag" + (medium === m ? " is-active" : "")} onClick={() => setMedium(m)}>{m}</button>
          ))}
        </div>
        <div className="artist-grid">
          {shown.map((a, i) => (
            <button key={a.id} className="artist-card hover-rise reveal" onClick={() => setArtistId(a.id)}>
              <Ph label={`${a.name} · portrait`} src={D.img.artist(a.id)} />
              <div className="artist-card__top">
                <div className="artist-card__name serif">{a.name}</div>
                <span className="num">{String(i + 1).padStart(2, "0")}</span>
              </div>
              <div className="artist-card__disc">{a.discipline}</div>
            </button>
          ))}
        </div>
      </section>
    </div>
  );
}

function ArtistDetail({ artist: a, back, go }) {
  useReveal();
  const D = window.ARTADDA;
  const shows = D.events.filter((e) => (e.artistIds || []).includes(a.id));
  return (
    <div className="rise-in">
      <section className="wrap" style={{ paddingTop: "clamp(28px,4vw,56px)" }}>
        <button className="back-link" onClick={back}>
          <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><Arrow /></span> All artists
        </button>
        <div className="adetail">
          <div className="adetail__portrait">
            <Ph label={`${a.name} · portrait`} ratio="4/5" src={D.img.artist(a.id)} />
            <dl className="adetail__meta">
              <div><dt>Discipline</dt><dd>{a.discipline}</dd></div>
              <div><dt>Community</dt><dd>{a.community || "—"}</dd></div>
              {a.instagram && <div><dt>Instagram</dt><dd style={{ fontSize: 16 }}>@{a.instagram}</dd></div>}
              {a.website && <div><dt>Web</dt><dd style={{ fontSize: 15 }}>{a.website}</dd></div>}
            </dl>
          </div>

          <div>
            <p className="eyebrow" style={{ marginBottom: 16 }}>{a.discipline}</p>
            <h1 className="h-xl serif" style={{ marginBottom: 10 }}>{a.name}</h1>
            {a.credentials && <p className="mono" style={{ fontSize: 12, letterSpacing: ".08em", color: "var(--ink-soft)", marginBottom: 28 }}>{a.credentials}</p>}

            <div className="flow" style={{ maxWidth: "56ch" }}>
              <p className="lede" style={{ fontSize: 20 }}>{a.bio}</p>
              {a.statement && <p className="muted">{a.statement}</p>}
              {a.note && <p className="faint" style={{ fontSize: 14, fontStyle: "italic" }}>{a.note}</p>}
            </div>

            {a.mediums && (
              <div className="medium-tags">
                {a.mediums.map((m) => <span key={m} className="tag">{m}</span>)}
              </div>
            )}

            {shows.length > 0 && (
              <p className="mono" style={{ fontSize: 12, letterSpacing: ".08em", color: "var(--ink-faint)", marginTop: 26 }}>
                SHOWN AT — {shows.map((s) => s.date).join("  ·  ")}
              </p>
            )}

            <div className="adetail__works">
              {Array.from({ length: Math.min(a.works || 4, 4) }).map((_, k) => (
                <Ph key={k} label={`${a.name} — work ${k + 1}`} ratio={k % 2 ? "4/5" : "1/1"} src={D.img.work(a.id, k + 1)} />
              ))}
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 36 }}>
              <button className="btn" onClick={() => go("gallery")}>See in gallery <Arrow /></button>
              <a
                className="btn btn--ghost"
                href={`mailto:${D.contact.email}?subject=${encodeURIComponent(`Art Adda \u00b7 Commission enquiry \u2014 ${a.name}`)}&body=${encodeURIComponent(`Hi ${D.contact.lead},\n\nI'd like to enquire about commissioning a piece by ${a.name}.\n\nMy name:\nEmail / phone:\nWhat I have in mind:\n`)}`}
              >Commission a piece</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Artists = Artists;