function HpFooter() {
  return (
    <footer id="reach" style={{ background: "var(--ink)", color: "var(--cream)", padding: "128px 32px 40px" }}>
      <div className="hp-container">
        {/* CTA line, in-footer */}
        <div className="hp-footer-cta">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 500,
            fontSize: "clamp(36px, 6vw, 88px)", lineHeight: 0.96,
            letterSpacing: "-0.05em", margin: 0, color: "var(--cream)",
            maxWidth: "14ch",
          }}>
            <span style={{ fontWeight: 200 }}>Got an offer?</span>{" "}
            <span style={{ position: "relative", display: "inline-block" }}>
              Let's run it.
              <span style={{ position: "absolute", left: 0, bottom: -6, width: "100%", height: 5, background: "var(--coral)" }} />
            </span>
          </h2>
          <div style={{ justifySelf: "start" }}>
            <a href="contact.html" className="hp-btn hp-btn--coral">Get in touch →</a>
          </div>
        </div>

        {/* Footer columns */}
        <div className="hp-grid hp-grid-footer" style={{ padding: "64px 0" }}>
          <div>
            <img src="assets/lockup-coral-accent.png" alt="ScaleMedia" style={{ width: 320, maxWidth: "100%", display: "block" }}/>
            <p style={{ fontFamily: "var(--font-display)", fontSize: 15, lineHeight: 1.55, color: "oklch(0.78 0.008 60)", marginTop: 24, maxWidth: "36ch", letterSpacing: "-0.01em" }}>
              Performance affiliate marketing. Nutra, digital products, and pay-per-call insurance. 2× ClickBank Platinum · $1M+ in tested ad spend.
            </p>
          </div>

          <FooterCol heading="Studio" links={[
            { label: "Verticals", href: "index.html#verticals" },
            { label: "Process",   href: "index.html#process"   },
            { label: "Reach",     href: "index.html#reach"     },
            { label: "Submit your offer", href: "contact.html?type=offer" },
          ]}/>

          <FooterCol heading="Reach" links={[
            { label: "Brief →",                  href: "contact.html"                },
            { label: "admin@scalemediallc.com",  href: "mailto:admin@scalemediallc.com" },
            { label: "scalemediallc.com",        href: "https://scalemediallc.com", external: true },
          ]}/>

          <FooterCol heading="Networks" links={[
            { label: "ClickBank · 2× Platinum",  href: "https://www.clickbank.com",          external: true },
            { label: "Digistore24",              href: "https://www.digistore24.com",        external: true },
            { label: "Buygoods",                 href: "https://www.buygoods.com",           external: true },
            { label: "Maxweb",                   href: "https://maxweb.com",                 external: true },
            { label: "MarketCall",               href: "https://www.marketcall.com",         external: true },
            { label: "Aragon Advertising",       href: "https://www.aragon-advertising.com", external: true },
            { label: "Ray Advertising",          href: "https://www.rayadvertising.com",     external: true },
          ]}/>
        </div>

        {/* Legal pill buttons */}
        <div className="hp-legal-row">
          <a href="privacy.html"      className="hp-legal-link">Privacy Policy</a>
          <a href="terms.html"        className="hp-legal-link">Terms &amp; Conditions</a>
          <a href="descriptions.html" className="hp-legal-link">Descriptions</a>
        </div>

        <div style={{
          borderTop: "1px solid oklch(0.30 0.005 60)", paddingTop: 24, marginTop: 32,
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em",
          textTransform: "uppercase", color: "oklch(0.72 0.005 60)",
          flexWrap: "wrap", gap: 12,
        }}>
          <span>© Scale Media LLC · scalemediallc.com</span>
          <span>2× ClickBank Platinum · Built to compound</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ heading, links }) {
  return (
    <div>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "oklch(0.72 0.005 60)" }}>
        {heading}
      </span>
      <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map(item => (
          <li key={item.label} style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--cream)", letterSpacing: "-0.01em" }}>
            {item.href ? (
              <a
                href={item.href}
                {...(item.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                className="hp-footer-link"
              >
                {item.label}
              </a>
            ) : (
              <span>{item.label}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

window.HpFooter = HpFooter;