'use client';

import { ArrowRight, Play, Sparkles } from 'lucide-react';
import Link from 'next/link';

export default function Hero() {
    return (
        <section
            className="relative w-full min-h-[600px] h-[100svh] flex items-center justify-center text-center overflow-hidden"
        >
            {/* YouTube Video Background */}
            <div className="absolute inset-0 w-full h-full z-0">
                <iframe
                    className="absolute top-1/2 left-1/2 w-[177.77vh] h-[56.25vw] min-h-full min-w-full -translate-x-1/2 -translate-y-1/2"
                    src="https://www.youtube.com/embed/foX6Zx2EnnI?autoplay=1&mute=1&loop=1&playlist=foX6Zx2EnnI&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1"
                    title="Background video"
                    allow="autoplay; encrypted-media"
                    allowFullScreen
                />
            </div>

            {/* Vignette Effect - Dark edges, lighter center to see video */}
            <div
                className="absolute inset-0 z-[1]"
                style={{
                    background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.9) 100%)'
                }}
            />

            {/* Subtle Gradient Accent */}
            <div className="absolute inset-0 bg-gradient-to-br from-red-600/20 via-transparent to-yellow-600/20 z-[2]" />





            {/* Main Content */}
            <div className="container px-4 sm:px-6 lg:px-8 relative z-10 pt-20 sm:pt-0">
                {/* Content Wrapper - Glass morphism cards */}
                <div className="max-w-6xl mx-auto">
                    {/* Badge with Sparkles Icon */}
                    <div className="flex items-center justify-center gap-2 mb-4 sm:mb-6">
                        <div className="inline-flex items-center gap-2 px-4 py-2 sm:px-6 sm:py-2.5 bg-gradient-to-r from-red-500/40 to-yellow-500/40 backdrop-blur-md border border-white/40 rounded-full shadow-lg">
                            <Sparkles className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300" />
                            <span className="text-white font-semibold text-xs sm:text-sm md:text-base drop-shadow-lg">
                                Giải Pháp Truyền Thông Sáng Tạo
                            </span>
                        </div>
                    </div>

                    <div>
                        {/* Main Heading */}
                        <h1 className="text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-extrabold leading-tight mb-4 sm:mb-6 px-3 xs:px-4 sm:px-6">
                            <span className="block text-white" style={{ textShadow: '0 4px 20px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.9)' }}>
                                Đối Tác Truyền Thông{' '}
                                <span className="inline-block px-1.5 py-0.5 xs:px-2 xs:py-1 sm:px-3 sm:py-1 bg-gradient-to-r from-red-500 via-red-600 to-yellow-500 rounded-lg text-white shadow-xl">
                                    Tin Cậy
                                </span>
                            </span>
                            <span className="block text-white mt-2 sm:mt-3" style={{ textShadow: '0 4px 20px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.9)' }}>
                                Cho{' '}
                                <span className="inline-block px-1.5 py-0.5 xs:px-2 xs:py-1 sm:px-3 sm:py-1 bg-gradient-to-r from-yellow-500 via-red-600 to-red-700 rounded-lg text-white shadow-xl">
                                    Doanh Nghiệp
                                </span>{' '}
                                Của Bạn
                            </span>
                        </h1>

                        {/* Description */}
                        <div className="mt-4 sm:mt-6 md:mt-8 max-w-4xl mx-auto px-3 xs:px-4 sm:px-6">
                            <p className="text-white text-xs xs:text-sm sm:text-base md:text-lg leading-relaxed px-2 xs:px-4 sm:px-6 py-3 xs:py-4"
                                style={{ textShadow: '0 2px 10px rgba(0,0,0,0.8)' }}>
                                <span className="font-bold text-red-400">V_LOG </span>
                                <span className="font-bold text-white">MEDIA</span> là đơn vị chuyên cung cấp giải pháp truyền thông toàn diện: từ sản xuất{' '}
                                <span className="text-yellow-300 font-semibold">video ngắn</span>,{' '}
                                <span className="text-yellow-300 font-semibold">TVC quảng cáo</span>,{' '}
                                <span className="text-yellow-300 font-semibold">viral content</span>{' '}
                                đến triển khai chiến dịch quảng bá đa nền tảng như Facebook, TikTok, Google, Zalo...
                                Chúng tôi đồng hành cùng doanh nghiệp để xây dựng thương hiệu chuyên nghiệp và lan tỏa hiệu quả.
                            </p>
                        </div>

                        {/* CTA Buttons */}
                        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-center justify-center mt-2 sm:mt-4 md:mt-6 px-4">
                            <div className="w-full sm:w-auto">
                                <Link
                                    href="/lien-he"
                                    className="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 sm:px-8 sm:py-4 md:px-10 md:py-5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-full font-bold text-sm sm:text-base md:text-lg hover:from-red-600 hover:to-red-700 transition-all duration-300 shadow-2xl hover:shadow-red-500/50 border-2 border-red-400"
                                    style={{ textShadow: '0 2px 8px rgba(0,0,0,0.5)' }}
                                >
                                    <Play className="w-4 h-4 sm:w-5 sm:h-5" />
                                    <span className="whitespace-nowrap">Kết Nối Với Chúng Tôi</span>
                                    <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5" />
                                </Link>
                            </div>

                            <div className="w-full sm:w-auto">
                                <Link
                                    href="/bang-gia"
                                    className="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-6 py-3 sm:px-8 sm:py-4 md:px-10 md:py-5 bg-white/95 backdrop-blur-md border-2 border-white text-red-600 rounded-full font-bold text-sm sm:text-base md:text-lg hover:bg-yellow-400 hover:border-yellow-300 hover:text-red-700 transition-all duration-300 shadow-2xl"
                                >
                                    <span className="whitespace-nowrap">Xem Bảng Giá</span>
                                    <Sparkles className="w-4 h-4 sm:w-5 sm:h-5" />
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
