'use client'

import * as motion from 'framer-motion/m'
import { MapPin } from 'lucide-react'

export default function ContactMap() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="rounded-xl overflow-hidden shadow-sm border border-gray-100"
    >
      <div className="relative h-80 md:h-96 bg-gray-200">
        {/* Placeholder for actual map - Replace with Google Maps or Leaflet */}
        <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
          <div className="text-center">
            <MapPin size={48} className="text-primary mx-auto mb-3" />
            <p className="text-gray-custom">Interactive Map Loading...</p>
            <p className="text-sm text-gray-custom mt-1">123 Main Boulevard, Sabzazar, Lahore</p>
          </div>
        </div>
        
        {/* You can integrate Google Maps here */}
        
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d217801.123456!2d74.123456!3d31.123456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzHCsDA3JzI2LjAiTiA3NMKwMTUnMjAuMCJF!5e0!3m2!1sen!2s!4v1234567890"
          width="100%"
          height="100%"
          style={{ border: 0 }}
          allowFullScreen
          loading="lazy"
          className="absolute inset-0"
        />
      </div>
    </motion.div>
  )
}