'use client'

import React, { useState } from 'react'
import { Award, CheckCircle, GraduationCap, PhoneCall, Sparkles, Users } from "lucide-react";
import StatCard from "../components/shared/StatCard";
import FreeConsultationModal from "../components/organisms/FreeConsultationModal";
import Link from "next/link";

const HeroSection = ({toptitle, simple_title, color_title, description}) => {

    const [isConsultationModalOpen, setIsConsultationModalOpen] = useState(false);

    // Consultation modal functions
  const openConsultationModal = () => {
    setIsConsultationModalOpen(true);
  };

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

    // Quick facts about studying in China
  const quickFacts = [
    { number: '100,000+', label: 'Courses', icon: Users, color: 'teal' },
    { number: '1500+', label: 'Universities', icon: Users, color: 'amber' },
    { number: '98%', label: 'Visa Success Rate', icon: Award, color: 'emerald' },
    { number: '20+', label: 'Years of Experience', icon: CheckCircle, color: 'teal' }
  ];

  return (
    <>
        <FreeConsultationModal
            isOpen={isConsultationModalOpen}
            onClose={closeConsultationModal}
            title=""
            description={`Get expert guidance about studying in China - completely free!`}
        />
        <div className="relative min-h-screen bg-linear-to-b from-gray-50 to-white">
            {/* Animated Background */}
            <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>

            {/* Hero Content */}
            <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">
                <Sparkles className="w-5 h-5 text-teal-600" />
                {toptitle}
                </div>

                <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8 leading-tight">
                {simple_title}{' '}
                <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                    {color_title}
                </span>
                </h1>

                <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-5xl mx-auto leading-relaxed">
                {description}
                </p>

                {/* Quick Facts */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12 max-w-4xl mx-auto">
                {quickFacts.map((fact, index) => (
                    <StatCard 
                    key={index}
                    Icon={fact.icon}
                    number={fact.number}
                    label={fact.label}
                    color={fact.color}
                    />
                ))}
                </div>

                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button 
                    onClick={() => openConsultationModal()}
                    className="bg-linear-to-r cursor-pointer from-teal-600 to-blue-500 text-white px-8 py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center shadow-lg"
                >
                    <GraduationCap className="w-5 h-5 mr-2" />
                    Free Consultation
                </button>
                <Link 
                    href="tel:+923103162004" 
                    className="border-2 cursor-pointer border-teal-600 text-teal-600 px-8 py-3 rounded-xl font-semibold hover:bg-teal-600 hover:text-white transition-all duration-300 flex items-center justify-center"
                >
                    <PhoneCall className="w-5 h-5 mr-2" />
                    Call Now
                </Link>
                </div>
            </div>
            </div>
        </div>
    </>
  )
}

export default HeroSection
