"use client";

import { Button } from "@/components/ui/button";
import { FOOTER } from "@/lib/strings/footer";
import {
  Car,
  Clock,
  Facebook,
  Hotel,
  Instagram,
  Mail,
  MapPin,
  Package,
  Phone,
  Sparkles,
} from "lucide-react";
import Link from "next/link";
import { FrontendBrandLogo } from "./brand-logo";
import { FaWhatsapp } from "react-icons/fa";

const socialLinks = [
  {
    icon: Facebook,
    href: FOOTER.SOCIAL_FACEBOOK_HREF,
    label: FOOTER.SOCIAL_FACEBOOK_LABEL,
  },
  {
    icon: Instagram,
    href: FOOTER.SOCIAL_INSTAGRAM_HREF,
    label: FOOTER.SOCIAL_INSTAGRAM_LABEL,
  },
  {
    icon: FaWhatsapp,
    href: FOOTER.SOCIAL_WHATSAPP_HREF,
    label: FOOTER.SOCIAL_WHATSAPP_LABEL,
  },
];

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

  return (
    <footer className="frontend-gradient-footer border-t border-white/10">
      <div className="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
        {/* Main Footer Content */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 py-12 md:py-16">
          {/* Company Info */}
          <div className="space-y-4">
            <FrontendBrandLogo variant="footer" />
            <p className="text-sm text-white/70 leading-relaxed">
              {FOOTER.TAGLINE}
            </p>
            <div className="flex gap-2">
              {socialLinks.map(({ icon: Icon, href, label }) => (
                <Button
                  key={label}
                  variant="outline"
                  size="icon"
                  className="h-9 w-9 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:text-white"
                  aria-label={label}
                  asChild
                >
                  <a href={href} target="_blank" rel="noopener noreferrer">
                    <Icon className="h-4 w-4" aria-hidden="true" />
                  </a>
                </Button>
              ))}
            </div>
          </div>

          {/* Services */}
          <div className="space-y-4 hidden">
            <h3 className="text-lg font-semibold text-white">
              {FOOTER.SERVICES_HEADING}
            </h3>
            <nav
              className="flex flex-col space-y-3"
              aria-label={FOOTER.SERVICES_NAV_ARIA}
            >
              <Link
                href="/vehicle-booking"
                className="group flex items-center gap-2 text-sm text-white/70 hover:text-white transition-colors"
              >
                <Car
                  className="h-4 w-4 group-hover:text-white"
                  aria-hidden="true"
                />
                <span>{FOOTER.VEHICLE_BOOKING}</span>
              </Link>
              <Link
                href="/hotel-bookings"
                className="group flex items-center gap-2 text-sm text-white/70 hover:text-white transition-colors"
              >
                <Hotel
                  className="h-4 w-4 group-hover:text-white"
                  aria-hidden="true"
                />
                <span>{FOOTER.HOTEL_BOOKING}</span>
              </Link>
              <Link
                href="/spiritual-packages"
                className="group flex items-center gap-2 text-sm text-white/70 hover:text-white transition-colors"
              >
                <Sparkles
                  className="h-4 w-4 group-hover:text-white"
                  aria-hidden="true"
                />
                <span>{FOOTER.SPIRITUAL_PACKAGES}</span>
              </Link>
              <Link
                href="/custom-packages"
                className="group flex items-center gap-2 text-sm text-white/70 hover:text-white transition-colors"
              >
                <Package
                  className="h-4 w-4 group-hover:text-white"
                  aria-hidden="true"
                />
                <span>{FOOTER.CUSTOM_PACKAGES}</span>
              </Link>
            </nav>
          </div>

          {/* Important Links */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-white">
              {FOOTER.IMPORTANT_LINKS_HEADING}
            </h3>
            <nav
              className="flex flex-col space-y-3"
              aria-label={FOOTER.IMPORTANT_LINKS_NAV_ARIA}
            >
              <Link
                target="_blank"
                rel="noopener noreferrer"
                href="https://registrationandtouristcare.uk.gov.in/index.php"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.YATRA_REGISTRATION}
              </Link>
              <Link
                target="_blank"
                rel="noopener noreferrer"
                href="https://heliyatra.irctc.co.in/"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.HELI_BOOKING}
              </Link>
              <Link
                target="_blank"
                rel="noopener noreferrer"
                href="https://badrinath-kedarnath.gov.in/"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.POOJA_BOOKING}
              </Link>
            </nav>
          </div>

          {/* Terms & Policies */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-white">
              {FOOTER.TERMS_POLICIES_HEADING}
            </h3>
            <nav
              className="flex flex-col space-y-3"
              aria-label={FOOTER.TERMS_POLICIES_NAV_ARIA}
            >
              <Link
                href="/privacy-policy"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.PRIVACY_POLICY}
              </Link>
              <Link
                href="/user-terms"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.USER_TERMS}
              </Link>
              <Link
                href="/cancellation-policy"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.CANCELLATION_POLICY}
              </Link>
              <Link
                href="/refund-policy"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.REFUND_POLICY}
              </Link>
            </nav>
          </div>

          {/* Quick Links */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-white">
              {FOOTER.QUICK_LINKS_HEADING}
            </h3>
            <nav
              className="flex flex-col space-y-3"
              aria-label={FOOTER.QUICK_LINKS_NAV_ARIA}
            >
              <Link
                href="/about-us"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.ABOUT_US}
              </Link>
              <Link
                href="/contact-us"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.CONTACT_US}
              </Link>
              <Link
                href="/faq"
                className="text-sm text-white/70 hover:text-white transition-colors"
              >
                {FOOTER.FAQ}
              </Link>
            </nav>
          </div>

          {/* Contact & Newsletter */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-white">
              {FOOTER.GET_IN_TOUCH_HEADING}
            </h3>
            <address className="not-italic space-y-3 text-sm text-white/70">
              <div className="flex items-start gap-2">
                <MapPin
                  className="h-4 w-4 mt-0.5 shrink-0"
                  aria-hidden="true"
                />
                <span>
                  {FOOTER.ADDRESS_LINE_1}
                  <br />
                  {FOOTER.ADDRESS_LINE_2}
                </span>
              </div>
              <div className="flex items-start gap-2">
                <Phone className="h-4 w-4 mt-0.5 shrink-0" aria-hidden="true" />
                <div className="flex flex-col gap-1">
                  <a
                    href={FOOTER.PHONE_PRIMARY_HREF}
                    className="hover:text-white transition-colors"
                  >
                    {FOOTER.PHONE_PRIMARY}
                  </a>
                  <a
                    href={FOOTER.PHONE_SECONDARY_HREF}
                    className="hover:text-white transition-colors"
                  >
                    {FOOTER.PHONE_SECONDARY}
                  </a>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <Mail className="h-4 w-4 mt-0.5 shrink-0" aria-hidden="true" />
                <div className="flex flex-col gap-1">
                  <a
                    href={FOOTER.EMAIL_INFO_HREF}
                    className="hover:text-white transition-colors"
                  >
                    {FOOTER.EMAIL_INFO}
                  </a>
                  <a
                    href={FOOTER.EMAIL_BOOKING_HREF}
                    className="hover:text-white transition-colors"
                  >
                    {FOOTER.EMAIL_BOOKING}
                  </a>
                </div>
              </div>
              <div className="flex items-start gap-2">
                <Clock className="h-4 w-4 mt-0.5 shrink-0" aria-hidden="true" />
                <span>
                  {FOOTER.WORKING_HOURS_LINE_1}
                  <br />
                  {FOOTER.WORKING_HOURS_LINE_2}
                </span>
              </div>
            </address>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-white/10 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-white/60">
            <p>
              &copy; {currentYear} {FOOTER.BRAND_NAME}. {FOOTER.COPYRIGHT}
            </p>
            <div className="flex flex-wrap justify-center gap-x-6 gap-y-2">
              <Link
                href="/privacy-policy"
                className="hover:text-white transition-colors"
              >
                {FOOTER.PRIVACY}
              </Link>
              <Link
                href="/user-terms"
                className="hover:text-white transition-colors"
              >
                {FOOTER.USER_TERMS}
              </Link>
              <Link
                href="/agent-terms"
                className="hover:text-white transition-colors"
              >
                {FOOTER.AGENT_TERMS}
              </Link>
              <Link
                href="/hotel-terms"
                className="hover:text-white transition-colors"
              >
                {FOOTER.HOTEL_TERMS}
              </Link>
              <Link
                href="/withdraw-terms"
                className="hover:text-white transition-colors"
              >
                {FOOTER.WITHDRAW_TERMS}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}