/* Hometown Anchor — site shell: holding-page header + legal footer.
   Header: navy band, reversed mark + wordmark, no menu, one quiet Contact link.
   Footer: deepest navy, Paid-for line, c4 disclosure, legal links, contact, ©. */

function SiteHeader({ homeHref = "index.html", contactHref = "index.html#contact" }) {
  const [hover, setHover] = React.useState(false);
  return (
    <header style={{ background: "var(--header-bg)", color: "var(--color-text-on-inverse)", position: "sticky", top: 0, zIndex: 50 }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 32px", height: 76, display: "flex", alignItems: "center", gap: 24 }}>
        <a href={homeHref} aria-label="Hometown Anchor — home" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
          <HomesMark variant="reversed" width={40} />
          <Wordmark onDark size="1rem" />
        </a>
        <a href={contactHref}
          onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
          style={{
            marginLeft: "auto", fontFamily: "var(--font-display)", fontWeight: 600,
            fontSize: ".78rem", letterSpacing: ".1em", textTransform: "uppercase",
            textDecoration: "none", color: hover ? "#ffffff" : "#cdd8e2",
            borderBottom: hover ? "2px solid #f4efe6" : "2px solid transparent",
            paddingBottom: 3, transition: "color var(--duration-base)",
          }}>Contact</a>
      </div>
    </header>
  );
}

function SiteFooter() {
  const year = new Date().getFullYear();
  const links = [
    { label: "Privacy Policy", href: "privacy.html" },
    { label: "SMS Terms", href: "sms-terms.html" },
    { label: "Terms of Service", href: "terms.html" },
    { label: "Submit a Privacy Request", href: "privacy-request.html" },
  ];
  const [hi, setHi] = React.useState(-1);
  return (
    <footer style={{ background: "var(--footer-bg)", color: "#cdd8e2" }}>
      <div style={{ maxWidth: 1040, margin: "0 auto", padding: "0 32px" }}>
        <Roofline color="#123a5e" height={10} width="100%" stroke={1.5} />
      </div>
      <div style={{ maxWidth: 1040, margin: "0 auto", padding: "44px 32px 52px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
          <HomesMark variant="reversed" width={40} />
          <Wordmark onDark size="1rem" />
        </div>

        <p style={{
          margin: "0 0 6px", fontFamily: "var(--font-display)", fontWeight: 800,
          textTransform: "uppercase", letterSpacing: ".04em", fontSize: ".95rem", color: "#f4efe6",
        }}>Paid for by Hometown Anchor, Inc.</p>
        <p style={{ margin: "0 0 28px", fontSize: ".9rem", lineHeight: 1.6, color: "#9fb0c0", maxWidth: "60ch" }}>
          Hometown Anchor, Inc. is a 501(c)(4) social welfare organization.
        </p>

        <nav aria-label="Legal" style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0 0", marginBottom: 24 }}>
          {links.map((l, i) => (
            <React.Fragment key={l.href}>
              {i > 0 && <span aria-hidden="true" style={{ color: "#3a5675", padding: "0 14px" }}>·</span>}
              <a href={l.href}
                onMouseEnter={() => setHi(i)} onMouseLeave={() => setHi(-1)}
                style={{
                  fontFamily: "var(--font-display)", fontWeight: 600, fontSize: ".8rem",
                  letterSpacing: ".04em", textTransform: "uppercase", textDecoration: "none",
                  color: hi === i ? "#ffffff" : "#cdd8e2", transition: "color var(--duration-base)",
                }}>{l.label}</a>
            </React.Fragment>
          ))}
        </nav>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: "10px 24px", borderTop: "1px solid #123a5e", paddingTop: 22 }}>
          <a href="mailto:info@hometownanchor.org" style={{ fontSize: ".88rem", color: "#cdd8e2", textDecoration: "none" }}>info@hometownanchor.org</a>
          <p style={{ margin: 0, fontSize: ".78rem", color: "#6f8aa6" }}>© {year} Hometown Anchor, Inc.</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter });