"use client";

import { GitBranch, MessageCircle, ExternalLink } from "lucide-react";
import { GridOverlay, ScrollReveal } from "@/components/ui/primitives";

const columns = [
  {
    title: "Product",
    links: ["Features", "Pricing", "Changelog", "Docs", "API Reference"],
  },
  {
    title: "Company",
    links: ["About", "Blog", "Careers", "Press", "Partners"],
  },
  {
    title: "Resources",
    links: ["Community", "Help Center", "Status", "Security", "Privacy"],
  },
];

const socialLinks = [
  { icon: MessageCircle, href: "#", label: "MessageCircle" },
  { icon: GitBranch, href: "#", label: "GitHub" },
  { icon: ExternalLink, href: "#", label: "LinkedIn" },
];

export default function SaasFooter1() {
  return (
    <footer className="relative border-t border-gray-200 bg-white">
      <GridOverlay type="dots" fade="top" opacity={0.02} />

      <ScrollReveal variant="fade-up" delay={0.1}>
        <div className="mx-auto max-w-6xl px-6 py-16">
          {/* 4-column layout — matching wireframe: 3 link cols + 1 subscribe col */}
          <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
            {/* Link columns */}
            {columns.map((col) => (
              <div key={col.title}>
                <h4 className="text-sm font-medium text-gray-900">
                  {col.title}
                </h4>
                <ul className="mt-4 space-y-3">
                  {col.links.map((link) => (
                    <li key={link}>
                      <a
                        href="#"
                        className="text-sm text-gray-500 transition-colors hover:text-indigo-600"
                      >
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}

            {/* Subscribe column — matching wireframe: Last Col with subscribe + social */}
            <div>
              <h4 className="text-sm font-medium text-gray-900">Subscribe</h4>
              <p className="mt-4 text-sm text-gray-500">
                Get the latest news and updates delivered to your inbox.
              </p>

              <div className="mt-4 flex gap-2">
                <input
                  type="email"
                  placeholder="you@company.com"
                  className="min-w-0 flex-1 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-400/20 focus:border-indigo-400/50"
                />
                <button className="shrink-0 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800">
                  Join
                </button>
              </div>

              {/* Social — matching wireframe: Social Icons */}
              <div className="mt-6">
                <h4 className="text-sm font-medium text-gray-900">Follow Us</h4>
                <div className="mt-3 flex items-center gap-3">
                  {socialLinks.map((social) => (
                    <a
                      key={social.label}
                      href={social.href}
                      aria-label={social.label}
                      className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-indigo-600"
                    >
                      <social.icon className="h-4 w-4" />
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="border-t border-gray-100">
          <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
            {/* Logo */}
            <div className="flex items-center gap-2">
              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-gray-900">
                <span className="text-xs font-bold text-white">S</span>
              </div>
              <span className="text-sm font-medium text-gray-900">SaaSify</span>
            </div>

            <p className="text-xs text-gray-400">
              &copy; {new Date().getFullYear()} SaaSify. All rights reserved.
            </p>
          </div>
        </div>
      </ScrollReveal>
    </footer>
  );
}
Footers
