<section id="hero" class="relative pt-32 lg:pt-48 pb-20 overflow-hidden">
    <!-- Background Glow - shift to the left for the new layout -->
    <div class="absolute inset-x-0 top-0 -z-10 h-full w-full bg-app-bg bg-[radial-gradient(ellipse_80%_80%_at_20%_-20%,rgba(236,72,153,0.15),rgba(255,255,255,0))]"></div>
    
    <div class="container mx-auto px-4 lg:px-8 max-w-7xl">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            
            <!-- Left Side: Copy -->
            <div class="flex flex-col items-start text-left relative z-10">
                <!-- Badge -->
                <div class="inline-flex items-center gap-2 px-3 py-1 text-sm text-pink-400 bg-pink-500/10 border border-pink-500/20 rounded-full mb-6 opacity-0 translate-y-8" x-init="gsap.to($el, {opacity: 1, y: 0, duration: 1, ease: 'power3.out'})">
                    <span class="flex h-2 w-2 relative">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-pink-500"></span>
                    </span>
                    Zemail Beta Live
                </div>
                
                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-white to-zinc-500 mb-6 opacity-0 translate-y-8 leading-tight" x-init="gsap.to($el, {opacity: 1, y: 0, duration: 1, delay: 0.1, ease: 'power3.out'})">
                    Built for the modern tester_
                </h1>
                
                <p class="text-lg md:text-xl text-zinc-400 max-w-xl mb-10 opacity-0 translate-y-8" x-init="gsap.to($el, {opacity: 1, y: 0, duration: 1, delay: 0.2, ease: 'power3.out'})">
                    Generate instant, secure, and ephemeral temporary inboxes for Developers, Privacy Users, and QA Teams. Lightning fast Websocket delivery built-in.
                </p>
                
                <div class="flex flex-col sm:flex-row items-center gap-4 opacity-0" x-init="gsap.to($el, {opacity: 1, duration: 1, delay: 0.4})">
                    <a href="/mailbox" class="group relative inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white bg-pink-600 rounded-full overflow-hidden transition-all hover:bg-pink-500 hover:shadow-[0_0_20px_rgba(236,72,153,0.5)]">
                        <span class="relative flex items-center gap-2">
                            Create mailbox for free
                            <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                            </svg>
                        </span>
                    </a>
                    <a href="/api-docs" class="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white bg-white/5 border border-white/10 rounded-full transition-all hover:bg-white/10">
                        Zemail in 100 seconds <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </a>
                </div>
            </div>

            <!-- Right Side: Animated Screen -->
            <div class="relative opacity-0 perspective-1000 mt-12 lg:mt-0" x-init="gsap.fromTo($el, {opacity: 0, rotateY: 15, x: 50}, {opacity: 1, rotateY: 0, x: 0, duration: 1.2, delay: 0.3, ease: 'power3.out'})">
                <!-- App Window Wrapper -->
                <div class="relative rounded-xl border border-white/10 shadow-2xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.5)] bg-gradient-to-br from-app-surface to-app-bg">
                    <!-- Window Header -->
                    <div class="flex items-center px-4 py-3 border-b border-white/5 bg-app-surface/50">
                        <div class="flex space-x-2">
                            <div class="w-3 h-3 rounded-full bg-app-red"></div>
                            <div class="w-3 h-3 rounded-full bg-app-yellow"></div>
                            <div class="w-3 h-3 rounded-full bg-app-green"></div>
                        </div>
                        <div class="mx-auto flex items-center space-x-2 px-3 py-1.5 bg-black/40 rounded-md border border-white/5">
                            <svg class="w-3 h-3 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" /></svg>
                            <span class="text-xs text-zinc-400 font-mono tracking-wider">imail.local/inbox</span>
                        </div>
                    </div>

                    <!-- App UI Body -->
                    <div class="flex h-[420px]" x-data="mailApp()">
                        <!-- Sidebar -->
                        <div class="w-[30%] border-r border-white/5 bg-app-surface/30 p-4 hidden sm:block">
                            <div class="space-y-2 text-sm font-medium text-zinc-400">
                                <div class="flex items-center gap-3 text-white px-3 py-2 bg-white/5 rounded-lg border border-white/5">
                                    <svg class="w-4 h-4 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" /></svg>
                                    Inbox
                                    <span class="ml-auto text-[10px] font-mono bg-pink-500/20 text-pink-400 border border-pink-500/30 rounded-full px-2" x-text="emails.length"></span>
                                </div>
                                <div class="flex items-center gap-3 px-3 py-2 hover:bg-white/5 rounded-lg cursor-pointer transition-colors">
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                                    Drafts
                                </div>
                                <div class="flex items-center gap-3 px-3 py-2 hover:bg-white/5 rounded-lg cursor-pointer transition-colors">
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
                                    Sent
                                </div>
                            </div>
                        </div>

                        <!-- Main Content Area -->
                        <div class="flex-1 flex flex-col relative overflow-hidden bg-app-bg/50">
                            <!-- INBOX LIST VIEW -->
                            <div x-show="view === 'inbox'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-x-4" x-transition:enter-end="opacity-100 translate-x-0" class="absolute inset-0 overflow-y-auto custom-scrollbar">
                                <div class="p-4 border-b border-white/5 flex items-center justify-between sticky top-0 bg-app-bg z-20">
                                    <h3 class="text-white font-medium flex items-center gap-2">
                                        Active Inbox
                                        <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
                                    </h3>
                                    <div class="text-[10px] uppercase tracking-wider text-pink-400 font-semibold bg-pink-500/10 px-2 py-1 rounded border border-pink-500/20">Auto-refresh</div>
                                </div>
                                
                                <div class="flex flex-col relative pb-4">
                                    <template x-for="(email, index) in emails" :key="email.id">
                                        <div @click="openEmail(email)" 
                                             class="p-4 border-b border-white/5 hover:bg-zinc-800/40 cursor-pointer transition-all group relative overflow-hidden"
                                             x-transition:enter="transition ease-out duration-500 transform"
                                             x-transition:enter-start="opacity-0 -translate-y-4 bg-emerald-500/10"
                                             x-transition:enter-end="opacity-100 translate-y-0 bg-transparent"
                                             x-transition:leave="transition ease-in duration-300 transform"
                                             x-transition:leave-start="opacity-100 translate-x-0"
                                             x-transition:leave-end="opacity-0 translate-x-10">
                                            
                                            <!-- Hover Highlight -->
                                            <div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                                            
                                            <div class="flex justify-between items-baseline mb-1 relative z-10">
                                                <span class="text-sm font-semibold text-zinc-100 truncate pr-4" x-text="email.sender"></span>
                                                <span class="text-xs text-zinc-500 whitespace-nowrap" x-text="email.time"></span>
                                            </div>
                                            <div class="text-sm text-zinc-300 font-medium mb-1 relative z-10" x-text="email.subject"></div>
                                            <div class="text-[13px] text-zinc-500 truncate relative z-10" x-text="email.snippet"></div>
                                        </div>
                                    </template>
                                </div>
                            </div>

                            <!-- EMAIL READING VIEW -->
                            <div x-show="view === 'reading'" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 translate-x-8" x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4" class="absolute inset-0 bg-app-bg flex flex-col z-20" style="display: none;">
                                <div class="px-4 py-3 border-b border-white/5 flex items-center justify-between bg-app-surface/40">
                                    <button @click="view = 'inbox'; selectedEmail = null" class="flex items-center text-sm font-medium text-zinc-400 hover:text-white transition-colors bg-white/5 hover:bg-white/10 px-3 py-1.5 rounded-md border border-white/5">
                                        <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                                        Back
                                    </button>
                                    <button @click="deleteEmail()" class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-red-400 bg-red-500/10 hover:bg-red-500/20 hover:text-red-300 border border-red-500/20 rounded-md transition-all" title="Permanently Delete">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                                        Delete
                                    </button>
                                </div>
                                <div class="px-5 py-6 flex-1 overflow-y-auto custom-scrollbar">
                                    <template x-if="selectedEmail">
                                        <div>
                                            <h2 class="text-2xl font-bold text-white mb-6 leading-tight" x-text="selectedEmail.subject"></h2>
                                            <div class="flex items-center gap-4 mb-8">
                                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-indigo-500 flex items-center justify-center text-white font-bold text-lg shadow-[0_0_15px_rgba(236,72,153,0.3)]" x-text="selectedEmail.sender.charAt(0).toUpperCase()"></div>
                                                <div>
                                                    <div class="text-sm font-semibold text-zinc-200" x-text="selectedEmail.sender"></div>
                                                    <div class="text-xs text-zinc-500 mt-0.5">to me &middot; <span x-text="selectedEmail.time"></span></div>
                                                </div>
                                            </div>
                                            <div class="prose prose-sm prose-invert text-zinc-300 max-w-none leading-relaxed">
                                                <p x-html="selectedEmail.content"></p>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>

<!-- Alpine JS Component Logic for Mail App -->
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('mailApp', () => ({
            view: 'inbox',
            selectedEmail: null,
            emails: [
                { 
                    id: 1, 
                    sender: 'admin@imail.local', 
                    subject: 'Hello World! I am Zemail', 
                    snippet: 'Click me to discover what makes Zemail so special...', 
                    time: '1m ago', 
                    content: 'Welcome to Zemail! ✨<br><br>We provide instantly created, highly reliable temporary email addresses that just work.<br><br><strong>Features:</strong><br><ul class="list-disc pl-5 mt-2 space-y-1"><li>Instant Inbox creation without sign-up.</li><li>Access to Premium & Generic Domains.</li><li>Real-time Websocket syncing for 0 delay.</li><li>Developer APIs ready for E2E automated testing.</li></ul><br>Enjoy your clean, spam-free inbox today!'
                }
            ],
            counter: 2,
            init() {
                // Simulate receiving new emails to show off "auto refresh" capability
                setInterval(() => {
                    if(this.view === 'inbox' && this.emails.length < 5) {
                        const senders = ['security@github.com', 'noreply@slack.com', 'auth@stripe.com', 'billing@aws.amazon.com'];
                        const subjects = ['Please verify your new device', 'Confirm your email address', 'Your receipt is ready', 'Login attempt blocked'];
                        const snippets = ['We noticed a new login attempt...', 'Click the link below to verify...', 'Thanks for your purchase...', 'We prevented a suspicious login...'];
                        
                        const idx = Math.floor(Math.random() * senders.length);
                        
                        this.emails.unshift({
                            id: this.counter++,
                            sender: senders[idx],
                            subject: subjects[idx],
                            snippet: snippets[idx],
                            time: 'Just now',
                            content: `This is a simulated email received via our ultra-fast websocket delivery system.<br><br><strong>Action:</strong> ${subjects[idx]}<br><strong>Time Received:</strong> ${new Date().toLocaleTimeString()}<br><br>In a real Zemail inbox, your emails appear instantly like this as soon as they hit our SMTP servers, bypassing typical polling delays.`
                        });
                    }
                }, 5000);
            },
            openEmail(email) {
                this.selectedEmail = email;
                this.view = 'reading';
            },
            deleteEmail() {
                if (this.selectedEmail) {
                    this.emails = this.emails.filter(e => e.id !== this.selectedEmail.id);
                    this.selectedEmail = null;
                    this.view = 'inbox';
                }
            }
        }));
    });
</script>
<style>
/* Custom Scrollbar for Mail App */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
</style>
