<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taaha Multani</title>
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <style>
        body {
            margin: 0;
            background: black;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #text {
            font-size: clamp(32px, 10vw, 100px);
            font-family: Arial, sans-serif;
            color: white;
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
            transform: perspective(500px) rotateX(20deg);
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            text-align: center;
            white-space: nowrap;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        #audioControl {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
            z-index: 1000;
        }

        #controlsToggle {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
            z-index: 1000;
            font-size: 16px;
        }

        #controls {
            position: fixed;
            bottom: 60px;
            left: 20px;
            background: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 5px;
            z-index: 1000;
            display: none;
            flex-direction: column;
            gap: 10px;
            color: white;
            font-size: 12px;
            min-width: 200px;
            max-width: 90%;
            transition: opacity 0.3s ease;
            opacity: 0;
        }

        #controls.visible {
            display: flex;
            opacity: 1;
        }

        .control-group {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }

        .control-group span {
            min-width: 60px;
            white-space: nowrap;
        }

        .slider {
            cursor: pointer;
            flex: 1;
            min-width: 80px;
            max-width: 150px;
            height: 6px;
        }

        #joystickContainer {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

        #joystick {
            width: 80px;
            height: 80px;
            position: relative;
        }

        #joystick-base {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
            cursor: pointer;
        }

        #joystick-handle {
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }

        /* Add a visual indicator for the direction */
        #joystick-base::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 20px;
            background: rgba(255, 255, 255, 0.3);
            transform-origin: bottom center;
            transform: translateX(-50%);
        }

        #copyright {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.5);
            font-family: Arial, sans-serif;
            font-size: 12px;
            z-index: 1000;
            width: 90%;
            max-width: 600px;
            text-align: center;
            padding: 5px 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Add responsive font size for different screen sizes */
        @media screen and (min-width: 768px) {
            #copyright {
                font-size: 14px;
            }
        }

        /* Responsive adjustments for larger screens */
        @media screen and (min-width: 768px) {
            #controls {
                font-size: 14px;
                padding: 15px;
                gap: 15px;
            }

            .control-group {
                gap: 12px;
            }

            .slider {
                height: 8px;
            }
        }

        /* Additional slider styling for better visibility */
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
        }

        .slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }

        /* Add new style for the links container */
        #links {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Arial, sans-serif;
            font-size: clamp(14px, 2.5vw, 22px);
            text-align: center;
            z-index: 1;
            width: 90%;
            white-space: nowrap;
        }

        #links a {
            background: linear-gradient(120deg, #e0e0e0, #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            margin: 0 clamp(10px, 2vw, 20px);
            opacity: 0.8;
            transition: all 0.3s ease;
            display: inline-block;
            padding: clamp(5px, 1vw, 10px) 0;
        }

        #links a:hover {
            opacity: 1;
            transform: scale(1.05);
        }

        /* Add responsive adjustments for very small screens */
        @media screen and (max-width: 480px) {
            #text {
                font-size: clamp(24px, 8vw, 32px);
            }
            
            #links {
                font-size: clamp(12px, 4vw, 16px);
            }
            
            #links a {
                margin: 0 clamp(8px, 1.5vw, 12px);
            }
        }

        /* Add responsive adjustments for larger screens */
        @media screen and (min-width: 1200px) {
            #text {
                font-size: clamp(48px, 8vw, 120px);
            }
            
            #links {
                font-size: clamp(18px, 2vw, 28px);
            }
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .modal.show {
            display: flex;
        }

        .modal-content {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 10px;
            width: 90%;
            max-width: 400px;
            color: white;
            font-family: Arial, sans-serif;
        }

        .modal-content h2 {
            margin: 0 0 20px 0;
            font-size: clamp(18px, 4vw, 24px);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: clamp(14px, 3vw, 16px);
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            color: white;
            font-size: clamp(14px, 3vw, 16px);
        }

        .form-group input:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
        }

        .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .modal-button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: clamp(14px, 3vw, 16px);
            transition: all 0.3s ease;
        }

        .submit-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .cancel-btn {
            background: rgba(255, 0, 0, 0.2);
            color: white;
        }

        .modal-button:hover {
            transform: scale(1.02);
        }

        /* Add these new styles */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 8px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .error-message {
            color: #ff6b6b;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
        }

        /* Notification styles */
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(40, 167, 69, 0.95);
            color: white;
            padding: 15px 25px;
            border-radius: 5px;
            z-index: 9999;
            font-family: Arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            pointer-events: none;
            opacity: 1 !important;
        }

        @keyframes fadeInOut {
            0% { opacity: 1; transform: translate(-50%, -20px); }
            10% { opacity: 1; transform: translate(-50%, 0); }
            90% { opacity: 1; transform: translate(-50%, 0); }
            100% { opacity: 0; transform: translate(-50%, -20px); }
        }
    </style>
</head>
<body>
    <div id="text">Taaha Multani</div>
    <div id="links">
        <a href="#">Portfolio</a> — <a href="#">Resume</a>
    </div>
    <div class="modal" id="resumeModal">
        <div class="modal-content">
            <h2>Request Resume</h2>
            <form id="resumeForm" onsubmit="return false;" novalidate>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" required placeholder="Enter your name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" required placeholder="Enter your email">
                </div>
                <div class="form-group">
                    <label for="role">Are you a</label>
                    <select id="role" required style="width: 100%; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(50, 50, 50, 0.9); border-radius: 4px; color: white; font-size: clamp(14px, 3vw, 16px);">
                        <option value="">Select an option</option>
                        <option value="recruiter">Recruiter</option>
                        <option value="colleague">Colleague</option>
                        <option value="friend">Friend</option>
                    </select>
                </div>
                <div class="error-message" id="formError"></div>
                <div class="modal-buttons">
                    <button type="button" class="modal-button cancel-btn" id="cancelBtn">Cancel</button>
                    <button type="button" class="modal-button submit-btn" id="submitBtn">
                        <span id="submitSpinner" class="loading-spinner" style="display: none;"></span>
                        <span id="submitText">Request</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <canvas id="canvas"></canvas>
    <audio id="snowfallAudio" loop autoplay>
        <source src="snowfall.mp3" type="audio/mpeg">
    </audio>
    <button id="audioControl">🔊</button>

    <button id="controlsToggle">⚙️</button>

    <div id="controls">
        <div class="control-group">
            <span>Season:</span>
            <select id="seasonDropdown" style="width: 100%; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(50, 50, 50, 0.9); border-radius: 4px; color: white; font-size: clamp(14px, 3vw, 16px);">
                <option value="winter">Winter</option>
            </select>
        </div>
        <div class="control-group">
            <span>Speed:</span>
            <input type="range" id="speedSlider" class="slider" min="0.5" max="3" step="0.1" value="1">
        </div>
        <div class="control-group">
            <span>Density:</span>
            <input type="range" id="densitySlider" class="slider" min="50" max="500" step="10" value="200">
        </div>
    </div>

    <div id="joystickContainer">
        <div id="joystick">
            <div id="joystick-base">
                <div id="joystick-handle"></div>
            </div>
        </div>
    </div>

    <div id="copyright"></div>

    <script>
        const audio = document.getElementById("snowfallAudio");
        const audioControl = document.getElementById("audioControl");
        
        // Set initial volume and button state
        audio.volume = 0.5;
        audioControl.textContent = "🔊";

        // Function to try playing audio
        function tryPlayAudio() {
            const playPromise = audio.play();
            
            if (playPromise !== undefined) {
                playPromise
                    .then(() => {
                        audioControl.textContent = "🔊";
                    })
                    .catch(() => {
                        audioControl.textContent = "🔈";
                        // Show a temporary notification that user interaction is needed
                        const notification = document.createElement("div");
                        notification.style.cssText = `
                            position: fixed;
                            top: 20px;
                            left: 50%;
                            transform: translateX(-50%);
                            background: rgba(255, 255, 255, 0.2);
                            color: white;
                            padding: 10px 20px;
                            border-radius: 5px;
                            z-index: 1001;
                        `;
                        notification.textContent = "Click anywhere to enable audio";
                        document.body.appendChild(notification);
                        
                        // Remove notification after 3 seconds
                        setTimeout(() => notification.remove(), 3000);
                    });
            }
        }

        // Try to play audio on various events
        window.addEventListener("load", tryPlayAudio);
        document.addEventListener("DOMContentLoaded", tryPlayAudio);

        // Try to play on any user interaction
        const handleFirstInteraction = () => {
            audio.play()
                .then(() => {
                    audioControl.textContent = "🔊";
                    // Remove the interaction listeners once audio starts
                    document.removeEventListener("click", handleFirstInteraction);
                    document.removeEventListener("touchstart", handleFirstInteraction);
                    document.removeEventListener("keydown", handleFirstInteraction);
                });
        };

        document.addEventListener("click", handleFirstInteraction);
        document.addEventListener("touchstart", handleFirstInteraction);
        document.addEventListener("keydown", handleFirstInteraction);

        // Keep the existing click handler for the audio control button
        audioControl.addEventListener("click", (e) => {
            e.stopPropagation(); // Prevent the click from triggering handleFirstInteraction
            if (audio.paused) {
                audio.play();
                audioControl.textContent = "🔊";
            } else {
                audio.pause();
                audioControl.textContent = "🔈";
            }
        });

        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let currentAngle = 45; // Initial angle

        const textElement = document.getElementById('text');
        const textCanvas = document.createElement('canvas');
        const textCtx = textCanvas.getContext('2d');

        textCanvas.width = canvas.width;
        textCanvas.height = canvas.height;

        function drawText() {
            textCtx.clearRect(0, 0, textCanvas.width, textCanvas.height);
            
            // Draw main text
            const mainFontSize = Math.min(Math.max(32, canvas.width / 10), 100);
            textCtx.font = `${mainFontSize}px Arial`;
            textCtx.fillStyle = "white";
            textCtx.textAlign = "center";
            textCtx.textBaseline = "middle";
            textCtx.fillText("Taaha Multani", canvas.width / 2, canvas.height * 0.45);
            
            // Draw links text
            const linksFontSize = Math.min(Math.max(16, canvas.width / 30), 24);
            textCtx.font = `${linksFontSize}px Arial`;
            textCtx.fillText("Portfolio | Resume", canvas.width / 2, canvas.height * 0.55);
        }

        drawText();

        const raindrops = [];

        class Raindrop {
            constructor(x, y) {
                // Set initial properties
                this.angle = 45; // Changed default angle to 45 degrees
                this.speedMultiplier = 1;
                this.radius = Math.random() * 2 + 1;

                // Randomly choose which edge to start from (0: top, 1: right, 2: bottom, 3: left)
                const edge = Math.floor(Math.random() * 4);
                
                switch (edge) {
                    case 0: // Top
                        this.x = Math.random() * canvas.width;
                        this.y = -20;
                        break;
                    case 1: // Right
                        this.x = canvas.width + 20;
                        this.y = Math.random() * canvas.height;
                        break;
                    case 2: // Bottom
                        this.x = Math.random() * canvas.width;
                        this.y = canvas.height + 20;
                        break;
                    case 3: // Left
                        this.x = -20;
                        this.y = Math.random() * canvas.height;
                        break;
                }
                
                // Calculate velocities
                this.updateBaseVelocities();
                this.updateVelocity();
            }

            updateBaseVelocities() {
                // Convert angle to radians and calculate velocities
                const angleInRadians = (this.angle * Math.PI) / 180;
                const speed = Math.random() * 2 + 3;
                this.baseVx = -Math.cos(angleInRadians) * speed;
                this.baseVy = Math.sin(angleInRadians) * speed;
            }

            updateVelocity() {
                this.vx = this.baseVx * this.speedMultiplier;
                this.vy = this.baseVy * this.speedMultiplier;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                const pixel = textCtx.getImageData(this.x, this.y, 1, 1).data;
                if (pixel[0] === 255 && pixel[1] === 255 && pixel[2] === 255) {
                    this.vx *= -0.3;
                    this.vy *= -0.3;
                    this.x += this.vx;
                    this.y += this.vy;
                }

                // Reset when particle goes off screen
                if (this.y > canvas.height + 20 || 
                    this.y < -20 || 
                    this.x > canvas.width + 20 || 
                    this.x < -20) {
                    
                    // Randomly choose which edge to reset from
                    const edge = Math.floor(Math.random() * 4);
                    
                    switch (edge) {
                        case 0: // Top
                            this.x = Math.random() * canvas.width;
                            this.y = -20;
                            break;
                        case 1: // Right
                            this.x = canvas.width + 20;
                            this.y = Math.random() * canvas.height;
                            break;
                        case 2: // Bottom
                            this.x = Math.random() * canvas.width;
                            this.y = canvas.height + 20;
                            break;
                        case 3: // Left
                            this.x = -20;
                            this.y = Math.random() * canvas.height;
                            break;
                    }
                    
                    this.updateBaseVelocities();
                    this.updateVelocity();
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.closePath();
            }
        }

        const speedSlider = document.getElementById("speedSlider");
        const densitySlider = document.getElementById("densitySlider");

        function init() {
            for (let i = 0; i < 200; i++) {
                const raindrop = new Raindrop();
                raindrop.angle = currentAngle;
                raindrop.updateBaseVelocities();
                raindrops.push(raindrop);
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            raindrops.forEach((drop) => {
                drop.update();
                drop.draw();
            });

            requestAnimationFrame(animate);
        }

        init();
        animate();

        // Adjust canvas size on resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            textCanvas.width = canvas.width;
            textCanvas.height = canvas.height;
            drawText();
        });

        speedSlider.addEventListener("input", (e) => {
            const speed = parseFloat(e.target.value);
            raindrops.forEach(drop => {
                drop.speedMultiplier = speed;
                drop.updateVelocity();
            });
        });

        function updateRaindrops(newCount) {
            const currentCount = raindrops.length;
            
            if (newCount > currentCount) {
                // Add more raindrops
                for (let i = 0; i < newCount - currentCount; i++) {
                    const raindrop = new Raindrop();
                    raindrop.angle = currentAngle; // Set the current angle for new particles
                    raindrop.updateBaseVelocities();
                    raindrops.push(raindrop);
                }
            } else if (newCount < currentCount) {
                // Remove excess raindrops
                raindrops.splice(newCount);
            }
        }

        densitySlider.addEventListener("input", (e) => {
            const newCount = parseInt(e.target.value);
            updateRaindrops(newCount);
        });

        const joystick = document.getElementById("joystick");
        const joystickBase = document.getElementById("joystick-base");
        const joystickHandle = document.getElementById("joystick-handle");

        let isDragging = false;

        function updateJoystickHandle(clientX, clientY) {
            const rect = joystickBase.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            // Calculate angle from center to mouse position
            const deltaX = clientX - centerX;
            const deltaY = clientY - centerY;
            const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
            
            // Convert to positive angles (0-360) and flip the angle
            currentAngle = ((-angle + 360) % 360);
            
            // Calculate handle position
            const radius = (rect.width / 2) - 10;
            const handleX = Math.cos(angle * (Math.PI / 180)) * radius;
            const handleY = Math.sin(angle * (Math.PI / 180)) * radius;
            
            // Update handle position
            joystickHandle.style.transform = `translate(${handleX}px, ${handleY}px)`;
            
            // Update raindrops
            raindrops.forEach(drop => {
                drop.angle = currentAngle;
                drop.updateBaseVelocities();
                drop.updateVelocity();
            });
        }

        // Mouse events for joystick
        joystick.addEventListener("mousedown", (e) => {
            isDragging = true;
            updateJoystickHandle(e.clientX, e.clientY);
        });

        document.addEventListener("mousemove", (e) => {
            if (isDragging) {
                updateJoystickHandle(e.clientX, e.clientY);
            }
        });

        document.addEventListener("mouseup", () => {
            isDragging = false;
        });

        // Touch events for mobile
        joystick.addEventListener("touchstart", (e) => {
            isDragging = true;
            const touch = e.touches[0];
            updateJoystickHandle(touch.clientX, touch.clientY);
            e.preventDefault();
        });

        document.addEventListener("touchmove", (e) => {
            if (isDragging) {
                const touch = e.touches[0];
                updateJoystickHandle(touch.clientX, touch.clientY);
            }
            e.preventDefault();
        });

        document.addEventListener("touchend", () => {
            isDragging = false;
        });

        // Initialize joystick position
        function initJoystick() {
            const angle = 45 * (Math.PI / 180);
            const radius = 30; // Initial radius for handle position
            const handleX = Math.cos(angle) * radius;
            const handleY = Math.sin(angle) * radius;
            joystickHandle.style.transform = `translate(${handleX}px, ${handleY}px)`;
        }

        // Call initJoystick after the DOM is loaded
        document.addEventListener("DOMContentLoaded", initJoystick);

        // Set copyright text with current year
        const copyrightElement = document.getElementById("copyright");
        copyrightElement.textContent = `© ${new Date().getFullYear()} Taaha Multani. All rights reserved.`;

        const controlsToggle = document.getElementById("controlsToggle");
        const controls = document.getElementById("controls");

        controlsToggle.addEventListener("click", () => {
            controls.classList.toggle("visible");
        });

        // Close controls when clicking outside
        document.addEventListener("click", (e) => {
            if (!controls.contains(e.target) && e.target !== controlsToggle) {
                controls.classList.remove("visible");
            }
        });

        // Prevent controls from closing when clicking inside
        controls.addEventListener("click", (e) => {
            e.stopPropagation();
        });

        // Get modal elements
        const modal = document.getElementById('resumeModal');
        const resumeLink = document.querySelector('#links a[href="#"]:last-child');
        const cancelBtn = document.getElementById('cancelBtn');
        const resumeForm = document.getElementById('resumeForm');

        // Show modal when clicking Resume
        resumeLink.addEventListener('click', (e) => {
            e.preventDefault();
            modal.classList.add('show');
        });

        // Hide modal when clicking Cancel
        cancelBtn.addEventListener('click', () => {
            modal.classList.remove('show');
            resumeForm.reset();
        });

        // Handle form submission
        const submitBtn = document.getElementById('submitBtn');
        const submitSpinner = document.getElementById('submitSpinner');
        const submitText = document.getElementById('submitText');
        const formError = document.getElementById('formError');

        async function getLocation() {
            try {
                const response = await fetch('https://ipapi.co/json/');
                if (!response.ok) throw new Error('Failed to fetch location');
                const data = await response.json();
                return { city: data.city, region: data.region, country: data.country_name };
            } catch (error) {
                console.error('Error getting location:', error);
                return null;
            }
        }

        // Ensure the submit button click event prevents default behavior
        submitBtn.addEventListener('click', async (e) => {
            e.preventDefault();
            e.stopPropagation();
            
            formError.textContent = "";
            submitBtn.disabled = true;
            submitSpinner.style.display = 'inline-block';
            submitText.textContent = 'Sending...';

            const formData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                role: document.getElementById('role').value
            };

            formData.location = await getLocation();
            sendRequest(formData);
        });

        function sendRequest(formData) {
            fetch('http://127.0.0.1:8000/resume', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => {
                return response.json().then(data => ({ status: response.status, body: data }));
            })
            .then(({ status, body }) => {
                if (status === 200) {
                    // Show success notification
                    const notification = document.createElement('div');
                    notification.className = 'notification';
                    notification.textContent = '✅ Email sent successfully!';
                    document.body.appendChild(notification);
                    // Close the modal and reset the form
                    modal.classList.remove('show');
                    resumeForm.reset();
                    // Remove notification after 5 seconds
                    setTimeout(() => {
                        if (notification && notification.parentElement) {
                            notification.remove();
                        }
                    }, 5000);
                } else if (status === 400 && body.detail === "Email already sent.") {
                    // Show error notification for duplicate email
                    const notification = document.createElement('div');
                    notification.className = 'notification';
                    notification.style.background = 'rgba(255, 0, 0, 0.95)'; // Red background for error
                    notification.textContent = '❌ Email already sent.';
                    document.body.appendChild(notification);
                    // Remove notification after 5 seconds
                    setTimeout(() => {
                        if (notification && notification.parentElement) {
                            notification.remove();
                        }
                    }, 5000);
                } else {
                    throw new Error(body.message || 'An unexpected error occurred');
                }
            })
            .catch(error => {
                formError.textContent = 'Backend is under maintenance. Please try again later.';
                // Show error notification
                const notification = document.createElement('div');
                notification.className = 'notification';
                notification.style.background = 'rgba(255, 0, 0, 0.95)'; // Red background for error
                notification.textContent = '❌ Backend is under maintenance. Please try again later.';
                document.body.appendChild(notification);
                // Close the modal
                modal.classList.remove('show');
                resumeForm.reset();
                // Remove notification after 5 seconds
                setTimeout(() => {
                    if (notification && notification.parentElement) {
                        notification.remove();
                    }
                }, 5000);
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitSpinner.style.display = 'none';
                submitText.textContent = 'Request';
            });
        }

        // Get the Portfolio link element
        const portfolioLink = document.querySelector('#links a[href="#"]:first-child');

        // Show notification when clicking Portfolio
        portfolioLink.addEventListener('click', (e) => {
            e.preventDefault();
            const notification = document.createElement('div');
            notification.className = 'notification';
            notification.style.background = 'rgba(255, 165, 0, 0.95)'; // Orange background for maintenance
            notification.textContent = '⚠️ Portfolio is currently under maintenance.';
            document.body.appendChild(notification);
            // Remove notification after 5 seconds
            setTimeout(() => {
                if (notification && notification.parentElement) {
                    notification.remove();
                }
            }, 5000);
        });
    </script>
</body>
</html>
