vibn-frontend/marketing/components/footer.tsx

import Link from "next/link";
import { Github, Mail } from "lucide-react";

const YEAR = new Date().getFullYear();

const links = {
  product: [
    { label: "Features",    href: "/#features" },
    { label: "How It Works", href: "/#how-it-works" },
    { label: "Pricing",     href: "/#pricing" },
    { label: "Sign In",     href: "/auth" },
    { label: "Get Started", href: "/auth?new=1" },
  ],
  resources: [
    { label: "GitHub",      href: "https://github.com/MawkOne/viben", external: true },
    { label: "Documentation", href: "https://github.com/MawkOne/viben", external: true },
    { label: "Changelog",   href: "https://github.com/MawkOne/viben/releases", external: true },
  ],
  legal: [
    { label: "Privacy Policy",   href: "/privacy" },
    { label: "Terms of Service", href: "/terms" },
    { label: "Contact",          href: "mailto:hello@vibnai.com", external: true },
  ],
};

export function Footer() {
  return (
    <footer className="border-t bg-muted/30">
      <div className="container mx-auto px-6 py-12 md:py-16">

        {/* Top — logo + columns */}
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-4">

          {/* Brand */}
          <div className="col-span-2 md:col-span-1">
            <Link href="/" className="flex items-center gap-2 mb-4">
              <img src="/vibn-black-circle-logo.png" alt="Vib'n" className="h-8 w-8" />
              <span className="font-serif text-lg font-bold tracking-tight">Vib&apos;n</span>
            </Link>
            <p className="text-sm text-muted-foreground leading-relaxed max-w-[220px]">
              AI-powered development platform for vibe coders. From idea to market.
            </p>
            <div className="flex items-center gap-3 mt-5">
              <a
                href="https://github.com/MawkOne/viben"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="GitHub"
                className="text-muted-foreground hover:text-foreground transition-colors"
              >
                <Github className="h-5 w-5" />
              </a>
              <a
                href="mailto:hello@vibnai.com"
                aria-label="Email"
                className="text-muted-foreground hover:text-foreground transition-colors"
              >
                <Mail className="h-5 w-5" />
              </a>
            </div>
          </div>

          {/* Product */}
          <div>
            <h3 className="text-sm font-semibold mb-4">Product</h3>
            <ul className="space-y-3">
              {links.product.map((l) => (
                <li key={l.label}>
                  <Link
                    href={l.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {l.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Resources */}
          <div>
            <h3 className="text-sm font-semibold mb-4">Resources</h3>
            <ul className="space-y-3">
              {links.resources.map((l) => (
                <li key={l.label}>
                  <a
                    href={l.href}
                    target={l.external ? "_blank" : undefined}
                    rel={l.external ? "noopener noreferrer" : undefined}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h3 className="text-sm font-semibold mb-4">Legal</h3>
            <ul className="space-y-3">
              {links.legal.map((l) => (
                <li key={l.label}>
                  {l.external ? (
                    <a
                      href={l.href}
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {l.label}
                    </a>
                  ) : (
                    <Link
                      href={l.href}
                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {l.label}
                    </Link>
                  )}
                </li>
              ))}
            </ul>
          </div>

        </div>

        {/* Bottom bar */}
        <div className="mt-12 pt-8 border-t flex flex-col items-center justify-between gap-3 md:flex-row">
          <p className="text-xs text-muted-foreground">
            © {YEAR} Vib&apos;n · Victoria, British Columbia, Canada
          </p>
          <p className="text-xs text-muted-foreground">
            Built with ❤️ for vibe coders everywhere
          </p>
        </div>

      </div>
    </footer>
  );
}