/* Veterans Deserve Better — top of page: stripe, header, hero, pillars, standards */
const { useState: useS1 } = React;

function UtilityStripe({ ink, paper, accent }) {
  return (
    <div className="vdb-stripe" style={{ background: ink, color: paper }}>
      <div className="vdb-container vdb-stripe__row">
        <span className="vdb-stripe__lead">
          <span className="vdb-stripe__dot" style={{ background: accent }} />
          Nonpartisan. Independent. Every claim on this site is tied to a public source.
        </span>
        <span className="vdb-stripe__links">
          <a href="#newsroom">Press &amp; media</a>
          <span className="vdb-stripe__sep">/</span>
          <a href="#library">Free resources</a>
        </span>
      </div>
    </div>
  );
}

function Header({ ink, paper, accent, markVariant }) {
  const [open, setOpen] = useS1(null);
  const [mob, setMob] = useS1(false);
  const items = [
    { label: "Overview", id: "overview", children: [["Our mission", "#overview"], ["Watch the explainer", "#explainer"], ["The five-point framework", "5-point-framework.html"], ["Three pillars", "#overview"], ["How we source our work", "#overview"]] },
    { label: "Research", id: "research", children: [["Featured research", "#research"], ["Fact sheets", "#library"], ["Congressional brief", "#library"], ["Policy recommendations", "#library"], ["Primary documents", "#research"]] },
    { label: "Resource Library", id: "library", children: [["5-Point Due Diligence Checklist", "5-point-framework.html"], ["10 Questions Before Choosing a VSO", "10-questions-vso.html"], ["Congressional letter template", "congressional-letter.html"], ["Veteran toolkit (all files)", "#library"]] },
    { label: "Newsroom", id: "newsroom", children: [["Press releases", "#newsroom"], ["Media statements", "#newsroom"], ["Press coverage", "#newsroom"], ["Media contact", "#newsroom"]] },
    { label: "Get Involved", id: "campaign", children: [["Write to the Veterans' Affairs Committee", "#letter"], ["Take the veterans' survey", "#survey"], ["Share your story", "#story"], ["Share our content", "#social"], ["Join the email list", "#subscribe"]] },
  ];
  return (
    <header className="vdb-header" style={{ color: ink }}>
      <div className="vdb-container vdb-header__row">
        <Logo tone={ink} accent={accent} variant={markVariant} />
        <nav className="vdb-nav" aria-label="Primary">
          {items.map((it) => (
            <div key={it.id} className="vdb-nav__item" onMouseEnter={() => setOpen(it.id)} onMouseLeave={() => setOpen(null)}>
              <a href={`#${it.id}`} className="vdb-nav__link">
                {it.label}
                <span className="vdb-nav__chev" aria-hidden>▾</span>
              </a>
              {open === it.id && (
                <div className="vdb-nav__menu" style={{ background: paper, borderColor: ink + "26" }}>
                  {it.children.map(([label, href]) => (
                    <a key={label} href={href} className="vdb-nav__menu-link" {...(href.endsWith(".html") ? { target: "_blank", rel: "noopener" } : {})}>{label}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
        <div className="vdb-header__cta">
          <a href="#letter" className="vdb-btn vdb-btn--solid" style={{ background: ink, color: paper }}>Write the letter</a>
          <button className="vdb-iconbtn vdb-header__burger" onClick={() => setMob(!mob)} aria-label="Menu" style={{ borderColor: ink + "26", color: ink }}>
            <svg viewBox="0 0 20 20" width="16" height="16"><path d="M3 6 H17 M3 10 H17 M3 14 H17" stroke="currentColor" strokeWidth="1.6" /></svg>
          </button>
        </div>
      </div>
      {mob && (
        <div className="vdb-header__mob" style={{ borderColor: ink + "1a" }}>
          <div className="vdb-container vdb-header__mob-inner">
            {items.map((it) => <a key={it.id} href={`#${it.id}`} onClick={() => setMob(false)}>{it.label}</a>)}
          </div>
        </div>
      )}
    </header>
  );
}

function Hero({ ink, paper, accent, markVariant }) {
  return (
    <section className="vdb-hero" id="top">
      <div className="vdb-container">
        <div className="vdb-hero__grid">
          <div className="vdb-hero__copy">
            <Eyebrow accent={accent}>An independent veterans research project</Eyebrow>
            <h1 className="vdb-display">
              Veterans deserve facts.<br />
              Veterans deserve <em>transparency.</em>
            </h1>
            <p className="vdb-hero__lede">
              Today's veterans deserve accurate information, trustworthy resources, and organizations that meet the needs of a changing military community. Our mission is to provide documented information, educational resources, and tools that help veterans make informed decisions.
            </p>
            <div className="vdb-hero__ctas">
              <a href="#library" className="vdb-btn vdb-btn--solid vdb-btn--lg" style={{ background: ink, color: paper }}>
                <DownloadIcon />Download the Veteran Toolkit
              </a>
              <a href="#research" className="vdb-btn vdb-btn--outline vdb-btn--lg" style={{ color: ink, borderColor: ink + "38" }}>Read the research</a>
              <a href="#letter" className="vdb-btn vdb-btn--text vdb-btn--lg" style={{ color: ink }}>
                Write to the Veterans' Affairs Committee<Arrow />
              </a>
            </div>
            <p className="vdb-hero__tagline" style={{ borderColor: accent }}>
              Helping veterans make informed decisions through <strong>facts</strong>, <strong>transparency</strong>, and <strong>accountability</strong>.
            </p>
          </div>
          <div className="vdb-hero__art">
            <Figure ratio="4/5" label="DOCUMENTARY PHOTO — veteran reviewing printed records at a desk, available light, unposed" src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1000&q=80&auto=format&fit=crop" />
            <div className="vdb-hero__note" style={{ background: ink, color: paper, borderColor: accent }}>
              <div className="vdb-hero__note-eyebrow" style={{ color: accent }}>Sourcing standard</div>
              <p className="vdb-hero__note-body">
                Every factual claim published here is backed by a public source — a filing, audit, court record, government document, or published report. Nothing is asserted without a citation.
              </p>
              <a href="#library" className="vdb-hero__note-link">See the source documents<Arrow s={11} /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pillars({ ink, paper, accent }) {
  const items = [
    { n: "01", t: "Transparency", d: "Helping veterans understand how organizations operate — governance, finances, and who is accountable to whom.", links: ["How to read an IRS Form 990", "Governance explainer"] },
    { n: "02", t: "Accountability", d: "Surfacing documented information that informs public discussion, sourced to filings, audits, and government records.", links: ["Document archive", "Congressional brief"] },
    { n: "03", t: "Empowerment", d: "Giving veterans practical tools to navigate VA benefits and choose representation with confidence.", links: ["The 5-point framework", "10 questions to ask"] },
  ];
  return (
    <section className="vdb-pillars" id="overview">
      <div className="vdb-container">
        <div className="vdb-sechead">
          <Eyebrow accent={accent}>What we do</Eyebrow>
          <h2 className="vdb-h2">Three pillars hold up everything we publish.</h2>
        </div>
        <div className="vdb-pillars__grid" style={{ borderColor: ink + "1f" }}>
          {items.map((p) => (
            <article key={p.n} className="vdb-pillar" style={{ borderColor: ink + "1f" }}>
              <div className="vdb-pillar__num" style={{ color: accent }}>{p.n}</div>
              <h3 className="vdb-pillar__t">{p.t}</h3>
              <p className="vdb-pillar__d">{p.d}</p>
              <ul className="vdb-pillar__links">
                {p.links.map((l) => <li key={l}><a href="#library">{l}<Arrow s={11} /></a></li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { UtilityStripe, Header, Hero, Pillars });