const Footer = ({ dark = false }) => {
  const bg = dark ? "var(--ink-950)" : "var(--paper)";
  const fg = dark ? "var(--paper)" : "var(--ink-900)";
  const muted = dark ? "rgba(250,248,244,0.55)" : "var(--fg-muted)";
  const border = dark ? "rgba(250,248,244,0.08)" : "var(--border)";

  const services = [
    ["Programmatic Advertising", "programmatic.html"],
    ["CTV Advertising", "ctv.html"],
    ["Mobile Development", "mobile-development.html"],
    ["Cloud Computing", "cloud-computing.html"],
  ];
  const company = [
    ["About", "about.html"],
    ["Apps", "apps.html"],
    ["Contact", "contact.html"],
  ];
  const legal = [
    ["Privacy", "privacy.html"],
    ["Terms", "terms.html"],
    ["Security", "security.html"],
    ["Cookies", "cookies.html"],
  ];

  const colHead = {
    fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
    color: muted, fontWeight: 600, marginBottom: 18,
    fontFamily: "var(--font-mono)",
  };
  const colLink = {
    fontSize: 14, color: fg, opacity: 0.82, textDecoration: "none",
    display: "block", padding: "6px 0", transition: "opacity 160ms",
  };

  return (
    <footer style={{ background: bg, color: fg, padding: "clamp(56px, 9vw, 96px) clamp(16px, 4vw, 48px) 40px", borderTop: `1px solid ${border}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>

        {/* Top: brand + columns */}
        <div className="footer-grid" style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr 1fr 1fr",
          gap: "clamp(24px, 4vw, 56px)",
          paddingBottom: "clamp(38px, 6vw, 64px)",
          alignItems: "start",
        }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <img src="assets/logo/adopsify-mark.png" style={{ height: 36 }} alt=""/>
              <span style={{
                fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 400,
                letterSpacing: "-0.02em", color: fg, lineHeight: 1,
              }}>
                AdOpsify<span style={{ color: "var(--brand-violet)", fontStyle: "italic" }}>.</span>
              </span>
            </div>
            <p style={{ marginTop: 22, fontSize: 15, color: muted, maxWidth: 380, lineHeight: 1.6 }}>
              Performance-led ad ops & engineering. We plan, buy, build, and operate
              digital media and software for brands that measure the work.
            </p>
          </div>

          <div>
            <div style={colHead}>Services</div>
            {services.map(([label, href]) => (
              <a key={label} href={href} style={colLink}
                onMouseEnter={e => e.currentTarget.style.opacity = "1"}
                onMouseLeave={e => e.currentTarget.style.opacity = "0.82"}
              >{label}</a>
            ))}
          </div>

          <div>
            <div style={colHead}>Company</div>
            {company.map(([label, href]) => (
              <a key={label} href={href} style={colLink}
                onMouseEnter={e => e.currentTarget.style.opacity = "1"}
                onMouseLeave={e => e.currentTarget.style.opacity = "0.82"}
              >{label}</a>
            ))}
          </div>

          <div>
            <div style={colHead}>Legal</div>
            {legal.map(([label, href]) => (
              <a key={label} href={href} style={colLink}
                onMouseEnter={e => e.currentTarget.style.opacity = "1"}
                onMouseLeave={e => e.currentTarget.style.opacity = "0.82"}
              >{label}</a>
            ))}
          </div>
        </div>

        {/* Big wordmark */}

        {/* Bottom bar */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingTop: 28, borderTop: `1px solid ${border}`,
          fontSize: 13, color: muted,
          flexWrap: "wrap", gap: 16,
        }}>
          <span>© 2026 AdOpsify LLC. All rights reserved.</span>
          <a href="https://x.com/adOpsifyLLC" target="_blank" rel="noopener noreferrer" aria-label="Follow @adOpsifyLLC"
            style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "10px 16px", borderRadius: 9999,
              background: dark ? "rgba(250,248,244,0.08)" : "var(--ink-900)",
              color: "var(--paper)",
              border: dark ? "1px solid rgba(250,248,244,0.12)" : "1px solid var(--ink-900)",
              fontSize: 13, fontWeight: 500, textDecoration: "none",
              transition: "transform 180ms",
            }}
            onMouseEnter={e => e.currentTarget.style.transform = "translateY(-1px)"}
            onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M18.244 2H21l-6.53 7.457L22 22h-6.31l-4.94-6.46L5.1 22H2.34l6.99-7.98L2 2h6.46l4.46 5.89L18.24 2zm-1.106 18h1.72L7.01 4H5.18L17.14 20z"/>
            </svg>
            @adOpsifyLLC
          </a>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;