'use client'

import * as motion from 'framer-motion/m'
import { Phone, Mail, MapPin, Clock, MessageCircle } from 'lucide-react'
// lucide-react dropped brand icons (Facebook/Instagram/Twitter/etc.) — use react-icons for these.
import { FaFacebook, FaInstagram, FaTwitter } from 'react-icons/fa'
import Link from 'next/link'

const contactInfo = [
  {
    icon: Phone,
    title: 'Phone',
    details: ['+92 300 1234567', '+92 42 12345678'],
    link: 'tel:+923001234567',
    color: 'primary',
  },
  {
    icon: Mail,
    title: 'Email',
    details: ['support@desicart.pk', 'info@desicart.pk'],
    link: 'mailto:support@desicart.pk',
    color: 'secondary',
  },
  {
    icon: MapPin,
    title: 'Office Address',
    details: ['123 Main Boulevard', 'Sabzazar, Lahore, Pakistan'],
    link: 'https://maps.google.com',
    color: 'primary',
  },
  {
    icon: Clock,
    title: 'Business Hours',
    details: ['Monday - Saturday: 9:00 AM - 9:00 PM', 'Sunday: 10:00 AM - 6:00 PM'],
    color: 'secondary',
  },
]

const socialLinks = [
  { icon: FaFacebook, label: 'Facebook', href: '#', color: '#1877F2' },
  { icon: FaInstagram, label: 'Instagram', href: '#', color: '#E4405F' },
  { icon: FaTwitter, label: 'Twitter', href: '#', color: '#1DA1F2' },
  { icon: MessageCircle, label: 'WhatsApp', href: '#', color: '#25D366' },
]

export default function ContactInfo() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {contactInfo.map((info, index) => (
        <motion.div
          key={info.title}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: index * 0.1 }}
          className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-all"
        >
          <div className="flex items-start gap-4">
            <div className={`p-3 rounded-lg bg-${info.color}/10`}>
              <info.icon className={`w-6 h-6 text-${info.color}`} />
            </div>
            <div>
              <h3 className="font-semibold text-dark text-lg mb-2">{info.title}</h3>
              {info.details.map((detail, i) => (
                <p key={i} className="text-gray-custom text-sm">
                  {detail}
                </p>
              ))}
              {info.link && (
                <Link
                  href={info.link}
                  className="inline-block mt-2 text-primary text-sm font-medium hover:underline"
                >
                  Get Directions →
                </Link>
              )}
            </div>
          </div>
        </motion.div>
      ))}

      {/* Social Links */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ delay: 0.4 }}
        className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 md:col-span-2"
      >
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <h3 className="font-semibold text-dark text-lg mb-1">Follow Us</h3>
            <p className="text-gray-custom text-sm">Stay connected on social media</p>
          </div>
          <div className="flex gap-3">
            {socialLinks.map((social) => (
              <a
                key={social.label}
                href={social.href}
                className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:scale-110 transition-all duration-300"
                //style={{ hover: { backgroundColor: social.color } }}
              >
                <social.icon size={18} className="text-dark hover:text-white transition-colors" />
              </a>
            ))}
          </div>
        </div>
      </motion.div>
    </div>
  )
}