];

const socials = [
  { label: 'YouTube', href: '#' },
  { label: 'Spotify', href: '#' },
  { label: 'Instagram', href: '#' },
  { label: 'X', href: '#' }
  { label: 'YouTube', href: 'https://www.youtube.com/' },
  { label: 'Spotify', href: 'https://open.spotify.com/' },
  { label: 'Instagram', href: 'https://www.instagram.com/' },
  { label: 'X', href: 'https://x.com/' }
];

export default function Footer() {

        <div className="flex items-center gap-4">
          {socials.map((social) => (
            <a key={social.label} href={social.href} className="text-sm text-stone-300 transition hover:text-gold">
            <a
              key={social.label}
              href={social.href}
              target="_blank"
              rel="noreferrer"
              className="text-sm text-stone-300 transition hover:text-gold"
            >
              {social.label}
            </a>
          ))
             const socials = [
  {
    label: 'YouTube',
    href: '#',
    href: 'https://www.youtube.com/',
    icon: (
      <svg viewBox="0 0 24 24" className="h-5 w-5 fill-current" aria-hidden="true"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8ZM9.6 15.6V8.4L15.8 12l-6.2 3.6Z"/></svg>
    )
  },
  {
    label: 'Spotify',
    href: '#',
    href: 'https://open.spotify.com/',
    icon: (
      <svg viewBox="0 0 24 24" className="h-5 w-5 fill-current" aria-hidden="true"><path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm5.6 17.3a.8.8 0 0 1-1.1.3c-3-1.8-6.8-2.2-11.1-1.2a.8.8 0 1 1-.3-1.6c4.7-1.1 8.9-.7 12.2 1.3.4.2.5.8.3 1.2Zm1.6-3.4a1 1 0 0 1-1.3.4c-3.5-2.2-8.8-2.8-12.9-1.6a1 1 0 1 1-.6-1.9c4.7-1.4 10.6-.7 14.6 1.8.5.3.7 1 .2 1.3Zm.2-3.5C15.3 8 8.5 7.7 4.6 8.9a1.2 1.2 0 0 1-.7-2.3C8.5 5.1 16 5.4 20.7 8.2a1.2 1.2 0 0 1-1.3 2.2Z"/></svg>
    )
  },
  {
    label: 'Instagram',
    href: '#',
    href: 'https://www.instagram.com/',
    icon: (
      <svg viewBox="0 0 24 24" className="h-5 w-5 fill-current" aria-hidden="true"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm10.8 1.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg>
    )
  },
  {
    label: 'X',
    href: '#',
    href: 'https://x.com/',
    icon: (
      <svg viewBox="0 0 24 24" className="h-5 w-5 fill-current" aria-hidden="true"><path d="M18.9 2H22l-6.8 7.8L23 22h-6.2l-4.9-6.5L6.1 22H3l7.3-8.4L1 2h6.3l4.4 5.9L18.9 2ZM17.8 20h1.7L6.4 3.9H4.6L17.8 20Z"/></svg>
    )
                  <motion.a
                    key={social.label}
                    href={social.href}
                    target="_blank"
                    rel="noreferrer"
                    whileHover={{ y: -4, scale: 1.08 }}
                    className="rounded-full border border-gold/35 bg-black/35 p-3 text-gold transition hover:border-gold"
                    aria-label={social.label}
                   <meta name="description" content="Kill The Mockingbirds is an independent media brand exploring culture, power, and hidden narratives." />
        <meta property="og:title" content="Kill The Mockingbirds" />
        <meta property="og:description" content="Get Woke. Tune In." />
        <meta property="og:image" content="/images/og-image.svg" />
        <meta property="og:image" content="/images/og-image.png" />
      </Head>

      <div className="pt-16">
        <motion.div style={{ y: parallax }}>
          <Hero image="/images/hero-conspiracy-wall.svg" title="KILL THE MOCKINGBIRDS" subtitle="Get Woke. Tune In." />
          <Hero image="/images/hero-home-bg.png" title="KILL THE MOCKINGBIRDS" subtitle="Get Woke. Tune In." />
        </motion.div>

        <div className="pointer-events-none absolute inset-x-0 top-[88vh] z-10 flex justify-center">