// components/home/LocationSection.tsx
import { MapPin, Plane, Train, Building, Landmark, Factory } from "lucide-react";
import { Reveal } from "@/components/shared/Reveal";

interface NearbyPlace {
  icon: React.ReactNode;
  name: string;
  distance: string;
}

export function LocationSection() {
  const nearbyPlaces: NearbyPlace[] = [
    {
      icon: <Plane className="h-4 w-4 text-gold shrink-0" />,
      name: "Pune International Airport",
      distance: "Approx. 45 minutes drive",
    },
    {
      icon: <Train className="h-4 w-4 text-gold shrink-0" />,
      name: "Pune Railway Station",
      distance: "Approx. 55 minutes drive",
    },
    {
      icon: <Building className="h-4 w-4 text-gold shrink-0" />,
      name: "Pune City Centre",
      distance: "Approx. 1 hour drive",
    },
    {
      icon: <Landmark className="h-4 w-4 text-gold shrink-0" />,
      name: "Shri Ranjangaon Ganpati Mandir",
      distance: "Approx. 10 minutes drive",
    },
    {
      icon: <Factory className="h-4 w-4 text-gold shrink-0" />,
      name: "Ranjangaon MIDC",
      distance: "Approx. 10 minutes drive",
    },
    {
      icon: <Factory className="h-4 w-4 text-gold shrink-0" />,
      name: "Chakan MIDC",
      distance: "Approx. 30–40 minutes drive",
    },
  ];

  return (
    <section className="bg-cream py-16 md:py-16">
      <div className="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-12">
        <Reveal>
          <div className="grid gap-8 md:gap-12 lg:grid-cols-2 lg:gap-16">
            {/* Left Side - Google Map */}
            <div className="rounded-[1.05rem] overflow-hidden border border-espresso/10 shadow-sm h-[300px] sm:h-[400px] md:h-[450px] lg:h-auto lg:min-h-[520px]">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7558.004876543861!2d74.179304!3d18.708709!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2d7002e9dac6f%3A0xdbacd55f6447586b!2sThe%20Grand%20Heritage%20Resorts!5e0!3m2!1sen!2sin!4v1786526289556!5m2!1sen!2sin"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                loading="lazy"
                allowFullScreen
                referrerPolicy="no-referrer-when-downgrade"
                title="The Grand Heritage Resorts Location"
                className="block w-full h-full"
              />
            </div>

            {/* Right Side - Content */}
            <div className="space-y-4 sm:space-y-5 md:space-y-6 bg-ivory p-5 sm:p-6 md:p-8 rounded-[1.05rem] shadow-sm border border-espresso/5 flex flex-col w-full">
              {/* Resort Name */}
              <h2 className="font-serif text-2xl sm:text-3xl md:text-4xl font-light text-espresso leading-tight">
                Nearby Landmarks & Travel Connectivity
              </h2>

              {/* Address with Map Pin */}
              <div className="flex items-start gap-3">
                <div className="p-1.5 rounded-full bg-gold/10 border border-gold/20 shrink-0 mt-0.5">
                  <MapPin className="h-4 w-4 text-gold shrink-0" />
                </div>
                <p className="font-sans text-xs sm:text-sm font-light text-espresso/80 leading-relaxed">
                  Located on the <strong>Pune-Nagar Highway,</strong> The Grand Heritage Resorts enjoys excellent connectivity, making it one of the <strong>best-located event venues near Pune</strong> for corporate and social gatherings. 
                </p>
              </div>

              {/* Divider */}
              <div className="border-t border-espresso/10" />

              {/* Nearby Places List with Dividers */}
              <div className="space-y-0 flex-1">
                {nearbyPlaces.map((place, index) => (
                  <div key={index}>
                    <div className="flex items-center justify-between gap-2 sm:gap-4 py-2 sm:py-3 hover:bg-gold/5 rounded-lg px-2 transition-colors duration-200">
                      <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                        <div className="p-1.5 rounded-full bg-gold/10 border border-gold/20 shrink-0">
                          {place.icon}
                        </div>
                        <span className="font-sans text-xs sm:text-sm font-medium text-espresso/80 truncate">
                          {place.name}
                        </span>
                      </div>
                      <span className="font-sans text-[10px] sm:text-sm font-medium text-espresso/60 whitespace-nowrap bg-gold/5 px-2 sm:px-3 py-1 rounded-full border border-gold/10 shrink-0">
                        {place.distance}
                      </span>
                    </div>
                    {index < nearbyPlaces.length - 1 && (
                      <div className="border-b border-espresso/10 ml-12 sm:ml-14" />
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

export default LocationSection;