import Link from "next/link"
import Image from "next/image"
import {
  Facebook,
  Globe,
  Linkedin,
  Mail,
  Phone,
  Twitter,
  Youtube,
} from "lucide-react"
import { Separator } from "./ui/separator"

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

  return (
    <footer className="border-t border-border/60 bg-[linear-gradient(180deg,rgba(254,243,224,0.62),rgba(255,248,235,0.96))] py-8">
      <div className="mx-auto w-full max-w-[var(--public-shell-max)] px-4 py-14 sm:px-5 md:py-20 lg:px-6">
        <div className="grid gap-6 lg:grid-cols-[1.2fr_0.9fr_0.9fr_1fr]">
          {/* Company Info */}
          <div className="px-6 py-5 lg:col-span-1">
            <Link href="/" className="inline-flex">
              <Image
                src="/rmv-logo.png"
                alt="Rocky Mountain Vending"
                width={160}
                height={40}
                className="mb-5 h-9 w-auto object-contain sm:h-10"
              />
            </Link>
            <p className="text-sm text-muted-foreground mb-6 max-w-md leading-relaxed">
              Serving Utah businesses with free placement for qualifying
              locations, machine sales, repairs, restocking, and ongoing service
              since 2019.
            </p>
            <div className="flex flex-col gap-3 text-sm text-muted-foreground mb-6">
              <a
                href="tel:+14352339668"
                className="inline-flex items-center gap-3 transition-colors hover:text-foreground"
              >
                <Phone className="h-4 w-4 text-primary" />
                <span>(435) 233-9668</span>
              </a>
              <a
                href="mailto:info@rockymountainvending.com"
                className="inline-flex items-center gap-3 transition-colors hover:text-foreground"
              >
                <Mail className="h-4 w-4 text-primary" />
                <span>info@rockymountainvending.com</span>
              </a>
              <a
                href="https://rockymountainvending.com/"
                className="inline-flex items-center gap-3 transition-colors hover:text-foreground"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Globe className="h-4 w-4 text-primary" />
                <span>rockymountainvending.com</span>
              </a>
            </div>
            <div className="flex flex-wrap gap-6">
              <a
                href="https://www.facebook.com/RealRockyMountainVending"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground transition-colors flex items-center gap-2 text-sm"
                aria-label="Facebook"
              >
                <Facebook className="h-5 w-5" />
                <span>Facebook</span>
              </a>
              <a
                href="https://x.com/RMVVending/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground transition-colors flex items-center gap-2 text-sm"
                aria-label="X (Twitter)"
              >
                <Twitter className="h-5 w-5" />
                <span>X</span>
              </a>
              <a
                href="https://www.linkedin.com/company/rocky-mountain-vending-llc"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground transition-colors flex items-center gap-2 text-sm"
                aria-label="LinkedIn"
              >
                <Linkedin className="h-5 w-5" />
                <span>LinkedIn</span>
              </a>
              <a
                href="https://www.youtube.com/channel/UCiaAxaeGBEezZd6BXNIKuYQ"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground transition-colors flex items-center gap-2 text-sm"
                aria-label="YouTube"
              >
                <Youtube className="h-5 w-5" />
                <span>YouTube</span>
              </a>
            </div>
          </div>

          {/* Services */}
          <div className="px-5 py-5">
            <h3 className="font-semibold mb-5 text-base">Services</h3>
            <ul className="space-y-3 text-sm text-muted-foreground">
              <li>
                <Link
                  href="/services/repairs"
                  className="transition-colors inline-block py-0.5"
                >
                  Vending Machine Repairs
                </Link>
              </li>
              <li>
                <Link
                  href="/services/moving"
                  className="transition-colors inline-block py-0.5"
                >
                  Vending Machine Moving
                </Link>
              </li>
              <li>
                <Link
                  href="/services/parts"
                  className="transition-colors inline-block py-0.5"
                >
                  Vending Machine Parts
                </Link>
              </li>
              <li>
                <Link
                  href="/manuals"
                  className="transition-colors inline-block py-0.5"
                >
                  Vending Machine Manuals
                </Link>
              </li>
              <li>
                <Link
                  href="/vending-machines"
                  className="transition-colors inline-block py-0.5"
                >
                  Machine Sales
                </Link>
              </li>
              <li>
                <Link
                  href="/services"
                  className="transition-colors inline-block py-0.5"
                >
                  All Services
                </Link>
              </li>
            </ul>
          </div>

          {/* Company */}
          <div className="px-5 py-5">
            <h3 className="font-semibold mb-5 text-base">Company</h3>
            <ul className="space-y-3 text-sm text-muted-foreground">
              <li>
                <Link
                  href="/about-us"
                  className="transition-colors inline-block py-0.5"
                >
                  About Us
                </Link>
              </li>
              <li>
                <Link
                  href="/reviews"
                  className="transition-colors inline-block py-0.5"
                >
                  Customer Reviews
                </Link>
              </li>
              <li>
                <Link
                  href="/contact-us"
                  className="transition-colors inline-block py-0.5"
                >
                  Contact Us
                </Link>
              </li>
              <li>
                <Link
                  href="/about/faqs"
                  className="transition-colors inline-block py-0.5"
                >
                  FAQs
                </Link>
              </li>
            </ul>
          </div>

          {/* Service Areas */}
          <div className="px-5 py-5">
            <h3 className="font-semibold mb-5 text-base">Service Areas</h3>
            <ul className="space-y-3 text-sm text-muted-foreground">
              <li>
                <Link
                  href="/service-areas"
                  className="transition-colors inline-block py-0.5"
                >
                  View All Service Areas
                </Link>
              </li>
              <li>
                <Link
                  href="/vending-machines-salt-lake-city-utah"
                  className="transition-colors inline-block py-0.5"
                >
                  Salt Lake City, UT
                </Link>
              </li>
              <li>
                <Link
                  href="/vending-machines-ogden-utah"
                  className="transition-colors inline-block py-0.5"
                >
                  Ogden, UT
                </Link>
              </li>
              <li>
                <Link
                  href="/vending-machines-provo-utah"
                  className="transition-colors inline-block py-0.5"
                >
                  Provo, UT
                </Link>
              </li>
              <li>
                <Link
                  href="/vending-machines-sandy-utah"
                  className="transition-colors inline-block py-0.5"
                >
                  Sandy, UT
                </Link>
              </li>
              <li>
                <Link
                  href="/vending-machines-west-valley-city-utah"
                  className="transition-colors inline-block py-0.5"
                >
                  West Valley City, UT
                </Link>
              </li>
              <li className="pt-2">
                <Separator className="mb-2" />
                <Link
                  href="/service-areas"
                  className="transition-colors font-medium inline-block py-0.5"
                >
                  View all 20 cities →
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-border/60 mt-10 pt-8">
          <div className="flex flex-col items-center justify-between gap-4 text-center text-sm text-muted-foreground md:flex-row md:text-left">
            <p>
              © {currentYear} Rocky Mountain Vending LLC. All rights reserved.
            </p>
            <nav className="flex gap-6" aria-label="Legal links">
              <Link
                href="/privacy-policy"
                className="transition-colors hover:text-foreground"
              >
                Privacy Policy
              </Link>
              <Link
                href="/terms-and-conditions"
                className="transition-colors hover:text-foreground"
              >
                Terms & Conditions
              </Link>
            </nav>
          </div>
          <p className="text-center mt-4 text-sm text-muted-foreground leading-relaxed">
            <Link href="/" className="hover:text-foreground transition-colors">
              Free Vending Machines Utah
            </Link>
            {" | "}
            <Link
              href="/vending-machines"
              className="hover:text-foreground transition-colors"
            >
              Vending Machine Supplier
            </Link>
            {" | "}
            <Link
              href="/services"
              className="hover:text-foreground transition-colors"
            >
              Vending Machine Service & Repair
            </Link>
          </p>
        </div>
      </div>
    </footer>
  )
}