@extends('frontend::layouts.master')

@section('content')
    <!-- Breadcrumb -->
    <div class="pt-24 md:pt-32 pb-5">
        <div class="container mx-auto px-4">
            <nav class="flex overflow-x-auto" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 whitespace-nowrap">
                    <li class="inline-flex items-center">
                        <a href="{{ route('index') }}"
                            class="inline-flex items-center text-gray-400 hover:text-purple-400 transition-colors">
                            Home
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-600"></span>
                            <a href="{{ route('products') }}"
                                class="ml-1 text-gray-400 hover:text-purple-400 transition-colors md:ml-2">
                                Products
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <span class="icon-[tabler--chevron-right] size-4 text-gray-600"></span>
                            <span
                                class="ml-1 md:ml-2 truncate max-w-[200px] md:max-w-none bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent font-medium">
                                PUBG Mobile UC
                            </span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Product Details -->
    <section class="pb-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
                <!-- Left Column - Product Image -->
                <div class="space-y-6">
                    <div class="relative rounded-2xl overflow-hidden group">
                        <img src="https://news.codashop.com/ph/wp-content/uploads/sites/5/2023/07/PUBG-Mobile-and-PUBG-PC.jpg" 
                             alt="PUBG Mobile UC" 
                             class="w-full h-[400px] object-cover transform group-hover:scale-105 transition-transform duration-500">
                        <div class="absolute top-4 right-4">
                            <span class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl">
                                Hot
                            </span>
                        </div>
                    </div>
                    <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
                        <h3 class="text-xl font-semibold text-white mb-4">Product Description</h3>
                        <ul class="space-y-3 text-gray-300">
                            <li class="flex items-center space-x-3">
                                <span class="icon-[tabler--check] size-5 text-purple-400"></span>
                                <span>Instant delivery within 1-5 minutes after payment</span>
                            </li>
                            <li class="flex items-center space-x-3">
                                <span class="icon-[tabler--check] size-5 text-purple-400"></span>
                                <span>100% Safe and Secure transaction</span>
                            </li>
                            <li class="flex items-center space-x-3">
                                <span class="icon-[tabler--check] size-5 text-purple-400"></span>
                                <span>24/7 Customer Support</span>
                            </li>
                            <li class="flex items-center space-x-3">
                                <span class="icon-[tabler--check] size-5 text-purple-400"></span>
                                <span>Bonus UC on larger purchases</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
                        <h3 class="text-xl font-semibold text-white mb-4">How to Top Up</h3>
                        <ol class="space-y-3 text-gray-300 list-decimal list-inside">
                            <li>Select your desired UC amount</li>
                            <li>Enter your PUBG Mobile Player ID</li>
                            <li>Enter your email for receipt</li>
                            <li>Complete the payment</li>
                            <li>UC will be added to your account instantly</li>
                        </ol>
                    </div>
                </div>

                <!-- Right Column - Product Details -->
                <div class="space-y-8">
                    <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
                        <h1 class="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent mb-4">
                            PUBG Mobile UC
                        </h1>
                        <p class="text-gray-300 mb-6">
                            Purchase PUBG Mobile UC (Unknown Cash) safely and instantly. Top up your PUBG Mobile account with the best rates in Thailand. We provide fast delivery and secure transactions.
                        </p>
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="amount" class="peer hidden">
                                    <div class="p-4 text-center rounded-xl border border-white/10 peer-checked:border-purple-500 peer-checked:bg-purple-500/20">
                                        <div class="font-semibold text-white">60 UC</div>
                                        <div class="text-purple-400">฿35.00</div>
                                        <div class="text-sm text-gray-400">Basic Pack</div>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="amount" class="peer hidden">
                                    <div class="p-4 text-center rounded-xl border border-white/10 peer-checked:border-purple-500 peer-checked:bg-purple-500/20">
                                        <div class="font-semibold text-white">180 UC</div>
                                        <div class="text-purple-400">฿99.00</div>
                                        <div class="text-sm text-gray-400">Popular Choice</div>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="amount" class="peer hidden">
                                    <div class="p-4 text-center rounded-xl border border-white/10 peer-checked:border-purple-500 peer-checked:bg-purple-500/20">
                                        <div class="font-semibold text-white">325 UC</div>
                                        <div class="text-purple-400">฿179.00</div>
                                        <div class="text-sm text-gray-400">+5% Bonus</div>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="amount" class="peer hidden">
                                    <div class="p-4 text-center rounded-xl border border-white/10 peer-checked:border-purple-500 peer-checked:bg-purple-500/20">
                                        <div class="font-semibold text-white">660 UC</div>
                                        <div class="text-purple-400">฿349.00</div>
                                        <div class="text-sm text-gray-400">+8% Bonus</div>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="amount" class="peer hidden">
                                    <div class="p-4 text-center rounded-xl border border-white/10 peer-checked:border-purple-500 peer-checked:bg-purple-500/20">
                                        <div class="font-semibold text-white">1800 UC</div>
                                        <div class="text-purple-400">฿899.00</div>
                                        <div class="text-sm text-gray-400">+12% Bonus</div>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="amount" class="peer hidden">
                                    <div class="p-4 text-center rounded-xl border border-white/10 peer-checked:border-purple-500 peer-checked:bg-purple-500/20">
                                        <div class="font-semibold text-white">3850 UC</div>
                                        <div class="text-purple-400">฿1,799.00</div>
                                        <div class="text-sm text-gray-400">+15% Bonus</div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="mt-6 p-4 bg-purple-500/10 rounded-xl">
                            <p class="text-md text-gray-300">
                                🎮 Select your preferred UC amount above<br>
                                💬 Click contact us to proceed with purchase<br>
                                ⚡ Get instant delivery after payment confirmation
                            </p>
                        </div>
                        <button class="mt-6 w-full px-6 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-xl hover:from-purple-700 hover:to-pink-700 transform hover:-translate-y-1 transition-all duration-300">
                            Contact Us
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection