<?php
// Load email data
$email_data = file_exists(__DIR__ . '/data.email.php') ? include __DIR__ . '/data.email.php' : ['emails' => [], 'settings' => ['frequency' => 1, 'delay' => 60]];

// Handle email submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['email'])) {
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    if ($email && !in_array($email, $email_data['emails'])) {
        $email_data['emails'][] = $email;
        file_put_contents(__DIR__ . '/data.email.php', '<?php return ' . var_export($email_data, true) . ';');
    }
}
?>


    <style>
        #emailPopup { 
            display: none; 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        }
        #emailPopup.show { 
            display: flex; 
            opacity: 1; 
        }
        .popup-card { 
            transform: scale(0.95); 
            transition: transform 0.3s ease, box-shadow 0.3s ease; 
        }
        #emailPopup.show .popup-card { 
            transform: scale(1); 
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); 
        }
        .btn { 
            transition: background-color 0.3s ease, transform 0.2s ease; 
        }
        .btn:hover { 
            transform: translateY(-1px); 
        }
    </style>

    <div id="emailPopup" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50">
        <div class="popup-card bg-white rounded-xl p-8 max-w-md w-full relative">
            <button id="closePopup" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 transition-colors">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
            <div class="flex items-center mb-6">
                <i data-lucide="mail" class="w-8 h-8 text-blue-600 mr-3"></i>
                <h2 class="text-2xl font-bold text-gray-900">Join Our Newsletter</h2>
            </div>
            <p class="text-gray-600 mb-6">Stay updated with the latest tools and features. Subscribe now!</p>
            <form method="POST" class="space-y-4">
                <input type="email" name="email" placeholder="Enter your email address" class="border border-gray-300 rounded-lg p-3 w-full focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                <button type="submit" class="btn bg-blue-600 text-white px-5 py-3 rounded-lg hover:bg-blue-700 w-full flex items-center justify-center">
                    <i data-lucide="send" class="w-5 h-5 mr-2"></i> Subscribe
                </button>
            </form>
        </div>
    </div>

    <script>
        lucide.createIcons();

        // Popup logic
        const popup = document.getElementById('emailPopup');
        const closeButton = document.getElementById('closePopup');
        const frequency = <?= $email_data['settings']['frequency'] ?>;
        const delay = <?= $email_data['settings']['delay'] ?> * 1000;

        // Check if popup should be shown
        const lastShown = localStorage.getItem('emailPopupLastShown');
        const shownCount = parseInt(localStorage.getItem('emailPopupCount') || '0');
        const today = new Date().toDateString();

        if (!lastShown || lastShown !== today || shownCount < frequency) {
            setTimeout(() => {
                popup.classList.add('show');
            }, delay);
        }

        // Close popup and update localStorage
        closeButton.addEventListener('click', () => {
            popup.classList.remove('show');
            localStorage.setItem('emailPopupLastShown', today);
            localStorage.setItem('emailPopupCount', shownCount + 1);
        });

        // Reset count daily
        if (lastShown !== today) {
            localStorage.setItem('emailPopupCount', '0');
        }
    </script>