import React from "react";
import { Phone, Mail } from "lucide-react";
import { motion } from "framer-motion";

const offices = [
  {
    region: "Asia Pacific",
    address: `614, 6th Floor, Palms Spring center,\nLink Road, Malad (West), Mumbai - 400064, India`,
    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapone.webp",
  },
  {
    region: "America",
    address: `215 Jefferson Street, Fort Collins,\nCO 80524, USA`,
    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/maptwo.webp",
  },
  {
    region: "Europe",
    address: `2, Frederick Street, Kings Cross,\nLondon, WC1X 0ND, England, UK.\nCRN-14194669, UK`,
    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapthree.webp",
  },
  {
    region: "Middle East",
    address: `Perth, WA 6000`,
    image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapfour.webp",
  },
];

export default function GlobalOffices() {
  return (
      <section className="bg-wdi-grey text-white py-16 lg:px-8 container mx-auto">
      {/* Section Heading */}
      <motion.h2
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        viewport={{ once: true }}
        className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
      >
        <span className="text-white">We serve customers </span>
        <span className="text-[#E5195E]">globally</span>
      </motion.h2>

      {/* Office Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
        {offices.map((office, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            viewport={{ once: true }}
            className="group relative p-6 rounded-xl overflow-hidden min-h-[250px] flex flex-col justify-between backdrop-blur-sm border border-gray-700/30 hover:border-[#E5195E]/30 transition-all duration-300"
          >
            {/* Background Image with Scale on Hover */}
            <div
              className="absolute inset-0 bg-cover bg-center opacity-20 transform transition-transform duration-500 group-hover:scale-105"
              style={{ backgroundImage: `url(${office.image})` }}
            ></div>

            {/* Foreground Content */}
            <div className="relative z-10 flex flex-col justify-between h-full">
              {/* Top Content */}
              <div>
                <h3 className="text-2xl font-semibold text-[#E5195E] mb-2">
                  {office.region}
                </h3>
                <p className="text-sm whitespace-pre-line leading-relaxed">
                  {office.address}
                </p>
              </div>

              {/* Bottom Contact Info */}
              <div className="mt-4 space-y-2 text-sm">
                <div className="flex items-center gap-2">
                  <Phone size={16} />
                  <span>(+91) 7700900039</span>
                </div>
                <div className="flex items-center gap-2">
                  <Mail size={16} />
                  <span>ideas@wdipl.com</span>
                </div>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
    </section>
  );
}