'use client';

import PortfolioViewer from '@/components/PortfolioViewer';
import VerticalVideoScroll from '@/components/VerticalVideoScroll';
import { CONTACT_INFO } from '@/config/contact';
import { ROUTES } from '@/config/routes';
import {
    ArrowRight,
    Award,
    Heart,
    Lightbulb,
    Play,
    Shield,
    Sparkles,
    Star,
    Target,
    TrendingUp,
    Users,
    Zap
} from 'lucide-react';
import Image from 'next/image';
import { useState } from 'react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function AboutClient() {
    const [isVideoOpen, setVideoOpen] = useState(false);

    // BTS Videos
    const btsVideos = [
        { id: '3zspkTpgDmQ', title: 'Behind The Scenes 1' },
        { id: '8YS2hfo5Euc', title: 'Behind The Scenes 2' },
        { id: 'k6Ue8MvMw7E', title: 'Behind The Scenes 3' },
        { id: 's-2CgZc3V8Q', title: 'Behind The Scenes 4' }
    ];

    // Core Values
    const values = [
        {
            icon: <Sparkles className="w-8 h-8" />,
            title: "Sáng Tạo",
            description: "Không ngừng đổi mới và tìm kiếm những ý tưởng độc đáo để tạo ra nội dung video ấn tượng, giúp thương hiệu của bạn nổi bật.",
            gradient: "from-orange-500 to-orange-500"
        },
        {
            icon: <Target className="w-8 h-8" />,
            title: "Chuyên Nghiệp",
            description: "Cam kết mang đến chất lượng cao nhất trong mọi dự án với quy trình sản xuất chuyên nghiệp từ ý tưởng đến thành phẩm.",
            gradient: "from-red-500 to-red-600"
        },
        {
            icon: <Heart className="w-8 h-8" />,
            title: "Tận Tâm",
            description: "Đặt sự hài lòng của khách hàng lên hàng đầu, luôn lắng nghe và thấu hiểu để tạo ra sản phẩm vượt mong đợi.",
            gradient: "from-blue-500 to-blue-600"
        },
        {
            icon: <TrendingUp className="w-8 h-8" />,
            title: "Hiệu Quả",
            description: "Tối ưu hóa quy trình và nguồn lực để đảm bảo tiến độ nhanh chóng mà vẫn giữ vững chất lượng sản phẩm.",
            gradient: "from-green-500 to-green-600"
        }
    ];

    // Achievements
    const achievements = [
        {
            number: "500+",
            label: "Dự Án Hoàn Thành",
            icon: <Award className="w-8 h-8" />,
            gradient: "from-red-500 to-orange-500"
        },
        {
            number: "300+",
            label: "Khách Hàng Tin Tưởng",
            icon: <Users className="w-8 h-8" />,
            gradient: "from-blue-500 to-blue-600"
        },
        {
            number: "5+",
            label: "Năm Kinh Nghiệm",
            icon: <Star className="w-8 h-8" />,
            gradient: "from-purple-500 to-purple-600"
        },
        {
            number: "100%",
            label: "Khách Hàng Hài Lòng",
            icon: <Heart className="w-8 h-8" />,
            gradient: "from-red-500 to-red-600"
        }
    ];

    const whyChooseUs = [
        {
            icon: <Lightbulb className="w-8 h-8" />,
            title: "Ý Tưởng Sáng Tạo",
            description: "Đội ngũ creative giàu kinh nghiệm với những ý tưởng độc đáo"
        },
        {
            icon: <Zap className="w-8 h-8" />,
            title: "Tiến Độ Nhanh",
            description: "Quy trình làm việc tối ưu, bàn giao đúng hạn cam kết"
        },
        {
            icon: <Shield className="w-8 h-8" />,
            title: "Bảo Hành Dài Hạn",
            description: "Hỗ trợ và bảo hành sản phẩm lâu dài sau bàn giao"
        },
        {
            icon: <Award className="w-8 h-8" />,
            title: "Chất Lượng Đảm Bảo",
            description: "Cam kết hoàn tiền 100% nếu không hài lòng"
        }
    ];

    return (
        <div className="relative w-full bg-white overflow-x-hidden">
            {/* Hero Section - Modern Design */}
            <section className="relative w-full min-h-[90vh] flex items-center overflow-hidden bg-gradient-to-br from-red-600 via-red-500 to-orange-500">
                {/* Animated Background Pattern */}
                <div className="absolute inset-0 overflow-hidden">
                    <div className="absolute top-20 -left-20 w-[500px] h-[500px] bg-yellow-400/20 rounded-full blur-3xl animate-pulse-glow" />
                    <div className="absolute bottom-10 -right-20 w-[700px] h-[700px] bg-red-300/20 rounded-full blur-3xl animate-float" />
                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-orange-400/10 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10 py-24">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
                        <div className="text-white space-y-6 lg:space-y-8">
                            <span className="inline-flex items-center gap-2 px-5 py-2.5 bg-white/20 backdrop-blur-md border border-white/30 rounded-full text-sm font-bold uppercase tracking-wider shadow-lg">
                                <Users className="w-4 h-4" />
                                Về Chúng Tôi
                            </span>

                            <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black leading-[1.1] tracking-tight">
                                <span className="text-white">Sáng Tạo Video –</span> <br />
                                <span className="text-yellow-300 drop-shadow-lg">Lan Tỏa</span> <span className="text-white">Câu Chuyện</span> <br />
                                <span className="text-yellow-300">Thương Hiệu</span>
                            </h1>

                            <p className="text-base md:text-lg lg:text-xl text-white leading-relaxed max-w-2xl">
                                Với tinh thần sáng tạo và sự chỉn chu trong từng khung hình,
                                <span className="font-black"> <span className="text-yellow-300">V_LOG</span> <span className="text-white">MEDIA </span></span>
                                chuyên sản xuất video quảng cáo, TVC, phóng sự và nội dung số,
                                giúp thương hiệu truyền tải thông điệp một cách sống động và hiệu quả.
                            </p>

                            <div className="flex flex-col sm:flex-row gap-4 pt-4">
                                <a
                                    href={ROUTES.PRICING}
                                    className="inline-flex items-center justify-center px-8 py-4 bg-white text-red-600 font-bold rounded-2xl hover:bg-yellow-300 hover:text-red-700 hover:scale-105 active:scale-95 transition-all duration-300 shadow-2xl hover:shadow-yellow-300/50"
                                >
                                    Xem Bảng Giá
                                    <ArrowRight className="w-5 h-5 ml-2" />
                                </a>
                                <a
                                    href="#story"
                                    onClick={(e) => {
                                        e.preventDefault();
                                        document.querySelector('#story')?.scrollIntoView({ behavior: 'smooth' });
                                    }}
                                    className="inline-flex items-center justify-center px-8 py-4 bg-white/10 backdrop-blur-md text-white font-bold rounded-2xl hover:bg-white/20 hover:scale-105 active:scale-95 transition-all duration-300 border-2 border-white/50 hover:border-white shadow-lg"
                                >
                                    Khám Phá Thêm
                                </a>
                            </div>
                        </div>

                        <div className="relative lg:pl-8">
                            <div className="relative rounded-[2rem] lg:rounded-[3rem] overflow-hidden shadow-2xl group">
                                <Image
                                    src="/images/about/team-min.png"
                                    alt="V_LOG MEDIA Team"
                                    width={800}
                                    height={600}
                                    className="w-full h-auto transform group-hover:scale-105 transition-transform duration-700"
                                />
                                {/* Gradient Overlay */}
                                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
                                
                                {/* Play Button */}
                                <button
                                    onClick={() => setVideoOpen(true)}
                                    className="absolute inset-0 flex items-center justify-center group"
                                >
                                    <div className="relative w-16 h-16 md:w-20 md:h-20 bg-white/20 rounded-full flex items-center justify-center border-4 border-white shadow-[0_0_30px_rgba(255,255,255,0.3)] hover:shadow-[0_0_50px_rgba(255,255,255,0.5)] hover:scale-110 active:scale-95 transition-all duration-300 animate-pulse">
                                        <Play className="w-8 h-8 md:w-10 md:h-10 text-white ml-1 drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]" fill="currentColor" />
                                    </div>
                                </button>
                            </div>

                            {/* Floating Stats Badge */}
                            <div className="absolute -bottom-4 -left-4 lg:-bottom-6 lg:-left-6 bg-gradient-to-br from-yellow-400 via-yellow-500 to-orange-500 rounded-2xl lg:rounded-3xl shadow-2xl p-4 lg:p-6 hidden md:block border-4 border-white animate-fade-in">
                                <div className="flex items-center gap-3 lg:gap-4">
                                    <div className="w-12 h-12 lg:w-16 lg:h-16 bg-white rounded-full flex items-center justify-center shadow-lg">
                                        <Award className="w-6 h-6 lg:w-8 lg:h-8 text-red-600" />
                                    </div>
                                    <div>
                                        <div className="text-2xl lg:text-3xl font-black text-white">500+</div>
                                        <div className="text-xs lg:text-sm text-white font-bold">Dự Án Thành Công</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Achievements Section - Modern Cards */}
            <section className="w-full py-16 md:py-20 lg:py-24 bg-gradient-to-b from-neutral-50 via-white to-neutral-50 relative">
                <div className="container">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
                        {achievements.map((item, index) => (
                            <div
                                key={index}
                                className="bg-white rounded-3xl p-6 md:p-8 lg:p-10 text-center shadow-xl hover:shadow-2xl hover:-translate-y-2 transition-all duration-500 border border-neutral-100"
                            >
                                <div className={`inline-flex items-center justify-center w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-gradient-to-br ${item.gradient} text-white mb-4 md:mb-6 shadow-lg hover:rotate-12 hover:scale-110 transition-all duration-300`}>
                                    {item.icon}
                                </div>
                                <div className="text-3xl md:text-4xl lg:text-5xl font-black text-neutral-900 mb-2">
                                    {item.number}
                                </div>
                                <div className="text-sm md:text-base font-bold text-neutral-600">
                                    {item.label}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Story Section - BTS Videos */}
            <section id="story" className="w-full py-16 md:py-20 lg:py-24 bg-gradient-to-b from-white via-neutral-50 to-white relative overflow-hidden">
                {/* Decorative Elements */}
                <div className="absolute inset-0 opacity-5">
                    <div className="absolute top-20 right-20 w-64 h-64 bg-red-500 rounded-full blur-3xl" />
                    <div className="absolute bottom-20 left-20 w-64 h-64 bg-orange-500 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10">
                    <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 md:gap-10 lg:gap-12 items-center">
                        {/* Video Shorts - Left Side (2 cols) */}
                        <div className="flex flex-col items-center lg:items-start order-2 lg:order-1 lg:col-span-2">
                            <div className="relative group w-[320px] xs:w-[350px] sm:w-[380px] md:w-[400px] lg:w-[420px]">
                                {/* Glow Effect */}
                                <div className="absolute -inset-1 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 rounded-[2rem] blur-xl opacity-30 group-hover:opacity-50 transition-opacity duration-500" />
                                
                                {/* Video Container */}
                                <div className="relative w-full h-[568px] xs:h-[622px] sm:h-[676px] md:h-[711px] lg:h-[747px] rounded-[2rem] overflow-hidden shadow-2xl bg-black ring-4 ring-white">
                                    <VerticalVideoScroll videos={btsVideos} />
                                </div>
                            </div>
                        </div>

                        {/* Content - Right Side (3 cols) */}
                        <div className="space-y-5 md:space-y-7 order-1 lg:order-2 lg:col-span-3">
                            <div className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 rounded-full">
                                <Sparkles className="w-4 h-4 text-red-600" />
                                <span className="text-red-600 font-black text-sm uppercase tracking-wider">
                                    Câu Chuyện Của Chúng Tôi
                                </span>
                            </div>
                            
                            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-neutral-900 leading-[1.1] tracking-tight">
                                Hành Trình Sáng Tạo <br />
                                <span className="bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent">Không Ngừng Nghỉ</span>
                            </h2>
                            <p className="text-neutral-700 text-lg leading-relaxed font-medium">
                                Khởi đầu từ niềm đam mê với nghệ thuật hình ảnh và kể chuyện,
                                <span className="font-extrabold"> <span className="text-red-600">V_LOG</span> <span className="text-neutral-900">MEDIA </span></span>
                                đã không ngừng phát triển để trở thành đối tác tin cậy của hàng trăm thương hiệu
                                trong việc sản xuất nội dung video chất lượng cao.
                            </p>
                            <p className="text-neutral-700 text-lg leading-relaxed font-medium">
                                Chúng tôi tin rằng mỗi thương hiệu đều có một câu chuyện độc đáo đáng được kể.
                                Và sứ mệnh của chúng tôi là biến những câu chuyện đó thành những video ấn tượng,
                                chạm đến trái tim khách hàng và tạo nên giá trị thực sự cho doanh nghiệp.
                            </p>

                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
                                {whyChooseUs.map((item, index) => (
                                    <div
                                        key={index}
                                        className="flex items-start gap-3 bg-white border-2 border-neutral-100 p-4 rounded-xl hover:shadow-lg hover:border-red-200 transition-all duration-300"
                                    >
                                        <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center text-red-600 flex-shrink-0">
                                            {item.icon}
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-neutral-900 mb-1">{item.title}</h4>
                                            <p className="text-sm text-neutral-700 font-medium">{item.description}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Core Values Section - Modern Grid */}
            <section className="w-full py-16 md:py-20 lg:py-24 bg-white relative overflow-hidden">
                {/* Background Pattern */}
                <div className="absolute inset-0 opacity-[0.03]">
                    <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle, #ef4444 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
                </div>

                <div className="container relative z-10">
                    <div className="text-center mb-12 md:mb-16 lg:mb-20">
                        <div className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-100 rounded-full mb-6">
                            <Star className="w-4 h-4 text-red-600" />
                            <span className="text-red-600 font-black text-sm uppercase tracking-wider">
                                Giá Trị Cốt Lõi
                            </span>
                        </div>
                        
                        <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-neutral-900 mb-6 leading-tight">
                            Những Điều Chúng Tôi <br className="hidden sm:block" />
                            <span className="bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent">Tin Tưởng</span>
                        </h2>
                        <p className="text-neutral-600 text-base md:text-lg lg:text-xl max-w-3xl mx-auto font-medium leading-relaxed">
                            Giá trị cốt lõi định hướng mọi hành động và quyết định của chúng tôi,
                            giúp chúng tôi mang đến dịch vụ tốt nhất cho khách hàng.
                        </p>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
                        {values.map((value, index) => (
                            <div
                                key={index}
                                className="bg-white rounded-3xl p-8 md:p-10 shadow-xl hover:shadow-2xl hover:-translate-y-3 transition-all duration-500 border border-neutral-100"
                            >
                                <div className={`w-18 h-18 md:w-20 md:h-20 rounded-2xl bg-gradient-to-br ${value.gradient} flex items-center justify-center text-white mb-6 mx-auto shadow-lg hover:rotate-12 hover:scale-110 transition-all duration-300`}>
                                    {value.icon}
                                </div>
                                
                                <h3 className="text-xl md:text-2xl font-black text-neutral-900 mb-4 text-center">
                                    {value.title}
                                </h3>
                                <p className="text-sm md:text-base text-neutral-600 text-center leading-relaxed font-medium">
                                    {value.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Portfolio Section */}
            <section className="w-full py-20 bg-gradient-to-b from-white to-neutral-50 relative overflow-hidden">
                {/* Background decoration - reduced opacity */}
                <div className="absolute inset-0 pointer-events-none opacity-10">
                    <div className="absolute top-20 left-10 w-96 h-96 bg-red-200 rounded-full blur-3xl" />
                    <div className="absolute bottom-20 right-10 w-96 h-96 bg-yellow-200 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10">
                    <div className="text-center max-w-6xl mx-auto mb-12">
                        <div className="inline-flex items-center gap-2 px-4 py-2 bg-red-100 rounded-full mb-6">
                            <Sparkles className="w-4 h-4 text-red-600" />
                            <span className="text-sm font-bold text-red-600 uppercase tracking-wide">
                                Hiểu Hơn Về Chúng Tôi
                            </span>
                        </div>

                        <h2 className="text-3xl md:text-5xl font-extrabold mb-6 leading-tight text-neutral-900">
                            Khám Phá <span className="text-red-600">Portfolio</span>
                            <br className="hidden md:block" />
                            Và Hành Trình Của Chúng Tôi
                        </h2>

                        <p className="text-neutral-700 text-base md:text-lg leading-relaxed mb-10 font-medium">
                            Xem chi tiết các dự án đã thực hiện, quy trình làm việc chuyên nghiệp,
                            và những giá trị mà chúng tôi mang đến cho khách hàng qua từng sản phẩm.
                        </p>
                    </div>

                    {/* Portfolio Viewer Component */}
                    <PortfolioViewer />
                </div>
            </section>

            {/* CTA Section */}
            <section id="contact" className="w-full py-20 bg-gradient-to-br from-red-500 via-red-600 to-orange-600 relative overflow-hidden">
                {/* Background decoration */}
                <div className="absolute inset-0">
                    <div className="absolute top-0 left-0 w-96 h-96 bg-yellow-400/20 rounded-full blur-3xl" />
                    <div className="absolute bottom-0 right-0 w-96 h-96 bg-red-300/20 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10">
                    <div className="text-center text-white">
                        <h2 className="text-3xl md:text-5xl font-bold mb-6">
                            Sẵn Sàng Bắt Đầu Dự Án Của Bạn?
                        </h2>
                        <p className="text-xl mb-10 text-white/90 max-w-2xl mx-auto">
                            Hãy để chúng tôi giúp bạn tạo ra những video ấn tượng,
                            lan tỏa thông điệp thương hiệu đến hàng triệu khách hàng.
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4 justify-center">
                            <a
                                href={ROUTES.PRICING}
                                className="inline-flex items-center justify-center px-8 py-4 bg-white text-red-500 font-bold text-lg rounded-xl hover:bg-yellow-300 hover:text-red-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
                            >
                                Xem Bảng Giá
                                <ArrowRight className="w-5 h-5 ml-2" />
                            </a>
                            <a
                                href={CONTACT_INFO.phone.href}
                                className="inline-flex items-center justify-center px-8 py-4 bg-white/10 backdrop-blur-sm text-white font-bold text-lg rounded-xl hover:bg-white/20 transition-all duration-300 border-2 border-white"
                            >
                                Gọi Ngay: {CONTACT_INFO.phone.display}
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            {/* Video Modal */}
            {isVideoOpen && (
                <div
                    className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/90 p-4 animate-fade-in"
                    onClick={() => setVideoOpen(false)}
                >
                    <div
                        className="relative w-full max-w-5xl aspect-video animate-scale-in"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <button
                            onClick={() => setVideoOpen(false)}
                            className="absolute -top-12 right-0 p-2 text-white hover:text-red-500 transition-colors"
                        >
                            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                        <iframe
                            className="w-full h-full rounded-lg"
                            src="https://www.youtube.com/embed/foX6Zx2EnnI?autoplay=1"
                            title="V_LOG MEDIA Video"
                            allow="encrypted-media"
                            allowFullScreen
                        />
                    </div>
                </div>
            )}
        </div>
    );
}
