'use client';

import React from 'react';
import { 
  Globe, 
  Users, 
  Award, 
  Star
} from 'lucide-react';
import Paragraph from "../atoms/Paragraph";
import Heading from "../atoms/Heading";
import Container from "../atoms/Container";
import StatCard from '../../components/shared/StatCard';

const VisitvisaCompanyInfo = () => {
  const stats = [
    { 
      number: "03", 
      label: "Global Offices", 
      Icon: Globe, 
      color: "teal" 
    },
    { 
      number: "100+", 
      label: "Expert Staff", 
      Icon: Users, 
      color: "blue" 
    },
    { 
      number: "7+", 
      label: "Years Experience", 
      Icon: Award, 
      color: "emerald" 
    },
    { 
      number: "4.8", 
      label: "Star Rating", 
      Icon: Star, 
      color: "amber" 
    }
  ];

  return (
    <div className="min-h-[50vh] bg-linear-to-b from-gray-50 to-white">
      {/* Hero Section - Same as FreeConsultation */}
      <div className="relative">
        <div className="absolute inset-0 bg-linear-to-r from-teal-50/50 to-blue-50/50"></div>
        
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-linear-to-r from-teal-200/20 to-blue-200/20 animate-float"
              style={{
                width: Math.random() * 100 + 50,
                height: Math.random() * 100 + 50,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${Math.random() * 10 + 10}s`
              }}
            />
          ))}
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
          <div className="text-center">
            <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-8 animate-pulse">
              <Globe className="w-5 h-5" />
              Global Visa Services
            </div>

            <Heading level={1} className="text-5xl md:text-7xl font-bold text-gray-900 mb-8 leading-tight">
              Your Gateway to the{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                World
              </span>
            </Heading>
            
            <Paragraph className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Begin your international journey with our affordable, reliable visa services. 
              Fast processing, expert guidance, and 98% success rate.
            </Paragraph>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VisitvisaCompanyInfo;