<div>
    <x-bento.hero />
    
    <x-bento.grid>
        <!-- Feature 1: Secure Temporary Email (Span 2 to make it wider) -->
        <x-bento.card 
            title="Secure Temporary Email" 
            subtitle="Any temp mail that you create on our website is valid for as long we support that domain. We delete emails every 24 hours to ensure a reliable and clean inbox."
            span="col-span-1 md:col-span-2 lg:col-span-2"
        >
            <x-slot:icon>
                <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </x-slot:icon>
            <div class="mt-4 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 font-mono text-sm text-zinc-300"
                 x-data="{ 
                    text: 'Encryption Enabled',
                    display: '',
                    chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()',
                    index: 0,
                    typing: true,
                    init() {
                        this.animate();
                    },
                    animate() {
                        let step = 0;
                        const final = this.text;
                        const interval = setInterval(() => {
                            if (step < final.length * 2) {
                                let result = '';
                                for (let i = 0; i < final.length; i++) {
                                    if (i < Math.floor(step / 2)) {
                                        result += final[i];
                                    } else {
                                        result += this.chars[Math.floor(Math.random() * this.chars.length)];
                                    }
                                }
                                this.display = result;
                                step++;
                            } else {
                                this.display = final;
                                clearInterval(interval);
                                setTimeout(() => this.animate(), 4000);
                            }
                        }, 50);
                    }
                 }"
            >
                <div class="flex items-center gap-2 mb-2 text-green-400">
                    <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="M5 13l4 4L19 7"></path></svg>
                    <span class="flex items-center">
                        <span x-text="display"></span>
                        <span class="w-2 h-4 bg-green-400/50 ml-1 animate-[pulse_0.8s_infinite]">_</span>
                    </span>
                </div>
                <div class="flex items-center gap-2 text-zinc-400 animate-[pulse_2s_infinite]">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <span>Auto-delete: 24h</span>
                </div>
            </div>
        </x-bento.card>

        <!-- Feature 2: Developer API / Code Window -->
        <x-bento.card 
            title="API Ready for Devs" 
            subtitle="Integrate disposable emails into your testing suites instantly. Perfect for E2E testing."
            span="col-span-1 md:col-span-1 lg:col-span-2"
            rowSpan="row-span-1 md:row-span-2 lg:row-span-2"
        >
            <x-slot:icon>
                <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
                </svg>
            </x-slot:icon>
            
            <div class="mt-4 relative h-[380px] w-full group/stack perspective-2000" 
                 x-data="{ 
                    active: 0, 
                    snippets: [
                        { name: 'sdk_example.py', lang: 'python' },
                        { name: 'client.php', lang: 'php' },
                        { name: 'api_bash.sh', lang: 'bash' }
                    ],
                    interval: null,
                    init() {
                        this.interval = setInterval(() => {
                            this.active = (this.active + 1) % this.snippets.length;
                        }, 3000);
                    }
                 }"
            >
                <!-- Snippet 1: Python (Initial Front) -->
                <div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
                     :class="{
                        'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 0,
                        'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 1,
                        'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 2
                     }">
                    <x-bento.code-window filename="sdk_example.py">
<span class="text-pink-400">import</span> imail
<span class="text-pink-400">def</span> <span class="text-blue-400">test_signup</span>():
    inbox = imail.<span class="text-blue-400">create_inbox</span>()
    requests.<span class="text-blue-400">post</span>(<span class="text-green-400">'/register'</span>, json={
        <span class="text-green-400">'email'</span>: inbox.address
    })
    msg = inbox.<span class="text-blue-400">wait_for_email</span>()
    <span class="text-pink-400">assert</span> <span class="text-green-400">"Verify"</span> <span class="text-pink-400">in</span> msg.subject
                    </x-bento.code-window>
                </div>

                <!-- Snippet 2: PHP (Initial Mid) -->
                <div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
                     :class="{
                        'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 1,
                        'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 2,
                        'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 0
                     }">
                    <x-bento.code-window filename="client.php">
<span class="text-pink-400">&lt;?php</span>
<span class="text-pink-400">use</span> Imail\Client;

<span class="text-zinc-500">// Initialize instant client</span>
<span class="text-blue-400">$imail</span> = <span class="text-pink-400">new</span> <span class="text-blue-300">Client</span>(<span class="text-green-400">'sk_test_...'</span>);
<span class="text-blue-400">$inbox</span> = <span class="text-blue-400">$imail</span>-><span class="text-blue-400">createInbox</span>();

<span class="text-blue-400">$msg</span> = <span class="text-blue-400">$inbox</span>-><span class="text-blue-400">waitForEmail</span>();
<span class="text-pink-400">assert</span>(<span class="text-blue-400">str_contains</span>(<span class="text-blue-400">$msg</span>->subject, <span class="text-green-400">'Welcome'</span>));
                    </x-bento.code-window>
                </div>

                <!-- Snippet 3: cURL (Initial Back) -->
                <div class="absolute inset-x-0 transition-all duration-1000 ease-in-out transform"
                     :class="{
                        'z-30 translate-y-0 scale-100 opacity-100 blur-0 shadow-2xl': active === 2,
                        'z-20 translate-y-12 scale-[0.98] opacity-70 blur-[2px]': active === 0,
                        'z-10 translate-y-24 scale-[0.96] opacity-40 blur-[4px]': active === 1
                     }">
                    <x-bento.code-window filename="api_bash.sh">
<span class="text-zinc-500"># Create a new inbox via REST API</span>
curl -X POST https://api.imail.com/v1/inbox \
     -H <span class="text-green-400">"Authorization: Bearer $API_TOKEN"</span>

<span class="text-zinc-500"># Listen for instant callbacks</span>
curl https://api.imail.com/v1/inbox/$ID/events \
     -H <span class="text-green-400">"Accept: text/event-stream"</span>
                    </x-bento.code-window>
                </div>
            </div>
        </x-bento.card>

        <!-- Feature 3: Instant Disposable Email -->
        <x-bento.card 
            title="Instant Disposable Email" 
            subtitle="Also known as tempmail, 10minutemail, or throwaway email. Your inbox is ready instantly, no registration required."
            span="col-span-1 md:col-span-2 lg:col-span-1"
        >
            <x-slot:icon>
                <div class="relative w-full h-full text-pink-500">
                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                    </svg>
                </div>
            </x-slot:icon>
            
            <!-- Animated Address Shuffle Wrapper -->
            <div class="h-full flex flex-col justify-center py-4">
                <div class="mx-auto h-[34px] flex items-center gap-2 px-3 bg-white/5 border border-white/10 rounded-lg group-hover:border-pink-500/30 transition-colors"
                     x-data="{ 
                        addresses: ['user_82@imail.com', 'test_qa@imail.com', 'dev_99@imail.com', 'anon_7@imail.com'],
                        current: 0,
                        init() {
                            setInterval(() => {
                                this.current = (this.current + 1) % this.addresses.length;
                            }, 3000);
                        }
                     }">
                    <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
                    <span class="text-[10px] sm:text-xs font-mono text-zinc-400 transition-all duration-500" x-text="addresses[current]"></span>
                    <span class="ml-auto text-[8px] text-emerald-500/60 font-mono tracking-tighter uppercase">Ready</span>
                </div>
            </div>
        </x-bento.card>

        <!-- Feature 4: Premium Domains/Gmail -->
        <x-bento.card 
            title="Premium Domains" 
            subtitle="Access to dedicated premium domains and genuine Gmail addresses to bypass tricky email filters."
            span="col-span-1 md:col-span-1 lg:col-span-1"
        >
            <x-slot:icon>
                <div class="relative w-full h-full text-pink-500">
                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
                    </svg>
                </div>
            </x-slot:icon>

            <!-- Premium Domain Ticker Wrapper -->
            <div class="h-full flex flex-col justify-center py-4">
                <div class="mx-auto overflow-hidden h-[34px] bg-white/5 border border-white/10 rounded-lg group-hover:border-yellow-500/30 transition-colors"
                     x-data="{ 
                        domains: ['@gmail.com', '@outlook.com', '@pro.imail.me', '@vip.mail.com', '@apple.com'],
                        active: 0,
                        transitioning: true,
                        init() {
                            setInterval(() => {
                                this.transitioning = true;
                                this.active++;
                                if (this.active === this.domains.length) {
                                    setTimeout(() => {
                                        this.transitioning = false;
                                        this.active = 0;
                                    }, 1000); // match duration
                                }
                            }, 3000);
                        }
                     }">
                    <div class="flex flex-col flex-nowrap" 
                         :class="transitioning ? 'transition-transform duration-1000 ease-in-out' : ''"
                         :style="`transform: translateY(-${active * 34}px)`">
                        <!-- Original Items -->
                        <template x-for="(domain, index) in domains" :key="index">
                            <div class="h-[34px] flex items-center gap-2 px-3 shrink-0">
                                <span class="text-[10px] sm:text-xs font-mono text-zinc-400" x-text="domain"></span>
                                <span class="text-[8px] bg-yellow-500/10 text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/20 font-bold tracking-tight uppercase">Premium</span>
                            </div>
                        </template>
                        <!-- Cloned First Item for seamless loop -->
                        <div class="h-[34px] flex items-center gap-2 px-3 shrink-0">
                            <span class="text-[10px] sm:text-xs font-mono text-zinc-400" x-text="domains[0]"></span>
                            <span class="text-[8px] bg-yellow-500/10 text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/20 font-bold tracking-tight uppercase">Premium</span>
                        </div>
                    </div>
                </div>
            </div>
        </x-bento.card>
        
        <!-- Feature 5: Fast Delivery -->
        <x-bento.card 
            title="Blazing Fast Delivery" 
            subtitle="Experience fast message delivery without delays or restrictions, directly over Websockets."
            span="col-span-1 md:col-span-2 lg:col-span-2"
        >
            <x-slot:icon>
                <div class="relative w-full h-full text-pink-500">
                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                    </svg>
                </div>
            </x-slot:icon>
            
            <div class="mt-4 flex flex-col gap-6" x-data="{ 
                latency: 24,
                init() {
                    setInterval(() => {
                        this.latency = Math.floor(Math.random() * (48 - 12 + 1)) + 12;
                    }, 1500);
                }
            }">
                <!-- Data Stream Visualization -->
                <div class="relative py-8 flex items-center justify-between">
                    <!-- Progress Line -->
                    <div class="absolute inset-x-0 h-0.5 bg-zinc-800"></div>
                    <div class="absolute inset-x-0 h-0.5 bg-gradient-to-r from-pink-500/20 via-pink-500/50 to-emerald-500/20"></div>
                    
                    <!-- Rapid Packets -->
                    <div class="absolute inset-0 overflow-hidden pointer-events-none">
                        <div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_ease-in]"></div>
                        <div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_0.3s_ease-in]"></div>
                        <div class="absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-pink-500 blur-[2px] animate-[slide-right_1s_infinite_0.6s_ease-in]"></div>
                    </div>

                    <!-- Nodes -->
                    <div class="relative z-10 w-3 h-3 rounded-full bg-pink-500 shadow-[0_0_12px_rgba(236,72,153,0.5)]"></div>
                    <div class="relative z-10 w-3 h-3 rounded-full bg-emerald-500 shadow-[0_0_12px_rgba(16,185,129,0.5)]"></div>
                </div>

                <!-- Latency Stats -->
                <div class="flex items-center justify-between px-4 py-2 border border-white/5 bg-white/5 rounded-lg font-mono">
                    <div class="flex flex-col">
                        <span class="text-[10px] text-zinc-500 uppercase tracking-wider">Protocol</span>
                        <span class="text-xs text-zinc-300">WSS://STREAM</span>
                    </div>
                    <div class="flex flex-col items-end">
                        <span class="text-[10px] text-zinc-500 uppercase tracking-wider">Latency</span>
                        <span class="text-xs text-emerald-400 font-bold" x-text="latency + 'ms'"></span>
                    </div>
                </div>
            </div>

            <style>
                @keyframes slide-right {
                    0% { left: 0%; opacity: 0; }
                    20% { opacity: 1; }
                    80% { opacity: 1; }
                    100% { left: 100%; opacity: 0; }
                }
            </style>
        </x-bento.card>

        <!-- Feature 6: Secure Attachments -->
        <x-bento.card 
            title="Secure Attachments" 
            subtitle="Instantly view and securely download attachments received in your ephemeral inbox. Fully encrypted and private."
            span="col-span-1 md:col-span-3 lg:col-span-2"
        >
            <x-slot:icon>
                <div class="relative w-full h-full text-pink-500">
                    <svg class="w-full h-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                    </svg>
                </div>
            </x-slot:icon>
            
            <div class="mt-4 flex flex-col gap-3 group/scan" 
                 x-data="{ 
                    scanning: false,
                    verified: false,
                    meta: '2.4 MB • PDF Document',
                    displayMeta: 'Encrypting...',
                    chars: '01',
                    init() {
                        this.displayMeta = this.meta.split('').map(() => this.chars[Math.floor(Math.random()*2)]).join('');
                        this.startScan();
                    },
                    startScan() {
                        this.scanning = true;
                        this.verified = false;
                        
                        // 1. Scanning Down-Up (2 seconds)
                        // 2. Text Scrambling Reveal (starts after scan return)
                        
                        setTimeout(() => {
                            // Start revealing text after scan return sweep is nearly done (at 1.6s)
                            let step = 0;
                            let revealInterval = setInterval(() => {
                                let result = '';
                                for(let i=0; i<this.meta.length; i++) {
                                    if (i < step) {
                                        result += this.meta[i];
                                    } else {
                                        result += this.chars[Math.floor(Math.random()*2)];
                                    }
                                }
                                this.displayMeta = result;
                                step++;
                                
                                if (step > this.meta.length) {
                                    clearInterval(revealInterval);
                                    this.verified = true;
                                    this.scanning = false;
                                    
                                    // Restart loop after 4 seconds
                                    setTimeout(() => this.startScan(), 4000);
                                }
                            }, 40);
                        }, 1600); // 60% of return trip (total 2s down-up, so 1s+(0.6*1s) = 1.6s)
                    }
                 }">
                <div class="relative overflow-hidden p-3 rounded-lg bg-white/5 border transition-all duration-500"
                     :class="verified ? 'border-pink-500/30' : 'border-white/10'">
                    
                    <!-- Scanning Line (Pink) -->
                    <div class="absolute inset-x-0 h-0.5 bg-pink-500/50 blur-[2px] z-20 pointer-events-none"
                         :class="scanning ? 'animate-[scan-down-up_2s_linear_infinite]' : 'opacity-0'"></div>

                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded bg-pink-500/10 flex items-center justify-center text-pink-500 transition-colors">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <div class="text-xs font-medium text-zinc-200 truncate">contract_summary.pdf</div>
                                <span x-show="verified" x-transition class="text-[8px] px-1 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded font-bold tracking-tighter uppercase">Verified</span>
                            </div>
                            <div class="text-[10px] font-mono text-zinc-500 h-4 flex items-center" x-text="displayMeta"></div>
                        </div>
                        <div class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 transition-all cursor-pointer hover:bg-pink-500/20"
                             :class="verified ? 'text-pink-400' : 'hover:text-white'">
                            <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="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <style>
                @keyframes scan-down-up {
                    0% { top: 0%; opacity: 0; }
                    5% { opacity: 1; }
                    50% { top: 100%; opacity: 1; }
                    95% { opacity: 1; }
                    100% { top: 0%; opacity: 0; }
                }
            </style>
        </x-bento.card>
    </x-bento.grid>

    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out' })">
        <x-bento.steps />
    </div>

    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
        <x-bento.testimonials />
    </div>

    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
        <x-bento.pricing />
    </div>

    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
        <x-bento.faq />
    </div>

    <div x-init="gsap.from($el, { scrollTrigger: $el, y: 40, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
        <x-bento.cta />
    </div>

    <x-bento.footer />
</div>
