'use client';

import ModernBackground from '@/components/Common/ModernBackground';
import { MessageCircle } from 'lucide-react';
import Contact from "@/components/Contact";

export default function ContactClient() {
    return (
        <div className="relative w-full bg-gradient-to-br from-white via-red-50/30 to-orange-50/20 overflow-x-hidden">
            <ModernBackground />
            <section className="relative min-h-[500px] flex items-center overflow-hidden bg-gradient-to-br from-red-600 via-red-500 to-orange-500">
                <div className="absolute inset-0">
                    <div className="absolute top-20 left-10 w-96 h-96 bg-yellow-400/20 rounded-full blur-3xl" />
                    <div className="absolute bottom-20 right-10 w-96 h-96 bg-red-300/20 rounded-full blur-3xl" />
                </div>

                <div className="container relative z-10 py-24">
                    <div className="text-center text-white max-w-4xl mx-auto">
                        <span className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm border border-white/30 rounded-full text-sm font-semibold uppercase tracking-wide mb-6">
                            <MessageCircle className="w-4 h-4" />
                            Liên Hệ Với Chúng Tôi
                        </span>
                        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                            Sẵn Sàng Biến <span className="text-yellow-300">Ý Tưởng</span><br />
                            Thành Hiện Thực
                        </h1>
                        <p className="text-xl text-white/90 mb-8 max-w-3xl mx-auto leading-relaxed">
                            Hãy chia sẻ dự án của bạn với chúng tôi. Đội ngũ chúng tôi
                            luôn sẵn sàng đồng hành cùng bạn để tạo ra những video ấn tượng.
                        </p>
                    </div>
                </div>
            </section>

            <section>
                <Contact />
            </section>
        </div>
    );
}
