"use client";

import { Sparkles, Twitter, Github, Linkedin, Youtube } from "lucide-react";

const links = ["Product", "Pricing", "Docs", "Blog", "About", "Contact"];

export default function FooterBrandCentered() {
  return (
    <footer className="w-full border-t border-border bg-background">
      <div className="container mx-auto px-6 py-16 flex flex-col items-center text-center">
        <a href="#" className="flex items-center gap-2 text-foreground font-bold">
          <Sparkles className="w-7 h-7 text-primary" />
          <span className="text-lg">Acme</span>
        </a>
        <p className="mt-3 text-sm text-muted-foreground max-w-md">
          Beautifully designed, obsessively optimized — everything you need to go
          from idea to live product.
        </p>
        <div className="mt-6 flex items-center gap-4 text-muted-foreground">
          <a href="#" aria-label="Twitter" className="hover:text-foreground transition-colors">
            <Twitter className="w-5 h-5" />
          </a>
          <a href="#" aria-label="GitHub" className="hover:text-foreground transition-colors">
            <Github className="w-5 h-5" />
          </a>
          <a href="#" aria-label="LinkedIn" className="hover:text-foreground transition-colors">
            <Linkedin className="w-5 h-5" />
          </a>
          <a href="#" aria-label="YouTube" className="hover:text-foreground transition-colors">
            <Youtube className="w-5 h-5" />
          </a>
        </div>
        <nav className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
          {links.map((l) => (
            <a
              key={l}
              href="#"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {l}
            </a>
          ))}
        </nav>
        <p className="mt-10 text-xs text-muted-foreground">
          © {new Date().getFullYear()} Acme, Inc.
        </p>
      </div>
    </footer>
  );
}