<section id="how-it-works" class="py-24 relative overflow-hidden">
    <!-- Background Accents -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-pink-500/5 rounded-full blur-[120px] -z-10"></div>
    
    <div class="container mx-auto px-4 lg:px-8 max-w-7xl">
        <!-- Header -->
        <div class="mb-16 md:mb-24 flex flex-col items-center text-center">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-6">
                <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
                <span class="text-[10px] font-bold tracking-widest text-emerald-500 uppercase">Process</span>
            </div>
            <h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
                Three steps to <span class="text-pink-500">total privacy.</span>
            </h2>
            <p class="text-zinc-400 max-w-2xl text-sm md:text-lg leading-relaxed">
                We've distilled complex identity protection into a seamless, 
                automated workflow that takes seconds to master.
            </p>
        </div>

        <!-- Steps Grid / Timeline -->
        <div class="relative grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-12">
            <!-- Connecting Line (Desktop: Horizontal) -->
            <div class="hidden md:block absolute top-[45px] left-[10%] right-[10%] h-px bg-gradient-to-r from-transparent via-zinc-800 to-transparent -z-10">
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/50 to-transparent animate-[data-flow-h_3s_linear_infinite]"></div>
            </div>

            <!-- Connecting Line (Mobile: Vertical) -->
            <div class="md:hidden absolute left-[45px] top-4 bottom-4 w-px bg-gradient-to-b from-transparent via-zinc-800 to-transparent -z-10">
                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-pink-500/50 to-transparent animate-[data-flow-v_4s_linear_infinite]"></div>
            </div>

            <!-- Step 1: Generate -->
            <div class="flex flex-row gap-6 md:flex-col md:items-center md:text-center group" x-data="{ email: 'generating...', active: true }">
                <div class="shrink-0 w-[90px] h-[90px] rounded-2xl bg-zinc-900 border border-white/10 flex items-center justify-center relative transition-all duration-500 group-hover:border-pink-500/50 group-hover:shadow-[0_0_30px_rgba(236,72,153,0.15)] shadow-xl">
                    <div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-zinc-900 border border-white/10 flex items-center justify-center text-xs font-bold text-zinc-500 group-hover:text-pink-500 transition-colors">01</div>
                    <svg class="w-10 h-10 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                </div>
                <div class="flex flex-col pt-2 md:items-center">
                    <h3 class="text-xl font-bold text-white mb-3">Instant Generate</h3>
                    <p class="text-zinc-400 text-sm leading-relaxed mb-6 md:px-4">
                        Click one button to mint a unique, randomized Gmail address instantly. No signups required.
                    </p>
                    <div class="w-full max-w-[200px] h-10 bg-white/5 border border-white/10 rounded-lg flex items-center justify-center px-4 overflow-hidden relative md:mx-auto">
                        <span class="text-[11px] font-mono text-pink-400/80 truncate italic" 
                              x-init="setInterval(() => { 
                                const domains = ['@gmail.com', '@outlook.com', '@imail.com'];
                                const prefix = Math.random().toString(36).substring(7);
                                email = prefix + domains[Math.floor(Math.random()*domains.length)];
                              }, 2500)" x-text="email"></span>
                        <div class="absolute inset-x-0 bottom-0 h-[1px] bg-pink-500/30 scale-x-0 group-hover:scale-x-100 transition-transform duration-700"></div>
                    </div>
                </div>
            </div>

            <!-- Step 2: Receive -->
            <div class="flex flex-row gap-6 md:flex-col md:items-center md:text-center group" x-data="{ items: [1] }">
                <div class="shrink-0 w-[90px] h-[90px] rounded-2xl bg-zinc-900 border border-white/10 flex items-center justify-center relative transition-all duration-500 group-hover:border-emerald-500/50 group-hover:shadow-[0_0_30px_rgba(16,185,129,0.15)] shadow-xl">
                    <div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-zinc-900 border border-white/10 flex items-center justify-center text-xs font-bold text-zinc-500 group-hover:text-emerald-500 transition-colors">02</div>
                    <svg class="w-10 h-10 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                </div>
                <div class="flex flex-col pt-2 md:items-center">
                    <h3 class="text-xl font-bold text-white mb-3">Live Reception</h3>
                    <p class="text-zinc-400 text-sm leading-relaxed mb-6 md:px-4">
                        Emails arrive in real-time. View attachments, links, and HTML content securely in your dashboard.
                    </p>
                    <div class="w-full max-w-[240px] md:mx-auto min-h-[40px]">
                        <template x-for="i in items" :key="i">
                            <div class="h-10 bg-white/5 border border-white/10 rounded-lg flex items-center gap-3 px-3 animate-[fade-in-right_0.5s_ease-out]">
                                <div class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
                                <div class="flex-1 space-y-1 text-left">
                                    <div class="w-16 h-1.5 bg-zinc-700 rounded-full"></div>
                                    <div class="w-24 h-1 bg-zinc-800 rounded-full"></div>
                                </div>
                                <span class="text-[9px] font-bold text-emerald-500 uppercase tracking-tighter">New</span>
                            </div>
                        </template>
                        <div x-init="setInterval(() => { items = [Date.now()] }, 5000)"></div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Auto-Delete -->
            <div class="flex flex-row gap-6 md:flex-col md:items-center md:text-center group" x-data="{ progress: 100 }">
                <div class="shrink-0 w-[90px] h-[90px] rounded-2xl bg-zinc-900 border border-white/10 flex items-center justify-center relative transition-all duration-500 group-hover:border-zinc-500/50 group-hover:shadow-[0_0_30px_rgba(255,255,255,0.05)] shadow-xl">
                    <div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-zinc-900 border border-white/10 flex items-center justify-center text-xs font-bold text-zinc-500 group-hover:text-white transition-colors">03</div>
                    <svg class="w-10 h-10 text-zinc-400 group-hover:rotate-12 transition-transform duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                </div>
                <div class="flex flex-col pt-2 md:items-center">
                    <h3 class="text-xl font-bold text-white mb-3">Self Destruction</h3>
                    <p class="text-zinc-400 text-sm leading-relaxed mb-6 md:px-4">
                        After 24 hours, all data is purged from our servers forever. No digital footprint left behind.
                    </p>
                    <div class="w-full max-w-[200px] h-2 bg-white/5 border border-white/10 rounded-full overflow-hidden md:mx-auto">
                        <div class="h-full bg-gradient-to-r from-pink-500 to-emerald-500"
                             :style="`width: ${progress}%; transition: width ${progress === 0 ? '0s' : '5s'} linear`"
                             x-init="
                                progress = 0; 
                                setTimeout(() => progress = 100, 100);
                                setInterval(() => { 
                                    progress = 0; 
                                    setTimeout(() => progress = 100, 100); 
                                }, 6000);
                             "></div>
                    </div>
                    <div class="mt-3 text-[10px] font-mono text-zinc-500 uppercase tracking-widest leading-none">Wiping Data...</div>
                </div>
            </div>
        </div>
    </div>

    <style>
        @keyframes data-flow-h {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        @keyframes data-flow-v {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }
        @keyframes fade-in-right {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }
    </style>
</section>
