/* Veterans Deserve Better — brand primitives: logo system, marks, placeholders */
const { useState: useStateB } = React;

/* ---------- BRAND MARK — "Rank" ----------
   Three nested chevrons weighted so the eye climbs: the NCO service stripe every
   veteran reads instantly. The top stripe carries the accent — the one still being earned.

   Three size cuts, auto-selected, because three strokes converge and muddy when small:
     rank    (3 stripes, full fade)  — 28px and up
     compact (2 stripes, heavier)    — 20-27px
     single  (1 stripe + accent bar) — 19px and under / favicon
------------------------------------------- */
function BrandMark({ size = 36, tone = "currentColor", accent, variant = "auto", title }) {
  const a = accent || tone;
  const cut = variant === "auto" ? (size <= 19 ? "single" : size <= 27 ? "compact" : "rank") : variant;
  const common = { width: size, height: size, viewBox: "0 0 48 48", className: "vdb-mark__svg", "aria-hidden": title ? undefined : true, role: title ? "img" : undefined };
  const S = { fill: "none", strokeLinejoin: "miter", strokeLinecap: "butt" };

  if (cut === "single") {
    return (
      <svg {...common}>{title && <title>{title}</title>}
        <path d="M8 30 L24 12 L40 30" {...S} stroke={tone} strokeWidth="6.4" />
        <path d="M12 40 H36" stroke={a} strokeWidth="5.4" strokeLinecap="butt" />
      </svg>
    );
  }
  if (cut === "compact") {
    return (
      <svg {...common}>{title && <title>{title}</title>}
        <path d="M10 22 L24 8 L38 22" {...S} stroke={a} strokeWidth="4.8" />
        <path d="M10 40 L24 26 L38 40" {...S} stroke={tone} strokeWidth="5.4" />
      </svg>
    );
  }
  return (
    <svg {...common}>{title && <title>{title}</title>}
      <path d="M11 21 L24 9 L37 21" {...S} stroke={a} strokeWidth="3.2" />
      <path d="M11 30 L24 18 L37 30" {...S} stroke={tone} strokeWidth="3.6" opacity="0.55" />
      <path d="M11 39 L24 27 L37 39" {...S} stroke={tone} strokeWidth="4" />
    </svg>
  );
}

/* ---------- LOCKUP ----------
   Stacked: the masthead block — three lines of tracked caps closed by an accent rule.
   Inline: the byline cut — one tracked line, for footers, press headers, wide banners.
---------------------------------------- */
function Logo({ tone = "currentColor", accent, variant = "auto", size = "md", href = "#top", stacked = true }) {
  const dims = { sm: 26, md: 36, lg: 50, xl: 78 }[size] || 36;
  return (
    <a href={href} className={`vdb-logo vdb-logo--${size} ${stacked ? "" : "vdb-logo--inline"}`} style={{ color: tone }} aria-label="Veterans Deserve Better — home">
      <BrandMark size={stacked ? dims : Math.round(dims * 0.8)} tone={tone} accent={accent} variant={variant} />
      {stacked ? (
        <span className="vdb-logo__type">
          <i>Veterans</i><i>Deserve</i><i>Better</i>
          <span className="vdb-logo__rule" style={{ background: accent || tone }} />
        </span>
      ) : (
        <span className="vdb-logo__line">Veterans Deserve Better</span>
      )}
    </a>
  );
}

/* ---------- IMAGE SLOT (photo w/ captioned fallback) ---------- */
function Figure({ label, ratio = "3/2", src, className = "", style = {}, tone = "dim" }) {
  const [bad, setBad] = useStateB(false);
  const ok = src && !bad;
  return (
    <div className={`vdb-fig ${ok ? "vdb-fig--photo" : ""} vdb-fig--${tone} ${className}`} style={{ aspectRatio: ratio, ...style }} role="img" aria-label={label}>
      {ok
        ? <img src={src} alt={label} loading="lazy" onError={() => setBad(true)} className="vdb-fig__img" />
        : <span className="vdb-fig__label">{label}</span>}
    </div>
  );
}

/* ---------- Small shared bits ---------- */
function Eyebrow({ children, accent, className = "" }) {
  return (
    <span className={`vdb-eyebrow ${className}`} style={{ color: accent }}>
      <span className="vdb-eyebrow__bar" style={{ background: accent }} />
      {children}
    </span>
  );
}

function Arrow({ s = 13 }) {
  return <svg viewBox="0 0 16 16" width={s} height={s} aria-hidden="true"><path d="M2 8 H13 M9 4 L13 8 L9 12" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="butt" strokeLinejoin="miter" /></svg>;
}

function DownloadIcon({ s = 14 }) {
  return <svg viewBox="0 0 16 16" width={s} height={s} aria-hidden="true"><path d="M8 2 V10 M4.5 7 L8 10.5 L11.5 7 M2.5 13.5 H13.5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="butt" strokeLinejoin="miter" /></svg>;
}

/* Source citation chip — every factual claim carries one */
function Source({ children, href = "#", accent }) {
  return (
    <a className="vdb-source" href={href} style={{ borderColor: accent }}>
      <span className="vdb-source__i" style={{ color: accent }}>§</span>
      {children}
    </a>
  );
}

Object.assign(window, { BrandMark, Logo, Figure, Eyebrow, Arrow, DownloadIcon, Source });