// About, Leadership, Projects pages

const AboutPage = ({ navigate }) => (
  <div className="page">
    {/* Hero */}
    <section style={{background: "var(--ink)", color: "var(--paper)", padding: "clamp(64px, 10vw, 112px) 0 clamp(56px, 8vw, 96px)"}}>
      <div className="wrap">
        <span className="eyebrow light">About CAABA</span>
        <h1 className="display" style={{
          fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 1.02, maxWidth: "22ch", marginTop: 24, marginBottom: 32,
        }}>
          A bar association built on <em style={{color: "var(--gold-soft)", fontStyle: "italic"}}>trust, bridges, and craft</em>
        </h1>
        <p style={{fontSize: "clamp(17px, 1.4vw, 20px)", lineHeight: 1.6, color: "#C9D2DC", maxWidth: "62ch"}}>
          CAABA is a United States-based professional association dedicated to the long-term success of legal professionals connected to Central Asia — and to the enduring relationships that tie our two legal communities together.
        </p>
      </div>
    </section>

    {/* Who We Are / Mission / Vision */}
    <section style={{background: "var(--paper)"}}>
      <div className="wrap">
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px, 6vw, 96px)"}} className="two-col">
          <div style={{display: "flex", flexDirection: "column", gap: 20}}>
            <span className="eyebrow">§ 01 — Who We Are</span>
            <h2 className="display" style={{fontSize: "clamp(30px, 3.6vw, 48px)", lineHeight: 1.08, maxWidth: "20ch"}}>
              A professional home for a growing community
            </h2>
            <p style={{fontSize: 16.5, lineHeight: 1.7, color: "var(--ink-3)"}}>
              The Central Asian American Bar Association is a nonprofit professional association serving attorneys, law students, foreign-trained lawyers, and mission-aligned supporters connected to Central Asia within the United States legal system.
            </p>
            <p style={{fontSize: 16.5, lineHeight: 1.7, color: "var(--ink-3)"}}>
              We are organized around the premise that a durable professional community — built slowly, carefully, and generously — is one of the most valuable resources a lawyer can have.
            </p>
          </div>
          <Placeholder label="Inaugural membership gathering · Texas" ratio="4/5"/>
        </div>
      </div>
    </section>

    {/* Mission + Vision split */}
    <section style={{background: "var(--paper-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)"}}>
      <div className="wrap">
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--rule)", background: "var(--paper-3)"}} className="two-col">
          {[
            {tag: "§ 02 — Mission",
             title: "Our Mission",
             body: "To advance the common professional and business interests of our members by fostering a strong network of legal professionals connected to Central Asia in the United States, promoting professional development, facilitating collaboration, supporting mentorship and trusted referrals, and enhancing the visibility of our members in domestic and international legal and business environments."},
            {tag: "§ 03 — Vision",
             title: "Our Vision",
             body: "A professional community in which every Central Asian American legal professional — and every lawyer aligned with our mission — has access to mentorship, collaboration, and opportunity; and in which the legal communities of the United States and Central Asia remain connected through durable relationships of trust and shared craft."},
          ].map((x, i) => (
            <div key={x.tag} style={{
              padding: "clamp(32px, 4vw, 56px)",
              borderRight: i === 0 ? "1px solid var(--rule)" : 0,
              display: "flex", flexDirection: "column", gap: 20,
            }}>
              <span className="eyebrow">{x.tag}</span>
              <h3 className="display" style={{fontSize: "clamp(28px, 3vw, 40px)", lineHeight: 1.1}}>{x.title}</h3>
              <hr className="hr gold" style={{width: 56, margin: "4px 0"}}/>
              <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--ink-3)"}}>{x.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Values */}
    <section style={{background: "var(--paper)"}}>
      <div className="wrap">
        <div className="section-head">
          <div className="section-head-left">
            <span className="eyebrow">§ 04 — Organizational Values</span>
            <span className="section-num">Six Commitments</span>
          </div>
          <div>
            <h2 className="display">Principles we hold ourselves to — and to each other</h2>
          </div>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          borderTop: "1px solid var(--rule)",
        }} className="values-grid">
          {VALUES.map(v => (
            <div key={v.k} style={{
              padding: "32px 28px 40px",
              borderRight: "1px solid var(--rule)",
              borderBottom: "1px solid var(--rule)",
              minHeight: 200,
            }}>
              <div style={{display: "flex", alignItems: "baseline", gap: 16, marginBottom: 12}}>
                <span className="section-num" style={{color: "var(--gold-2)"}}>{v.k}</span>
                <h3 className="display" style={{fontSize: 24}}>{v.v}</h3>
              </div>
              <p style={{fontSize: 14.5, lineHeight: 1.6, color: "var(--muted)"}}>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Broader orientation */}
    <section style={{background: "var(--ink)", color: "var(--paper)"}}>
      <div className="wrap">
        <div style={{display: "grid", gridTemplateColumns: "1fr 2fr", gap: "clamp(24px, 5vw, 80px)", alignItems: "start"}} className="two-col">
          <div>
            <span className="eyebrow light">§ 05 — Orientation</span>
          </div>
          <div>
            <h2 className="display" style={{fontSize: "clamp(30px, 3.6vw, 52px)", lineHeight: 1.1, marginBottom: 32, color: "var(--paper)"}}>
              Central Asian in scope, internationally minded in outlook
            </h2>
            <p style={{fontSize: 17, lineHeight: 1.7, color: "#C9D2DC", maxWidth: "62ch", marginBottom: 20}}>
              CAABA is not limited to any single national community within Central Asia. The Association welcomes legal professionals, law students, foreign-trained lawyers, and mission-aligned supporters across the region — including Kazakh, Kyrgyz, Tajik, Turkmen, Uzbek, and diasporic professionals — as well as colleagues whose work touches Central Asia in substantive ways.
            </p>
            <p style={{fontSize: 17, lineHeight: 1.7, color: "#C9D2DC", maxWidth: "62ch"}}>
              Our orientation is international, our practice ethics are American, and our commitments are long-term.
            </p>
            <div style={{marginTop: 40, maxWidth: "62ch"}}>
              <TaxNotice tone="dark"/>
            </div>
            <div style={{marginTop: 32}}>
              <button className="btn btn-ghost on-dark" onClick={() => navigate("membership")}>
                Consider Membership <Arrow/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <style>{`
      @media (max-width: 820px) {
        .two-col { grid-template-columns: 1fr !important; }
        .two-col > div { border-right: 0 !important; border-bottom: 1px solid var(--rule); }
        .values-grid { grid-template-columns: 1fr !important; }
      }
      @media (min-width: 821px) and (max-width: 1080px) {
        .values-grid { grid-template-columns: repeat(2,1fr) !important; }
      }
    `}</style>
  </div>
);

const LeadershipPage = ({ navigate }) => (
  <div className="page">
    <section style={{background: "var(--ink)", color: "var(--paper)", padding: "clamp(64px, 10vw, 112px) 0 clamp(48px, 7vw, 88px)"}}>
      <div className="wrap">
        <span className="eyebrow light">Leadership</span>
        <h1 className="display" style={{fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 1.02, maxWidth: "22ch", marginTop: 24, marginBottom: 32}}>
          Officers, Vice Presidents, and Committee Leadership
        </h1>
        <p style={{fontSize: "clamp(17px, 1.4vw, 20px)", lineHeight: 1.6, color: "#C9D2DC", maxWidth: "62ch"}}>
          CAABA's leadership is drawn from practicing attorneys and professionals who volunteer their time to steward the Association's mission, its programming, and the long-term health of its community.
        </p>
      </div>
    </section>

    <section style={{background: "var(--paper)"}}>
      <div className="wrap">
        <div className="section-head">
          <div className="section-head-left">
            <span className="eyebrow">§ 01 — Executive Officers</span>
            <span className="section-num">Three Principals</span>
          </div>
          <div>
            <h2 className="display">Executive Leadership</h2>
          </div>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--rule)"}} className="officer-grid">
          {LEADERSHIP.officers.map((o, i) => (
            <LeaderCard key={o.name} p={o} borderRight={i < 2}/>
          ))}
        </div>
      </div>
    </section>

    <section style={{background: "var(--paper-2)", borderTop: "1px solid var(--rule)"}}>
      <div className="wrap">
        <div className="section-head">
          <div className="section-head-left">
            <span className="eyebrow">§ 02 — Committee Leadership</span>
            <span className="section-num">Four Vice Presidents</span>
          </div>
          <div>
            <h2 className="display">Vice Presidents & Standing Committees</h2>
          </div>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--rule)"}} className="vp-grid">
          {LEADERSHIP.vps.map((o, i) => (
            <LeaderCard key={o.name} p={o} borderRight={i % 2 === 0} borderBottom={i < 2}/>
          ))}
        </div>

        <div style={{marginTop: 48, padding: 32, background: "var(--paper-3)", border: "1px solid var(--rule)", textAlign: "center"}}>
          <p style={{fontSize: 15, color: "var(--muted)", fontStyle: "italic", fontFamily: "var(--serif)"}}>
            Additional committee chairs and leadership roles will be announced as the Association grows.
          </p>
        </div>
      </div>
    </section>

    <style>{`
      @media (max-width: 900px) {
        .officer-grid { grid-template-columns: 1fr !important; }
        .vp-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </div>
);

const LeaderCard = ({ p, borderRight, borderBottom }) => (
  <div style={{
    padding: "clamp(28px, 3.5vw, 44px)",
    borderRight: borderRight ? "1px solid var(--rule)" : 0,
    borderBottom: borderBottom ? "1px solid var(--rule)" : 0,
    background: "var(--paper-3)",
    display: "flex",
    flexDirection: "column",
    gap: 20,
    minHeight: 320,
  }}>
    <div style={{display: "flex", gap: 20, alignItems: "center"}}>
      <Headshot name={p.name} size={80}/>
      <div>
        {p.short && <div className="eyebrow" style={{marginBottom: 6}}>{p.short}</div>}
        <h3 className="display" style={{fontSize: 26, lineHeight: 1.1}}>{p.name}</h3>
        <div style={{
          fontFamily: "var(--serif)", fontStyle: "italic",
          fontSize: 15, color: "var(--muted)", marginTop: 4,
        }}>{p.title}</div>
      </div>
    </div>
    <hr className="hr gold" style={{width: 48, marginTop: 4}}/>
    <p style={{fontSize: 14.5, lineHeight: 1.65, color: "var(--ink-3)"}}>{p.bio}</p>
    <div style={{marginTop: "auto", display: "flex", gap: 16, alignItems: "center", paddingTop: 16, borderTop: "1px solid var(--rule)"}}>
      {p.linkedin ? (
        <a href={p.linkedin} target="_blank" rel="noopener noreferrer" style={{
          fontFamily: "var(--sans)", fontSize: 10.5, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--ink)", textDecoration: "none", display: "flex", alignItems: "center", gap: 8,
          borderBottom: "1px solid var(--gold)", paddingBottom: 2,
        }}>
          <LinkedInMark/> LinkedIn
        </a>
      ) : (
        <span style={{
          fontFamily: "var(--sans)", fontSize: 10.5, fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--muted)", display: "flex", alignItems: "center", gap: 8,
        }}>
          <LinkedInMark/> LinkedIn
        </span>
      )}
      <span style={{flex: 1}}/>
      <span className="section-num">Leadership</span>
    </div>
  </div>
);

const LinkedInMark = () => (
  <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M3.5 5.5A1.5 1.5 0 103.5 2.5 1.5 1.5 0 003.5 5.5zM2 6.5h3v7H2v-7zM6.5 6.5h3v1c.5-.8 1.5-1.2 2.5-1.2 2 0 3 1.3 3 3.3v3.9h-3v-3.5c0-.9-.3-1.5-1.2-1.5-.9 0-1.3.7-1.3 1.5v3.5h-3v-7z"/>
  </svg>
);

const ProjectsPage = ({ navigate }) => (
  <div className="page">
    <section style={{background: "var(--ink)", color: "var(--paper)", padding: "clamp(64px, 10vw, 112px) 0 clamp(48px, 7vw, 88px)"}}>
      <div className="wrap">
        <span className="eyebrow light">Projects & Initiatives</span>
        <h1 className="display" style={{fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 1.02, maxWidth: "22ch", marginTop: 24, marginBottom: 32}}>
          Four active initiatives — <em style={{color: "var(--gold-soft)", fontStyle: "italic"}}>one enduring mission</em>
        </h1>
        <p style={{fontSize: "clamp(17px, 1.4vw, 20px)", lineHeight: 1.6, color: "#C9D2DC", maxWidth: "62ch"}}>
          Our initiatives translate CAABA's mission into programming that serves attorneys, students, foreign-trained lawyers, and the institutional partners who support them.
        </p>
      </div>
    </section>

    <section style={{background: "var(--paper)"}}>
      <div className="wrap" style={{display: "flex", flexDirection: "column", gap: 0}}>
        {PROJECTS.map((p, i) => (
          <ProjectBlock key={p.id} p={p} idx={i} navigate={navigate}/>
        ))}
      </div>
    </section>
  </div>
);

const ProjectBlock = ({ p, idx, navigate }) => {
  const reversed = idx % 2 === 1;
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      gap: "clamp(24px, 5vw, 80px)",
      alignItems: "center",
      padding: "clamp(48px, 8vw, 104px) 0",
      borderTop: idx === 0 ? 0 : "1px solid var(--rule)",
    }} className="project-block">
      <div style={{order: reversed ? 2 : 1}}>
        <Placeholder label={`${p.label} · hero image`} ratio="5/4" tone={idx % 2 === 0 ? "paper" : "ink"}/>
      </div>
      <div style={{order: reversed ? 1 : 2, display: "flex", flexDirection: "column", gap: 20}}>
        <div style={{display: "flex", alignItems: "baseline", gap: 16}}>
          <span className="serif-num" style={{fontSize: 48, color: "var(--gold-2)", lineHeight: 1}}>
            {String(p.id).padStart(2,"0")}
          </span>
          <span className="eyebrow">{p.label}</span>
        </div>
        <h2 className="display" style={{fontSize: "clamp(32px, 4vw, 52px)", lineHeight: 1.05, maxWidth: "18ch"}}>{p.title}</h2>
        <p style={{fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, color: "var(--muted)"}}>{p.subtitle}</p>
        <hr className="hr gold" style={{width: 56, margin: "8px 0"}}/>
        <p style={{fontSize: 16.5, lineHeight: 1.7, color: "var(--ink-3)", maxWidth: "52ch"}}>{p.body}</p>

        <div style={{marginTop: 16, display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 24px", alignItems: "start"}}>
          <span className="eyebrow" style={{paddingTop: 2}}>Audience</span>
          <span style={{fontSize: 14.5, color: "var(--ink-3)"}}>{p.audience}</span>
          <span className="eyebrow" style={{paddingTop: 2}}>Goals</span>
          <ul style={{listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8}}>
            {p.goals.map(g => (
              <li key={g} style={{fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-3)", paddingLeft: 18, position: "relative"}}>
                <span style={{position: "absolute", left: 0, top: 8, width: 10, height: 1, background: "var(--gold)"}}/>
                {g}
              </li>
            ))}
          </ul>
        </div>

        <div style={{marginTop: 16}}>
          <button className="btn btn-ghost" onClick={() => navigate("contact")}>
            {p.cta} <Arrow/>
          </button>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .project-block { grid-template-columns: 1fr !important; }
          .project-block > div:first-child { order: 1 !important; }
          .project-block > div:last-child { order: 2 !important; }
        }
      `}</style>
    </div>
  );
};

const NEWS_PAGE_SIZE = 5;
const NEWS_DEK_MAX_CHARS = 180;

const truncateText = (text, max) => {
  if (!text) return "";
  const trimmed = String(text).trim();
  if (trimmed.length <= max) return trimmed;
  const cut = trimmed.slice(0, max);
  const lastSpace = cut.lastIndexOf(" ");
  return (lastSpace > max * 0.6 ? cut.slice(0, lastSpace) : cut).replace(/[.,;:!?\-—\s]+$/, "") + "…";
};

const openNewsItem = (navigate, item) => {
  if (!item) return;
  if (item.externalUrl && !item.body) {
    window.open(item.externalUrl, "_blank", "noopener,noreferrer");
    return;
  }
  navigate("newsItem", { id: String(item.id) });
};

const NewsPage = ({ navigate }) => {
  const allNews = useNewsItems();
  const [page, setPage] = React.useState(1);
  const totalPages = Math.max(1, Math.ceil(allNews.length / NEWS_PAGE_SIZE));

  React.useEffect(() => {
    if (page > totalPages) setPage(totalPages);
  }, [page, totalPages]);

  const start = (page - 1) * NEWS_PAGE_SIZE;
  const pageItems = allNews.slice(start, start + NEWS_PAGE_SIZE);

  const goToPage = (next) => {
    const clamped = Math.min(totalPages, Math.max(1, next));
    setPage(clamped);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
  <div className="page">
    <section style={{background: "var(--ink)", color: "var(--paper)", padding: "clamp(64px, 10vw, 112px) 0 clamp(48px, 7vw, 88px)"}}>
      <div className="wrap">
        <span className="eyebrow light">News & Updates</span>
        <h1 className="display" style={{fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 1.02, maxWidth: "22ch", marginTop: 24, marginBottom: 32}}>
          Association news, program notes, and <em style={{color: "var(--gold-soft)", fontStyle: "italic"}}>community updates</em>
        </h1>
        <p style={{fontSize: "clamp(17px, 1.4vw, 20px)", lineHeight: 1.6, color: "#C9D2DC", maxWidth: "62ch"}}>
          Follow CAABA's announcements, leadership updates, membership notices, and program developments as the Association grows.
        </p>
      </div>
    </section>

    <section style={{background: "var(--paper)"}}>
      <div className="wrap">
        <div className="section-head">
          <div className="section-head-left">
            <span className="eyebrow">§ 01 — Latest</span>
            <span className="section-num">Association Updates</span>
          </div>
          <div>
            <h2 className="display">Recent news from CAABA</h2>
            <p className="lead" style={{marginTop: 20}}>
              This section will expand as events, programs, and member announcements are published.
            </p>
          </div>
        </div>

        <div style={{display: "flex", flexDirection: "column", borderTop: "1px solid var(--rule)"}}>
          {pageItems.map((item, i) => {
            const preview = truncateText(item.dek || item.body, NEWS_DEK_MAX_CHARS);
            return (
              <article
                key={item.id}
                onClick={() => openNewsItem(navigate, item)}
                role="link"
                tabIndex={0}
                onKeyDown={(e) => {
                  if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    openNewsItem(navigate, item);
                  }
                }}
                style={{
                  display: "grid",
                  gridTemplateColumns: item.image ? "minmax(160px, 220px) minmax(0, 1.4fr) minmax(0, 1.6fr) auto" : "minmax(160px, 240px) 1fr auto",
                  gap: "clamp(20px, 4vw, 56px)",
                  padding: "clamp(32px, 5vw, 56px) 0",
                  borderBottom: "1px solid var(--rule)",
                  alignItems: "start",
                  cursor: "pointer",
                  transition: "background .15s",
                }}
                className="news-row news-row-clickable"
              >
                <div>
                  <span className="serif-num" style={{fontSize: 42, lineHeight: 1, color: "var(--gold-2)"}}>
                    {String(start + i + 1).padStart(2, "0")}
                  </span>
                  <div className="eyebrow" style={{marginTop: 16, marginBottom: 8}}>{item.type}</div>
                  <div className="section-num">{item.date}</div>
                </div>
                {item.image && (
                  <div>
                    <img
                      src={item.image}
                      alt={item.title}
                      loading="lazy"
                      style={{width: "100%", aspectRatio: "1 / 1", objectFit: "cover", display: "block", border: "1px solid var(--rule)"}}
                    />
                  </div>
                )}
                <div>
                  <h3 className="display" style={{fontSize: "clamp(28px, 3vw, 42px)", lineHeight: 1.08, maxWidth: "22ch", marginBottom: 14}}>
                    {item.title}
                  </h3>
                  <p style={{fontSize: 17, lineHeight: 1.6, color: "var(--ink-3)", maxWidth: "64ch", margin: 0}}>
                    {preview}
                  </p>
                </div>
                <div style={{alignSelf: "center", pointerEvents: "none"}}>
                  <span className="btn btn-link" style={{display: "inline-flex", alignItems: "center", gap: 8}}>
                    Read More <Arrow/>
                  </span>
                </div>
              </article>
            );
          })}
        </div>

        {totalPages > 1 && (
          <nav aria-label="News pagination" style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            gap: 16, padding: "clamp(28px, 4vw, 48px) 0 clamp(8px, 2vw, 24px)",
            flexWrap: "wrap",
          }}>
            <button
              className="btn btn-link"
              onClick={() => goToPage(page - 1)}
              disabled={page <= 1}
              style={{opacity: page <= 1 ? 0.35 : 1, cursor: page <= 1 ? "default" : "pointer"}}
            >
              ← Previous
            </button>
            <div style={{display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center"}}>
              {Array.from({length: totalPages}, (_, i) => i + 1).map((n) => (
                <button
                  key={n}
                  onClick={() => goToPage(n)}
                  aria-current={n === page ? "page" : undefined}
                  style={{
                    minWidth: 40, height: 40,
                    border: "1px solid var(--rule)",
                    background: n === page ? "var(--ink)" : "transparent",
                    color: n === page ? "var(--paper)" : "var(--ink)",
                    fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.08em",
                    cursor: "pointer",
                  }}
                >
                  {String(n).padStart(2, "0")}
                </button>
              ))}
            </div>
            <button
              className="btn btn-link"
              onClick={() => goToPage(page + 1)}
              disabled={page >= totalPages}
              style={{opacity: page >= totalPages ? 0.35 : 1, cursor: page >= totalPages ? "default" : "pointer"}}
            >
              Next →
            </button>
          </nav>
        )}
      </div>
    </section>

    <section style={{background: "var(--paper-2)", borderTop: "1px solid var(--rule)"}}>
      <div className="wrap" style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "clamp(28px, 6vw, 88px)", alignItems: "center"}} className="news-contact-grid">
        <div>
          <span className="eyebrow">§ 02 — Share News</span>
          <h2 className="display" style={{fontSize: "clamp(32px, 4vw, 54px)", lineHeight: 1.06, marginTop: 16, marginBottom: 24}}>
            Have an announcement for the CAABA community?
          </h2>
          <p style={{fontSize: 16.5, lineHeight: 1.7, color: "var(--ink-3)", maxWidth: "54ch"}}>
            Members, partners, and committee leads may contact CAABA with programming updates, publication notices, and community announcements.
          </p>
        </div>
        <div style={{justifySelf: "start"}}>
          <button className="btn btn-primary" onClick={() => navigate("contact")}>
            Contact CAABA <Arrow/>
          </button>
        </div>
      </div>
    </section>

    <style>{`
      .news-row-clickable:hover { background: var(--paper-2); }
      .news-row-clickable:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -4px; }
      @media (max-width: 900px) {
        .news-row { grid-template-columns: 1fr !important; }
        .news-contact-grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </div>
  );
};

const NewsItemPage = ({ navigate, itemId }) => {
  const allNews = useNewsItems();
  const item = React.useMemo(
    () => allNews.find((n) => String(n.id) === String(itemId)),
    [allNews, itemId]
  );

  if (!item) {
    return (
      <div className="page">
        <section style={{background: "var(--ink)", color: "var(--paper)", padding: "clamp(72px, 12vw, 144px) 0"}}>
          <div className="wrap" style={{textAlign: "center"}}>
            <span className="eyebrow light">News</span>
            <h1 className="display" style={{fontSize: "clamp(40px, 6vw, 84px)", lineHeight: 1.02, marginTop: 20, marginBottom: 24}}>
              Article not found
            </h1>
            <p style={{fontSize: "clamp(16px, 1.4vw, 19px)", color: "#C9D2DC", maxWidth: "44ch", margin: "0 auto 32px"}}>
              The article you're looking for may have been moved or is still loading. Try returning to the news index.
            </p>
            <button className="btn btn-primary on-dark" onClick={() => navigate("news")}>
              Back to News <Arrow/>
            </button>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page">
      <section style={{background: "var(--ink)", color: "var(--paper)", padding: "clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 72px)"}}>
        <div className="wrap">
          <button
            onClick={() => navigate("news")}
            className="btn btn-link on-dark"
            style={{marginBottom: 32, display: "inline-flex", alignItems: "center", gap: 8}}
          >
            ← All News
          </button>
          <div className="eyebrow light" style={{marginBottom: 16}}>{item.type}</div>
          <h1 className="display" style={{fontSize: "clamp(36px, 5.5vw, 72px)", lineHeight: 1.04, maxWidth: "28ch", marginBottom: 24}}>
            {item.title}
          </h1>
          <div className="section-num" style={{color: "var(--gold-soft)"}}>{item.date}</div>
        </div>
      </section>

      <section style={{background: "var(--paper)", padding: "clamp(48px, 7vw, 96px) 0"}}>
        <div className="wrap" style={{maxWidth: 880}}>
          {item.image && (
            <figure style={{
              margin: "0 0 clamp(32px, 5vw, 56px)",
              background: "var(--paper-3)",
              border: "1px solid var(--rule)",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              maxHeight: "80vh",
              overflow: "hidden",
            }}>
              <img
                src={item.image}
                alt={item.title}
                style={{
                  width: "auto",
                  height: "auto",
                  maxWidth: "100%",
                  maxHeight: "80vh",
                  objectFit: "contain",
                  display: "block",
                }}
              />
            </figure>
          )}

          {(() => {
            const dekNorm = (item.dek || "").replace(/[…\.]+$/, "").replace(/\s+/g, " ").trim();
            const bodyNorm = (item.body || "").replace(/\s+/g, " ").trim();
            const dekIsBodyPrefix = dekNorm && bodyNorm && bodyNorm.startsWith(dekNorm);
            const showDek = item.dek && item.dek !== item.body && !dekIsBodyPrefix;
            return (
              <>
                {showDek && (
                  <p style={{
                    fontFamily: "var(--serif)",
                    fontStyle: "italic",
                    fontSize: "clamp(19px, 1.7vw, 24px)",
                    lineHeight: 1.5,
                    color: "var(--ink-3)",
                    marginBottom: 28,
                    paddingBottom: 28,
                    borderBottom: "1px solid var(--rule)",
                  }}>
                    {item.dek}
                  </p>
                )}
                {item.body && (
                  <div style={{
                    fontSize: "clamp(16px, 1.3vw, 18px)",
                    lineHeight: 1.75,
                    color: "var(--ink-3)",
                    whiteSpace: "pre-line",
                  }}>
                    {item.body}
                  </div>
                )}
              </>
            );
          })()}

          <div style={{
            display: "flex", flexWrap: "wrap", gap: 16,
            marginTop: "clamp(40px, 6vw, 72px)",
            paddingTop: "clamp(32px, 4vw, 48px)",
            borderTop: "1px solid var(--rule)",
            alignItems: "center", justifyContent: "space-between",
          }}>
            <button className="btn btn-link" onClick={() => navigate("news")}>
              ← All News
            </button>
            {item.externalUrl && (
              <a
                href={item.externalUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-primary"
              >
                {item.cta || "View Original Post"} <Arrow/>
              </a>
            )}
            {!item.externalUrl && item.target && (
              <button className="btn btn-primary" onClick={() => navigate(item.target)}>
                {item.cta} <Arrow/>
              </button>
            )}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { AboutPage, LeadershipPage, ProjectsPage, NewsPage, NewsItemPage });