// Shared Layout Component (Smart Glass UI)
const PageLayout = ({ title, icon, children, isDark }) => (
    <div className={`fixed inset-0 z-50 flex flex-col overflow-hidden transition-colors duration-500
        ${isDark ? 'bg-[#020617] text-gray-300' : 'bg-white text-slate-700'}
    `}>
        {/* Header */}
        <div className={`h-16 px-6 border-b flex items-center justify-between shrink-0 backdrop-blur-md
            ${isDark ? 'border-white/10 bg-[#050505]/80' : 'border-slate-200 bg-white/80'}
        `}>
            <div className="flex items-center gap-3">
                <a href="/" className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-600 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-blue-500/20">
                    <i className="fa-solid fa-infinity text-sm"></i>
                </a>
                <h1 className={`text-xl font-bold brand-font tracking-tight ${isDark ? 'text-white' : 'text-slate-900'}`}>{title}</h1>
            </div>
            <a href="/" className={`w-9 h-9 rounded-full flex items-center justify-center transition-all hover:scale-110 active:scale-95
                ${isDark ? 'bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-900'}
            `}>
                <i className="fa-solid fa-xmark text-lg"></i>
            </a>
        </div>

        {/* Content Area */}
        <div className="flex-1 overflow-y-auto p-4 md:p-10 glass-scroll">
            <div className="max-w-4xl mx-auto animate-[fadeIn_0.4s_ease-out]">
                <div className={`p-8 md:p-12 rounded-3xl border shadow-2xl relative overflow-hidden
                    ${isDark ? 'bg-[#0a0a0a] border-white/10' : 'bg-white border-slate-200'}
                `}>
                    {/* Background Glow */}
                    {isDark && <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/10 rounded-full blur-[100px] pointer-events-none"></div>}

                    {/* Icon & Title */}
                    <div className="flex items-center gap-5 mb-8 relative z-10">
                        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-2xl shadow-lg shadow-blue-500/30">
                            <i className={`fa-solid ${icon}`}></i>
                        </div>
                        <div>
                            <h2 className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>{title}</h2>
                            <p className="text-sm opacity-60 mt-1">Last updated: January 25, 2026</p>
                        </div>
                    </div>

                    {/* Text Content */}
                    <div className={`space-y-6 leading-relaxed text-sm md:text-base text-justify
                        ${isDark ? 'text-gray-300' : 'text-slate-600'}
                    `}>
                        {children}
                    </div>
                </div>
                
                <div className="text-center text-xs opacity-40 py-8 font-mono">
                    &copy; 2026 Infinity Mail. All rights reserved.
                </div>
            </div>
        </div>
    </div>
);

// 1. About Us Page (Professional Brand Story)
window.AboutPage = ({ isDark }) => (
    <PageLayout title="About Infinity Mail" icon="fa-circle-info" isDark={isDark}>
        <p className="text-lg font-medium opacity-100 mb-6">
            Infinity Mail is a state-of-the-art temporary email service engineered for the modern web. We provide a secure, anonymous, and instant solution to protect your personal identity online.
        </p>
        
        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>Our Mission</h3>
        <p>In an era of data breaches and invasive tracking, privacy is not a luxury—it's a right. Our mission is to keep your personal inbox clean from spam, bots, and phishing attacks by providing disposable identities that act as a shield for your real data.</p>

        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>Why We Are Better</h3>
        <div className="grid md:grid-cols-2 gap-4 mt-4">
            <div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-100 bg-slate-50'}`}>
                <strong className="block text-blue-500 mb-1"><i className="fa-solid fa-shield-halved"></i> No Tracking</strong>
                Unlike other services, we do not use invasive trackers or sell your data.
            </div>
            <div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-100 bg-slate-50'}`}>
                <strong className="block text-purple-500 mb-1"><i className="fa-solid fa-bolt"></i> Instant & Fast</strong>
                Our infrastructure is built on edge networks for lightning-fast email delivery.
            </div>
            <div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-100 bg-slate-50'}`}>
                <strong className="block text-green-500 mb-1"><i className="fa-solid fa-lock"></i> Encryption</strong>
                All emails are encrypted in transit and at rest.
            </div>
            <div className={`p-4 rounded-xl border ${isDark ? 'border-white/10 bg-white/5' : 'border-slate-100 bg-slate-50'}`}>
                <strong className="block text-orange-500 mb-1"><i className="fa-solid fa-user-secret"></i> 100% Anonymous</strong>
                No registration required. We don't even ask for your name.
            </div>
        </div>
    </PageLayout>
);

// 2. Privacy Policy (GDPR & CCPA Compliant Text)
window.PrivacyPage = ({ isDark }) => (
    <PageLayout title="Privacy Policy" icon="fa-user-shield" isDark={isDark}>
        <p>Your privacy is our top priority. This Privacy Policy outlines how Infinity Mail ("we", "our", or "us") handles your information.</p>
        
        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>1. No Logs Policy</h3>
        <p>We operate a strict <strong>no-logs policy</strong>. We do not track your IP address, browser fingerprint, or physical location. Your activity on Infinity Mail is ephemeral and vanishes when your session ends.</p>

        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>2. Temporary Email Data</h3>
        <p>Emails received on our servers are stored temporarily in RAM (Random Access Memory) and encrypted database shards. All emails are <strong>automatically and permanently deleted</strong> after 2 hours (or when you manually delete them). Once deleted, they cannot be recovered by anyone, including us.</p>

        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>3. Local Storage & Cookies</h3>
        <p>We do not use third-party tracking cookies. We use your browser's <code>localStorage</code> solely to:</p>
        <ul className="list-disc pl-5 space-y-1 opacity-80">
            <li>Remember your active temporary email address so it persists if you refresh the page.</li>
            <li>Store your theme preference (Dark/Light mode).</li>
        </ul>
        <p className="mt-2">You can clear this data anytime by clearing your browser cache.</p>

        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>4. Third-Party Services</h3>
        <p>We use trusted partners solely for infrastructure (e.g., Vercel for hosting, Mail.tm for routing). These partners adhere to strict data protection standards.</p>
    </PageLayout>
);

// 3. Terms of Service (Legal Protection)
window.TermsPage = ({ isDark }) => (
    <PageLayout title="Terms of Service" icon="fa-scale-balanced" isDark={isDark}>
        <p>By accessing Infinity Mail, you agree to comply with these Terms of Service. If you do not agree, you must stop using the service immediately.</p>
        
        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>1. Acceptable Use</h3>
        <p>You agree to use Infinity Mail responsibly. You are strictly prohibited from using our service for:</p>
        <ul className="list-disc pl-5 space-y-1 opacity-80">
            <li>Sending unsolicited spam or mass emails.</li>
            <li>Illegal activities, including fraud, phishing, or distributing malware.</li>
            <li>Harassment, hate speech, or threatening behavior.</li>
            <li>Signing up for illegal services or bypassing legitimate security bans.</li>
        </ul>

        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>2. Service Availability</h3>
        <p>Infinity Mail is provided on an "as is" and "as available" basis. While we strive for 99.9% uptime, we do not guarantee that the service will always be uninterrupted or error-free. We reserve the right to change domains or block abusive IP addresses without notice.</p>

        <h3 className={`text-xl font-bold mt-8 mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>3. Limitation of Liability</h3>
        <p>We are not liable for any damages arising from the use or inability to use our service. Do not use temporary emails for important accounts (e.g., banking, primary social media) as you may lose access to them permanently once the email address expires.</p>
    </PageLayout>
);