// Single ProfileArtist template — every artist gets the same generous
// treatment. Data drives which optional sections appear:
//   • student?      → adds the student featurette (school+mentor / awards
//                     / what's next) as a celebration, not a replacement
//   • commissions   → renders the commissions block
//   • events        → renders the upcoming-appearances list
//   • press         → renders the press & exhibitions list
//   • studio        → renders the studio block
//
// Pop CTA: one per page, always Amber (Artists stream). Defined in
// `primaryCta` on the artist data so it can be the most relevant action
// for THAT artist (commission, exhibit RSVP, buy a zine, etc.).
//
// Two example artboards in app.jsx call the SAME component with different
// data — one member (Maribel), one student (Jacob, who still gets every
// feature plus the celebration band).

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

// ─── Shared chrome ────────────────────────────────────────────────
function ProfileNav() {
  const items = [
    { label: "What's on", stream: "events",  path: "#/events" },
    { label: "Artists",   stream: "artists", path: "#/artists", active: true },
    { 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 ${AP.stone}`,
      background: AP.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: AP.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="#/artists" style={{ fontWeight: 600, fontSize: 15, color: AP.navy }}>← All artists</a>
        <a href="#/events" style={{
          padding: "10px 20px", borderRadius: 999,
          background: AP.pine, color: AP.paper,
          fontWeight: 700, fontSize: 14, display: "inline-flex", alignItems: "center",
        }}>See what's on</a>
      </div>
    </header>
  );
}

function ProfileFooter() {
  return (
    <footer style={{ background: "#000000", color: AP.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>
  );
}

// ─── Portrait placeholder ─────────────────────────────────────────
function PortraitBig({ initials, gradient, size = 460, badges }) {
  return (
    <div style={{
      width: size, height: size, position: "relative", overflow: "hidden",
      background: gradient || `linear-gradient(135deg, ${AP.artistsLake} 0%, ${AP.artists} 100%)`,
    }}>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-display)", fontWeight: 800,
        color: "rgba(251,247,238,0.42)", fontSize: size * 0.5, letterSpacing: "-0.05em",
      }}>{initials}</div>
      <svg style={{ position: "absolute", top: 0, right: 0 }} width={size * 0.22} height={size * 0.22} viewBox="0 0 100 100">
        <polygon points="0,0 100,0 100,100" fill={AP.paper} opacity={0.9} />
      </svg>
      {badges && (
        <div style={{ position: "absolute", top: 18, left: 18, display: "flex", flexDirection: "column", gap: 8, zIndex: 2 }}>
          {badges.map((b, i) => (
            <span key={i} style={{
              padding: "4px 10px", fontSize: 10.5, fontWeight: 700,
              letterSpacing: "0.18em", textTransform: "uppercase",
              background: b.bg, color: b.fg,
              border: b.border ? `1px solid ${b.border}` : "none",
            }}>{b.label}</span>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Work tile — adapts visual style per medium ──────────────────
function WorkTile({ big, work }) {
  const { style = "quilt", title, meta, colors, highlight, label } = work;
  return (
    <article style={{
      gridColumn: big ? "span 2" : "span 1",
      gridRow: big ? "span 2" : "span 1",
      background: AP.paper, overflow: "hidden",
      boxShadow: "0 1px 2px rgba(31,27,46,0.05)",
      border: highlight ? `2px solid ${AP.amber}` : "none",
      position: "relative",
    }}>
      {highlight && (
        <div style={{
          position: "absolute", top: 12, left: 12, zIndex: 2,
          background: AP.amber, color: AP.artistsDeep,
          padding: "3px 10px", fontSize: 10, fontWeight: 700,
          letterSpacing: "0.18em", textTransform: "uppercase",
        }}>{label || "Featured"}</div>
      )}
      <div style={{ aspectRatio: big ? "1 / 1" : "1 / 1", background: AP.warmPaper, position: "relative", overflow: "hidden" }}>
        {style === "quilt" && <QuiltArt colors={colors} />}
        {style === "sketch" && <SketchArt />}
        {style === "photo" && <PhotoArt colors={colors} />}
        {style === "ceramic" && <CeramicArt colors={colors} />}
      </div>
      <div style={{ padding: "12px 16px 14px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 14.5, color: AP.navy, lineHeight: 1.2, marginBottom: 4 }}>{title}</div>
        <div style={{ fontSize: 11.5, color: AP.mute }}>{meta}</div>
      </div>
    </article>
  );
}

function QuiltArt({ colors = ["#C81344", "#F3CF03", "#45217A", "#FBF7EE"] }) {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice">
      <rect width={100} height={100} fill={colors[0]} />
      <rect x={100} width={100} height={100} fill={colors[1]} />
      <rect y={100} width={100} height={100} fill={colors[2]} />
      <rect x={100} y={100} width={100} height={100} fill={colors[3]} />
      <polygon points="0,0 100,0 0,100" fill={colors[2]} opacity={0.85} />
      <polygon points="100,100 200,100 200,200" fill={colors[0]} opacity={0.85} />
    </svg>
  );
}

function SketchArt() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 200">
      {Array.from({ length: 40 }).map((_, i) => (
        <line key={"a" + i} x1={-20} y1={i * 6} x2={220} y2={i * 6 - 60} stroke="#1F1B2E" strokeWidth={0.4} opacity={0.15} />
      ))}
      <path d="M 30 140 Q 70 80, 110 130 T 180 110" stroke="#01234B" strokeWidth={2.2} fill="none" opacity={0.7} strokeLinecap="round" />
      <path d="M 40 160 Q 90 130, 150 150" stroke="#01234B" strokeWidth={1.6} fill="none" opacity={0.45} />
      <rect x={140} y={36} width={36} height={50} fill="none" stroke="#01234B" strokeWidth={1.5} opacity={0.4} />
    </svg>
  );
}

function PhotoArt({ colors = ["#1F5A8C", "#FBF7EE"] }) {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 200">
      <defs>
        <linearGradient id="ph" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={colors[0]} />
          <stop offset="55%" stopColor={colors[1]} />
          <stop offset="100%" stopColor={colors[0]} stopOpacity={0.7} />
        </linearGradient>
      </defs>
      <rect width={200} height={200} fill="url(#ph)" />
      <line x1={0} y1={110} x2={200} y2={110} stroke="#01234B" strokeWidth={1.5} opacity={0.6} />
      <rect x={130} y={88} width={36} height={26} fill="#01234B" opacity={0.4} />
    </svg>
  );
}

function CeramicArt({ colors = ["#0E3E78", "#DCE7F1"] }) {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 200">
      <rect width={200} height={200} fill={colors[1]} />
      <path d="M 70 60 Q 60 85 60 110 Q 60 165 100 165 Q 140 165 140 110 Q 140 85 130 60 L 130 50 L 70 50 Z" fill={colors[0]} />
      <ellipse cx={100} cy={50} rx={30} ry={5} fill={colors[1]} opacity={0.8} />
      <line x1={45} y1={170} x2={155} y2={170} stroke={colors[0]} strokeWidth={2} opacity={0.4} />
    </svg>
  );
}

// ════════════════════════════════════════════════════════════════
// ProfileArtist — unified template
// ════════════════════════════════════════════════════════════════
function ProfileArtist({ artist: a }) {
  const isStudent = !!a.student;
  return (
    <div className="roco-root" style={{ background: AP.paper, color: AP.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <ProfileNav />

      {/* Breadcrumb */}
      <div style={{ padding: "16px 80px", fontSize: 12.5, color: AP.mute, letterSpacing: "0.08em", borderBottom: `1px solid ${AP.stone}`, background: AP.paper }}>
        <a style={{ color: AP.mute }}>Artists</a>
        <span style={{ margin: "0 10px" }}>›</span>
        <a style={{ color: AP.mute }}>{a.medium[0]}</a>
        <span style={{ margin: "0 10px" }}>›</span>
        <span style={{ color: AP.navy, fontWeight: 600 }}>{a.name}</span>
      </div>

      {/* ── Hero ── */}
      <section style={{ background: "#000000", color: AP.paper, padding: "72px 80px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "auto 1fr", gap: 64, alignItems: "start" }}>
          <PortraitBig initials={a.initials} size={460} gradient={a.gradient} badges={a.badges} />
          <div style={{ paddingTop: 4 }}>
            <Eyebrow color={AP.artistsSky} style={{ marginBottom: 14 }}>
              {a.eyebrow || "Artist · Profile"}
            </Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 84, lineHeight: 0.98, letterSpacing: "-0.03em",
              color: AP.paper, margin: 0, marginBottom: 12,
            }}>
              {a.name}
            </h1>
            <div style={{ fontSize: 17, color: "rgba(251,247,238,0.85)", marginBottom: 32, letterSpacing: "0.04em", fontWeight: 500 }}>
              {a.meta}
            </div>

            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 32 }}>
              {a.tags.map((t) => (
                <span key={t} style={{
                  padding: "6px 14px", borderRadius: 999, fontSize: 12.5, fontWeight: 600,
                  border: "1.5px solid rgba(251,247,238,0.35)", color: AP.paper,
                }}>{t}</span>
              ))}
            </div>

            <p style={{ fontSize: 19, lineHeight: 1.55, maxWidth: 580, marginBottom: 36, opacity: 0.92, margin: "0 0 36px" }}>
              "{a.quote}"
            </p>

            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              {/* THE one Amber pop per page */}
              <span style={{
                padding: "14px 22px", borderRadius: 999, background: AP.amber, color: AP.artistsDeep,
                fontWeight: 700, fontSize: 14.5, display: "inline-flex", alignItems: "center", gap: 8,
              }}>{a.primaryCta} <span>→</span></span>
              {a.secondaryCta && (
                <span style={{
                  padding: "13px 20px", borderRadius: 999,
                  border: `1.5px solid rgba(251,247,238,0.4)`, color: AP.paper, fontWeight: 700, fontSize: 14.5,
                }}>{a.secondaryCta}</span>
              )}
              <span style={{ color: AP.paper, fontWeight: 600, fontSize: 14, opacity: 0.85 }}>Share</span>
              <span style={{ color: AP.paper, fontWeight: 600, fontSize: 14, opacity: 0.85 }}>Print profile</span>
            </div>
          </div>
        </div>
      </section>

      {/* ── Quick-info strip ── */}
      <section style={{ background: AP.artistsWhisper, padding: "20px 80px", borderBottom: `1px solid ${AP.stone}` }}>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${a.quickInfo.length}, 1fr)`, gap: 32 }}>
          {a.quickInfo.map((it, i) => (
            <div key={i} style={{ borderLeft: i === 0 ? "none" : `1px solid ${AP.stone}`, paddingLeft: i === 0 ? 0 : 16 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: AP.mute, marginBottom: 6 }}>{it.l}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, color: it.color || AP.artists, lineHeight: 1.15, letterSpacing: "-0.01em" }}>{it.v}</div>
              <div style={{ fontSize: 12, color: AP.mute, marginTop: 2 }}>{it.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── About + Works gallery ── */}
      <section style={{ padding: "96px 80px", background: AP.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.7fr", gap: 80 }}>
          <div>
            <Eyebrow color={AP.artists} style={{ marginBottom: 14 }}>About</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 40, lineHeight: 1.05, color: AP.artists, margin: 0, marginBottom: 24, letterSpacing: "-0.02em" }}>
              {a.statement.heading}
            </h2>
            {a.statement.paras.map((p, i) => (
              <p key={i} style={{ fontSize: 16, lineHeight: 1.65, color: AP.navy, margin: 0, marginBottom: 14 }} dangerouslySetInnerHTML={{ __html: p }} />
            ))}
          </div>

          <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
              <Eyebrow color={AP.artists}>{a.worksLabel || "Selected works"}</Eyebrow>
              <ArrowLink color={AP.artists} style={{ fontSize: 13 }}>See all {a.totalWorks || a.works.length}</ArrowLink>
            </div>
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 14,
            }}>
              {a.works.map((w, i) => <WorkTile key={i} work={w} big={w.big} />)}
            </div>
          </div>
        </div>
      </section>

      {/* ── Student featurette (only if student) — celebrated, not limited ── */}
      {isStudent && (
        <section style={{
          background: AP.artists, color: AP.paper, padding: "72px 80px",
          position: "relative", overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", inset: 0, opacity: 0.05,
            background: "url(assets/motif-pattern-tile.svg)", backgroundSize: "240px 240px",
          }} />
          <div style={{ position: "relative" }}>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 32, alignItems: "end", marginBottom: 32, paddingBottom: 18, borderBottom: `1px solid rgba(251,247,238,0.2)` }}>
              <div>
                <Eyebrow color={AP.amber} style={{ marginBottom: 12 }}>Student artist · Class of {a.student.classYear}</Eyebrow>
                <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 44, lineHeight: 1, color: AP.paper, margin: 0, letterSpacing: "-0.02em" }}>
                  Coming up next.
                </h2>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.55, opacity: 0.85, margin: 0, maxWidth: 420, textAlign: "right", marginLeft: "auto" }}>
                {a.name.split(" ")[0]} joined the RoCo student cohort in fall {a.student.joined}. We add three students per county high school each year.
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 40 }}>
              {/* School + Mentor */}
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: AP.artistsSky, marginBottom: 14 }}>School + mentor</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, lineHeight: 1.1, color: AP.paper, margin: 0, marginBottom: 14, letterSpacing: "-0.015em" }}>
                  {a.student.school}
                </h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, opacity: 0.85, margin: 0, marginBottom: 14 }} dangerouslySetInnerHTML={{ __html: a.student.mentorNote }} />
                <p style={{ fontSize: 12.5, lineHeight: 1.55, color: AP.artistsSky, margin: 0 }}>
                  Educators — <a style={{ color: AP.amber, fontWeight: 600 }}>nomination guidelines</a>.
                </p>
              </div>

              {/* Awards & shows */}
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: AP.artistsSky, marginBottom: 14 }}>Recognition</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, lineHeight: 1.1, color: AP.paper, margin: 0, marginBottom: 14, letterSpacing: "-0.015em" }}>
                  Awards & shows
                </h3>
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 8, fontSize: 14, lineHeight: 1.4 }}>
                  {a.student.awards.map((aw, i) => (
                    <li key={i} style={{ paddingBottom: 8, borderBottom: i === a.student.awards.length - 1 ? "none" : `1px dashed rgba(251,247,238,0.18)` }}>
                      <span style={{ color: AP.artistsSky, fontWeight: 700, marginRight: 8 }}>{aw.year}</span>
                      <span style={{ opacity: 0.95 }} dangerouslySetInnerHTML={{ __html: aw.text }} />
                    </li>
                  ))}
                </ul>
              </div>

              {/* What's next */}
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: AP.amber, marginBottom: 14 }}>After graduation</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, lineHeight: 1.1, color: AP.paper, margin: 0, marginBottom: 14, letterSpacing: "-0.015em" }}>
                  What's next.
                </h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, opacity: 0.85, margin: 0, marginBottom: 16 }} dangerouslySetInnerHTML={{ __html: a.student.next }} />
                {a.student.support && (
                  <div style={{
                    padding: "16px 18px",
                    background: "rgba(251,247,238,0.07)",
                    border: `1px solid rgba(251,247,238,0.15)`,
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: AP.artistsSky, marginBottom: 8 }}>Support this artist</div>
                    <p style={{ fontSize: 13.5, opacity: 0.95, margin: 0, marginBottom: 12, lineHeight: 1.5 }} dangerouslySetInnerHTML={{ __html: a.student.support.body }} />
                    <ArrowLink color={AP.amber} style={{ fontSize: 13 }}>{a.student.support.cta}</ArrowLink>
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* ── Visit + Studio + Commissions + Events ── */}
      {(a.events || a.studio || a.commissions) && (
        <section style={{ background: AP.warmPaper, padding: "80px 80px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64 }}>
            <div>
              <Eyebrow color={AP.pine} style={{ marginBottom: 14 }}>Visit · Events</Eyebrow>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 32, lineHeight: 1.1, color: AP.navy, margin: 0, marginBottom: 28, letterSpacing: "-0.015em" }}>
                {a.eventsHeading || `Where to find ${a.name.split(" ")[0]} this season.`}
              </h3>
              {a.events && a.events.length > 0 ? (
                <div style={{ display: "grid", gap: 12 }}>
                  {a.events.map((e, i) => (
                    <div key={i} style={{
                      display: "grid", gridTemplateColumns: "60px 1fr auto",
                      gap: 16, alignItems: "center", padding: "14px 0",
                      borderTop: i === 0 ? "none" : `1px solid ${AP.stone}`,
                    }}>
                      <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, color: AP.pine, lineHeight: 0.9 }}>
                        <div style={{ fontSize: 28, letterSpacing: "-0.02em" }}>{e.day}</div>
                        <div style={{ fontSize: 11, fontFamily: "var(--font-body)", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 4 }}>{e.mo}</div>
                      </div>
                      <div>
                        <div style={{ fontWeight: 700, fontSize: 15, color: AP.navy, lineHeight: 1.2 }}>{e.name}</div>
                        <div style={{ fontSize: 12.5, color: AP.mute, marginTop: 4 }}>{e.time}</div>
                      </div>
                      <ArrowLink color={AP.pine} style={{ fontSize: 12.5 }}>Details</ArrowLink>
                    </div>
                  ))}
                </div>
              ) : (
                <p style={{ fontSize: 14, color: AP.mute, fontStyle: "italic" }}>
                  Nothing scheduled. Check back, or follow this artist for updates.
                </p>
              )}
            </div>

            <div>
              <Eyebrow color={AP.artists} style={{ marginBottom: 14 }}>Studio + commissions</Eyebrow>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 32, lineHeight: 1.1, color: AP.navy, margin: 0, marginBottom: 24, letterSpacing: "-0.015em" }}>
                {a.studioHeading || "Visit, or commission a piece."}
              </h3>

              {a.studio && (
                <div style={{ padding: "20px 22px", background: AP.paper, border: `1px solid ${AP.stone}`, marginBottom: 16 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, color: AP.navy }}>Studio</div>
                    {a.studio.tag && (
                      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: a.studio.tagColor || AP.meadow }}>{a.studio.tag}</span>
                    )}
                  </div>
                  <p style={{ fontSize: 14, color: AP.navy, margin: 0, lineHeight: 1.5 }}>
                    {a.studio.body}
                  </p>
                </div>
              )}

              {a.commissions && (
                <div style={{ padding: "20px 22px", background: AP.paper, border: `1px solid ${AP.stone}`, marginBottom: 16 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, color: AP.navy }}>Commissions</div>
                    {a.commissions.tag && (
                      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: a.commissions.tagColor || AP.artists }}>{a.commissions.tag}</span>
                    )}
                  </div>
                  <p style={{ fontSize: 14, color: AP.navy, margin: 0, marginBottom: 14, lineHeight: 1.5 }}>
                    {a.commissions.body}
                  </p>
                  <span style={{
                    padding: "10px 18px", borderRadius: 999, background: AP.artists, color: AP.paper,
                    fontWeight: 700, fontSize: 13.5, display: "inline-flex", alignItems: "center", gap: 6,
                  }}>{a.commissions.cta} <span>→</span></span>
                </div>
              )}

              {a.press && a.press.length > 0 && (
                <div style={{ padding: "20px 22px", background: AP.paper, border: `1px solid ${AP.stone}` }}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, color: AP.navy, marginBottom: 12 }}>Press & exhibitions</div>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10, fontSize: 13.5, color: AP.navy, lineHeight: 1.4 }}>
                    {a.press.map((p, i) => (
                      <li key={i} dangerouslySetInnerHTML={{ __html: p }} />
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
        </section>
      )}

      <ProfileFooter />
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// Sample data — Maribel (member)
// ════════════════════════════════════════════════════════════════
const ARTIST_MARIBEL = {
  initials: "MC",
  name: "Maribel Cortez",
  meta: "she/her · Stockton, Kansas · est. 1994",
  medium: ["Quilting"],
  tags: ["Quilting", "Hand-pieced", "Hand-quilted", "Traditional + improv"],
  badges: [
    { label: "Member · since 1994", bg: AP.paper, fg: AP.artistsDeep },
    { label: "Quilt Wall artist",    bg: AP.amber, fg: AP.artistsDeep },
  ],
  quote: "I'm not trying to make a quilt for a museum. I'm trying to make one my granddaughter will fight her cousin for.",
  primaryCta: "Inquire about a commission",
  secondaryCta: "Add to my route",
  quickInfo: [
    { l: "Studio",         v: "Stockton (home)",       s: "By appointment" },
    { l: "Open Studios",   v: "Yes · Sat May 16",      s: "Site no. 4 on the route" },
    { l: "Commissions",    v: "Limited",               s: "1–2 a year" },
    { l: "In the directory", v: "since 1994",          s: "32 years" },
    { l: "Find me at",     v: "Quilt Wall Block Party", s: "Jun 7 · with chili" },
  ],
  statement: {
    heading: "Hand-pieced.\nBuilt to be used.",
    paras: [
      "Maribel has been piecing in her front room since the year her husband bought her a Pfaff for her thirtieth birthday. Three of her panels hang on the County Quilt Wall. Two more are in storage, waiting for the next rotation.",
      "Her work mixes the classic block geometries she grew up with — Carpenter's Wheel, Bear's Paw, Drunkard's Path — with looser, improv-style colorwork drawn from prairie sunsets and Marvin Gaye album covers.",
      "She doesn't sell often, but she does take a handful of commissions a year for milestone gifts — graduations, weddings, anniversaries, the occasional retirement.",
    ],
  },
  worksLabel: "Selected works · 2018 – 2026",
  totalWorks: 24,
  works: [
    { style: "quilt", title: "Sundown over US-24",            meta: "2024 · 84 × 96 in · for sale", colors: ["#C81344", "#F3CF03", "#45217A", "#FBF7EE"], big: true, highlight: true, label: "For sale" },
    { style: "quilt", title: "Carpenter's wheel, gone wrong", meta: "2022 · 72 × 72 in",            colors: ["#4195D3", "#FBF7EE", "#01234B", "#F3CF03"] },
    { style: "quilt", title: "Marvin's anniversary",           meta: "2023 · 60 × 80 in",            colors: ["#78BE4D", "#01234B", "#FBF7EE", "#C81344"] },
    { style: "quilt", title: "County panel no. 8",             meta: "2021 · Quilt Wall",            colors: ["#45217A", "#F3CF03", "#78BE4D", "#C81344"] },
    { style: "quilt", title: "Bear's paw, modernized",         meta: "2026 · in progress",           colors: ["#FBF7EE", "#C81344", "#01234B", "#4195D3"] },
    { style: "quilt", title: "Graduation gift, Aug",           meta: "2025 · commission",            colors: ["#F3CF03", "#01234B", "#FBF7EE", "#78BE4D"] },
    { style: "quilt", title: "Drunkard's path",                meta: "2023 · 60 × 60 in",            colors: ["#01234B", "#FBF7EE", "#F3CF03", "#45217A"] },
    { style: "quilt", title: "Star of Stockton",               meta: "2022 · Quilt Wall preliminary", colors: ["#C81344", "#01234B", "#FBF7EE", "#78BE4D"] },
    { style: "quilt", title: "Improv #4",                      meta: "2020 · 48 × 60 in",            colors: ["#4195D3", "#45217A", "#F3CF03", "#FBF7EE"] },
  ],
  events: [
    { day: "16", mo: "May", name: "Spring Open Studios · site no. 4",            time: "10 am – 5 pm · Stockton" },
    { day: "07", mo: "Jun", name: "Quilt Wall Block Party · paint-along",         time: "1 – 4 pm · The Annex" },
    { day: "12", mo: "Sep", name: "Plains Quilt Show (guest juror)",              time: "Hays, KS" },
    { day: "11", mo: "Oct", name: "Fall Open Studios · site no. 4",               time: "10 am – 5 pm · Stockton" },
  ],
  studio: {
    tag: "Open during Open Studios",
    tagColor: AP.meadow,
    body: "Front room, Stockton. By appointment outside of Open Studios weekends — use the form below or text the Annex.",
  },
  commissions: {
    tag: "Limited · 1–2 a year",
    tagColor: AP.amber,
    body: "Milestone gifts only — graduations, weddings, anniversaries, retirement. 6–10 month turnaround. Starting around $1,400.",
    cta: "Start an inquiry",
  },
  press: [
    `2024 · <i>High Plains Reader</i> — "The quilters of Rooks"`,
    `2023 · KS Creative Arts grant recipient`,
    `2021 · Quilt Wall panel no. 8 (Sunset)`,
    `2019 · Plains Quilt Show, Hays, juror's choice`,
    `2015 · <i>Kansas! Magazine</i>, feature`,
  ],
};

// ════════════════════════════════════════════════════════════════
// Sample data — Jacob (student, but with EVERY feature)
// ════════════════════════════════════════════════════════════════
const ARTIST_JACOB = {
  initials: "JS",
  name: "Jacob Steinmiller",
  meta: "he/him · Stockton, Kansas · Class of 2026",
  medium: ["Drawing", "Comics"],
  tags: ["Pen & ink", "Comics", "Zines", "Linocut"],
  gradient: `linear-gradient(135deg, ${AP.artistsSky} 0%, ${AP.artistsLake} 100%)`,
  badges: [
    { label: "Student artist",   bg: AP.artistsSky, fg: AP.artistsDeep },
    { label: "Class of 2026",    bg: "rgba(251,247,238,0.18)", fg: AP.paper, border: "rgba(251,247,238,0.4)" },
  ],
  quote: "I'm trying to draw a county that doesn't get drawn very much. I want my little brother to see Rooks in a comic and recognize it.",
  primaryCta: "RSVP to the Senior Exhibit",
  secondaryCta: "Buy the Northbound zine",
  quickInfo: [
    { l: "School",       v: "Stockton HS",     s: "Grade 12 · Class of 2026" },
    { l: "Faculty advisor", v: "Mr. Halverson", s: "Art dept." },
    { l: "Joined RoCo",  v: "Sep 2025",        s: "Senior cohort" },
    { l: "Senior project", v: "Comic zine",    s: "Spring exhibit" },
    { l: "Commissions",  v: "Open · zines $8", s: "Print on demand" },
  ],
  statement: {
    heading: "About my work.",
    paras: [
      "I started drawing comics in seventh grade because I couldn't keep up with the kids in my class who could already paint. Drawing was something I could do at the back of my notebooks.",
      "Most of my stories are about Stockton — kids walking home from football practice, my grandfather's gas station before it closed, the deer that come into the park at dusk.",
      `For my senior project I'm building a 48-page risograph zine called <i>Northbound</i>, about a kid who drives all eight towns in one Saturday. It comes out at the Spring Senior Exhibit.`,
    ],
  },
  worksLabel: "Portfolio · 2024 – 2026",
  totalWorks: 12,
  works: [
    { style: "sketch", title: "Northbound · cover",       meta: "2026 · Riso · 48 pp · senior project", big: true, highlight: true, label: "Senior project" },
    { style: "sketch", title: "The gas station, before",  meta: "2025 · Ink on paper · 18 × 24 in" },
    { style: "sketch", title: "Walking home, IV",         meta: "2025 · Ink + watercolor" },
    { style: "sketch", title: "Park deer, dusk",          meta: "2024 · Linocut · ed. 12" },
    { style: "sketch", title: "Math class daydream",      meta: "2024 · Marker on notebook" },
    { style: "sketch", title: "Self-portrait, II",        meta: "2025 · Pen + brush" },
    { style: "sketch", title: "Highway 24, panel 3",      meta: "2025 · Ink · zine spread" },
    { style: "sketch", title: "Halverson, in class",      meta: "2024 · Pencil study" },
    { style: "sketch", title: "Stockton at 2 am",         meta: "2026 · Brush + ink" },
  ],
  events: [
    { day: "22", mo: "May", name: "Spring Senior Exhibit — opening night",       time: "6 pm · The Annex" },
    { day: "31", mo: "May", name: "Zine release · Northbound launch reading",   time: "2 pm · The Annex" },
    { day: "07", mo: "Jun", name: "Quilt Wall Block Party · zine table",         time: "1 – 4 pm · The Annex" },
  ],
  studio: {
    tag: "Online portfolio",
    tagColor: AP.artistsLake,
    body: "Jacob doesn't have a public studio yet — his work table is his bedroom desk. Senior project preview at the Annex, May 22 – Jun 28.",
  },
  commissions: {
    tag: "Open · sliding scale",
    tagColor: AP.amber,
    body: "Commissioning a portrait, a custom zine, or a small print? Sliding scale $25 – $150. All proceeds go to the college fund.",
    cta: "Request a piece",
  },
  press: [
    `2025 · Kansas Scholastic Art — <b>Silver Key</b>, drawing`,
    `2024 · SHS Art Department, Best in Class · drawing`,
    `2024 · Plainville Library group show`,
  ],
  student: {
    classYear: 2026,
    joined: 2025,
    school: "Stockton High School",
    mentorNote: `Faculty advisor <b>Tom Halverson</b> nominated Jacob for the 2025–26 student cohort. Jacob takes drawing, painting, and AP Studio Art at SHS.`,
    awards: [
      { year: "2026", text: "Spring Senior Exhibit, the Annex (forthcoming)" },
      { year: "2025", text: `Kansas Scholastic Art — <b>Silver Key</b>, drawing` },
      { year: "2025", text: "RoCo student cohort selection" },
      { year: "2024", text: "SHS Art Department, Best in Class · drawing" },
      { year: "2024", text: "Plainville Library group show" },
    ],
    next: `Jacob is applying to BFA programs at <b>KU</b>, <b>MICA</b>, and <b>KCAI</b>. He'd like to make comics, teach in a small town, or both.`,
    support: {
      body: `Print copies of <i>Northbound</i> will be sold at the Spring Senior Exhibit. Proceeds go to the student's college fund.`,
      cta: "RSVP to the exhibit",
    },
  },
};

function ProfileMember()  { return <ProfileArtist artist={ARTIST_MARIBEL} />; }
function ProfileStudent() { return <ProfileArtist artist={ARTIST_JACOB} />; }

window.ProfileArtist = ProfileArtist;
window.ProfileMember = ProfileMember;
window.ProfileStudent = ProfileStudent;