function SiteFooter({ onNavigate }) {
  const { Divider } = window.CedarHollowWineryDesignSystem_a59a90;
  const cols = [
    { title: "Wine", links: [
      { label: "Current Release", route: "shop" },
      { label: "Library", route: "shop" },
      { label: "All bottles", route: "shop" },
      { label: "Shipping", route: "shop" },
    ] },
    { title: "Visit", links: [
      { label: "Tasting Room", route: "visit" },
      { label: "Vineyard Walk", route: "visit" },
      { label: "Private Events", route: "visit" },
      { label: "Find us", route: "visit" },
    ] },
    { title: "Club", links: [
      { label: "Cellar Door", route: "club" },
      { label: "Reserve Society", route: "club" },
      { label: "Library Society", route: "club" },
      { label: "Member Login", route: "club" },
    ] },
    { title: "Company", links: [
      { label: "Story", route: "story" },
      { label: "Contact Us", href: "mailto:hello@cedarhollow.com" },
      { label: "Careers", route: "careers" },
    ] },
  ];

  return (
    <footer style={{
      background: "var(--color-charcoal)",
      color: "var(--text-on-dark)",
      padding: "80px 32px 40px",
      marginTop: 96,
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr repeat(4, 1fr)", gap: 48, marginBottom: 64 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <img src="../../assets/logo-mark-inverse.png?v=3" width="56" height="56" alt="" style={{ objectFit: "contain" }}/>
              <div>
                <div style={{ fontWeight: 300, fontSize: 18, letterSpacing: 1 }}>CEDAR <b style={{ fontWeight: 800 }}>HOLLOW</b></div>
                <div style={{ color: "var(--color-terracotta-soft)", fontSize: 9, letterSpacing: 4, marginTop: 2 }}>W I N E R Y</div>
              </div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--text-on-dark-muted)", maxWidth: "36ch" }}>
              Estate wines. Gathered moments. Family vineyards in the rolling hills of Hye, Texas. Open Thursday through Sunday.
            </p>
          </div>
          {cols.map(col => (
            <div key={col.title}>
              <h4 style={{
                margin: 0, fontSize: 11, fontWeight: 700, letterSpacing: "0.18em",
                textTransform: "uppercase", color: "var(--text-on-dark)", marginBottom: 14,
              }}>{col.title}</h4>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {col.links.map(l => (
                  <li key={l.label}>
                    <a href={l.href || "#"} onClick={(e) => {
                      if (l.route) {
                        e.preventDefault();
                        onNavigate(l.route);
                      }
                    }} style={{
                      color: "var(--text-on-dark-muted)", fontSize: 13, textDecoration: "none",
                    }}>{l.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <Divider tone="dark">Hye, Texas · Est. 2008</Divider>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 28, color: "var(--text-on-dark-muted)", fontSize: 11, letterSpacing: "0.08em" }}>
          <span>© 2026 Cedar Hollow Winery. All rights reserved.</span>
          <span>10428 US Hwy 290 · Hye, TX 78635</span>
        </div>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;