@extends('layouts.app')
@section('title', 'Order Confirmed!')

@section('content')
<section class="py-24" style="background: linear-gradient(135deg, #0a0a0a 0%, #001a00 50%, #0a0a0a 100%);">
    <div class="max-w-3xl mx-auto px-4 text-center">
        <div class="text-8xl mb-6">🎉</div>
        <h1 class="font-display text-7xl text-white mb-4" style="text-shadow: 0 0 20px rgba(34,197,94,0.5);">ORDER CONFIRMED!</h1>
        <p class="text-green-400 text-xl font-semibold mb-2">Order #{{ $order->order_number }}</p>
        <p class="text-gray-400 text-lg mb-10">The trolls have been dispatched. Your target has no idea what's coming.</p>

        <div class="card-dark rounded-2xl p-8 text-left mb-8">
            <h2 class="font-display text-3xl text-white mb-4">WHAT HAPPENS NEXT</h2>
            <div class="space-y-4">
                <div class="flex gap-4">
                    <div class="w-8 h-8 rounded-full bg-tm-red flex items-center justify-center text-white text-sm font-bold shrink-0">1</div>
                    <div>
                        <h3 class="text-white font-semibold">Check your inbox</h3>
                        <p class="text-gray-400 text-sm mt-1">You will receive TWO emails at <span class="text-white">{{ $order->email }}</span>. The first is your order confirmation. The second is EXTREMELY IMPORTANT — it contains your onboarding instructions.</p>
                    </div>
                </div>
                <div class="flex gap-4">
                    <div class="w-8 h-8 rounded-full bg-tm-red flex items-center justify-center text-white text-sm font-bold shrink-0">2</div>
                    <div>
                        <h3 class="text-white font-semibold">Reply to the onboarding email</h3>
                        <p class="text-gray-400 text-sm mt-1">Give us as much detail as possible about the target. The more ammunition you give us, the more devastating our campaign will be. Attachments are welcome.</p>
                    </div>
                </div>
                <div class="flex gap-4">
                    <div class="w-8 h-8 rounded-full bg-tm-red flex items-center justify-center text-white text-sm font-bold shrink-0">3</div>
                    <div>
                        <h3 class="text-white font-semibold">We go to work</h3>
                        <p class="text-gray-400 text-sm mt-1">Once we have what we need, the trolls are unleashed. Your target will never forget what is about to happen to them.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-yellow-950 border border-yellow-700 rounded-xl p-6 mb-8 text-left">
            <p class="text-yellow-400 font-bold text-sm">⚠️ IMPORTANT: CHECK YOUR EMAIL NOW</p>
            <p class="text-yellow-200 text-sm mt-1">Look for the onboarding email from <strong>onboarding@trollmasters.ai</strong> — it contains critical instructions. Do not ignore it.</p>
        </div>

        <a href="{{ route('home') }}" class="btn-troll text-white px-12 py-4 rounded-lg font-bold inline-block">
            BACK TO HOME
        </a>
    </div>
</section>
@endsection
