"use client"

import Link from "next/link"
import { Cloud } from "lucide-react"

const footerLinks = {
  services: [
    { label: "Web Development", href: "#services" },
    { label: "Cloud Hosting", href: "#services" },
    { label: "I.T Support", href: "#services" },
    { label: "Computer Repairs", href: "#services" },
  ],
  company: [
    { label: "About Us", href: "#features" },
    { label: "Our Process", href: "#process" },
    { label: "Contact", href: "#contact" },
  ],
}

export function Footer() {
  const currentYear = new Date().getFullYear()

  return (
    <footer className="relative bg-card border-t border-border">
      {/* Main Footer */}
      <div className="mx-auto max-w-7xl px-6 lg:px-8 py-16">
        <div className="grid grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
          {/* Brand Column */}
          <div className="col-span-2 md:col-span-1">
            <Link href="/" className="flex items-center gap-2 mb-6 group">
              <div className="relative">
                <Cloud className="w-8 h-8 text-primary transition-transform duration-300 group-hover:scale-110" />
              </div>
              <span className="text-xl font-bold tracking-tight">
                Cloud<span className="text-primary">rite</span>
              </span>
            </Link>
            <p className="text-muted-foreground text-sm leading-relaxed mb-6">
              Helping Auckland businesses thrive with expert I.T solutions. 
              Every business needs an I.T guy.
            </p>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
              <span>Proudly NZ Owned</span>
            </div>
          </div>

          {/* Services */}
          <div>
            <h4 className="font-bold mb-4">Services</h4>
            <ul className="space-y-3">
              {footerLinks.services.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-300"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h4 className="font-bold mb-4">Company</h4>
            <ul className="space-y-3">
              {footerLinks.company.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-300"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-border">
        <div className="mx-auto max-w-7xl px-6 lg:px-8 py-6">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-sm text-muted-foreground">
              © {currentYear} Cloudrite. All rights reserved.
            </p>
            <div className="flex items-center gap-6">
              <Link
                href="https://cloudrite.co.nz"
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-300"
              >
                cloudrite.co.nz
              </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Large Background Text */}
      <div className="absolute bottom-0 left-0 right-0 overflow-hidden pointer-events-none">
        <div className="relative">
          <div 
            className="text-[20vw] font-bold text-border/30 leading-none tracking-tighter whitespace-nowrap animate-marquee"
            style={{ animation: "marquee 30s linear infinite" }}
          >
            CLOUDRITE • CLOUDRITE • CLOUDRITE •&nbsp;
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-33.33%); }
        }
        .animate-marquee {
          animation: marquee 30s linear infinite;
        }
      `}</style>
    </footer>
  )
}