function Footer() {
  const cols = [
    {
      title: "Product",
      links: [
        { label: "Features",              href: "#product" },
        { label: "Pricing",               href: "#pricing" },
        { label: "Start selling tickets", href: "signup.html",  cls: "js-signup-trigger" },
        { label: "Schedule a demo",       href: "schedule.html" },
        { label: "Sign in",               href: "https://app.primoticketing.com/login", target: "_blank" },
      ]
    },
    {
      title: "Solutions",
      links: [
        { label: "For Cheer & Dance",    href: "#cheer-dance" },
        { label: "Allstar Comps",        href: "#cheer-dance" },
        { label: "Dance Competitions",   href: "#cheer-dance" },
        { label: "School & Collegiate",  href: "#cheer-dance" },
        { label: "Showcases & Recitals", href: "#cheer-dance" },
      ]
    },
    {
      title: "Resources",
      links: [
        { label: "Why Primo", href: "#why-primo" },
        { label: "FAQs",      href: "#faq" },
      ]
    },
    {
      title: "Company",
      links: [
        { label: "About",           href: "#why-primo" },
        { label: "Contact support", href: "contact.html" },
        { label: "Sign in",         href: "https://app.primoticketing.com/login", target: "_blank" },
      ]
    },
  ];

  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div>
              <img src="assets/primo-logo.png" alt="Primo Ticketing" style={{ height: 48, width: "auto", display: "block" }} />
            </div>
            <p>Tickets simplified. Built for cheer &amp; dance producers — from Durango, Colorado.</p>
            <div style={{marginTop:24, display:"flex", gap:12}}>
              <a href="#" aria-label="Facebook" style={{color:"var(--text-on-dark-2)"}}><Icon name="globe" size={18}/></a>
              <a href="#" aria-label="Instagram" style={{color:"var(--text-on-dark-2)"}}><Icon name="heart" size={18}/></a>
              <a href="#" aria-label="YouTube" style={{color:"var(--text-on-dark-2)"}}><Icon name="play" size={18}/></a>
              <a href="#" aria-label="LinkedIn" style={{color:"var(--text-on-dark-2)"}}><Icon name="linkedin" size={18}/></a>
            </div>
          </div>
          {cols.map(c => (
            <div className="footer-col" key={c.title}>
              <h5>{c.title}</h5>
              <ul>
                {c.links.map(l => (
                  <li key={l.label}>
                    <a href={l.href} target={l.target} className={l.cls}>{l.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>© 2026 Primo Ticketing, Inc. · All rights reserved.</div>
          <div style={{display:"flex", gap:24}}>
            <a href="terms.html" target="_blank" rel="noopener">Terms &amp; Conditions</a>
            <a href="privacy.html" target="_blank" rel="noopener">Privacy Policy</a>
            <a href="#" style={{display:"inline-flex", alignItems:"center", gap:6}}><Icon name="shield" size={14}/> PCI Level 4 compliant</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;