// FOOTER, final CTA, masthead, fine print

function Footer() {
  return (
    <footer className="rule-top" style={{ paddingBlock: "clamp(48px, 6vw, 88px)", position: "relative", overflow: "hidden" }}>
      <div className="page">
        <div className="grid-12" style={{ gap: 32 }}>
          <div style={{ gridColumn: "span 4" }}>
            <div style={{ fontFamily: "var(--sans)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em", color: "var(--ink)" }}>
              Producer<span style={{ color: "var(--gold)" }}>•</span>Union
            </div>
            <p className="caption" style={{ marginTop: 12 }}>producerunion.org</p>
          </div>

          <FooterCol title="Sections" items={["The Map", "Four Hurdles", "Money Flow", "Your Numbers", "The Playbook", "Resources"]} />
          <FooterCol
            title="Membership"
            links={[
              { label: "Free community", href: PU_LINKS.free },
              { label: "Producer Union Plus", href: PU_LINKS.plus },
            ]}
          />
          <FooterCol title="Find us" links={[
            { label: "Instagram", href: "https://www.instagram.com/halfwaysm" },
            { label: "YouTube", href: "https://www.youtube.com/@halfwaysm" },
          ]} />
        </div>

        <div className="grid-12" style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--rule)", alignItems: "baseline" }}>
          <span className="caption" style={{ gridColumn: "span 12" }}>
            © 2026 Producer Union · Nothing on this page is legal advice · Get a music attorney
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, links }) {
  return (
    <div style={{ gridColumn: "span 2" }} className="hide-mobile">
      <span className="caption">{title}</span>
      <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
        {links ? links.map((l) => (
          <li key={l.label}>
            <a
              href={l.href}
              target="_blank"
              rel="noopener noreferrer"
              className="footer-link"
            >
              {l.label}
            </a>
          </li>
        )) : items.map((it) => (
          <li key={it} className="footer-link footer-link-static">{it}</li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;