'use client';

import React from 'react';
import { Universities } from '../../utils/OurUniversities';
import Heading from '../atoms/Heading';
import Paragraph from '../atoms/Paragraph';
import Container from '../atoms/Container';
import ModernCard from '../../components/shared/ModernCard';
import { 
  MapPin, 
  Phone, 
  Mail, 
  Clock,
  Globe,
  Users,
  Sparkles
} from "lucide-react";

const OurOffice = () => {
  const officeFeatures = [
    { icon: Globe, label: "Global Network", value: "3 Continents", color: "teal" },
    { icon: Phone, label: "Support", value: "24/7 Available", color: "blue" },
    { icon: Mail, label: "Response Time", value: "< 2 Hours", color: "emerald" },
    { icon: Clock, label: "Processing", value: "Fast Track", color: "amber" }
  ];

  return (
    <section className="py-20 bg-linear-to-b from-gray-50 to-white">
      <Container>
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-6 animate-pulse">
            <MapPin className="w-5 h-5" />
            Global Presence
          </div>

          <Heading level={4} className="text-4xl font-bold text-gray-900 mb-4">
            Our <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">Global Offices</span>
          </Heading>
          <Paragraph className="text-xl text-gray-600 max-w-3xl mx-auto">
            With offices strategically located worldwide, we provide personalized support to students and travelers across the globe
          </Paragraph>
        </div>

        {/* Office Features */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
          {officeFeatures.map((feature, index) => (
            <ModernCard key={index} className="p-6 text-center">
              <div className={`inline-flex p-3 rounded-xl bg-linear-to-r from-${feature.color}-50 to-${feature.color}-100 border border-${feature.color}-200 mb-3`}>
                <feature.icon className={`w-6 h-6 text-${feature.color}-600`} />
              </div>
              <div className="text-2xl font-bold text-gray-900 mb-1">{feature.value}</div>
              <div className="text-sm text-gray-600">{feature.label}</div>
            </ModernCard>
          ))}
        </div>

        {/* Offices Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {Universities.map((office, index) => (
            <ModernCard key={index} className="overflow-hidden group">
              <div className="overflow-hidden rounded-t-2xl">
                <img
                  src={office.image}
                  alt={office.title}
                  className="w-full h-48 object-cover transform group-hover:scale-105 transition-transform duration-500"
                />
              </div>
              <div className="p-6 text-center">
                <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-teal-600 transition-colors">
                  {office.title}
                </h3>
                <Paragraph className="text-gray-600">
                  {office.subtitle}
                </Paragraph>
              </div>
            </ModernCard>
          ))}
        </div>

        {/* Contact CTA */}
        <div className="text-center mt-12">
          <div className="relative overflow-hidden rounded-3xl">
            {/* Background Pattern */}
            <div className="absolute inset-0">
              <div className="absolute inset-0 bg-linear-to-r from-teal-600 to-blue-500"></div>
              
            </div>

            <div className="relative py-12 px-8">
              <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm text-white px-6 py-2 rounded-full text-sm font-medium mb-4">
                <Users className="w-4 h-4" />
                Expert Support
              </div>

              <h3 className="text-3xl font-bold text-white mb-4">
                Need Immediate Assistance?
              </h3>
              <Paragraph className="text-white/80 mb-8">
                Our visa experts are ready to help you 24/7
              </Paragraph>

              <div className="flex flex-col sm:flex-row gap-4 justify-center mt-5">
                <a 
                  href="tel:+923004010284"
                  className="inline-flex items-center justify-center gap-2 bg-white text-teal-700 font-semibold py-3 px-6 rounded-xl hover:bg-gray-50 transition-all duration-300 shadow-lg hover:shadow-xl"
                >
                  <Phone className="w-4 h-4" />
                  Call Now: +92 3004010284
                </a>
                <a 
                  href="mailto:info@universitiespage.com"
                  className="inline-flex items-center justify-center gap-2 border-2 border-white/30 text-white font-semibold py-3 px-6 rounded-xl hover:bg-white/10 transition-all duration-300"
                >
                  <Mail className="w-4 h-4" />
                  Email Us
                </a>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

export default OurOffice;