'use client';

import { ArrowRight, CheckCircle, X, Camera, Users, Video } from 'lucide-react';
import { ROUTES } from '@/config/routes';
import Link from 'next/link';
import { useState } from 'react';

export default function AboutUs() {
    const [isOpen, setOpen] = useState(false);

    return (
        <section className="w-full py-8 xs:py-10 sm:py-12 md:py-16 lg:py-20 relative">
            {/* Shape SVG trang trí */}
            <div
                className="absolute inset-0 pointer-events-none z-[1]"
                style={{
                    backgroundImage: `url('/images/hero/shape-01.svg'), url('/images/hero/shape-02.svg')`,
                    backgroundPosition: 'right top, left calc(100% - -4rem)',
                    backgroundRepeat: 'no-repeat, no-repeat',
                    backgroundSize: 'auto, auto',
                }}
            ></div>

            {/* Vòng tròn trang trí */}
            <div className="absolute inset-0 pointer-events-none opacity-30 z-[2]">
                <div className="absolute top-20 right-20 w-72 h-72 bg-red-300 rounded-full blur-3xl" />
                <div className="absolute bottom-20 left-20 w-72 h-72 bg-orange-300 rounded-full blur-3xl" />
            </div>

            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                    <div className="space-y-6">
                        <span className="inline-block text-red-500 font-bold text-sm md:text-base uppercase tracking-widest bg-red-50 px-4 py-2 rounded-full">
                            Về Chúng Tôi
                        </span>
                        <h2 className="text-3xl md:text-5xl font-extrabold text-neutral-900 leading-tight">
                            Sáng Tạo Video – <br />
                            <span className="text-red-500">Lan Tỏa Câu Chuyện</span> Thương Hiệu
                        </h2>
                        <p className="text-neutral-600 text-base md:text-lg leading-relaxed">
                            Với tinh thần sáng tạo và sự chỉn chu trong từng khung hình,
                            <span className="font-bold text-red-600"> V_LOG </span>
                            <span className="font-bold text-black">MEDIA </span>
                            chuyên sản xuất video quảng cáo, short video, TVC, Video Doanh nghiệp 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, ấn tượng và hiệu quả.
                        </p>

                        <div className="space-y-4">
                            {[
                                "Chuyên nghiệp trong sản xuất TVC, video quảng cáo và phóng sự doanh nghiệp",
                                "Sáng tạo nội dung độc đáo giúp thương hiệu nổi bật trên mọi nền tảng",
                                "Tối ưu quy trình quay dựng để đảm bảo tiến độ và chất lượng cao nhất"
                            ].map((text, index) => (
                                <div
                                    key={index}
                                    className="flex items-start gap-3 group"
                                >
                                    <div className="flex-shrink-0 w-6 h-6 bg-gradient-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center mt-0.5 group-hover:scale-110 transition-transform duration-300">
                                        <CheckCircle className="w-4 h-4 text-white" />
                                    </div>
                                    <p className="text-neutral-700 text-base leading-relaxed flex-1">
                                        {text}
                                    </p>
                                </div>
                            ))}
                        </div>

                        <div>
                            <Link
                                href={ROUTES.ABOUT}
                                className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-red-500 to-red-600 text-white font-bold rounded-full hover:from-red-600 hover:to-red-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
                            >
                                Xem Thêm Thông Tin
                                <ArrowRight className="w-5 h-5" />
                            </Link>
                        </div>
                    </div>

                    <div className="relative w-full">
                        <div className="relative rounded-2xl overflow-hidden shadow-2xl p-6">
                            {/* Animated border */}
                            <div className="absolute inset-0 rounded-2xl overflow-hidden">
                                <div
                                    className="absolute inset-0"
                                    style={{
                                        background: 'linear-gradient(90deg, #ef4444, #f97316, #ef4444)',
                                        backgroundSize: '200% 100%',
                                    }}
                                />
                                <div className="absolute inset-[3px] bg-white rounded-2xl" />
                            </div>

                            <div className="relative">
                                <img
                                    src="/images/about/team-min.png"
                                    alt="V_LOG MEDIA Team"
                                    className="w-full h-auto rounded-xl"
                                />

                                <button
                                    className="absolute inset-0 flex justify-center items-center group"
                                    onClick={() => setOpen(true)}
                                >
                                    <div
                                        className="absolute inset-0 flex items-center justify-center"
                                    >
                                        <div className="play-icon" />
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Video Modal */}
            {isOpen && (
                <div
                    className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/90 p-4"
                    onClick={() => setOpen(false)}
                >
                    <div
                        className="relative w-full max-w-5xl aspect-video"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <button
                            onClick={() => setOpen(false)}
                            className="absolute -top-12 right-0 p-2 text-white hover:text-red-500 transition-colors"
                        >
                            <X className="w-8 h-8" />
                        </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>
            )}
        </section>
    );
}
