/* Veterans Deserve Better — resource library, research, newsroom, social, footer */
const { useState: useS3 } = React;

/* ---------------- RESOURCE LIBRARY (gated one-pagers) ---------------- */
/* Flip to true once real PDFs exist in downloads/ — see DEPLOY.md */
/* Serves real PDFs from downloads/. Re-export all three whenever a document's text
   changes — stale PDFs ship content you already removed. Set false to fall back to the
   HTML versions, which always reflect the current text. */
const PDF_READY = true;
const docHref = (r) => (PDF_READY && r.pdf ? r.pdf : r.href);

const RESOURCES = [
  { id: "framework", tag: "One-pager", title: "The 5-Point Framework", sub: "Veteran Due Diligence Checklist", pages: "Printable · PDF", href: "5-point-framework.html", pdf: "downloads/veterans-deserve-better-5-point-framework.pdf", d: "Five things every veteran should know before filing a VA disability claim — pressure and paperwork, transparency, track record, documentation, and your options.", featured: true,
    bullets: ["Take your time, and get it in writing", "Understand mission & financial transparency", "Ask about experience and track record", "Be organized before you file", "Know that you have options"] },
  { id: "tenq", tag: "One-pager", title: "10 Questions to Ask", sub: "Before Choosing a VSO", pages: "Printable · PDF", href: "10-questions-vso.html", pdf: "downloads/veterans-deserve-better-10-questions.pdf", d: "The questions that separate an informed choice from a familiar one — plus a readiness checklist to run before you sign anything.", featured: true,
    bullets: ["Can you walk me through the process?", "Who will actually handle my claim?", "Is there any cost for your services?", "Is your organization financially transparent?", "What happens if my claim is denied?"] },
  { id: "template", tag: "Template", title: "Congressional Letter Template", sub: "Send directly from this site", pages: "1 page · PDF + web form", href: "congressional-letter.html", pdf: "downloads/veterans-deserve-better-congressional-letter.pdf", d: "The oversight request letter, ready to sign. Sign it here and we route it, or download and mail it yourself." },
  { id: "brief", tag: "Brief", title: "Congressional Brief", sub: "For member offices and staff", pages: "In production", soon: true, d: "A staff-ready summary of the documented record, with a source appendix and suggested lines of inquiry." },
  { id: "facts", tag: "Fact sheet", title: "Fact Sheets", sub: "Single-issue, single-page", pages: "In production", soon: true, d: "One issue per page, every assertion footnoted to a filing, audit, court record, or published report." },
  { id: "policy", tag: "Policy", title: "Policy Recommendations", sub: "What reform could look like", pages: "In production", soon: true, d: "Concrete, nonpartisan recommendations for strengthening VSO governance, transparency, and accountability." },
];

function ResourceLibrary({ ink, paper, accent }) {
  const [openId, setOpenId] = useS3(null);
  const gate = async (e, r) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    setOpenId("done-" + r.id);
    submitToNetlify("download", { name: fd.get("name"), email: fd.get("email"), zip: fd.get("zip"), document: r.title });
  };
  return (
    <section className="vdb-lib" id="library">
      <div className="vdb-container">
        <div className="vdb-sechead vdb-sechead--row">
          <div>
            <Eyebrow accent={accent}>Resource library</Eyebrow>
            <h2 className="vdb-h2">Free, printable, and sourced. Take what you need.</h2>
          </div>
          <a href="#library" className="vdb-linkarrow"><DownloadIcon />Download the full toolkit</a>        </div>

        <div className="vdb-lib__grid">
          {RESOURCES.map((r) => (
            <article key={r.id} className={`vdb-res ${r.featured ? "is-featured" : ""}`} style={{ borderColor: ink + "1f" }}>
              <div className="vdb-res__top">
                <span className="vdb-tag" style={{ borderColor: ink + "33" }}>{r.tag}</span>
                <span className="vdb-res__pages">{r.pages}</span>
              </div>
              <h3 className="vdb-res__t">{r.title}</h3>
              <div className="vdb-res__sub" style={{ color: accent }}>{r.sub}</div>
              <p className="vdb-res__d">{r.d}</p>
              {r.bullets && (
                <ul className="vdb-res__bul">
                  {r.bullets.map((b, i) => <li key={b}><span className="vdb-res__bn" style={{ color: accent }}>{i + 1}</span>{b}</li>)}
                </ul>
              )}
              {openId === r.id ? (
                <form className="vdb-gate" onSubmit={(e) => gate(e, r)} style={{ borderColor: ink + "26" }}>
                  <div className="vdb-gate__l">Where should we send it?</div>
                  <input name="name" placeholder="Full name" required style={{ borderColor: ink + "2e" }} />
                  <input name="email" type="email" placeholder="Email" required style={{ borderColor: ink + "2e" }} />
                  <input name="zip" placeholder="ZIP (optional)" maxLength="5" inputMode="numeric" style={{ borderColor: ink + "2e" }} />
                  <button type="submit" className="vdb-btn vdb-btn--solid" style={{ background: ink, color: paper }}>Get the PDF<Arrow s={12} /></button>
                </form>
              ) : openId === "done-" + r.id ? (
                <div className="vdb-gate__done" style={{ borderColor: accent }}>
                  <span className="vdb-gate__done-l" style={{ color: accent }}>
                    <svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8.5 L6.5 12 L13 4.5" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="miter" /></svg>
                    Sent to your inbox.
                  </span>
                  <a href={docHref(r)} target="_blank" rel="noopener" {...(PDF_READY && r.pdf ? { download: "" } : {})} className="vdb-gate__open" style={{ color: ink }}>{PDF_READY && r.pdf ? "Download the PDF" : "Open it now"}<Arrow s={11} /></a>
                </div>
              ) : r.soon ? (
                <div className="vdb-res__soon" style={{ borderColor: ink + "26" }}>
                  Not yet published — <a href="#subscribe" style={{ color: accent }}>get notified</a>
                </div>
              ) : (
                <button className="vdb-btn vdb-btn--outline vdb-res__btn" onClick={() => setOpenId(r.id)} style={{ color: ink, borderColor: ink + "33" }}>
                  <DownloadIcon />Download
                </button>
              )}
            </article>
          ))}
        </div>
        <p className="vdb-lib__fine" style={{ borderColor: ink + "1f" }}>
          Downloads ask for a name and email so we can tell you when a document is updated. ZIP is optional and used only to understand where our resources are reaching veterans. We do not sell or share your information.
        </p>
      </div>
    </section>
  );
}

/* ---------------- FEATURED RESEARCH ---------------- */
function Research({ ink, paper, accent }) {
  const items = [
    { kind: "Featured research", date: "Jul 2026", title: "What public filings show about VSO governance and financial transparency", d: "A document-by-document walkthrough of what is and is not disclosed in publicly available nonprofit filings, and what a veteran can reasonably conclude from each.", src: "https://images.unsplash.com/photo-1568667256549-094345857637?w=1100&q=80&auto=format&fit=crop", art: "PHOTO — stacked printed filings and annual reports on a table", sources: "12 primary sources", tall: true },
    { kind: "Explainer", date: "Jul 2026", title: "What to ask before you sign anything with a Veterans Service Organization", d: "The questions that separate an informed choice from a familiar one, and why getting commitments in writing protects you.", src: "https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=900&q=80&auto=format&fit=crop", art: "PHOTO — paperwork and a pen on a kitchen table", sources: "4 government sources" },
    { kind: "Explainer", date: "Jun 2026", title: "How to read an IRS Form 990 in fifteen minutes", d: "The seven lines that tell you the most about a veterans nonprofit — where to find them and what each one means.", src: "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=900&q=80&auto=format&fit=crop", art: "PHOTO — Form 990 pages with annotations", sources: "3 primary sources" },
    { kind: "Survey", date: "Jun 2026", title: "What post-9/11, women, and underrepresented veterans told us about representation", d: "Preliminary findings from our open veterans' survey on experience with VSOs, claims support, and trust.", src: "https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80&auto=format&fit=crop", art: "PHOTO — veterans in conversation, documentary style", sources: "Open response set" },
  ];
  return (
    <section className="vdb-research" id="research">
      <div className="vdb-container">
        <div className="vdb-sechead vdb-sechead--row">
          <div>
            <Eyebrow accent={accent}>Latest updates</Eyebrow>
            <h2 className="vdb-h2">Featured research and primary documents.</h2>
          </div>
          <a href="#subscribe" className="vdb-linkarrow">Get notified of new documents<Arrow /></a>
        </div>
        <div className="vdb-research__grid">
          {items.map((a, i) => (
            <article key={i} className={`vdb-card ${a.tall ? "vdb-card--tall" : ""}`}>
              <Figure label={a.art} src={a.src} ratio={a.tall ? "16/10" : "3/2"} />
              <div className="vdb-card__body">
                <div className="vdb-card__meta">
                  <span className="vdb-tag" style={{ borderColor: ink + "33" }}>{a.kind}</span>
                  <span>{a.date}</span>
                  <span className="vdb-card__srcs" style={{ color: accent }}>§ {a.sources}</span>
                </div>
                <h3 className="vdb-card__t">{a.title}</h3>
                <p className="vdb-card__d">{a.d}</p>
                <a href="#library" className="vdb-card__link">Read the research<Arrow s={11} /></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- NEWSROOM ---------------- */
function Newsroom({ ink, paper, accent }) {
  const releases = [
    { d: "Jul 22, 2026", k: "Press release", t: "Veterans Deserve Better publishes 5-Point Framework for veterans choosing representation" },
    { d: "Jul 09, 2026", k: "Media statement", t: "Statement on calls for congressional review of Veterans Service Organization governance" },
    { d: "Jun 27, 2026", k: "Press release", t: "Open veterans' survey launches; preliminary findings expected this fall" },
    { d: "Jun 12, 2026", k: "Media statement", t: "On the importance of financial transparency in Veterans Service Organizations" },
  ];
  const coverage = ["Regional daily — coverage of the 5-point framework", "Veterans policy podcast — 40-minute interview", "Trade publication — nonprofit transparency roundup"];
  return (
    <section className="vdb-news" id="newsroom" style={{ background: ink, color: paper }}>
      <div className="vdb-container">
        <div className="vdb-sechead vdb-sechead--row">
          <div>
            <Eyebrow accent={accent}>Newsroom</Eyebrow>
            <h2 className="vdb-h2 vdb-news__h2">For reporters, researchers, and congressional staff.</h2>
          </div>
          <div className="vdb-news__actions">
            <a href="#library" className="vdb-btn vdb-btn--outline" style={{ color: paper, borderColor: paper + "3a" }}><DownloadIcon s={13} />Resource library</a>
            <a href="mailto:info@veteransdeservebetter.info?subject=Interview%20request" className="vdb-btn vdb-btn--accent" style={{ background: accent, color: ink }}>Request an interview<Arrow s={12} /></a>
          </div>
        </div>
        <div className="vdb-news__grid">
          <ul className="vdb-news__list">
            {releases.map((r, i) => (
              <li key={i} style={{ borderColor: paper + "1f" }}>
                <a href="#newsroom">
                  <span className="vdb-news__date">{r.d}</span>
                  <span className="vdb-news__kind" style={{ color: accent }}>{r.k}</span>
                  <span className="vdb-news__t">{r.t}</span>
                  <Arrow s={12} />
                </a>
              </li>
            ))}
          </ul>
          <aside className="vdb-news__aside" style={{ borderColor: paper + "1f" }}>
            <h4 className="vdb-news__ah">Press coverage</h4>
            <ul className="vdb-news__cov">
              {coverage.map((c) => <li key={c} style={{ borderColor: paper + "16" }}>{c}</li>)}
            </ul>
            <h4 className="vdb-news__ah">Media contact</h4>
            <p className="vdb-news__contact">
              <a href="mailto:info@veteransdeservebetter.info">info@veteransdeservebetter.info</a><br />
              <span>Response within one business day</span>
            </p>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ---------------- VIDEO EXPLAINER ---------------- */
/* Two ways to supply the video — set ONE:

   A) VIDEO_SRC — self-hosted file, e.g. "video/veterans-guide.mp4".
      Netlify's CDN serves HTTP range requests, so the file progressively streams:
      playback starts in a second or two and only the watched portion downloads.
      preload="none" means zero bytes transfer until someone presses play.

   B) VIDEO_ID — a YouTube id. Free, unlimited bandwidth, adaptive quality, auto captions.
      Click-to-load via youtube-nocookie.com.

   VIDEO_SRC wins if both are set.

   CHAPTERS: leave empty until you know the real cut. Fill in as
     { at: 48, l: "How to read a Form 990" }   // `at` is seconds
   and they become clickable seek points. Nothing is displayed while the list is empty —
   do not ship invented timestamps. */
const VIDEO_SRC = "";
const VIDEO_ID = "";
const VIDEO_POSTER = "";
const CHAPTERS = [];
/* Set to a real page or PDF once a transcript exists; the link stays hidden while empty. */
const TRANSCRIPT_URL = "";

const fmtTime = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;

function VideoExplainer({ ink, paper, accent }) {
  const [playing, setPlaying] = useS3(false);
  const [dur, setDur] = useS3(null);
  const vidRef = React.useRef(null);

  const hasVideo = Boolean(VIDEO_SRC || VIDEO_ID);

  const seek = (sec) => {
    setPlaying(true);
    requestAnimationFrame(() => {
      const v = vidRef.current;
      if (v) { v.currentTime = sec; v.play?.(); }
    });
  };

  return (
    <section className="vdb-video" id="explainer" style={{ background: ink, color: paper }}>
      <div className="vdb-container">
        <div className="vdb-sechead vdb-sechead--row">
          <div>
            <Eyebrow accent={accent}>Video explainer</Eyebrow>
            <h2 className="vdb-h2 vdb-video__h2">{hasVideo ? "How to navigate the VA — and who is actually allowed to help you." : "A short guide to navigating the VA is on the way."}</h2>
          </div>
          <p className="vdb-video__intro">{hasVideo ? "Everything in this video is sourced in the resource library below. Nothing loads from the video file until you press play." : "Everything in it will be sourced in the resource library below — the same standard as everything else we publish."}</p>
        </div>
        <div className="vdb-video__grid">
          <div className="vdb-video__frame" style={{ borderColor: paper + "1f" }}>
            {playing && VIDEO_SRC ? (
              <video ref={vidRef} className="vdb-video__embed" src={VIDEO_SRC} poster={VIDEO_POSTER || undefined} controls autoPlay playsInline preload="metadata" onLoadedMetadata={(e) => setDur(e.target.duration)}>
                <track kind="captions" src="video/veterans-guide.vtt" srcLang="en" label="English" default />
              </video>
            ) : playing && VIDEO_ID ? (
              <iframe className="vdb-video__embed" src={`https://www.youtube-nocookie.com/embed/${VIDEO_ID}?autoplay=1&rel=0&modestbranding=1`} title="Veterans Deserve Better — video explainer" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
            ) : hasVideo ? (
              <button className="vdb-video__poster" onClick={() => setPlaying(true)} aria-label="Play the video explainer" style={VIDEO_POSTER ? { backgroundImage: `url("${VIDEO_POSTER}")` } : undefined}>
                <span className="vdb-video__scrim" />
                <span className="vdb-video__play" style={{ background: accent, color: paper }}>
                  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5 L19 12 L8 19 Z" fill="currentColor" /></svg>
                </span>
                <span className="vdb-video__metarow">
                  {dur && <span className="vdb-video__badge" style={{ borderColor: paper + "3a" }}>{fmtTime(dur)}</span>}
                  <span className="vdb-video__cap">Navigating the VA: transparency, oversight, and your options</span>
                </span>
              </button>
            ) : (
              <div className="vdb-video__soon">
                <span className="vdb-video__badge" style={{ borderColor: paper + "3a" }}>In production</span>
                <p className="vdb-video__soon-h">The explainer is being filmed.</p>
                <p className="vdb-video__soon-d">A short guide to navigating the VA — transparency, oversight, and your options. Join the email list and we'll tell you when it's up.</p>
                <a href="#subscribe" className="vdb-video__tr" style={{ color: paper, borderColor: paper + "3a" }}>Notify me<Arrow s={11} /></a>
              </div>
            )}
            {/* pull real duration without downloading the video body */}
            {!playing && VIDEO_SRC && !dur && (
              <video src={VIDEO_SRC} preload="metadata" muted playsInline className="vdb-video__probe" onLoadedMetadata={(e) => setDur(e.target.duration)} />
            )}
          </div>
          <aside className="vdb-video__side">
            {CHAPTERS.length > 0 ? (
              <>
                <h4 className="vdb-video__sh">In this video</h4>
                <ol className="vdb-video__chap">
                  {CHAPTERS.map((c) => (
                    <li key={c.at} style={{ borderColor: paper + "1a" }}>
                      <button onClick={() => seek(c.at)}>
                        <span className="vdb-video__t" style={{ color: accent }}>{fmtTime(c.at)}</span>
                        <span>{c.l}</span>
                      </button>
                    </li>
                  ))}
                </ol>
              </>
            ) : (
              <>
                <h4 className="vdb-video__sh">Sources referenced</h4>
                <ol className="vdb-video__chap">
                  {[["The 5-Point Framework", "#library"], ["10 Questions to Ask", "#library"], ["Congressional letter template", "#library"], ["Reading an IRS Form 990", "#research"]].map(([l, href]) => (
                    <li key={l} style={{ borderColor: paper + "1a" }}>
                      <a href={href} className="vdb-video__srclink">
                        <span className="vdb-video__t" style={{ color: accent }}>§</span>
                        <span>{l}</span>
                      </a>
                    </li>
                  ))}
                </ol>
              </>
            )}
            {TRANSCRIPT_URL && (
              <a href={TRANSCRIPT_URL} className="vdb-video__tr" style={{ color: paper, borderColor: paper + "3a" }}>Read the full transcript<Arrow s={11} /></a>
            )}
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ---------------- SOCIAL / SURVEY / STORY ---------------- */
function Social({ ink, paper, accent }) {
  const posts = [
    { c: "Carousel — the 5 questions", s: "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=600&q=80&auto=format&fit=crop" },
    { c: "Reel — what to ask before you sign", s: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=600&q=80&auto=format&fit=crop" },
    { c: "Graphic — Form 990 walkthrough", s: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600&q=80&auto=format&fit=crop" },
    { c: "Quote card — a veteran's story", s: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80&auto=format&fit=crop" },
    { c: "Reel — what a VSO can and can't do", s: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=600&q=80&auto=format&fit=crop" },
    { c: "Carousel — congressional letter how-to", s: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=600&q=80&auto=format&fit=crop" },
  ];
  const channels = [
    { n: "Instagram", h: "@vetsdeservebetter", u: "https://www.instagram.com/vetsdeservebetter" },
    { n: "Facebook", h: "Veterans Deserve Better", u: "https://www.facebook.com/profile.php?id=61591525024350" },
    { n: "X", h: "@VetsDeserve", u: "https://x.com/VetsDeserve" },
    { n: "LinkedIn", h: "Veterans Deserve Better", u: "https://www.linkedin.com/in/veterans-deserve-better-b00b0041b" },
  ];
  return (
    <>
      <section className="vdb-social" id="social">
        <div className="vdb-container">
          <div className="vdb-sechead vdb-sechead--row">
            <div>
              <Eyebrow accent={accent}>Share the work</Eyebrow>
              <h2 className="vdb-h2">One share puts a sourced fact in front of someone new.</h2>
            </div>
            <div className="vdb-social__chan">
              {channels.map((c) => (
                <a key={c.n} href={c.u} target="_blank" rel="noopener" className="vdb-social__link" style={{ borderColor: ink + "26" }}>
                  <strong>{c.n}</strong><span>{c.h}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
        <div className="vdb-social__rail">
          {posts.map((p, i) => (
            <figure key={i} className="vdb-social__item">
              <Figure ratio="1/1" label={"SOCIAL — " + p.c} src={p.s} />
              <figcaption>{p.c}</figcaption>
            </figure>
          ))}
        </div>
      </section>

      <section className="vdb-twoup">
        <div className="vdb-container vdb-twoup__grid">
          <Survey ink={ink} paper={paper} accent={accent} />
          <ShareStory ink={ink} paper={paper} accent={accent} />
        </div>
      </section>
    </>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer({ ink, paper, accent, markVariant }) {
  const [subbed, setSubbed] = useS3(false);
  const cols = [
    { h: "Overview", l: [["Our mission", "#overview"], ["Three pillars", "#overview"], ["Video explainer", "#explainer"], ["Resource library", "#library"], ["Newsroom", "#newsroom"]] },
    { h: "Research", l: [["Featured research", "#research"], ["Fact sheets", "#library"], ["Congressional brief", "#library"], ["Policy recommendations", "#library"], ["Primary documents", "#research"]] },
    { h: "Resource library", l: [["The 5-Point Framework", "5-point-framework.html"], ["10 Questions to Ask", "10-questions-vso.html"], ["Congressional letter", "congressional-letter.html"], ["Veteran toolkit", "#library"], ["Helpful VA resources", "#library"]] },
    { h: "Get involved", l: [["Write to the committee", "#letter"], ["Take the survey", "#survey"], ["Share your story", "#story"], ["Watch the explainer", "#explainer"], ["Join the email list", "#subscribe"]] },
  ];
  return (
    <footer className="vdb-footer" style={{ background: ink, color: paper }}>
      <div className="vdb-container">
        <div className="vdb-footer__top">
          <div className="vdb-footer__brand">
            <Logo tone={paper} accent={accent} variant={markVariant} size="lg" />
            <p className="vdb-footer__tag">Helping veterans make informed decisions through facts, transparency, and accountability.</p>
            <p className="vdb-footer__dis">
              Veterans Deserve Better is an independent, nonpartisan research and education project. We are not affiliated with, endorsed by, or funded by the U.S. Department of Veterans Affairs or any Veterans Service Organization.
            </p>
            <div className="vdb-footer__sub" id="subscribe">
              <label htmlFor="vdb-email" className="vdb-footer__sub-l">Join the email list — one update, only when there's something documented to report.</label>
              <form className="vdb-footer__sub-row" style={{ borderColor: paper + "33" }} onSubmit={(e) => { e.preventDefault(); const fd = new FormData(e.target); submitToNetlify("subscribe", { email: fd.get("email") }); setSubbed(true); }}>
                <input id="vdb-email" name="email" type="email" required placeholder="you@example.com" style={{ color: paper }} />
                <button type="submit" style={{ background: accent, color: paper }}>{subbed ? "Subscribed" : "Subscribe"}</button>
              </form>
            </div>
          </div>
          <div className="vdb-footer__cols">
            {cols.map((c) => (
              <div key={c.h}>
                <h5 className="vdb-footer__h">{c.h}</h5>
                <ul>{c.l.map(([label, href]) => <li key={label}><a href={href} {...(href.endsWith(".html") ? { target: "_blank", rel: "noopener" } : {})}>{label}</a></li>)}</ul>
              </div>
            ))}
          </div>
        </div>
        <div className="vdb-footer__va" style={{ borderColor: paper + "1f" }} id="va-resources">
          <div>
            <span className="vdb-footer__va-k">Official VA resources</span>
            <span className="vdb-footer__va-v">
              {[["VA.gov", "https://www.va.gov"], ["VA Disability Compensation", "https://www.va.gov/disability/"], ["VA Claim Status Tool", "https://www.va.gov/claim-or-appeal-status/"], ["National Archives — military records", "https://www.archives.gov/veterans"], ["My HealtheVet", "https://www.myhealth.va.gov"]].map(([l, u], i) => (
                <React.Fragment key={l}>
                  {i > 0 && <span className="vdb-footer__va-sep"> · </span>}
                  <a href={u} target="_blank" rel="noopener">{l}</a>
                </React.Fragment>
              ))}
            </span>
          </div>
          <div className="vdb-footer__crisis" style={{ borderColor: accent }}>
            Independent and nonpartisan. Not affiliated with the VA or any VSO.
          </div>
        </div>
        <div className="vdb-footer__bottom" style={{ borderColor: paper + "22" }}>
          <span>© 2026 Veterans Deserve Better · veteransdeservebetter.info</span>
          <span className="vdb-footer__legal">
            <a href="privacy.html" target="_blank" rel="noopener">Privacy</a><a href="mailto:info@veteransdeservebetter.info">Contact</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ResourceLibrary, Research, Newsroom, Social, VideoExplainer, Footer, RESOURCES });