shopify-template/components/shopify/footer.tsx

import React from 'react';

export interface FooterLink {
  label: string;
  url: string;
}

interface FooterProps {
  storeName?: string;
  logoUrl?: string;
  tagline?: string;
  copyright?: string;
  links?: FooterLink[];
}

const Footer: React.FC<FooterProps> = ({
  storeName = 'Stride',
  logoUrl,
  tagline = 'Performance in every stride.',
  copyright = '© 2026 Stride. All rights reserved.',
  links = [
    { label: 'About', url: '#' },
    { label: 'Athletes', url: '#' },
    { label: 'Technology', url: '#' },
    { label: 'Contact', url: '#' },
  ],
}) => {
  return (
    <footer className="bg-zinc-50 border-t border-border py-16 text-sm">
      <div className="max-w-screen-2xl mx-auto px-8">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-y-12">
          {/* Brand Column */}
          <div className="md:col-span-5">
            <div className="flex items-baseline mb-4">
              {logoUrl ? (
                <img
                  src={logoUrl}
                  alt={storeName}
                  className="h-8 w-auto object-contain"
                />
              ) : (
                <span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground">
                  {storeName}
                </span>
              )}
            </div>

            <p className="max-w-xs text-muted-foreground text-[15px] leading-relaxed">
              {tagline}
            </p>

            <div className="mt-8 text-xs font-mono text-muted-foreground tracking-[1px]">
              ENGINEERED FOR MOTION
            </div>
          </div>

          {/* Links */}
          <div className="md:col-span-3">
            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
              SHOP
            </div>
            <div className="flex flex-col gap-y-3 text-muted-foreground">
              {links.map((link, index) => (
                <a
                  key={index}
                  href={link.url}
                  className="hover:text-foreground transition-colors w-fit"
                >
                  {link.label}
                </a>
              ))}
            </div>
          </div>

          <div className="md:col-span-4">
            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
              CONNECT
            </div>
            <div className="flex flex-col gap-y-3 text-muted-foreground">
              <a
                href="#"
                className="hover:text-foreground transition-colors w-fit"
              >
                Instagram
              </a>
              <a
                href="#"
                className="hover:text-foreground transition-colors w-fit"
              >
                Pinterest
              </a>
              <a
                href="#"
                className="hover:text-foreground transition-colors w-fit"
              >
                Newsletter
              </a>
            </div>

            <div className="mt-auto pt-12 text-[10px] text-muted-foreground font-mono leading-loose">
              CRAFTED WITH PRECISION
              <br />
              IN A NEUTRAL PALETTE
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-16 pt-8 border-t border-border text-xs text-muted-foreground flex flex-col md:flex-row justify-between items-center gap-4 font-mono tracking-widest">
          <div>{copyright}</div>
          <div className="flex gap-x-6">
            <span>Privacy</span>
            <span>Terms</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;