Footer

// Simple inline brand icons — kept local so this component has zero external icon dependencies
function IconGithub(props) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M12 .5C5.73.5.5 5.73.5 12c0 5.1 3.29 9.42 7.86 10.96.57.11.78-.25.78-.55 0-.27-.01-1.13-.02-2.04-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.75 2.69 1.25 3.34.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.29 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.8 1.18 1.83 1.18 3.09 0 4.41-2.7 5.38-5.27 5.67.42.36.78 1.07.78 2.16 0 1.56-.01 2.82-.01 3.2 0 .3.2.66.79.55A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" />
    </svg>
  )
}

function IconX(props) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M18.9 2H22l-7.19 8.21L23.5 22h-6.66l-5.22-6.83L5.6 22H2.47l7.7-8.8L1 2h6.83l4.72 6.24L18.9 2Zm-1.17 18h1.85L7.35 3.9H5.36L17.73 20Z" />
    </svg>
  )
}

function IconLinkedin(props) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.56V9h3.56v11.45Z" />
    </svg>
  )
}

// Edit the content below to customize your footer
const FOOTER_CONTENT = {
  brand: 'Brand',
  tagline: 'A minimal, modern starting point for your product. Copy this footer, drop it into your page, and make it yours.',
  columns: [
    {
      title: 'Product',
      links: [
        { label: 'Features', href: '#' },
        { label: 'Pricing', href: '#' },
        { label: 'Changelog', href: '#' },
      ],
    },
    {
      title: 'Company',
      links: [
        { label: 'About', href: '#' },
        { label: 'Blog', href: '#' },
        { label: 'Careers', href: '#' },
      ],
    },
    {
      title: 'Resources',
      links: [
        { label: 'Docs', href: '#' },
        { label: 'Support', href: '#' },
        { label: 'FAQ', href: '#' },
      ],
    },
  ],
  socials: [
    { label: 'GitHub', href: '#', icon: IconGithub },
    { label: 'X (Twitter)', href: '#', icon: IconX },
    { label: 'LinkedIn', href: '#', icon: IconLinkedin },
  ],
}

export default function Footer() {
  return (
    <footer className="border-t border-[#E5E5E5] dark:border-[#3A3A3A] px-6 py-14">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-col md:flex-row md:justify-between gap-10">
          {/* Brand */}
          <div className="max-w-[32ch]">
            <span className="text-[15px] font-semibold tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]">
              {FOOTER_CONTENT.brand}
            </span>
            <p className="mt-3 text-[13px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
              {FOOTER_CONTENT.tagline}
            </p>
          </div>

          {/* Link columns */}
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-8">
            {FOOTER_CONTENT.columns.map((column) => (
              <div key={column.title}>
                <p className="text-[12px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7]">
                  {column.title}
                </p>
                <ul className="mt-3 flex flex-col gap-2">
                  {column.links.map((link) => (
                    <li key={link.label}>
                      <a
                        href={link.href}
                        className="text-[13px] text-[#6e6e73] dark:text-[#a1a1a6] transition-colors duration-200 hover:text-[#1d1d1f] dark:hover:text-[#f5f5f7]"
                      >
                        {link.label}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom bar */}
        <div className="mt-12 flex flex-col-reverse md:flex-row items-center justify-between gap-4 border-t border-[#E5E5E5] dark:border-[#3A3A3A] pt-6">
          <p className="text-[12px] text-[#6e6e73] dark:text-[#a1a1a6]">
            © {new Date().getFullYear()} {FOOTER_CONTENT.brand}. All rights reserved.
          </p>
          <div className="flex items-center gap-3">
            {FOOTER_CONTENT.socials.map((social) => {
              const Icon = social.icon
              return (
                <a
                  key={social.label}
                  href={social.href}
                  aria-label={social.label}
                  className="inline-flex items-center justify-center h-8 w-8 rounded-full border border-[#E5E5E5] dark:border-[#3A3A3A] text-[#6e6e73] dark:text-[#a1a1a6] transition-colors duration-200 hover:text-[#1d1d1f] dark:hover:text-[#f5f5f7] hover:border-black/20 dark:hover:border-white/30"
                >
                  <Icon width={15} height={15} />
                </a>
              )
            })}
          </div>
        </div>
      </div>
    </footer>
  )
}