import React from 'react';
import { motion } from 'motion/react';
import { Briefcase, ShoppingBag, HeartPulse, GraduationCap } from 'lucide-react';

const locations = [
  {
    category: 'Connectivity & IT Parks',
    icon: <Briefcase size={24} />,
    items: [
      { name: 'Hinjewadi IT Park', dist: '5 Km' },
      { name: 'Mumbai-Pune Expressway', dist: '5.2 Km' },
      { name: 'Pimpri Railway Station', dist: '2.6 Km' },
      { name: 'Kalewadi Phata', dist: '1.5 Km' },
    ]
  },
  {
    category: 'Entertainment & Malls',
    icon: <ShoppingBag size={24} />,
    items: [
      { name: 'Spot 18 Mall', dist: '1.2 Km' },
      { name: 'Vision 9 Mall', dist: '1.4 Km' },
      { name: 'Westend Mall', dist: '4.5 Km' },
      { name: 'Balewadi High Street', dist: '4.8 Km' },
    ]
  },
  {
    category: 'Hospitals',
    icon: <HeartPulse size={24} />,
    items: [
      { name: 'Metro Multispeciality', dist: '0.25 Km' },
      { name: 'ONP Leela Hospital', dist: '1.1 Km' },
      { name: 'Aditya Birla Memorial', dist: '2.7 Km' },
    ]
  },
  {
    category: 'Schools & Colleges',
    icon: <GraduationCap size={24} />,
    items: [
      { name: 'Sharda English Medium', dist: '0.32 Km' },
      { name: 'EuroSchool Wakad', dist: '2.3 Km' },
      { name: 'MITCON Balewadi', dist: '4.5 Km' },
    ]
  }
];

export default function Location() {
  return (
    <section id="location" className="py-24 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-16">
          
          <h2 className="text-4xl md:text-5xl font-serif mb-6">4x Connectivity For Easy Commute</h2>
          <p className="text-gray-600 text-lg">
            A perfect location in the heart of PCMC, offering convenience along with tranquility.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="grid grid-cols-1 sm:grid-cols-2 gap-6"
          >
            {locations.map((loc, idx) => (
              <div key={idx} className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                <div className="flex items-center gap-3 text-primary mb-4">
                  {loc.icon}
                  <h3 className="font-serif text-xl text-gray-900">{loc.category}</h3>
                </div>
                <ul className="space-y-3">
                  {loc.items.map((item, i) => (
                    <li key={i} className="flex justify-between items-center text-sm">
                      <span className="text-gray-600">{item.name}</span>
                      <span className="font-medium text-gray-900 bg-gray-50 px-2 py-1 rounded">{item.dist}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="h-[500px] rounded-3xl overflow-hidden shadow-lg border-4 border-white"
          >
            <iframe 
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3781.2752498604827!2d73.79181407401214!3d18.606685466540497!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2b8006b528bdf%3A0xe6bf44bc95f5c4dc!2sLegacy%20Kairos!5e0!3m2!1sen!2sin!4v1715764047805!5m2!1sen!2sin"
              width="100%" 
              height="100%" 
              style={{ border: 0 }} 
              allowFullScreen 
              loading="lazy" 
              referrerPolicy="no-referrer-when-downgrade"
            />
          </motion.div>
        </div>
      </div>
    </section>
  );
}
