'use client'

import React, { useState } from 'react'
import { Calendar, CheckCircle2, ChevronRight, Sparkles, Target, Users, Zap } from 'lucide-react'
import Link from 'next/link'
import FreeConsultationModal from "../components/organisms/FreeConsultationModal";
import Image from 'next/image'

const CTASection = ({title, midtitle, endtitle}) => {
  const services = [
    {
      title: 'Initial Assessment & Counselling',
      icon: Target,
    },
    {
      title: 'Scholarship & University Selection',
      icon: Sparkles,
    },
    {
      title: 'Standardized Testing Guidance',
      icon: CheckCircle2,
    },
    {
      title: 'Application & Visa Processing',
      icon: Zap,
    },
    {
      title: 'Post-Acceptance & Pre-Departure Support',
      icon: Users,
    }
  ]

  const [isConsultationModalOpen, setIsConsultationModalOpen] = useState(false);
  
  // Consultation modal functions
  const openConsultationModal = () => {
    setIsConsultationModalOpen(true);
  };

  const closeConsultationModal = () => {
    setIsConsultationModalOpen(false);
  };

  return (
    <>
      <FreeConsultationModal
        isOpen={isConsultationModalOpen}
        onClose={closeConsultationModal}
        title=""
        description={`Get expert guidance about studying in China - completely free!`}
      />
      <div className="relative py-20 md:py-28 overflow-hidden">
        {/* Background with gradient */}
        <div className="absolute inset-0 bg-linear-to-br from-gray-50 via-white to-teal-50/30" />

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            {/* Left Content */}
            <div>
              <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">
                <Sparkles className="w-5 h-5 text-teal-600" />
                Trusted Study Abroad Consultants in Pakistan
              </div>

                <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
                    {title}{' '}
                    <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                        {midtitle}
                    </span>{' '}
                    <span className="relative">
                        {endtitle}
                        <span className="absolute -bottom-1 left-0 right-0 h-1.5 bg-linear-to-r from-teal-600 via-blue-500 to-teal-600 rounded-full"></span>
                    </span>
                </h2>

              <div className="space-y-4 mb-8">
                {services.map((service, index) => (
                  <div key={index} className="flex items-center gap-4 group">
                    <div className="flex-shrink-0 mt-1">
                      <div className="p-2 rounded-xl bg-linear-to-r from-teal-50 to-blue-50 group-hover:from-teal-100 group-hover:to-blue-100 transition-all duration-300">
                        <service.icon className="w-6 h-6 text-teal-600" />
                      </div>
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-gray-900 mb-1 group-hover:text-teal-700 transition-colors duration-300">
                        {service.title}
                      </h3>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right Content - Hero Image with CTA */}
            <div className="relative">
              {/* Main Image Container */}
              <div className="relative h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-2xl group">
                <Image
                  src="/assets/countries/CTA_Image.avif"
                  alt="Students achieving study abroad success - Expert Consultation"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                  sizes="(max-width: 768px) 100vw, 50vw"
                  priority
                />
                {/* Gradient Overlay */}
                <div className="absolute inset-0 bg-linear-to-t from-gray-900/90 via-gray-900/60 to-transparent" />
                
                {/* Image Content Overlay */}
                <div className="absolute inset-0 p-8 flex flex-col justify-end text-white">
                  {/* Success Story Badge */}
                  <div className="inline-flex items-center gap-2 bg-teal-600/90 backdrop-blur-sm px-4 py-2 rounded-full mb-4 self-start">
                    <div className="w-2 h-2 rounded-full bg-teal-300 animate-pulse" />
                    <span className="text-sm font-semibold">Real Student Success Story</span>
                  </div>
                  
                  {/* Main Headline */}
                  <h3 className="text-3xl md:text-4xl font-bold mb-4">
                    From Pakistan to Top Global Universities
                  </h3>
                  
                  {/* Description */}
                  <p className="text-gray-200 mb-6 max-w-md">
                    Join thousands of successful students who transformed their dreams into reality with our expert guidance.
                  </p>
                  
                  {/* Benefits List */}
                  <div className="grid grid-cols-2 gap-3 mb-8 max-w-md">
                    <div className="flex items-center gap-2">
                      <CheckCircle2 className="w-5 h-5 text-teal-300" />
                      <span className="text-sm">98% Success Rate</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <CheckCircle2 className="w-5 h-5 text-teal-300" />
                      <span className="text-sm">10,000+ Students</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <CheckCircle2 className="w-5 h-5 text-teal-300" />
                      <span className="text-sm">Free Assessment</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <CheckCircle2 className="w-5 h-5 text-teal-300" />
                      <span className="text-sm">Visa Guarantee</span>
                    </div>
                  </div>
                  
                  {/* Primary CTA Button */}
                  <button
                    onClick={openConsultationModal}
                    className="w-full md:w-auto bg-linear-to-r from-teal-600 to-blue-500 hover:from-teal-700 hover:to-blue-600 text-white text-center py-4 px-8 rounded-xl font-bold text-lg shadow-2xl hover:shadow-3xl transition-all duration-300 transform hover:scale-[1.02] group cursor-pointer flex items-center justify-center"
                  >
                    <span className="flex items-center">
                      <Calendar className="w-5 h-5 mr-3" />
                      Book Your Free Consultation
                      <ChevronRight className="w-5 h-5 ml-2 group-hover:translate-x-2 transition-transform duration-300" />
                    </span>
                  </button>
                  
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default CTASection