// Footer — paper background, with Dividend + FVP partner cards + Ignited Government link

const Footer = () => {
  return (
    <footer className="r-footer" style={{ background: "var(--paper)", padding: "80px 0 32px", borderTop: "1px solid var(--rule)" }}>
      <div className="container">
        {/* Massive horizontal logo row */}
        <div style={{ margin: "0 0 40px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32 }}>
          <img
            src="assets/ignited-horizontal.png"
            alt="Ignited"
            className="r-footer-mark"
            style={{ width: "62%", maxWidth: 880, height: "auto", display: "block" }}
          />
          <span className="mono r-footer-tag" style={{ color: "var(--muted)", paddingBottom: 12, whiteSpace: "nowrap" }}>
            ↳ {copyText("shared.footer.tagline")}
          </span>
        </div>

        <div className="r-grid-footer" style={{ borderTop: "1px solid var(--rule-strong)", paddingTop: 40, display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 48 }}>
          <div>
            <PillButton as="a" href="Subpages.html#contact" variant="blue" size="md">{copyText("shared.footer.contact_button")} <ArrowUpRight size={12} /></PillButton>
            <div style={{ marginTop: 28, fontSize: 13, lineHeight: 1.7, color: "var(--muted)" }}>
              {copyText("shared.footer.address_line1")}<br/>
              {copyText("shared.footer.address_line2")}
            </div>
            <div style={{ marginTop: 16, fontSize: 13, lineHeight: 1.7, color: "var(--ink)" }}>
              {copyText("shared.footer.phone_new_label")} · <a href="tel:3107733196" style={{ color: "var(--blue)" }}>{copyText("shared.footer.phone_new")}</a><br/>
              {copyText("shared.footer.phone_gen_label")} · <a href="tel:3107733100" style={{ color: "var(--blue)" }}>{copyText("shared.footer.phone_gen")}</a>
            </div>
          </div>

          <FooterCol title="Company" items={[
            { label: "About",    href: "Subpages.html#history" },
            { label: "The Team", href: "Subpages.html#leadership" },
            { label: "Newsroom", href: "Subpages.html#newsroom" },
            { label: "Careers",  href: "Subpages.html#careers" },
            { label: "Contact",  href: "Subpages.html#contact" },
          ]} />
          <FooterCol title="Connect" items={[
            { label: "LinkedIn", href: "https://www.linkedin.com/company/ignited/" },
            { label: "YouTube",  href: "https://www.youtube.com/channel/UCg_b7KijhkibZENumLODDZw" },
          ]} />

          <div className="r-grid-partner-cards" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12 }}>
            <PartnerCard
              href="https://gov.ignitedusa.com"
              tag="Visit ↗"
              sub={"Public sector\npractice"}
              logo={
                <img
                  src="assets/ignited-government.png"
                  alt="Ignited Government"
                  style={{ maxHeight: 140, maxWidth: "100%", width: "auto", height: "auto", objectFit: "contain", display: "block" }}
                />
              }
            />
          </div>
        </div>

        <div className="r-footer-bottom" style={{ marginTop: 60, paddingTop: 24, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--muted)" }}>
          <span className="mono">{copyText("shared.footer.copyright")}</span>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="Subpages.html#privacy" className="mono">Privacy</a>
            <a href="Subpages.html#terms" className="mono">Terms</a>
            <a href="Subpages.html#accessibility" className="mono">Accessibility</a>
          </div>
          <button onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} className="mono" style={{
            background: "transparent", border: "1px solid var(--rule-strong)",
            padding: "8px 14px", borderRadius: 99, color: "var(--ink)",
          }}>
            Back to top ↑
          </button>
        </div>
      </div>
    </footer>
  );
};

const FooterCol = ({ title, items }) => (
  <div>
    <div className="mono" style={{ color: "var(--muted)", marginBottom: 16 }}>{title}</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((it, idx) => {
        const item = typeof it === "string" ? { label: it, href: "#" } : it;
        return (
          <a key={idx} href={item.href || "#"} style={{ fontSize: 14, color: "var(--ink)", display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 4, height: 4, borderRadius: 99, background: "var(--blue)", opacity: 0.6 }}></span>
            {item.label}
          </a>
        );
      })}
    </div>
  </div>
);

const PartnerCard = ({ name, sub, tag, logo, href }) => (
  <a href={href || "#"} target={href ? "_blank" : undefined} rel={href ? "noopener noreferrer" : undefined} style={{
    border: "1px solid #231F20",
    padding: 16,
    background: "#231F20",
    color: "white",
    aspectRatio: "1 / 1",
    display: "grid",
    gridTemplateRows: "auto 1fr auto",
    gap: 8,
  }}>
    <div className="mono" style={{ color: "var(--muted-on-dark)", fontSize: 10, lineHeight: 1.3, minHeight: "2.6em", whiteSpace: "pre-line" }}>{sub}</div>
    <div style={{ display: "grid", placeItems: "center", minHeight: 0 }}>
      {logo ? logo : (
        <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 22, letterSpacing: "-0.015em" }}>{name}</div>
      )}
    </div>
    <div className="mono" style={{ color: "var(--blue)", fontSize: 10 }}>{tag}</div>
  </a>
);

window.Footer = Footer;