import Link from "next/link";
import Image from "next/image";
import { InstagramIcon, Facebook, YoutubeIcon, LinkedinIcon, MapPin, Clock, Phone, Mail } from "lucide-react";
import { NAV } from "@/lib/navigation";
import { SITE, whatsappUrl } from "@/lib/site";
import { Reveal } from "@/components/shared/Reveal";

export function Footer() {
  return (
    <footer className="bg-midnight text-ivory border-t border-gold/40">
      <Reveal>
      <div className="mx-auto max-w-screen-2xl px-12 py-16 md:py-20 grid gap-12 md:grid-cols-5">
        <div className="space-y-5">
          <div className="flex flex-col items-center text-center">
            <Image
              src="https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/hero/the-grand-heritage-resorts-footer.png"
              alt="The Grand Heritage Resorts"
              title="The Grand Heritage Resorts"
              width={140}
              height={140}
              className="object-contain"
            />
            <p className="font-sans text-[10px] font-normal uppercase tracking-widest-x text-gold mt-2">Managed by Impressions Entertainment and Events</p>
          </div>
          <p className="font-sans text-sm text-center font-light leading-relaxed text-ivory/80">
            A heritage resort across ten acres near Pune - five stay spaces,
            four lawns, two banquets and two pools that catches the last light of day.
          </p>
          <div className="flex justify-center gap-3">
            <a
              href={SITE.social.instagram}
              title="Instagram"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Instagram"
              className="border border-gold/40 p-2 text-gold hover:bg-gold hover:text-midnight transition-colors"
            >
              <InstagramIcon className="h-4 w-4" />
            </a>
            <a
              href={SITE.social.facebook}
              title="Facebook"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Facebook"
              className="border border-gold/40 p-2 text-gold hover:bg-gold hover:text-midnight transition-colors"
            >
              <Facebook className="h-4 w-4" />
            </a>
            <a
              href={SITE.social.youtube}
              title="Youtube"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="YouTube"
              className="border border-gold/40 p-2 text-gold hover:bg-gold hover:text-midnight transition-colors"
            >
              <YoutubeIcon className="h-4 w-4" />
            </a>
            <a
              href={SITE.social.linkedin}
              title="LinkedIn"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="LinkedIn"
              className="border border-gold/40 p-2 text-gold hover:bg-gold hover:text-midnight transition-colors"
            >
              <LinkedinIcon className="h-4 w-4" />
            </a>
          </div>
        </div>

        <div>
          <p className="font-sans text-[12px] font-normal uppercase tracking-widest-x text-gold mb-5">Explore</p>
          <ul className="space-y-3">
            {[
              { label: "Home", to: "/" },
              { label: "About Us", to: "/about-us" },
              { label: "Events", to: "/event/event-venue-pune" },
              { label: "Awards & Recognitions", to: "/awards-recognitions" },
              { label: "Services", to: "/services" },
              { label: "Blogs", to: "/blogs" },
              { label: "Terms & Conditions", to: "/policies/terms-conditions" },
            ].map((l) => (
              <li key={l.to}>
                <Link href={l.to} title={l.label} className="font-sans text-sm font-light text-ivory/80 hover:text-gold transition-colors">
                  {l.label}
                </Link>
              </li>
            ))}
            <li>
              <a
                href="https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/pdf/TGHR_Luxury_Brochure_2026_27_Editable.pptx%20(4).pdf"
                title="Our Brochure"
                target="_blank"
                rel="noopener noreferrer"
                className="font-sans text-sm font-light text-ivory/80 hover:text-gold transition-colors"
              >
                Our Brochure
              </a>
            </li>
          </ul>
        </div>

        <div>
          <p className="font-sans text-[12px] font-normal uppercase tracking-widest-x text-gold mb-5">Event Spaces</p>
          <ul className="space-y-3">
            {[
              { label: "Peshwa Lawn", to: "/lawns/peshwa-lawn-in-pune" },
              { label: "Indraprastha Lawn", to: "/lawns/indraprastha-lawn-royal-palace-pune" },
              { label: "Vrindavan Lawn", to: "/lawns/vrindavan-lawn-in-pune" },
              { label: "Imperial Lawn", to: "/lawns/imperial-lawn-in-pune" },
              { label: "Regal Banquet", to: "/banquets/regal-banquet-hall-in-pune" },
              { label: "Crystal Banquet", to: "/banquets/crystal-banquet-hall-pune" },
              { label: "Big Pool with Bar Couter", to: "/pool/swimming-pool-pune" },
              { label: "Stone Palace Private Pool", to: "/pool/stone-palace-private-pool-pune" },
            ].map((l) => (
              <li key={l.to}>
                <Link href={l.to} title={l.label} className="font-sans text-sm font-light text-ivory/80 hover:text-gold transition-colors">
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <p className="font-sans text-[12px] font-normal uppercase tracking-widest-x text-gold mb-5">Stay Spaces</p>
          <ul className="space-y-3">
            {[
              { label: "Stone Palace 4 BHK Villa", to: "/rooms/stone-palace-heritage-rooms-pune" },
              { label: "Queen Palace Heritage Rooms", to: "/rooms/queen-palace-heritage-rooms-pune" },
              { label: "Shaniwar Wada Heritage Rooms", to: "/rooms/shaniwar-wada-heritage-rooms-in-pune" },
              { label: "Vishrambaug Wada Heritage Rooms", to: "/rooms/vishrambaug-wada-heritage-rooms-pune" },
              { label: "Imperial Rooms", to: "/rooms/imperial-rooms-pune" },
            ].map((l) => (
              <li key={l.to}>
                <Link href={l.to} title={l.label} className="font-sans text-sm font-light text-ivory/80 hover:text-gold transition-colors">
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <p className="font-sans text-[12px] font-normal uppercase tracking-widest-x text-gold mb-5">Contact</p>
          <ul className="space-y-5 font-sans text-xs font-light text-ivory/80">
            <li className="flex gap-3">
              <MapPin className="h-4 w-4 mt-0.5 text-gold shrink-0" />
              <a
                href={SITE.address}
                title={SITE.address}
                target="_blank"
                rel="noopener noreferrer"
                className="hover:text-gold transition-colors break-all"
              >
                Nimgaon road, near Pune-Nagar Highway, 
                <br />
                Kasari, Pune, Maharashtra 412209
              </a>
            </li>
            <li className="flex gap-3">
              <Clock className="h-4 w-4 mt-0.5 text-gold shrink-0" />
              <p className="hover:text-gold transition-colors">Monday-Sunday | 9:30 AM - 10:00 PM</p>
            </li>
            <li className="flex gap-3">
              <Phone className="h-4 w-4 mt-0.5 text-gold shrink-0" />
              <a href={`tel:${SITE.phoneTel}`} title={SITE.phoneTel} className="hover:text-gold transition-colors">{SITE.phoneDisplay}</a> | <a href={`tel:${SITE.phoneTel}`} title={SITE.phoneTel} className="hover:text-gold transition-colors">{SITE.phoneTel}</a>
            </li>

            <li className="flex gap-3">
              <Mail className="h-4 w-4 mt-0.5 text-gold shrink-0" />
              <a href={`mailto:${SITE.email}`} title={SITE.email} className="hover:text-gold transition-colors break-all">{SITE.email}</a>
            </li>
          </ul>
        </div>
      </div>
      </Reveal>

      <div className="border-t border-gold/20">
        <div className="mx-auto max-w-screen-2xl px-12 py-6 flex items-center justify-center text-center">
          <p className="font-sans text-[12px] font-light text-ivory/60">
            © {new Date().getFullYear()} The Grand Heritage Resorts. All rights reserved | Managed by Impressions Entertainment and Events.
          </p>
          
        </div>
      </div>
    </footer>
  );
}
export default Footer;