function Footer() {
  const { useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 768px)");
  const items = [
    { label: "Home", href: "/" },
    { label: "Our Story", href: "/our-story" },
    { label: "Our Work", href: "/our-work" },
    { label: "Our Expertise", href: "/our-expertise" },
    { label: "Our Originals", href: "/our-originals" },
    { label: "Blog", href: "/blog" },
    { label: "Our Awards", href: "/our-awards" },
    { label: "Contact Us", href: "/contact" },
  ];
  const socials = ["Instagram", "Facebook", "Youtube", "Twitter", "LinkedIn", "TikTok"];
  const socialHandle = "@wearejmkstudios";
  const socialUrls = {
    Instagram: "https://instagram.com/wearejmkstudios",
    Facebook: "https://facebook.com/wearejmkstudios",
    Youtube: "https://youtube.com/@wearejmkstudios",
    Twitter: "https://twitter.com/wearejmkstudios",
    LinkedIn: "https://www.linkedin.com/company/wearejmkstudios",
    TikTok: "https://tiktok.com/@wearejmkstudios",
  };
  const colStyle = { display: "flex", flexDirection: "column", gap: 8 };
  const labelStyle = { fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", fontWeight: 600, letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--ink-300)" };
  const valueStyle = { fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--ink-700)", textDecoration: "none" };
  return (
    <footer style={{ background: "#ffffff", padding: "80px clamp(20px,5vw,64px) 40px", borderTop: "1px solid var(--color-border)" }}>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "1.4fr 1fr 1fr 1fr 1fr", gap: isMobile ? "32px 24px" : 32, marginBottom: 56 }}>
        <img src="assets/logo-full-colour.png" alt="JMK Studios" style={{ height: 38, justifySelf: "start", gridColumn: isMobile ? "1 / -1" : "auto" }} />
        <div style={colStyle}>
          <span style={labelStyle}>Phone &amp; WhatsApp</span>
          <a href="tel:+447784859286" data-cursor="link" style={valueStyle}>+44 7784 859286</a>
        </div>
        <div style={colStyle}>
          <span style={labelStyle}>Email</span>
          <a href="mailto:contact@wearejmkstudios.io" data-cursor="link" style={valueStyle}>contact@wearejmkstudios.io</a>
        </div>
        <div style={colStyle}>
          <span style={labelStyle}>Socials</span>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {socials.map((s) => (
              <a key={s} href={socialUrls[s]} target="_blank" rel="noreferrer" data-cursor="link" style={valueStyle}>{s}</a>
            ))}
            <span style={{ ...valueStyle, color: "var(--ink-300)", fontSize: "var(--text-2xs)" }}>{socialHandle}</span>
          </div>
        </div>
        <div style={colStyle}>
          <span style={labelStyle}>Studio</span>
          <span style={valueStyle}>London, UK</span>
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24, paddingTop: 24, borderTop: "1px solid var(--color-border)" }}>
        <nav style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
          {items.map((item) => (
            <a key={item.label} href={item.href} data-cursor="link" style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-xs)", color: "var(--ink-500)", textDecoration: "none" }}>
              {item.label}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
          <a href="/cookie-policy" data-cursor="link" style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", color: "var(--ink-300)", textDecoration: "none" }}>Cookie Policy</a>
          <a href="/privacy-policy" data-cursor="link" style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", color: "var(--ink-300)", textDecoration: "none" }}>Privacy Policy</a>
          <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", color: "var(--ink-300)" }}>&copy; JMK Studios. All Rights Reserved.</span>
        </div>
      </div>
    </footer>
  );
}
window.JMK = window.JMK || {};
window.JMK.Footer = Footer;