function Footer() {
  const year = new Date().getFullYear();

  const navLinks = [
    { label: 'Menu',       href: '#menu'       },
    { label: 'Events',     href: '#events'     },
    { label: 'Gallery',    href: '#gallery'    },
    { label: 'About',      href: '#about'      },
    { label: 'Contact',    href: '#contact'    },
  ];

  const socials = [
    {
      label: 'Instagram',
      href: 'https://www.instagram.com/after5loungebar/',
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
          <circle cx="12" cy="12" r="4"/>
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
        </svg>
      ),
    },
    {
      label: 'Facebook',
      href: 'https://www.facebook.com/p/After5-Lounge-Bar-61574974335419/',
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
        </svg>
      ),
    },
    {
      label: 'WhatsApp',
      href: 'https://wa.me/23058582020',
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
      ),
    },
    {
      label: 'TikTok',
      href: 'https://www.tiktok.com/@after5loungebar',
      icon: (
        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.28 8.28 0 0 0 4.84 1.55V6.79a4.85 4.85 0 0 1-1.07-.1z"/>
        </svg>
      ),
    },
  ];

  return (
    <>
      <style>{`
        /* ── Footer ── */
        .footer {
          background: #080808;
          padding: 72px 0 0;
          overflow: hidden;
        }

        /* ── Main row ── */
        .footer-main {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: start;
          gap: 64px;
          padding: 0 96px 60px;
          border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        /* ── Left: brand block ── */
        .footer-brand {
          display: flex; flex-direction: column; gap: 20px;
        }

        .footer-logo {
          width: 64px; height: 64px;
          border-radius: 50%;
          object-fit: cover;
          opacity: 0.9;
        }

        .footer-tagline {
          font-family: 'Playfair Display', serif;
          font-size: 14px; font-weight: 400; font-style: italic;
          color: rgba(245,240,234,0.45);
          letter-spacing: -0.01em;
          line-height: 1.5;
          max-width: 220px;
        }

        .footer-social {
          display: flex; gap: 10px; margin-top: 4px;
        }

        .footer-social-link {
          width: 34px; height: 34px;
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          color: rgba(255,255,255,0.35);
          text-decoration: none;
          transition: border-color 0.25s ease, color 0.25s ease,
                      background 0.25s ease;
        }
        .footer-social-link:hover {
          border-color: #E84800;
          color: #E84800;
          background: rgba(232,72,0,0.08);
        }

        /* ── Center: logo mark ── */
        .footer-center {
          display: flex; flex-direction: column; align-items: center; gap: 16px;
          padding-top: 4px;
        }

        .footer-slogan {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px; font-weight: 400;
          letter-spacing: 0.45em; text-transform: uppercase;
          color: rgba(255,255,255,0.15);
          text-align: center;
        }

        /* ── Right: nav links ── */
        .footer-nav {
          display: flex; flex-direction: column; gap: 14px;
          align-items: flex-end;
        }

        .footer-nav-link {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 10px; font-weight: 400;
          letter-spacing: 0.25em; text-transform: uppercase;
          color: rgba(255,255,255,0.3);
          text-decoration: none;
          transition: color 0.22s ease;
          position: relative;
        }
        .footer-nav-link::after {
          content: '';
          position: absolute; bottom: -2px; right: 0;
          width: 0; height: 1px;
          background: #E84800;
          transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
        }
        .footer-nav-link:hover { color: rgba(255,255,255,0.75); }
        .footer-nav-link:hover::after { width: 100%; }

        /* ── Bottom bar ── */
        .footer-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 22px 96px;
          gap: 24px;
          flex-wrap: wrap;
        }

        .footer-copy {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px; font-weight: 300;
          letter-spacing: 0.18em; text-transform: uppercase;
          color: rgba(255,255,255,0.18);
        }

        .footer-location {
          font-family: 'Josefin Sans', sans-serif;
          font-size: 9px; font-weight: 300;
          letter-spacing: 0.18em; text-transform: uppercase;
          color: rgba(255,255,255,0.18);
          display: flex; align-items: center; gap: 8px;
        }
        .footer-location-dot {
          width: 3px; height: 3px; border-radius: 50%;
          background: rgba(232,72,0,0.45); flex-shrink: 0;
        }

        /* ── Responsive ── */
        @media (max-width: 900px) {
          .footer-main {
            grid-template-columns: 1fr;
            gap: 40px;
            padding: 0 32px 48px;
          }
          .footer-center { display: none; }
          .footer-nav { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 20px 32px; }
          .footer-nav-link::after { right: auto; left: 0; }
          .footer-bottom { padding: 20px 32px; }
        }
      `}</style>

      <footer className="footer" aria-label="After5 Lounge Bar footer">

        {/* Main row */}
        <div className="footer-main">

          {/* Left: brand */}
          <div className="footer-brand">
            <img
              src="./brand_assets/logo.webp"
              alt="After5 Lounge Bar"
              className="footer-logo"
            />
            <p className="footer-tagline">
              Come for the sunset,<br />stay for the night.
            </p>
            <div className="footer-social">
              {socials.map((s, i) => (
                <a
                  key={i}
                  href={s.href}
                  className="footer-social-link"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={s.label}
                >
                  {s.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Center: slogan */}
          <div className="footer-center">
            <img
              src="./brand_assets/logo.webp"
              alt=""
              style={{ width: 48, height: 48, borderRadius: '50%', opacity: 0.12 }}
              aria-hidden="true"
            />
            <span className="footer-slogan">Pour · Chill · Enjoy</span>
          </div>

          {/* Right: nav */}
          <nav className="footer-nav" aria-label="Footer navigation">
            {navLinks.map((l, i) => (
              <a key={i} href={l.href} className="footer-nav-link">{l.label}</a>
            ))}
          </nav>

        </div>

        {/* Bottom bar */}
        <div className="footer-bottom">
          <span className="footer-copy">
            © {year} After5 Lounge Bar. All rights reserved.
          </span>
          <span className="footer-location">
            <span className="footer-location-dot" />
            Belle Vue Maurel, Mauritius
          </span>
        </div>

      </footer>
    </>
  );
}