// Announcements archive (announcements.html) — the full newest-first feed of
// coordinator posts. Lightweight: reads the shared ANNOUNCEMENTS list + helpers
// (announcementsNewestFirst, fmtDate, noWidow) from shared.jsx. The heavy
// per-post body lives in announcement.jsx and is only loaded on the detail page.

const ARCH_PAGE = 8; // how many to show before "Load more"

const AnnouncementsPage = () => {
  const all = announcementsNewestFirst();
  const [query, setQuery] = React.useState('');
  const [limit, setLimit] = React.useState(ARCH_PAGE);

  const q = query.trim().toLowerCase();
  const list = q
    ? all.filter((a) =>
        `${a.title} ${a.category} ${a.coordinator} ${a.center}`.toLowerCase().includes(q))
    : all;
  const visible = list.slice(0, limit);

  return (
    <>
      <Header />
      <section className="page-hero page-hero--sm">
        <div className="container">
          <div className="breadcrumbs"><a href="index.html">Home</a> · <span>Announcements</span></div>
          <h1 className="h-1" style={{ marginTop: 8 }}>Announcements</h1>
          <p className="arch-sub">News and results posted by Prajna coordinators.</p>
        </div>
      </section>

      <section className="ann-section">
        <div className="container">
          <div className="arch-wrap">
            <form className="ann-search arch-search" role="search" onSubmit={(e) => e.preventDefault()}>
              <label htmlFor="arch-search" className="sr-only">Search announcements</label>
              <svg className="ann-search__icon" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" strokeWidth="1.8" />
                <path d="M20 20l-3.2-3.2" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              </svg>
              <input
                id="arch-search" type="search" className="ann-search__input"
                placeholder="Enter your keywords"
                value={query}
                onChange={(e) => { setQuery(e.target.value); setLimit(ARCH_PAGE); }}
              />
            </form>

            {list.length === 0 ? (
              <p className="arch-empty">No announcements match “{query}”.</p>
            ) : (
              <ul className="arch-list">
                {visible.map((a) => (
                  <li key={a.id}>
                    <a className="arch-item" href={`announcement.html?id=${a.id}`}>
                      <span className="arch-item__tag">{a.category}</span>
                      <span className="arch-item__title">{noWidow(a.title)}</span>
                      <span className="arch-item__meta">
                        By {a.coordinator} @ {a.center}
                        <span className="arch-item__dot" aria-hidden="true"> · </span>
                        {fmtDate(a.date)}
                      </span>
                    </a>
                  </li>
                ))}
              </ul>
            )}

            {list.length > limit && (
              <div className="arch-more">
                <button type="button" className="btn btn--soft" onClick={() => setLimit((l) => l + ARCH_PAGE)}>
                  Load More
                </button>
              </div>
            )}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
};