// News & Stories — index + article templates
//
// The News stream is the catch-all for anything timely or narrative:
//   • Announcements    (short, dated — hours changed, board update, grant open)
//   • Open calls       (a specific announcement with apply CTA)
//   • Stories          (long-form — artist features, council letters, essays)
//   • Recaps           (past event with photos)
//   • Press            (we got written up somewhere)
//
// Stream palette: Ink anchor (#1F1B2E), Yellow pop (#F3CF03) — used exactly
// once per page on the single most-wanted action.
//
// One index view + two article templates (long-form story, short
// announcement). Both article templates share chrome.

const NW = {
  paper: "#FBF7EE",
  warmPaper: "#F5F0E2",
  stone: "#E8E2D3",
  navy: "#01234B",
  ink: "#1F1B2E",
  carbon: "#14101F",
  slate: "#3A3548",
  mute: "#6B6577",
  fog: "#B5AEC2",
  yellow: "#F3CF03",
  // For non-news cross-links
  council: "#45217A",
  pine: "#2F7A2E",
  artists: "#01234B",
};

const NEWS = [
  { id: "letter-fall",  date: "2026-05-12", type: "story",       title: "Where we've been, and what comes next",  dek: "A letter from the chair, two years into the restart.", author: "Mariella Ortega",  authorRole: "Chair",      readMin: 6, featured: true,  tags: ["The Council", "Letter from the chair"] },
  { id: "qw-2027",      date: "2026-05-09", type: "open-call",   title: "The 2027 Quilt Wall grant round is open",   dek: "Six painted panels, countywide proposals. Closes Mar 14.", author: "RoCo Arts Council", authorRole: "Notice", readMin: 3, cta: "Read the open call", tags: ["Quilt Wall", "Grants"] },
  { id: "os-recap",     date: "2026-05-06", type: "recap",       title: "Spring Open Studios, by the numbers",       dek: "Twelve sites, seven towns, one very long Saturday.",        author: "Devin Wuori",      authorRole: "Programs",    readMin: 4, tags: ["Open Studios", "Recap"] },
  { id: "maribel",      date: "2026-04-28", type: "story",       title: "Maribel Cortez on quilting the prairie",    dek: "Forty years of piecing, told over chili.",                  author: "Sam Whitfield",    authorRole: "Vice-chair",  readMin: 8, tags: ["Artist", "Quilting"] },
  { id: "draw-series",  date: "2026-04-22", type: "announcement",title: "8-week drawing series begins Jun 25",        dek: "Sage Wallin will teach. Sliding-scale tuition. Eight Thursdays.", author: "RoCo Programs", authorRole: "Notice",     readMin: 2, cta: "RSVP for the series", tags: ["Classes", "Drawing"] },
  { id: "hours-summer", date: "2026-04-18", type: "announcement",title: "The Annex stays open through Labor Day",     dek: "We've added Sunday hours. Plus a few words on summer in a gallery without AC.", author: "RoCo Arts Council", authorRole: "Notice", readMin: 2, tags: ["The Annex", "Hours"] },
  { id: "press-hpr",    date: "2026-04-12", type: "press",       title: "Featured in the High Plains Reader",         dek: "\"The quilters of Rooks\" — a long piece in this month's issue.", author: "External · HPR", authorRole: "Press",     readMin: 1, tags: ["Press"] },
  { id: "students-25",  date: "2026-04-03", type: "announcement",title: "Eight student artists join the directory",    dek: "Meet the senior cohort from Stockton, Plainville, and Palco.", author: "Linda Cho", authorRole: "Treasurer",        readMin: 2, tags: ["Students", "Schools"] },
  { id: "prairie",      date: "2026-03-28", type: "story",       title: "What the High Plains taught us about color", dek: "An essay on flat horizons and the colors that survive them.", author: "Jay Pruitt",     authorRole: "Member artist", readMin: 9, tags: ["Essay", "Color"] },
  { id: "board-spring", date: "2026-03-15", type: "announcement",title: "Two new board members for spring 2026",       dek: "Welcoming Pat Lindsey (Stockton) and Devin Wuori (Plainville).", author: "RoCo Arts Council", authorRole: "Notice", readMin: 2, tags: ["The Council", "Board"] },
  { id: "summer-call",  date: "2026-03-04", type: "open-call",   title: "Summer artist call: residency at the Annex",  dek: "A six-week studio residency for one Plains-based artist. Apply by May 1.", author: "RoCo Arts Council", authorRole: "Notice", readMin: 4, cta: "See residency details", tags: ["Residency", "Open call"] },
  { id: "songbook-prev",date: "2026-02-22", type: "story",       title: "Three songwriters, one fiddle, an honest pew", dek: "A preview of the Plains Songbook, in three voices.",        author: "Devin Wuori",   authorRole: "Programs",      readMin: 5, tags: ["Music", "Plains Songbook"] },
];

const NEWS_KIND = {
  "story":        { label: "Story",        chip: NW.ink },
  "open-call":    { label: "Open call",    chip: NW.yellow, fg: NW.ink },
  "recap":        { label: "Recap",        chip: NW.slate },
  "announcement": { label: "Notice",       chip: NW.fog,    fg: NW.ink },
  "press":        { label: "Press",        chip: "#DCE7F1", fg: NW.ink },
};

function fmtDate(iso) {
  const [y, m, d] = iso.split("-");
  const mo = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][parseInt(m, 10) - 1];
  return `${mo} ${parseInt(d, 10)}, ${y}`;
}

function NewsNav() {
  const items = [
    { label: "What's on", stream: "events",  path: "#/events" },
    { label: "Artists",   stream: "artists", path: "#/artists" },
    { label: "Programs",  stream: "council", path: "#/about" },
    { label: "News",      stream: "news",    path: "#/news", active: true },
    { label: "Visit",     stream: "council", path: "#/about" },
  ];
  return (
    <header style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "24px 80px", borderBottom: `1px solid ${NW.stone}`,
      background: NW.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: NW.navy,
            background: n.active ? "rgba(31,27,46,0.10)" : "transparent",
          }}>
            <StreamDot stream={n.stream} />
            {n.label}
          </a>
        ))}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a href="#/" style={{ fontWeight: 600, fontSize: 15, color: NW.navy }}>Home</a>
        <a href="#/events" style={{
          padding: "10px 20px", borderRadius: 999, background: NW.pine, color: NW.paper,
          fontWeight: 700, fontSize: 14,
        }}>See what's on</a>
      </div>
    </header>
  );
}

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

function NewsTypeChip({ type, dark }) {
  const s = NEWS_KIND[type];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "4px 10px",
      background: s.chip, color: s.fg || NW.paper,
      fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
      border: dark && s.chip === NW.ink ? `1px solid rgba(251,247,238,0.4)` : "none",
    }}>{s.label}</span>
  );
}

function NewsCard({ a, size = "md" }) {
  const cap = {
    sm: { pad: "16px 18px 18px", title: 16, dek: 13, h: 140 },
    md: { pad: "18px 22px 22px", title: 19, dek: 13.5, h: 180 },
    lg: { pad: "22px 26px 26px", title: 22, dek: 14, h: 220 },
  }[size];
  return (
    <a href={`#/news/${a.id}`} style={{ textDecoration: "none", color: "inherit" }}>
    <article style={{
      background: "#FFFFFF",
      borderTop: `4px solid ${NW.ink}`,
      display: "flex", flexDirection: "column",
      overflow: "hidden", height: "100%",
    }}>
      <ImgSlot id={`news-card-${a.id}`} h={cap.h} placeholder={`Photo · ${a.title}`} />
      <div style={{ padding: cap.pad, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <NewsTypeChip type={a.type} />
          <span style={{ fontSize: 11.5, color: NW.mute, fontWeight: 600 }}>{fmtDate(a.date)}</span>
        </div>
        <h3 style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: cap.title, lineHeight: 1.2, color: NW.ink, margin: 0,
          letterSpacing: "-0.015em",
        }}>{a.title}</h3>
        <p style={{ fontSize: cap.dek, color: NW.mute, lineHeight: 1.5, margin: 0 }}>{a.dek}</p>
        <div style={{
          marginTop: "auto", paddingTop: 12,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 12, color: NW.mute,
        }}>
          <span>By {a.author} · {a.readMin} min read</span>
          <ArrowLink color={NW.ink} style={{ fontSize: 12 }}>Read</ArrowLink>
        </div>
      </div>
    </article>
    </a>
  );
}

// Inline newsletter subscribe form — sits in the news hero CTA slot
function NewsSubscribeInline() {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle');
  const submit = async (e) => {
    e.preventDefault();
    if (!email || state === 'loading') return;
    setState('loading');
    try {
      await API.subscribeNewsletter(email);
      setState('done');
    } catch { setState('error'); }
  };
  if (state === 'done') return (
    <span style={{ color: '#78BE4D', fontWeight: 700, fontSize: 15 }}>✓ You're subscribed.</span>
  );
  return (
    <form onSubmit={submit} style={{ display: 'inline-flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
      <input type="email" required placeholder="your@email.com" value={email}
        onChange={e => setEmail(e.target.value)}
        style={{
          padding: '12px 16px', borderRadius: 6, fontSize: 14, fontFamily: 'inherit',
          border: '1.5px solid rgba(251,247,238,0.35)',
          background: 'rgba(251,247,238,0.1)', color: '#FBF7EE', outline: 'none',
          width: 220,
        }} />
      <button type="submit" disabled={state === 'loading'} style={{
        padding: '13px 22px', borderRadius: 999, border: 'none',
        background: NW.yellow, color: NW.ink,
        fontWeight: 700, fontSize: 14.5, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 8,
        opacity: state === 'loading' ? 0.7 : 1,
      }}>{state === 'loading' ? 'Subscribing…' : <>Subscribe to the newsletter <span>→</span></>}</button>
    </form>
  );
}

// ════════════════════════════════════════════════════════════════
// News index — magazine grid with featured story + filter chips
// ════════════════════════════════════════════════════════════════
function NewsIndex() {
  const featured = NEWS.find(a => a.featured);
  const rest = NEWS.filter(a => !a.featured);
  const counts = {
    all: NEWS.length,
    story: NEWS.filter(a => a.type === "story").length,
    "open-call": NEWS.filter(a => a.type === "open-call").length,
    recap: NEWS.filter(a => a.type === "recap").length,
    announcement: NEWS.filter(a => a.type === "announcement").length,
    press: NEWS.filter(a => a.type === "press").length,
  };

  return (
    <div className="roco-root" style={{ background: NW.paper, color: NW.ink, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <NewsNav />

      {/* Hero (black + texture) */}
      <section style={{ background: "#000000", color: NW.paper, padding: "72px 80px 56px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <Eyebrow color={NW.yellow} style={{ marginBottom: 16 }}>News & Stories</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 76, lineHeight: 1.0, letterSpacing: "-0.025em",
              color: NW.paper, margin: 0,
            }}>
              What's happening, and a few<br />
              things worth thinking about.
            </h1>
          </div>
          <div style={{ paddingBottom: 14 }}>
            <p style={{ fontSize: 16, lineHeight: 1.6, opacity: 0.85, margin: 0, marginBottom: 18, maxWidth: 440 }}>
              Announcements, open calls, recaps, and the occasional long piece on the
              county we live in. Updated most weeks. Subscribe if you'd rather not check.
            </p>
            <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
              {/* THE one Yellow pop on this News-led page */}
              <NewsSubscribeInline />
            </div>
          </div>
        </div>
      </section>

      {/* Filter chips */}
      <section style={{ background: NW.paper, padding: "28px 80px", borderBottom: `1px solid ${NW.stone}` }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <NewsChip active count={counts.all}>All</NewsChip>
            <NewsChip count={counts.story}>Stories</NewsChip>
            <NewsChip count={counts["open-call"]}>Open calls</NewsChip>
            <NewsChip count={counts.recap}>Recaps</NewsChip>
            <NewsChip count={counts.announcement}>Announcements</NewsChip>
            <NewsChip count={counts.press}>Press</NewsChip>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 13, color: NW.mute }}>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "8px 14px", border: `1.5px solid rgba(31,27,46,0.18)`,
              borderRadius: 999, minWidth: 260, color: NW.mute, fontSize: 13,
            }}>
              <span>⌕</span>
              <span>Search by title, tag, author…</span>
            </div>
          </div>
        </div>
      </section>

      {/* Featured story — full bleed */}
      <section style={{ background: NW.paper, padding: "48px 80px 0" }}>
        <article style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr",
          gap: 56, alignItems: "stretch",
          background: "#FFFFFF", borderTop: `4px solid ${NW.yellow}`,
        }}>
          <ImgSlot id={`news-feat-${featured.id}`} h={420} placeholder="Featured story · hero photo" />
          <div style={{ padding: "44px 44px 40px 0", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
              <span style={{
                padding: "4px 10px", background: NW.yellow, color: NW.ink,
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
              }}>Featured · Letter from the chair</span>
              <span style={{ fontSize: 12, color: NW.mute, fontWeight: 600 }}>{fmtDate(featured.date)} · {featured.readMin} min read</span>
            </div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 44, lineHeight: 1.05, color: NW.ink, margin: 0, marginBottom: 18,
              letterSpacing: "-0.02em", textWrap: "balance",
            }}>{featured.title}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: NW.slate, margin: 0, marginBottom: 24 }}>{featured.dek}</p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
              <div style={{
                width: 48, height: 48, borderRadius: 999, background: NW.ink, color: NW.paper,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, letterSpacing: "-0.02em",
              }}>MO</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14, color: NW.ink }}>{featured.author}</div>
                <div style={{ fontSize: 12.5, color: NW.mute }}>{featured.authorRole} · RoCo Arts Council</div>
              </div>
            </div>
            <div>
              <a href={`#/news/${featured.id}`}><ArrowLink color={NW.ink} style={{ fontSize: 14 }}>Read the letter</ArrowLink></a>
            </div>
          </div>
        </article>
      </section>

      {/* Grid */}
      <section style={{ background: NW.paper, padding: "48px 80px 56px" }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          marginBottom: 24, paddingBottom: 14, borderBottom: `1px solid ${NW.stone}`,
          fontSize: 13.5, color: NW.mute,
        }}>
          <div>
            <span style={{ color: NW.ink, fontWeight: 700 }}>Showing 1 – 11</span>
            <span style={{ margin: "0 8px" }}>of</span>
            <span style={{ color: NW.ink, fontWeight: 700 }}>11</span>
            <span style={{ marginLeft: 6 }}>posts</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span>Sort:</span>
            <span style={{ fontWeight: 700, color: NW.ink, display: "inline-flex", alignItems: "center", gap: 6 }}>Newest first <span>▾</span></span>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {rest.map((a) => <NewsCard key={a.id} a={a} size="md" />)}
        </div>
      </section>

      {/* Subscribe slab */}
      <section style={{ background: NW.ink, color: NW.paper, padding: "56px 80px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 48, alignItems: "center" }}>
          <div>
            <Eyebrow color={NW.yellow} style={{ marginBottom: 12 }}>Stay close</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 36, lineHeight: 1.05, color: NW.paper, margin: 0, marginBottom: 12, letterSpacing: "-0.02em",
            }}>
              One email a month. The big things and a few small ones.
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.55, opacity: 0.85, margin: 0, maxWidth: 540 }}>
              Open calls, what's hung this month at the Annex, classes coming up. We don't share your address; we don't send more than we'd want to read ourselves.
            </p>
          </div>
          <form style={{ display: "flex", gap: 8 }}>
            <div style={{
              flex: 1, padding: "14px 18px", background: NW.paper, color: "rgba(31,27,46,0.45)",
              fontSize: 14.5,
            }}>you@example.com</div>
            <span style={{
              padding: "14px 22px", background: NW.yellow, color: NW.ink,
              fontWeight: 700, fontSize: 14.5, whiteSpace: "nowrap",
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>Subscribe <span>→</span></span>
          </form>
        </div>
      </section>

      <NewsFooter />
    </div>
  );
}

function NewsChip({ active, count, children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "8px 14px", borderRadius: 999,
      fontSize: 13.5, fontWeight: 600,
      color: active ? NW.paper : NW.ink,
      background: active ? NW.ink : "transparent",
      border: `1.5px solid ${active ? NW.ink : "rgba(31,27,46,0.18)"}`,
      whiteSpace: "nowrap",
    }}>
      {children}
      <span style={{ fontSize: 11, fontWeight: 700, color: active ? "rgba(251,247,238,0.7)" : "rgba(31,27,46,0.5)" }}>{count}</span>
    </span>
  );
}

// ════════════════════════════════════════════════════════════════
// Article A — Long-form story (Mariella's letter from the chair)
// Wide hero photo (full bleed) below the black title band, drop cap,
// pull quote, inline photos, byline bottom, related strip.
// ════════════════════════════════════════════════════════════════
function NewsArticleStory() {
  const a = NEWS.find(x => x.id === "letter-fall");
  return (
    <div className="roco-root" style={{ background: NW.paper, color: NW.ink, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <NewsNav />

      {/* Breadcrumb */}
      <div style={{ padding: "16px 80px", fontSize: 12.5, color: NW.mute, letterSpacing: "0.08em", borderBottom: `1px solid ${NW.stone}`, background: NW.paper }}>
        <a style={{ color: NW.mute }}>News</a>
        <span style={{ margin: "0 10px" }}>›</span>
        <a style={{ color: NW.mute }}>Stories</a>
        <span style={{ margin: "0 10px" }}>›</span>
        <span style={{ color: NW.ink, fontWeight: 600 }}>Where we've been, and what comes next</span>
      </div>

      {/* Title band — black with texture */}
      <section style={{ background: "#000000", color: NW.paper, padding: "72px 80px 64px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", maxWidth: 980, margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 22 }}>
            <NewsTypeChip type={a.type} dark />
            <span style={{ fontSize: 12, color: "rgba(251,247,238,0.7)", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600 }}>
              Letter from the chair · {fmtDate(a.date)}
            </span>
          </div>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 84, lineHeight: 0.98, letterSpacing: "-0.03em",
            color: NW.paper, margin: 0, marginBottom: 24, textWrap: "balance",
          }}>{a.title}</h1>
          <p style={{ fontSize: 22, lineHeight: 1.4, opacity: 0.9, margin: 0, marginBottom: 32, maxWidth: 820 }}>
            {a.dek}
          </p>

          {/* byline + meta */}
          <div style={{ display: "flex", alignItems: "center", gap: 16, paddingTop: 22, borderTop: "1px solid rgba(251,247,238,0.2)" }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999,
              background: NW.yellow, color: NW.ink,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, letterSpacing: "-0.02em",
            }}>MO</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 15.5, color: NW.paper }}>{a.author}</div>
              <div style={{ fontSize: 13, color: "rgba(251,247,238,0.7)" }}>{a.authorRole} · RoCo Arts Council</div>
            </div>
            <div style={{ fontSize: 13, color: "rgba(251,247,238,0.7)", display: "flex", gap: 18 }}>
              <span>{a.readMin} min read</span>
              <span>·</span>
              <span>Share</span>
              <span>·</span>
              <span>Print</span>
            </div>
          </div>
        </div>
      </section>

      {/* Hero photo full-bleed */}
      <ImgSlot id="article-story-hero" h={520} placeholder="Drop a hero photo — the Annex, the team, the building" />

      {/* Body */}
      <section style={{ background: NW.paper, padding: "72px 80px 64px" }}>
        <div style={{
          maxWidth: 760, margin: "0 auto",
          fontSize: 18, lineHeight: 1.65, color: NW.ink,
        }}>
          {/* Drop cap on first para */}
          <p style={{ margin: 0, marginBottom: 22 }}>
            <span style={{
              float: "left", fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 84, lineHeight: 0.78, marginRight: 12, marginTop: 6,
              color: NW.ink,
            }}>W</span>
            hen the board signed the lease on the old hardware store, we knew the building wouldn't be ready for two years. We didn't know that twenty-three of us would help paint the back room, that Lillian would bring shortbread every Saturday for nine straight weeks, or that we'd end up replacing the front window the day before the opening.
          </p>
          <p style={{ margin: 0, marginBottom: 22 }}>
            Seven years went by where the lights at the Council office stayed on, and the meetings stayed on the books, but the work mostly happened in basements and kitchens. People kept making things. We kept showing up to County Fair. The Quilt Wall stayed on the highway, and someone — Walt Henning, mostly — kept the paint touched up.
          </p>
          <p style={{ margin: 0, marginBottom: 32 }}>
            We've spent the last eighteen months knocking on doors, reopening the books, and signing leases. We've registered the 501(c)(3), filed three years of late tax forms, written to every artist in the directory, and called every business on Main Street. Eighty-two volunteers have logged hours. Twelve barns will open their doors on May 16. One wall on the highway needs a fresh quilt.
          </p>

          {/* Pull quote */}
          <blockquote style={{
            margin: "8px -32px 32px",
            padding: "28px 32px",
            borderLeft: `6px solid ${NW.yellow}`,
            background: NW.warmPaper,
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 32, lineHeight: 1.15, color: NW.ink, letterSpacing: "-0.015em",
          }}>
            "We are not too proud to ask you to help. An hour, an idea, or twenty dollars — we can use all three."
          </blockquote>

          <p style={{ margin: 0, marginBottom: 22 }}>
            What's next looks different than what came before. We're keeping the things that worked — Open Studios, the Quilt Wall grants, after-school printmaking at the library — and adding a few that we wish had existed when we were starting out. A student cohort. A traveling gallery. A shared art-supply closet. Classes that don't expect you to already know how.
          </p>
          <p style={{ margin: 0, marginBottom: 32 }}>
            We've tried to keep the writing small and the buildings open. The plan is to keep doing that. We hope you'll come visit, or send us a note, or apply for one of the grants. The door is unlocked Thursday through Sunday, eleven to four. Knock first only if you want to.
          </p>
        </div>

        {/* Inline image inserts */}
        <div style={{ maxWidth: 1080, margin: "32px auto 32px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <figure style={{ margin: 0 }}>
            <ImgSlot id="article-story-fig1" h={320} placeholder="Inside the Annex" />
            <figcaption style={{ fontSize: 12.5, color: NW.mute, marginTop: 8 }}>The back room of the Annex, three weeks before opening. <i>Photo · Pat Lindsey.</i></figcaption>
          </figure>
          <figure style={{ margin: 0 }}>
            <ImgSlot id="article-story-fig2" h={320} placeholder="A volunteer painting" />
            <figcaption style={{ fontSize: 12.5, color: NW.mute, marginTop: 8 }}>Saturday, March 14. Eighty-two pairs of hands. <i>Photo · Aïsha Diop.</i></figcaption>
          </figure>
        </div>

        <div style={{ maxWidth: 760, margin: "0 auto", fontSize: 18, lineHeight: 1.65, color: NW.ink }}>
          <p style={{ margin: 0, marginBottom: 22 }}>
            A few thank-yous. The Kansas Creative Arts Industries Commission for the grant that paid the deposit. The NEA for the rural-recovery line. The 341 households who became members in the last year. The Rooks County Commission for the front-door sign. Tom Halverson, who keeps nominating students who turn into the kind of artists you actually want to know.
          </p>
          <p style={{ margin: 0, marginBottom: 14 }}>
            And every one of you who keeps showing up.
          </p>
          <p style={{ margin: "32px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: NW.ink, lineHeight: 1.2, letterSpacing: "-0.01em" }}>
            — Mariella
          </p>
        </div>
      </section>

      {/* Tags + share rail */}
      <section style={{ background: NW.paper, padding: "16px 80px 56px" }}>
        <div style={{ maxWidth: 760, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, paddingTop: 24, borderTop: `1px solid ${NW.stone}`, fontSize: 13, color: NW.mute, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {a.tags.map((t) => (
              <span key={t} style={{
                padding: "4px 10px", border: `1px solid rgba(31,27,46,0.2)`, color: NW.ink, fontSize: 12, fontWeight: 600,
              }}>{t}</span>
            ))}
          </div>
          <div style={{ display: "flex", gap: 14, fontWeight: 600 }}>
            <span>Share · email</span>
            <span>· copy link</span>
            <span>· print</span>
          </div>
        </div>
      </section>

      {/* CTA bar — get involved (yellow pop on this News page lives here) */}
      <section style={{ background: NW.ink, color: NW.paper, padding: "48px 80px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
          <div>
            <Eyebrow color={NW.yellow} style={{ marginBottom: 8 }}>An hour, an idea, or twenty dollars</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 30, color: NW.paper, margin: 0, letterSpacing: "-0.015em" }}>
              We can use all three.
            </h2>
          </div>
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            {/* THE one Yellow pop */}
            <span style={{
              padding: "14px 24px", background: NW.yellow, color: NW.ink,
              fontWeight: 700, fontSize: 14.5, display: "inline-flex", alignItems: "center", gap: 8,
              borderRadius: 999,
            }}>Become a member <span>→</span></span>
            <span style={{
              padding: "13px 22px", borderRadius: 999,
              border: "1.5px solid rgba(251,247,238,0.4)", color: NW.paper, fontWeight: 700, fontSize: 14,
            }}>Volunteer</span>
            <span style={{
              padding: "13px 22px", borderRadius: 999,
              border: "1.5px solid rgba(251,247,238,0.4)", color: NW.paper, fontWeight: 700, fontSize: 14,
            }}>Donate</span>
          </div>
        </div>
      </section>

      {/* More from News */}
      <section style={{ background: NW.paper, padding: "72px 80px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, color: NW.ink, margin: 0, letterSpacing: "-0.02em" }}>
            More from News
          </h2>
          <ArrowLink color={NW.ink} style={{ fontSize: 14 }}>All posts</ArrowLink>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
          {NEWS.filter(x => x.id !== a.id).slice(0, 3).map((x) => <NewsCard key={x.id} a={x} size="md" />)}
        </div>
      </section>

      <NewsFooter />
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// Article B — Short announcement with sidebar (Open call · 2027 QW)
// Tighter body + sidebar with key dates, downloadable PDFs, related
// event/page cross-links. This is the template for anything announcement-
// shaped, including class announcements that link to an Event detail.
// ════════════════════════════════════════════════════════════════
function NewsArticleAnnouncement() {
  const a = NEWS.find(x => x.id === "qw-2027");
  return (
    <div className="roco-root" style={{ background: NW.paper, color: NW.ink, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <NewsNav />

      <div style={{ padding: "16px 80px", fontSize: 12.5, color: NW.mute, letterSpacing: "0.08em", borderBottom: `1px solid ${NW.stone}`, background: NW.paper }}>
        <a style={{ color: NW.mute }}>News</a>
        <span style={{ margin: "0 10px" }}>›</span>
        <a style={{ color: NW.mute }}>Open calls</a>
        <span style={{ margin: "0 10px" }}>›</span>
        <span style={{ color: NW.ink, fontWeight: 600 }}>{a.title}</span>
      </div>

      {/* Title band — black + texture */}
      <section style={{ background: "#000000", color: NW.paper, padding: "64px 80px 48px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", maxWidth: 1280, display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "end" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <NewsTypeChip type={a.type} dark />
              <span style={{ fontSize: 12, color: "rgba(251,247,238,0.7)", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600 }}>
                {fmtDate(a.date)} · {a.readMin} min read
              </span>
            </div>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 64, lineHeight: 1.0, letterSpacing: "-0.025em",
              color: NW.paper, margin: 0, marginBottom: 16, textWrap: "balance", maxWidth: 800,
            }}>{a.title}</h1>
            <p style={{ fontSize: 19, lineHeight: 1.5, opacity: 0.9, margin: 0, maxWidth: 700 }}>{a.dek}</p>
          </div>
          {/* deadline countdown badge */}
          <div style={{
            padding: "16px 22px", border: "1px solid rgba(251,247,238,0.3)",
            background: "rgba(251,247,238,0.06)",
          }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: NW.yellow, marginBottom: 4 }}>Closes</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, color: NW.paper, lineHeight: 1.05, letterSpacing: "-0.01em" }}>
              Mar 14, 2027
            </div>
            <div style={{ fontSize: 12, color: "rgba(251,247,238,0.7)", marginTop: 4 }}>308 days from today</div>
          </div>
        </div>
      </section>

      {/* Body + sidebar */}
      <section style={{ background: NW.paper, padding: "64px 80px 64px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 80 }}>
          {/* Body */}
          <div style={{ fontSize: 17, lineHeight: 1.65, color: NW.ink }}>
            <p style={{ margin: 0, marginBottom: 18 }}>
              Each spring, the Council selects six painted barn-quilt panels to add to the County
              Quilt Wall on Hwy K-9. Applications are open to any artist living, working, or
              having grown up in Rooks County — students, members, and folks who've never shown
              with us before.
            </p>
            <p style={{ margin: 0, marginBottom: 32 }}>
              Selected artists receive a $1,200 honorarium, a 4×4 painted panel ready to mount,
              and a permanent place on the Wall (or until weather takes the paint).
            </p>

            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: NW.ink, margin: 0, marginBottom: 12, letterSpacing: "-0.015em" }}>
              What we're looking for
            </h3>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10, marginBottom: 28 }}>
              {[
                "Original quilt-block designs that read from a passing car.",
                "Color palettes that hold up in full sun.",
                "Proposals that nod to something specific about the county — a place, a person, a season, a story.",
                "Beginners welcome. We're not looking for the most decorated portfolio.",
              ].map((line, i) => (
                <li key={i} style={{ paddingLeft: 16, borderLeft: `3px solid ${NW.yellow}` }}>
                  {line}
                </li>
              ))}
            </ul>

            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: NW.ink, margin: 0, marginBottom: 12, letterSpacing: "-0.015em" }}>
              How to apply
            </h3>
            <ol style={{ margin: 0, padding: "0 0 0 20px", display: "grid", gap: 8, marginBottom: 28 }}>
              <li>Read the full call (linked in the sidebar).</li>
              <li>Submit a design sketch + a short statement (two pages, PDF).</li>
              <li>Include two prior pieces of work — any medium. Students may submit class work.</li>
              <li>One application per artist. Two if you're applying with a co-designer.</li>
            </ol>

            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: NW.ink, margin: 0, marginBottom: 12, letterSpacing: "-0.015em" }}>
              Questions we get a lot
            </h3>
            <div style={{ display: "grid", gap: 14, marginBottom: 12 }}>
              {[
                ["Do I need to paint the panel myself?", "Nope. If you'd rather hand it off to a member of the painting crew, we can pair you up after selection."],
                ["Can I propose more than one design?", "One. If you have a second you really love, save it for next year — past designs roll over."],
                ["I'm not from the county. Can I apply?", "If you grew up here, yes. Otherwise, we keep the call local."],
                ["What if my design doesn't fit a 4×4?", "We'll work with you on the proportions after selection. Don't let format stop you."],
              ].map(([q, ans]) => (
                <div key={q}>
                  <div style={{ fontWeight: 700, color: NW.ink, marginBottom: 4 }}>{q}</div>
                  <div style={{ color: NW.slate }}>{ans}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Sidebar */}
          <aside>
            <div style={{ position: "sticky", top: 24, display: "grid", gap: 18 }}>
              {/* Apply CTA */}
              <div style={{ padding: 24, background: "#FFFFFF", border: `1px solid ${NW.stone}`, borderTop: `4px solid ${NW.yellow}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: NW.mute, marginBottom: 6 }}>Apply</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: NW.ink, margin: 0, marginBottom: 8, letterSpacing: "-0.015em" }}>
                  Take the call to the application.
                </h3>
                <p style={{ fontSize: 13.5, color: NW.slate, margin: 0, marginBottom: 14, lineHeight: 1.55 }}>
                  Applications are reviewed in two rounds. Selected artists are announced by Apr 1.
                </p>
                {/* THE one Yellow pop on this announcement page */}
                <span style={{
                  display: "block", textAlign: "center",
                  padding: "13px 18px", borderRadius: 999,
                  background: NW.yellow, color: NW.ink, fontWeight: 700, fontSize: 14.5,
                }}>Open the application →</span>
              </div>

              {/* Key dates */}
              <div style={{ padding: 24, background: NW.warmPaper, border: `1px solid ${NW.stone}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: NW.mute, marginBottom: 14 }}>Key dates</div>
                <div style={{ display: "grid", gap: 12, fontSize: 14 }}>
                  {[
                    ["May 9, 2026",  "Call opens"],
                    ["Sep 30, 2026", "Optional drop-in office hours · the Annex"],
                    ["Mar 14, 2027", "Applications close · 11:59 pm CT"],
                    ["Apr 1, 2027",  "Selections announced"],
                    ["Jun 6, 2027",  "Painting crew weekend"],
                    ["Jul 4, 2027",  "Wall unveil · with cake"],
                  ].map(([d, label], i) => (
                    <div key={i} style={{
                      display: "grid", gridTemplateColumns: "auto 1fr", gap: 16,
                      paddingBottom: 10,
                      borderBottom: i === 5 ? "none" : `1px dashed ${NW.stone}`,
                    }}>
                      <div style={{ fontWeight: 700, color: NW.ink, whiteSpace: "nowrap" }}>{d}</div>
                      <div style={{ color: NW.slate }}>{label}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Downloads */}
              <div style={{ padding: 24, background: "#FFFFFF", border: `1px solid ${NW.stone}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: NW.mute, marginBottom: 12 }}>Downloads</div>
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10, fontSize: 14 }}>
                  {[
                    ["Full open call (PDF, 8 pp)",      "Application & rubric"],
                    ["Past panels, 2018 – 2026 (PDF)",  "Reference"],
                    ["Panel construction notes (PDF)",  "For the painting crew"],
                  ].map(([title, sub]) => (
                    <li key={title} style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 14, alignItems: "center", paddingBottom: 10, borderBottom: `1px dashed ${NW.stone}` }}>
                      <div>
                        <div style={{ fontWeight: 600, color: NW.ink }}>{title}</div>
                        <div style={{ fontSize: 12, color: NW.mute }}>{sub}</div>
                      </div>
                      <span style={{ color: NW.ink, fontWeight: 700, fontSize: 13 }}>↓</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Cross-links to related pages */}
              <div style={{ padding: 24, background: "#FFFFFF", border: `1px solid ${NW.stone}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: NW.mute, marginBottom: 12 }}>Related</div>
                <div style={{ display: "grid", gap: 14 }}>
                  <a style={{ display: "block", padding: "12px 14px", background: NW.warmPaper }}>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: NW.council, marginBottom: 4 }}>The Council · Program</div>
                    <div style={{ fontWeight: 700, color: NW.ink, lineHeight: 1.25 }}>The Quilt Wall</div>
                    <div style={{ fontSize: 12.5, color: NW.mute, marginTop: 4 }}>Six panels a year, on K-9.</div>
                  </a>
                  <a style={{ display: "block", padding: "12px 14px", background: NW.warmPaper }}>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: NW.artists, marginBottom: 4 }}>Artists · Tagged</div>
                    <div style={{ fontWeight: 700, color: NW.ink, lineHeight: 1.25 }}>Quilt Wall artists (4)</div>
                    <div style={{ fontSize: 12.5, color: NW.mute, marginTop: 4 }}>Maribel, Lillian, Walt, Ginnie.</div>
                  </a>
                  <a style={{ display: "block", padding: "12px 14px", background: NW.warmPaper }}>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: NW.pine, marginBottom: 4 }}>Events · Past</div>
                    <div style={{ fontWeight: 700, color: NW.ink, lineHeight: 1.25 }}>Quilt Wall Block Party · Jun 7</div>
                    <div style={{ fontSize: 12.5, color: NW.mute, marginTop: 4 }}>Paint-along & chili.</div>
                  </a>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <NewsFooter />
    </div>
  );
}

window.NewsIndex = NewsIndex;
window.NewsArticleStory = NewsArticleStory;
window.NewsArticleAnnouncement = NewsArticleAnnouncement;
