@extends('layouts.user')

@section('title')
    Sell Market - Temporarily Unavailable
@endsection

@section('content')

<!-- Start Section -->
<section class="relative table w-full py-20 lg:py-24 md:pt-28 bg-gray-50 dark:bg-slate-800">
    <div class="container relative">
        <div class="text-center" style="max-width: 1200px; margin: 0 auto;">
            
            <!-- Animated Icon -->
            <div style="margin-bottom: 2rem; display: inline-block; position: relative;">
                <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
                    <div class="ping-circle" style="width: 128px; height: 128px; background: #f97316; border-radius: 50%; opacity: 0.2;"></div>
                </div>
                <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
                    <div class="pulse-circle" style="width: 96px; height: 96px; background: #f97316; border-radius: 50%; opacity: 0.3;"></div>
                </div>
                
                <div style="position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; background: linear-gradient(135deg, #f97316 0%, #e87625 100%); border-radius: 50%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
                    <svg style="width: 56px; height: 56px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
                    </svg>
                </div>
            </div>

            <!-- Main Heading -->
            <h1 class="text-3xl font-semibold leading-normal md:text-4xl lg:text-5xl dark:text-white" style="margin-bottom: 1rem;">
                Sell Market
            </h1>
            <h2 class="text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl" style="color: #f97316; margin-bottom: 2rem;">
                Temporarily Unavailable
            </h2>

            <p class="text-slate-400 dark:text-gray-300" style="font-size: 1.125rem; max-width: 42rem; margin: 0 auto 2rem;">
                We're enhancing our selling platform to provide you with better pricing tools, faster transactions, and improved marketplace visibility.
            </p>

            <!-- Status Badge -->
            <div style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; margin-bottom: 2rem; font-size: 0.875rem; font-weight: 600; color: #065f46; background: #d1fae5; border-radius: 9999px;">
                <span style="position: relative; display: flex; width: 12px; height: 12px;">
                    <span class="ping-dot" style="position: absolute; display: inline-flex; width: 100%; height: 100%; background: #34d399; border-radius: 50%; opacity: 0.75;"></span>
                    <span style="position: relative; display: inline-flex; width: 12px; height: 12px; background: #f97316; border-radius: 50%;"></span>
                </span>
                Platform Enhancement In Progress
            </div>

            <!-- Features Grid -->
            <div style="display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; margin-top: 3rem; max-width: 64rem; margin-left: auto; margin-right: auto;">
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;">
                    <!-- Feature 1 -->
                    <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md feature-card" style="padding: 1.5rem; transition: transform 0.2s;">
                        <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 1rem; background: #fed7aa; border-radius: 0.5rem;">
                            <svg style="width: 24px; height: 24px; color: #ea580c;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">Smart Pricing</h3>
                        <p class="text-slate-400" style="font-size: 0.875rem;">Advanced profit calculator with market insights</p>
                    </div>

                    <!-- Feature 2 -->
                    <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md feature-card" style="padding: 1.5rem; transition: transform 0.2s;">
                        <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 1rem; background: #dbeafe; border-radius: 0.5rem;">
                            <svg style="width: 24px; height: 24px; color: #2563eb;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">Real-Time Analytics</h3>
                        <p class="text-slate-400" style="font-size: 0.875rem;">Live market trends and sell-through rate tracking</p>
                    </div>

                    <!-- Feature 3 -->
                    <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md feature-card" style="padding: 1.5rem; transition: transform 0.2s;">
                        <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 1rem; background: #e0e7ff; border-radius: 0.5rem;">
                            <svg style="width: 24px; height: 24px; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">Instant Payouts</h3>
                        <p class="text-slate-400" style="font-size: 0.875rem;">Faster transaction processing and settlements</p>
                    </div>
                </div>
            </div>

            <!-- Countdown Timer -->
            <!--<div style="margin-top: 4rem; margin-bottom: 2rem;">-->
            <!--    <p class="text-slate-400" style="margin-bottom: 1rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Back Online In</p>-->
            <!--    <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="days" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Days</span>-->
            <!--        </div>-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="hours" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Hours</span>-->
            <!--        </div>-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="minutes" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Minutes</span>-->
            <!--        </div>-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="seconds" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Seconds</span>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->

            <!-- What You Can Do -->
            <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="max-width: 48rem; margin: 3rem auto 0; padding: 2rem; border-left: 4px solid #f97316;">
                <h3 class="text-xl font-semibold mb-6">What You Can Do In The Meantime</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: left;">
                    <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
                        <div style="flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #f97316; border-radius: 50%;">
                            <svg style="width: 16px; height: 16px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold">Review Your Inventory</h4>
                            <p class="text-slate-400" style="font-size: 0.875rem;">Check your products and prepare items for listing</p>
                        </div>
                    </div>
                    <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
                        <div style="flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #f97316; border-radius: 50%;">
                            <svg style="width: 16px; height: 16px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold">Track Active Bots</h4>
                            <p class="text-slate-400" style="font-size: 0.875rem;">Monitor your AI trading bots performance</p>
                        </div>
                    </div>
                    <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
                        <div style="flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #3b82f6; border-radius: 50%;">
                            <svg style="width: 16px; height: 16px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold">Plan Your Strategy</h4>
                            <p class="text-slate-400" style="font-size: 0.875rem;">Research market trends and pricing strategies</p>
                        </div>
                    </div>
                    <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
                        <div style="flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #8b5cf6; border-radius: 50%;">
                            <svg style="width: 16px; height: 16px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold">Build Your Team</h4>
                            <p class="text-slate-400" style="font-size: 0.875rem;">Invite referrals and grow your network</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notification Signup -->
            <!--<div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="max-width: 28rem; margin: 3rem auto 0; padding: 1.5rem;">-->
            <!--    <h3 class="text-lg font-semibold mb-2">Get Notified When We Launch</h3>-->
            <!--    <p class="text-slate-400 mb-4" style="font-size: 0.875rem;">Be the first to know when selling is back online</p>-->
            <!--    <form id="notify-form" style="display: flex; gap: 0.5rem;">-->
            <!--        <input -->
            <!--            type="email" -->
            <!--            id="notify-email" -->
            <!--            placeholder="Your email address" -->
            <!--            class="form-input border border-gray-100 dark:border-gray-800 dark:bg-slate-900 dark:text-slate-200"-->
            <!--            style="flex: 1; height: 40px; padding: 0.5rem 1rem; border-radius: 0.5rem; outline: none;"-->
            <!--            required-->
            <!--        >-->
            <!--        <button -->
            <!--            type="submit" -->
            <!--            style="padding: 0.5rem 1.5rem; color: white; background: #f97316; border: none; border-radius: 0.5rem; cursor: pointer; transition: background 0.2s;"-->
            <!--            onmouseover="this.style.background='#059669'" -->
            <!--            onmouseout="this.style.background='#f97316'"-->
            <!--        >-->
            <!--            Notify Me-->
            <!--        </button>-->
            <!--    </form>-->
            <!--    <p id="notify-message" class="text-sm" style="margin-top: 0.5rem; color: #f97316; display: none;"></p>-->
            <!--</div>-->

            <!-- Back Button -->
            <div style="margin-top: 3rem;">
                <a href="{{ route('home') }}" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; color: white; background: #f97316; border-radius: 0.5rem; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: all 0.2s;"
                   onmouseover="this.style.background='#059669'; this.style.transform='scale(1.05)'" 
                   onmouseout="this.style.background='#f97316'; this.style.transform='scale(1)'">
                    <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>
</section>
<!-- End Section -->

<style>
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.ping-circle {
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pulse-circle {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ping-dot {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.feature-card:hover {
    transform: scale(1.05);
}
</style>

<script>
// Countdown Timer
const countdownDate = new Date("{{ now()->addDays(3)->format('Y-m-d H:i:s') }}").getTime();

const countdown = setInterval(function() {
    const now = new Date().getTime();
    const distance = countdownDate - now;
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("days").textContent = String(days).padStart(2, '0');
    document.getElementById("hours").textContent = String(hours).padStart(2, '0');
    document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
    document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
    
    if (distance < 0) {
        clearInterval(countdown);
        document.getElementById("days").textContent = "00";
        document.getElementById("hours").textContent = "00";
        document.getElementById("minutes").textContent = "00";
        document.getElementById("seconds").textContent = "00";
    }
}, 1000);

// Notification Form
document.getElementById('notify-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const email = document.getElementById('notify-email').value;
    const message = document.getElementById('notify-message');
    
    // Simulate API call (replace with actual endpoint)
    setTimeout(() => {
        message.textContent = '✓ Perfect! We\'ll email you at ' + email + ' when selling is available.';
        message.style.display = 'block';
        document.getElementById('notify-email').value = '';
        
        setTimeout(() => {
            message.style.display = 'none';
        }, 5000);
    }, 500);
});
</script>

@endsection

@section('title')
    Sell Market - Temporarily Unavailable
@endsection

@section('content')

<!-- Start Section -->
<section class="relative py-36 bg-gradient-to-br from-emerald-50 via-white to-orange-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
    <div class="container relative">
        <div class="grid grid-cols-1 text-center">
            <!-- Icon Animation -->
            <div class="mb-8">
                <div class="relative inline-flex">
                    <!-- Animated circles -->
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-32 h-32 bg-emerald-500 rounded-full opacity-20 animate-ping"></div>
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-24 h-24 bg-emerald-500 rounded-full opacity-30 animate-pulse"></div>
                    </div>
                    
                    <!-- Main icon -->
                    <div class="relative z-10 flex items-center justify-center w-28 h-28 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-full shadow-2xl">
                        <svg class="w-14 h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Main Heading -->
            <h1 class="mb-4 text-4xl font-bold text-gray-800 md:text-5xl lg:text-6xl dark:text-white">
                Sell Market
                <span class="block mt-2 text-emerald-500">Temporarily Unavailable</span>
            </h1>

            <p class="mb-8 text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                We're enhancing our selling platform to provide you with better pricing tools, faster transactions, and improved marketplace visibility.
            </p>

            <!-- Status Badge -->
            <div class="inline-flex items-center gap-2 px-4 py-2 mb-8 text-sm font-semibold text-emerald-700 bg-emerald-100 rounded-full dark:bg-emerald-900 dark:text-emerald-300">
                <span class="relative flex w-3 h-3">
                    <span class="absolute inline-flex w-full h-full bg-emerald-400 rounded-full opacity-75 animate-ping"></span>
                    <span class="relative inline-flex w-3 h-3 bg-emerald-500 rounded-full"></span>
                </span>
                Platform Enhancement In Progress
            </div>

            <!-- Features Grid -->
            <div class="grid grid-cols-1 gap-6 mt-12 md:grid-cols-3 max-w-4xl mx-auto">
                <!-- Feature 1 -->
                <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-slate-800 transform transition hover:scale-105">
                    <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-orange-100 rounded-lg dark:bg-orange-900">
                        <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white">Smart Pricing</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Advanced profit calculator with market insights</p>
                </div>

                <!-- Feature 2 -->
                <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-slate-800 transform transition hover:scale-105">
                    <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-blue-100 rounded-lg dark:bg-blue-900">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                        </svg>
                    </div>
                    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white">Real-Time Analytics</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Live market trends and sell-through rate tracking</p>
                </div>

                <!-- Feature 3 -->
                <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-slate-800 transform transition hover:scale-105">
                    <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-900">
                        <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white">Instant Payouts</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Faster transaction processing and settlements</p>
                </div>
            </div>

            <!-- Countdown Timer -->
            <div class="mt-16 mb-8">
                <p class="mb-4 text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wide">Back Online In</p>
                <div class="flex justify-center gap-4">
                    <div class="flex flex-col items-center px-6 py-4 bg-white rounded-lg shadow-lg dark:bg-slate-800">
                        <span id="days" class="text-4xl font-bold text-emerald-500">--</span>
                        <span class="text-xs text-gray-600 dark:text-gray-400 uppercase">Days</span>
                    </div>
                    <div class="flex flex-col items-center px-6 py-4 bg-white rounded-lg shadow-lg dark:bg-slate-800">
                        <span id="hours" class="text-4xl font-bold text-emerald-500">--</span>
                        <span class="text-xs text-gray-600 dark:text-gray-400 uppercase">Hours</span>
                    </div>
                    <div class="flex flex-col items-center px-6 py-4 bg-white rounded-lg shadow-lg dark:bg-slate-800">
                        <span id="minutes" class="text-4xl font-bold text-emerald-500">--</span>
                        <span class="text-xs text-gray-600 dark:text-gray-400 uppercase">Minutes</span>
                    </div>
                    <div class="flex flex-col items-center px-6 py-4 bg-white rounded-lg shadow-lg dark:bg-slate-800">
                        <span id="seconds" class="text-4xl font-bold text-emerald-500">--</span>
                        <span class="text-xs text-gray-600 dark:text-gray-400 uppercase">Seconds</span>
                    </div>
                </div>
            </div>

            <!-- What You Can Do In The Meantime -->
            <div class="max-w-3xl mx-auto mt-12 p-8 bg-gradient-to-r from-orange-50 to-emerald-50 rounded-2xl dark:from-slate-800 dark:to-slate-800 border border-orange-200 dark:border-slate-700">
                <h3 class="mb-6 text-xl font-bold text-gray-800 dark:text-white">What You Can Do In The Meantime</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
                    <div class="flex items-start gap-3">
                        <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-orange-500 rounded-full">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Review Your Inventory</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Check your products and prepare items for listing</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-emerald-500 rounded-full">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Track Active Bots</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Monitor your AI trading bots performance</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-500 rounded-full">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Plan Your Strategy</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Research market trends and pricing strategies</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-purple-500 rounded-full">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Build Your Team</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Invite referrals and grow your network</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notification Signup -->
            <!--<div class="max-w-md mx-auto mt-12 p-6 bg-white rounded-xl shadow-xl dark:bg-slate-800">-->
            <!--    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-white">Get Notified When We Launch</h3>-->
            <!--    <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Be the first to know when selling is back online</p>-->
            <!--    <form id="notify-form" class="flex gap-2">-->
            <!--        <input -->
            <!--            type="email" -->
            <!--            id="notify-email" -->
            <!--            placeholder="Your email address" -->
            <!--            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"-->
            <!--            required-->
            <!--        >-->
            <!--        <button -->
            <!--            type="submit" -->
            <!--            class="px-6 py-2 text-white bg-emerald-500 rounded-lg hover:bg-emerald-600 transition"-->
            <!--        >-->
            <!--            Notify Me-->
            <!--        </button>-->
            <!--    </form>-->
            <!--    <p id="notify-message" class="mt-2 text-sm text-green-600 dark:text-green-400 hidden"></p>-->
            <!--</div>-->

            <!-- Back Button -->
            <div class="mt-12">
                <a href="{{ route('home') }}" class="inline-flex items-center gap-2 px-6 py-3 text-white bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-lg shadow-lg hover:from-emerald-600 hover:to-emerald-700 transition transform hover:scale-105">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>
</section>
<!-- End Section -->

<style>
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

.animate-ping {
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>

<script>
// Countdown Timer
const countdownDate = new Date("{{ now()->addDays(3)->format('Y-m-d H:i:s') }}").getTime();

const countdown = setInterval(function() {
    const now = new Date().getTime();
    const distance = countdownDate - now;
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("days").textContent = String(days).padStart(2, '0');
    document.getElementById("hours").textContent = String(hours).padStart(2, '0');
    document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
    document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
    
    if (distance < 0) {
        clearInterval(countdown);
        document.getElementById("days").textContent = "00";
        document.getElementById("hours").textContent = "00";
        document.getElementById("minutes").textContent = "00";
        document.getElementById("seconds").textContent = "00";
    }
}, 1000);

// Notification Form
document.getElementById('notify-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const email = document.getElementById('notify-email').value;
    const message = document.getElementById('notify-message');
    
    // Simulate API call (replace with actual endpoint)
    setTimeout(() => {
        message.textContent = '✓ Perfect! We\'ll email you at ' + email + ' when selling is available.';
        message.classList.remove('hidden');
        document.getElementById('notify-email').value = '';
        
        setTimeout(() => {
            message.classList.add('hidden');
        }, 5000);
    }, 500);
});
</script>

@endsection