"use client";
import Link from "next/link";
import { OptimizedImage } from "@/components/optimized-image";
import { Facebook, Instagram, Twitter, Phone, MapPin } from "lucide-react";
import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { FaXTwitter } from "react-icons/fa6";

export function Footer() {
  const [selectedAddress, setSelectedAddress] = useState<"head" | "farm" | null>(null);

  const addresses = {
    head: {
      title: "Head Office",
      address: "101, Fabian Nworah Avenue, Efab Metropolis Estate, Karsana District, FCT-Abuja",
      mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3939.9876543210123!2d7.4!3d9.0!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zOcKwMDAnMDAuMCJOIDfCsDI0JzAwLjAiRQ!5e0!3m2!1sen!2sng!4v1234567890123!5m2!1sen!2sng",
    },
    farm: {
      title: "Farm Address",
      address: "SCC Junction, Jere-Bwari Road, Kaduna State",
      mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3934.555996416843!2d7.482192073719301!3d9.54724788066418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x104d95b8443c6ef1%3A0xe315d21397f3d8b1!2sSCC%20Junction!5e0!3m2!1sen!2sng!4v1763620828849!5m2!1sen!2sng",
    },
  };

  return (
    <footer className="bg-muted/50 border-t border-border mt-20">
      <div className="max-w-6xl mx-auto px-4 py-10 ">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
          {/* Brand */}
          <div className="space-y-4">
            <Link href="/" className="flex items-center gap-3">
              <div className="w-10 h-10 relative">
                <OptimizedImage
                  src="/logo.svg"
                  alt="Alegre Farms Logo"
                  fill
                  className="object-contain"
                />
              </div>
              <div className="flex flex-col">
                <span className="text-base font-semibold text-[#002E62] leading-tight">
                  Alegre Integrated
                </span>
                <span className="text-xs text-muted-foreground leading-tight">
                  Farm and Resort
                </span>
              </div>
            </Link>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Where luxury meets nature. Experience the perfect blend of farm
              life and resort comfort.
            </p>

            <div className="flex gap-3 mt-6">
              <a
                href="https://instagram.com/alegreintegratedfarm"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
                aria-label="Instagram"
              >
                <Instagram className="w-4 h-4" />
              </a>

              <a
                href="https://x.com/alegre_resort"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
                aria-label="Twitter"
              >
                <FaXTwitter className="w-4 h-4" />
              </a>

              <a
                href="tel:+2348135019543"
                className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
                aria-label="Phone"
              >
                <Phone className="w-4 h-4" />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-semibold text-[#002E62] mb-4">Quick Links</h3>
            <ul className="space-y-3">
              <li>
                <Link
                  href="/apartments"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  Rooms & Apartments
                </Link>
              </li>
              <li>
                <Link
                  href="/facilities"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  Facilities & Experiences
                </Link>
              </li>
              <li>
                <Link
                  href="/gallery"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  Gallery
                </Link>
              </li>
              <li>
                <Link
                  href="/about"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  About Us
                </Link>
              </li>
            </ul>
          </div>

          {/* Experience */}
          <div>
            <h3 className="font-semibold text-[#002E62] mb-4">Experience</h3>
            <ul className="space-y-3">
              <li>
                <Link
                  href="/facilities#farm-tours"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  Farm Tours
                </Link>
              </li>
              <li>
                <Link
                  href="/facilities#dining"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  Farm-to-Table Dining
                </Link>
              </li>
              <li>
                <Link
                  href="/facilities#fishing"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  Fishing
                </Link>
              </li>
              <li>
                <Link
                  href="/contact"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  Contact Us
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="font-semibold text-[#002E62] mb-4">Contact Us</h3>
            <ul className="space-y-3">
             <li className="text-sm text-muted-foreground">
  <a
    href="mailto:alegrefarmresort@gmail.com"
    className="hover:text-primary transition-colors"
  >
    alegrefarmresort@gmail.com
  </a>
</li>

<li className="text-sm text-muted-foreground">
  <a
    href="tel:08135019543"
    className="hover:text-primary transition-colors"
  >
    08135019543
  </a>
</li>
<li className="text-sm text-muted-foreground">
  <a
    href="tel:07042016185"
    className="hover:text-primary transition-colors"
  >
    07042016185
  </a>
</li>


              <li>
                <button
                  onClick={() => setSelectedAddress("head")}
                  className="text-sm text-muted-foreground hover:text-primary transition-colors text-left group cursor-pointer"
                >
                  <span className="font-semibold flex items-center gap-1">
                    <MapPin className="w-3 h-3 inline" />
                    Head Office:
                  </span>
                  <span className="group-hover:underline">
                    101, Fabian Nworah Avenue, Efab Metropolis Estate, Karsana District,
                    FCT-Abuja.
                  </span>
                </button>
              </li>
              <li>
                <button
                  onClick={() => setSelectedAddress("farm")}
                  className="text-sm text-muted-foreground hover:text-primary transition-colors text-left group cursor-pointer"
                >
                  <span className="font-semibold flex items-center gap-1">
                    <MapPin className="w-3 h-3 inline" />
                    Farm Address:
                  </span>
                  <span className="group-hover:underline">
                    SCC Junction, Jere-Bwari Road, Kaduna State
                  </span>
                </button>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-border mt-8 py-6 text-left">
          <p className="text-sm text-muted-foreground">
            2025 Alegre Farms Resort. All rights reserved.
          </p>
        </div>
      </div>

      {/* Map Dialog */}
      <Dialog open={selectedAddress !== null} onOpenChange={(open) => !open && setSelectedAddress(null)}>
        <DialogContent className="max-w-4xl w-[95vw] p-6 overflow-hidden">
          <VisuallyHidden>
            <DialogTitle>
              {selectedAddress && addresses[selectedAddress].title}
            </DialogTitle>
          </VisuallyHidden>
          {selectedAddress && (
            <div className="space-y-4">
              <div className="space-y-2">
                <h3 className="text-lg font-semibold text-[#002E62] flex items-center gap-2">
                  <MapPin className="w-5 h-5" />
                  {addresses[selectedAddress].title}
                </h3>
                <p className="text-sm text-muted-foreground">
                  {addresses[selectedAddress].address}
                </p>
              </div>
              <div className="relative w-full h-[400px] bg-gray-200 rounded-lg overflow-hidden">
                <iframe
                  src={addresses[selectedAddress].mapUrl}
                  style={{ border: 0, filter: "grayscale(100%)" }}
                  width="100%"
                  height="100%"
                 
                  allowFullScreen
                  loading="lazy"
                  
                  referrerPolicy="no-referrer-when-downgrade"
                  className="absolute inset-0"
                ></iframe>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </footer>
  );
}