import { motion } from "framer-motion";
import { fadeIn } from "@/lib/animations";
import { useTranslation } from "@/lib/i18n/TranslationContext";
import { lazy, Suspense } from 'react';

// Import WorldMap with error boundary
const WorldMap = lazy(() => import("../WorldMap"));

const projects = [
  { country: "Spain", city: "Barcelona", role: "Main Office" },
  { country: "United States", city: "New York", role: "AI-Driven Analytics Project" },
  { country: "Singapore", city: "Singapore", role: "FinTech Automation" },
  { country: "Belgium", city: "Brussels", role: "EU Digital Transformation" },
  { country: "Germany", city: "Berlin", role: "Industrial IoT Solution" },
  { country: "Argentina", city: "Buenos Aires", role: "Supply Chain Optimization" }
];

export default function GlobalPresence() {
  const { t } = useTranslation();

  return (
    <section id="global-presence" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <motion.h2 
            variants={fadeIn}
            className="text-4xl font-bold text-blue-900 mb-4"
          >
            {t.globalPresence.title}
          </motion.h2>
          <motion.p 
            variants={fadeIn}
            className="text-gray-600 max-w-2xl mx-auto"
          >
            Based in Barcelona, we've successfully delivered transformative projects across the globe
          </motion.p>
        </motion.div>

        <motion.div
          variants={fadeIn}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="mb-16"
        >
          <Suspense fallback={<div className="h-[400px] w-full bg-gray-100 rounded-xl animate-pulse" />}>
            <WorldMap className="h-[400px] rounded-xl shadow-lg" />
          </Suspense>
        </motion.div>

        <div className="grid md:grid-cols-3 lg:grid-cols-6 gap-6">
          {projects.map((project, index) => (
            <motion.div
              key={index}
              variants={fadeIn}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true }}
              custom={index * 0.1}
              className="p-6 rounded-lg bg-gray-50 hover:bg-blue-50 transition-colors"
            >
              <h3 className="font-semibold text-blue-900 mb-1">{project.country}</h3>
              <p className="text-gray-600 text-sm mb-1">{project.city}</p>
              <p className="text-blue-600 text-xs">{project.role}</p>
            </motion.div>
          ))}
        </div>

        <motion.div 
          variants={fadeIn}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="mt-12 text-center"
        >
          <p className="text-gray-600">
            {t.globalPresence.contactPrompt}{" "}
            <a href="#contact" className="text-blue-600 hover:underline">
              {t.globalPresence.contactLink}
            </a>
          </p>
        </motion.div>
      </div>
    </section>
  );
}