// FOOTER, final CTA, masthead, fine print

function Footer() {
  return (
    <footer className="rule-top" style={{ paddingBlock: "clamp(80px, 11vw, 140px)", position: "relative", overflow: "hidden" }}>
      <div style={{ marginBottom: 64 }}>
        <Marquee2 />
      </div>

      <div className="page">
        <div className="grid-12" style={{ alignItems: "end", marginBottom: 56 }}>
          <div style={{ gridColumn: "span 8" }}>
            <h2 className="h-display display" style={{ margin: 0, fontSize: "clamp(56px, 9vw, 144px)" }}>
              The map.<br/>
              <em>Free</em> at the door.
            </h2>
          </div>
          <div style={{ gridColumn: "span 4" }}>
            <div className="pricing-cta-bar pricing-cta-bar-footer">
              <JoinCta href={PU_LINKS.free} sub="Free Skool community">
                Join free on Skool
              </JoinCta>
              <JoinCta href={PU_LINKS.plus} variant="ghost" sub="$99/mo · cancel anytime">
                Start the Roadmap
              </JoinCta>
            </div>
          </div>
        </div>

        <div className="grid-12" style={{ paddingTop: 48, borderTop: "1px solid var(--rule-strong)", 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 }}>Vol. 01 · Issue 06 · The Map</p>
            <p className="caption" style={{ marginTop: 4 }}>producerunion.org</p>
          </div>

          <FooterCol title="Sections" items={["The Map", "Four Hurdles", "Money Flow", "Your Numbers", "The Playbook"]} />
          <FooterCol
            title="Membership"
            links={[
              { label: "Free community", href: PU_LINKS.free },
              { label: "Producer Union Plus", href: PU_LINKS.plus },
            ]}
          />
          <FooterCol title="Find us" items={["Instagram", "YouTube", "X / Twitter", "TikTok"]} />
        </div>

        <div className="grid-12" style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid var(--rule)", alignItems: "baseline" }}>
          <span className="caption" style={{ gridColumn: "span 6" }}>
            © 2026 Producer Union · Nothing on this page is legal advice · Get a music attorney
          </span>
          <span className="caption" style={{ gridColumn: "span 6", textAlign: "right" }}>
            Designed in long sessions · Set in Space Grotesk, Hanken Grotesk, Instrument Serif, JetBrains Mono
          </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>
  );
}

function Marquee2() {
  const items = ["Join the map", "★", "Stop guessing", "★", "Quote the standard", "★", "Collect what's yours", "★", "Producer Union", "★"];
  return (
    <div className="marquee">
      <div className="marquee__track" style={{ animationDuration: "40s" }}>
        {items.concat(items).concat(items).map((it, i) => (
          <span key={i} style={{
            fontFamily: "var(--sans)",
            fontWeight: 800,
            fontSize: "clamp(56px, 9vw, 144px)",
            letterSpacing: "-0.035em",
            color: it === "★" ? "var(--gold)" : "var(--ink)",
            opacity: it === "★" ? 1 : 0.95,
            whiteSpace: "nowrap",
          }}>
            {it}
          </span>
        ))}
      </div>
    </div>
  );
}

window.Footer = Footer;