@extends('layouts.app')

@section('title', 'Liên Hệ Quảng Cáo - Truyện Hay')
@section('description', 'Liên hệ với chúng tôi để hợp tác quảng cáo và tiếp cận hàng triệu độc giả trên Truyện Hay')

@section('content')
{{-- Hero Section with Gradient Animation --}}
<div class="relative min-h-screen py-5 flex items-center justify-center bg-gradient-to-br from-orange-500/10 via-amber-500/5 to-background-dark overflow-hidden">
    {{-- Animated Background Blobs --}}
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-orange-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
        <div class="absolute top-0 right-1/4 w-96 h-96 bg-amber-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
        <div class="absolute bottom-0 left-1/2 w-96 h-96 bg-yellow-500 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
    </div>

    {{-- Main Content --}}
    <div class="container mx-auto px-4 lg:px-8 max-w-5xl relative z-10">
        <div class="text-center mb-12">
            {{-- Icon --}}
            <div class="inline-flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-orange-500/30 to-amber-500/30 backdrop-blur-sm mb-8 relative">
                <div class="absolute inset-0 rounded-full bg-orange-500/20 animate-ping"></div>
                <span class="material-symbols-outlined text-7xl text-orange-500 relative z-10">campaign</span>
            </div>

            {{-- Heading --}}
            <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold text-white mb-6 leading-tight">
                Hợp Tác Quảng Cáo
            </h1>

            {{-- Description --}}
            <p class="text-gray-300 text-xl md:text-2xl max-w-3xl mx-auto leading-relaxed mb-4">
                Tiếp cận <span class="text-orange-500 font-bold">hàng triệu độc giả</span> trên nền tảng đọc truyện hàng đầu Việt Nam
            </p>
            <p class="text-gray-400 text-lg md:text-xl max-w-2xl mx-auto mb-12">
                Chúng tôi cung cấp các gói quảng cáo đa dạng, phù hợp với mọi nhu cầu của doanh nghiệp
            </p>
        </div>

        {{-- Stats Grid --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
            <div class="bg-surface-dark/50 backdrop-blur-sm rounded-2xl p-6 border border-orange-500/20 text-center hover:border-orange-500/50 transition-all group">
                <div class="text-3xl md:text-4xl font-extrabold text-orange-500 mb-2 group-hover:scale-110 transition-transform">
                    10.4M+
                </div>
                <div class="text-sm md:text-base text-gray-400">Lượt xem/tháng</div>
            </div>
            <div class="bg-surface-dark/50 backdrop-blur-sm rounded-2xl p-6 border border-amber-500/20 text-center hover:border-amber-500/50 transition-all group">
                <div class="text-3xl md:text-4xl font-extrabold text-amber-500 mb-2 group-hover:scale-110 transition-transform">
                    500K+
                </div>
                <div class="text-sm md:text-base text-gray-400">Người dùng</div>
            </div>
            <div class="bg-surface-dark/50 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 text-center hover:border-yellow-500/50 transition-all group">
                <div class="text-3xl md:text-4xl font-extrabold text-yellow-500 mb-2 group-hover:scale-110 transition-transform">
                    15min
                </div>
                <div class="text-sm md:text-base text-gray-400">Thời gian TB</div>
            </div>
            <div class="bg-surface-dark/50 backdrop-blur-sm rounded-2xl p-6 border border-orange-400/20 text-center hover:border-orange-400/50 transition-all group">
                <div class="text-3xl md:text-4xl font-extrabold text-orange-400 mb-2 group-hover:scale-110 transition-transform">
                    85%
                </div>
                <div class="text-sm md:text-base text-gray-400">Tỷ lệ quay lại</div>
            </div>
        </div>

        {{-- CTA Section --}}
        <div class="max-w-2xl mx-auto">
            <div class="bg-gradient-to-br from-surface-dark to-surface-dark/50 rounded-3xl p-8 md:p-12 border border-gray-800 backdrop-blur-sm shadow-2xl">
                <div class="text-center mb-8">
                    <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                        Bắt Đầu Hợp Tác Ngay
                    </h2>
                    <p class="text-gray-400 text-lg">
                        Liên hệ với chúng tôi qua Telegram để được tư vấn chi tiết về các gói quảng cáo
                    </p>
                </div>

                {{-- Telegram Button --}}
                <a href="https://t.me/YOUR_TELEGRAM_USERNAME"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="group relative block w-full">
                    <div class="absolute -inset-1 bg-gradient-to-r from-orange-500 to-amber-500 rounded-2xl blur-lg opacity-75 group-hover:opacity-100 transition duration-300"></div>
                    <div class="relative flex items-center justify-center gap-4 px-8 py-6 bg-gradient-to-r from-orange-500 to-amber-500 rounded-2xl text-white font-bold text-xl transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
                        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.161c-.18 1.897-.962 6.502-1.359 8.627-.168.9-.5 1.201-.82 1.23-.697.064-1.226-.461-1.901-.903-1.056-.692-1.653-1.123-2.678-1.799-1.185-.781-.417-1.21.258-1.911.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.139-5.062 3.345-.479.329-.913.489-1.302.481-.428-.009-1.252-.242-1.865-.442-.752-.244-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.831-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635.099-.002.321.023.465.141.121.099.155.232.171.326.016.095.037.311.021.479z"/>
                        </svg>
                        <span>Liên hệ qua Telegram</span>
                        <span class="material-symbols-outlined text-2xl group-hover:translate-x-1 transition-transform">arrow_forward</span>
                    </div>
                </a>

                <div class="mt-8 text-center text-gray-500 text-sm">
                    <p>Hoặc gửi email đến: <a href="mailto:advertising@truyenhay.com" class="text-orange-500 hover:text-orange-400 font-semibold transition-colors">advertising@truyenhay.com</a></p>
                </div>
            </div>
        </div>

        {{-- Why Choose Us --}}
        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center p-6">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-orange-500/20 mb-4">
                    <span class="material-symbols-outlined text-3xl text-orange-500">trending_up</span>
                </div>
                <h3 class="text-white font-bold text-lg mb-2">Hiệu Quả Cao</h3>
                <p class="text-gray-400 text-sm">Tỷ lệ chuyển đổi và tương tác vượt trội trong ngành</p>
            </div>
            <div class="text-center p-6">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-amber-500/20 mb-4">
                    <span class="material-symbols-outlined text-3xl text-amber-500">groups</span>
                </div>
                <h3 class="text-white font-bold text-lg mb-2">Đối Tượng Rõ Ràng</h3>
                <p class="text-gray-400 text-sm">Tiếp cận chính xác nhóm khách hàng mục tiêu của bạn</p>
            </div>
            <div class="text-center p-6">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-yellow-500/20 mb-4">
                    <span class="material-symbols-outlined text-3xl text-yellow-500">support_agent</span>
                </div>
                <h3 class="text-white font-bold text-lg mb-2">Hỗ Trợ 24/7</h3>
                <p class="text-gray-400 text-sm">Đội ngũ chuyên nghiệp sẵn sàng tư vấn mọi lúc</p>
            </div>
        </div>

        {{-- Back to Home --}}
        <div class="mt-12 text-center">
            <a href="{{ route('home') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white font-semibold rounded-xl transition-all">
                <span class="material-symbols-outlined">arrow_back</span>
                Quay lại trang chủ
            </a>
        </div>
    </div>
</div>

<style>
    @keyframes blob {
        0% { transform: translate(0px, 0px) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
        100% { transform: translate(0px, 0px) scale(1); }
    }

    .animate-blob {
        animation: blob 7s infinite;
    }

    .animation-delay-2000 {
        animation-delay: 2s;
    }

    .animation-delay-4000 {
        animation-delay: 4s;
    }
</style>
@endsection