'use client';

import React from 'react';
import Heading from "../atoms/Heading";
import Paragraph from "../atoms/Paragraph";
import Container from '../atoms/Container';
import visaSteps from '../../utils/visaSteps';
import ModernCard from '../../components/shared/ModernCard';
import { 
  CheckCircle, 
  Clock, 
  UserCheck, 
  Award,
  FileText,
  MessageSquare,
  Calendar,
  Plane,
  Sparkles,
  ArrowRight
} from "lucide-react";
import Link from "next/link";

const VisaApply = () => {
  const features = [
    { 
      Icon: CheckCircle, 
      text: "98% Success Rate", 
      description: "Highest visa approval in industry",
      color: "teal"
    },
    { 
      Icon: Clock, 
      text: "Fast Processing", 
      description: "Express services available",
      color: "blue"
    },
    { 
      Icon: UserCheck, 
      text: "Expert Consultation", 
      description: "Certified visa specialists",
      color: "emerald"
    },
    { 
      Icon: Award, 
      text: "Best Price Guarantee", 
      description: "Lowest rates guaranteed",
      color: "amber"
    }
  ];

  return (
    <section className="py-20 bg-linear-to-b from-gray-50 to-white">
      <Container>
        {/* Header Section */}
        <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">
            <Sparkles className="w-5 h-5" />
            Streamlined Visa Process
          </div>

          <Heading level={3} className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
            Visa in{' '}
            <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
              3 Simple Steps
            </span>
          </Heading>
          
          <Paragraph className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            Our streamlined process makes getting your visa simple, fast, and completely stress-free
          </Paragraph>
        </div>

        {/* Features Bar - Modern Design */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {features.map((feature, index) => (
            <ModernCard key={index} className="p-6 hover:shadow-xl transition-all duration-300">
              <div className="flex items-start gap-4">
                <div className={`p-3 rounded-xl bg-linear-to-r from-${feature.color}-50 to-${feature.color}-100 border border-${feature.color}-200`}>
                  <feature.Icon className={`w-6 h-6 text-${feature.color}-600`} />
                </div>
                <div className="flex-1">
                  <h4 className="text-lg font-bold text-gray-900 mb-1">
                    {feature.text}
                  </h4>
                  <p className="text-sm text-gray-600">
                    {feature.description}
                  </p>
                </div>
              </div>
            </ModernCard>
          ))}
        </div>

        {/* Steps Section */}
        <div className="grid lg:grid-cols-3 gap-8 mb-20 relative">
          {/* Connecting Line - Only on large screens */}
          <div className="hidden lg:block absolute top-24 left-1/4 right-1/4 h-1 bg-linear-to-r from-teal-200 to-blue-200 opacity-40"></div>
          
          {visaSteps.map((step, index) => (
            <div key={index} className="relative group">
              {/* Step Indicator */}
              <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 z-20">
                <div className="w-12 h-12 bg-linear-to-r from-teal-600 to-blue-500 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg ring-4 ring-white">
                  0{index + 1}
                </div>
              </div>

              <ModernCard className="pt-16 pb-8 px-6 text-center hover:shadow-xl transition-all duration-300 group-hover:border-teal-200">
                {/* Step Icon */}
                <div className="mb-6">
                  <div className={`inline-flex p-4 rounded-2xl bg-linear-to-r from-${['teal','blue','emerald'][index]}-50 to-${['teal','blue','emerald'][index]}-100 border border-${['teal','blue','emerald'][index]}-200`}>
                    {index === 0 && <FileText className="w-8 h-8 text-teal-600" />}
                    {index === 1 && <MessageSquare className="w-8 h-8 text-blue-600" />}
                    {index === 2 && <Plane className="w-8 h-8 text-emerald-600" />}
                  </div>
                </div>

                {/* Step Title */}
                <h4 className="font-bold text-xl text-gray-900 mb-4 group-hover:text-teal-600 transition-colors">
                  {step.title}
                </h4>
                
                {/* Step Description */}
                <Paragraph className="text-gray-600 leading-relaxed mb-6">
                  {step.desc}
                </Paragraph>

                {/* Timeline Dot */}
                <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2">
                  <div className="w-3 h-3 bg-linear-to-r from-teal-600 to-blue-500 rounded-full ring-4 ring-white"></div>
                </div>
              </ModernCard>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

export default VisaApply;