'use client';

import ConsultModal from '../Common/ConsultModal';
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export default function CallToActionSection() {
    const [showConsultModal, setShowConsultModal] = useState(false);
    const [isMobile, setIsMobile] = useState(false);
    const [currentPage, setCurrentPage] = useState(0);

    const pages = [
        {
            badge: "Giải Pháp Video",
            title: "Bạn Đang Loay Hoay",
            titleHighlight: "Với Nội Dung Video?",
            description: "Chúng tôi sáng tạo nội dung video chuyên nghiệp, phù hợp với mọi mục tiêu truyền thông của bạn.",
            color: "red"
        },
        {
            badge: "Giải Pháp TVC",
            title: "Quảng Cáo TVC",
            titleHighlight: "Chuyên Nghiệp & Ấn Tượng?",
            description: "Sản xuất TVC quảng cáo với chất lượng cao, truyền tải thông điệp mạnh mẽ đến khách hàng.",
            color: "red"
        },
        {
            badge: "Giải Pháp Livestream",
            title: "Livestream",
            titleHighlight: "Tương Tác Trực Tiếp?",
            description: "Dịch vụ livestream chuyên nghiệp, hỗ trợ đa nền tảng với chất lượng hình ảnh sắc nét.",
            color: "red"
        }
    ];

    useEffect(() => {
        const checkMobile = () => setIsMobile(window.innerWidth < 768);
        checkMobile();
        window.addEventListener('resize', checkMobile);
        return () => window.removeEventListener('resize', checkMobile);
    }, []);

    // Auto-play carousel - chuyển trang mỗi 10 giây
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentPage((prev) => (prev + 1) % pages.length);
        }, 8000); // 8 seconds

        return () => clearInterval(interval);
    }, [pages.length]);

    const currentContent = pages[currentPage];

    return (
        <section
            className="relative py-12 md:py-16 bg-center bg-cover bg-no-repeat overflow-hidden"
            style={{
                backgroundImage: 'url("/images/about/vlog-media-bia.png")',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
            }}
        >
            {/* Enhanced overlay with gradient */}
            <div className="absolute inset-0 bg-black/70 z-0" />

            <div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid lg:grid-cols-2 gap-8 items-center">
                    {/* Left Side - Content Card with Carousel */}
                    <motion.div
                        initial={{ opacity: 0, x: -50 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.8, ease: "easeOut" }}
                        className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-3xl p-8 md:p-10 lg:p-12 relative"
                    >
                        <AnimatePresence mode="wait">
                            <motion.div
                                key={currentPage}
                                initial={{ opacity: 0, x: 50 }}
                                animate={{ opacity: 1, x: 0 }}
                                exit={{ opacity: 0, x: -50 }}
                                transition={{ duration: 0.3 }}
                                className="min-h-[280px] md:min-h-[320px]"
                            >
                                {/* Small Badge */}
                                <div className={`inline-flex items-center gap-2 px-4 py-2 ${
                                    currentContent.color === 'red' ? 'bg-red-900/20 border-red-700/20' :
                                    currentContent.color === 'orange' ? 'bg-orange-900/20 border-orange-700/20' :
                                    'bg-yellow-900/20 border-yellow-700/20'
                                } border rounded-full mb-6`}>
                                    <div className={`w-2 h-2 rounded-full ${
                                        currentContent.color === 'red' ? 'bg-red-300/60' :
                                        currentContent.color === 'orange' ? 'bg-orange-300/60' :
                                        'bg-yellow-300/60'
                                    } animate-pulse`}></div>
                                    <span className={`text-sm font-semibold ${
                                        currentContent.color === 'red' ? 'text-red-100/80' :
                                        currentContent.color === 'orange' ? 'text-orange-100/80' :
                                        'text-yellow-100/80'
                                    } uppercase tracking-wider`}>{currentContent.badge}</span>
                                </div>

                                {/* Title */}
                                <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white leading-tight mb-6">
                                    {currentContent.title}
                                    <span className="block mt-2 text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-orange-400 to-yellow-400">
                                        {currentContent.titleHighlight}
                                    </span>
                                </h2>

                                {/* Description */}
                                <p className="text-base md:text-lg text-white/90 leading-relaxed mb-6">
                                    {currentContent.description}
                                </p>

                                {/* Bottom Line */}
                                <div className="h-1 w-20 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 rounded-full"></div>
                            </motion.div>
                        </AnimatePresence>

                        {/* Page Indicators */}
                        <div className="flex items-center justify-center gap-2 mt-8">
                            {pages.map((page, index) => (
                                <motion.button
                                    key={index}
                                    onClick={() => setCurrentPage(index)}
                                    whileHover={{ scale: 1.2 }}
                                    whileTap={{ scale: 0.9 }}
                                    className={`relative transition-all duration-300 ${
                                        index === currentPage
                                            ? 'w-8 h-2 rounded-full'
                                            : 'w-2 h-2 rounded-full'
                                    }`}
                                    aria-label={`Go to page ${index + 1}`}
                                >
                                    <div className={`w-full h-full rounded-full transition-all duration-300 ${
                                        index === currentPage
                                            ? page.color === 'red'
                                                ? 'bg-gradient-to-r from-red-400 to-orange-400 shadow-lg shadow-red-500/50'
                                                : page.color === 'orange'
                                                ? 'bg-gradient-to-r from-orange-400 to-yellow-400 shadow-lg shadow-orange-500/50'
                                                : 'bg-gradient-to-r from-yellow-400 to-orange-400 shadow-lg shadow-yellow-500/50'
                                            : 'bg-white/40 hover:bg-white/60'
                                    }`} />
                                </motion.button>
                            ))}
                        </div>
                    </motion.div>

                    {/* Right Side - Stats or Empty Space */}
                    <motion.div
                        initial={{ opacity: 0, x: 50 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
                        className="hidden lg:flex items-center justify-center"
                    >
                        <div className="text-white/20 text-8xl xl:text-9xl font-black">
                            MEDIA
                        </div>
                    </motion.div>
                </div>
            </div>
            <ConsultModal show={showConsultModal} onClose={() => setShowConsultModal(false)} />
        </section>
    );
}
