imail/resources/views/components/bento/faq.blade.php

<section id="faq" class="py-24 relative overflow-hidden" x-data="{ active: null }">
    <!-- Background Accents -->
    <div class="absolute top-1/2 left-0 w-[500px] h-[500px] bg-pink-500/5 rounded-full blur-[100px] -z-10"></div>
    
    <div class="container mx-auto px-4 lg:px-8 max-w-7xl">
        <!-- Header -->
        <div class="mb-16 flex flex-col items-center text-center">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-6">
                <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
                <span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Support</span>
            </div>
            <h2 class="text-3xl md:text-5xl font-bold tracking-tight text-white mb-6">
                Common <span class="text-pink-500">questions.</span>
            </h2>
            <p class="text-zinc-400 text-sm md:text-lg leading-relaxed">
                Everything you need to know about Imail, privacy, and temporary communication.
            </p>
        </div>

        <!-- Accordion -->
        <div class="space-y-4">
            <!-- Q1 -->
            <div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
                 :class="active === 1 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
                <button @click="active = active === 1 ? null : 1" 
                        class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
                    <span class="font-bold text-zinc-100 group-hover:text-white">Are these real Gmail addresses?</span>
                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
                         :class="active === 1 ? 'rotate-180 text-pink-500' : ''" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="active === 1" 
                     x-collapse
                     class="px-6 pb-6">
                    <p class="text-sm text-zinc-400 leading-relaxed">
                        Yes! Imail uses a sophisticated backend to route communications through temporary, high-reputation Gmail and Outlook nodes. This ensures that you can bypass "Disposable Email" filters while maintaining 100% privacy.
                    </p>
                </div>
            </div>

            <!-- Q2 -->
            <div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
                 :class="active === 2 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
                <button @click="active = active === 2 ? null : 2" 
                        class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
                    <span class="font-bold text-zinc-100 group-hover:text-white">How long do emails stay in my inbox?</span>
                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
                         :class="active === 2 ? 'rotate-180 text-pink-500' : ''" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="active === 2" 
                     x-collapse
                     class="px-6 pb-6">
                    <p class="text-sm text-zinc-400 leading-relaxed">
                        By default, emails and their attachments are purged automatically after 24 hours. Pro users can extend this retention period up to 7 days for more complex workflows or testing cycles.
                    </p>
                </div>
            </div>

            <!-- Q3 -->
            <div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
                 :class="active === 3 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
                <button @click="active = active === 3 ? null : 3" 
                        class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
                    <span class="font-bold text-zinc-100 group-hover:text-white">Is Imail secure for sensitive data?</span>
                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
                         :class="active === 3 ? 'rotate-180 text-pink-500' : ''" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="active === 3" 
                     x-collapse
                     class="px-6 pb-6">
                    <p class="text-sm text-zinc-400 leading-relaxed">
                        Absolutely. All incoming data is encrypted at rest using industry-standard AES-256. Our "Auto-Delete" mechanism is a hard wipe, meaning that once the retention period ends, the data is cryptographically unrecoverable even by us.
                    </p>
                </div>
            </div>

            <!-- Q4 (Existing) -->
            <div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
                 :class="active === 4 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
                <button @click="active = active === 4 ? null : 4" 
                        class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
                    <span class="font-bold text-zinc-100 group-hover:text-white">Can I use my own domain?</span>
                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
                         :class="active === 4 ? 'rotate-180 text-pink-500' : ''" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="active === 4" 
                     x-collapse
                     class="px-6 pb-6">
                    <p class="text-sm text-zinc-400 leading-relaxed">
                        Yes, but this is a Pro feature. Pro users can connect their own domains via custom MX records, allowing you to generate infinite temporary addresses on your own brand.
                    </p>
                </div>
            </div>

            <!-- Q5 -->
            <div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
                 :class="active === 5 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
                <button @click="active = active === 5 ? null : 5" 
                        class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
                    <span class="font-bold text-zinc-100 group-hover:text-white">Why isn't my email arriving?</span>
                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
                         :class="active === 5 ? 'rotate-180 text-pink-500' : ''" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="active === 5" 
                     x-collapse
                     class="px-6 pb-6">
                    <p class="text-sm text-zinc-400 leading-relaxed">
                        Most emails arrive instantly, but high traffic or sender-side filters may cause delays. If it takes longer than 15 minutes, try generating an email using a different domain suffix, as some domains may be temporarily throttled by external providers.
                    </p>
                </div>
            </div>

            <!-- Q6 -->
            <div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
                 :class="active === 6 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
                <button @click="active = active === 6 ? null : 6" 
                        class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
                    <span class="font-bold text-zinc-100 group-hover:text-white">Do I need to install any software?</span>
                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
                         :class="active === 6 ? 'rotate-180 text-pink-500' : ''" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="active === 6" 
                     x-collapse
                     class="px-6 pb-6">
                    <p class="text-sm text-zinc-400 leading-relaxed">
                        No. Imail is a 100% web-based service. It is accessible across all modern browsers and devices (Desktop, Mobile, Tablet) without the need for any apps or browser extensions.
                    </p>
                </div>
            </div>

            <!-- Q7 -->
            <div class="group border border-white/5 rounded-2xl bg-zinc-900/30 overflow-hidden transition-all duration-300"
                 :class="active === 7 ? 'border-pink-500/30 bg-zinc-900/50 shadow-[0_0_30px_rgba(236,72,153,0.05)]' : 'hover:border-white/10'">
                <button @click="active = active === 7 ? null : 7" 
                        class="w-full px-6 py-5 flex items-center justify-between text-left transition-colors">
                    <span class="font-bold text-zinc-100 group-hover:text-white">How many email addresses can I create?</span>
                    <svg class="w-5 h-5 text-zinc-500 transition-transform duration-300" 
                         :class="active === 7 ? 'rotate-180 text-pink-500' : ''" 
                         fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="active === 7" 
                     x-collapse
                     class="px-6 pb-6">
                    <p class="text-sm text-zinc-400 leading-relaxed">
                        Free users can have up to 5 active addresses simultaneously. If you need more, you can either delete old ones or upgrade to **Pro** for unlimited active addresses and dedicated premium domains.
                    </p>
                </div>
            </div>
        </div>

        <!-- Footer Note -->
        <div class="mt-12 text-center">
            <p class="text-sm text-zinc-500">
                Still have questions? 
                <a href="mailto:support@imail.me" class="text-pink-500/80 hover:text-pink-500 font-bold transition-colors underline decoration-pink-500/20 underline-offset-4">Chat with our team</a>
            </p>
        </div>
    </div>
</section>