<?php
// 1. SUPPRESS WARNINGS
error_reporting(E_ALL & ~E_WARNING & ~E_NOTICE);
ini_set('display_errors', 0);

session_start();
require_once 'config.php'; 

// Initialize error messages and form inputs
$username = $password = "";
$username_err = $password_err = $login_err = "";
$full_username_input = ''; 
$reset_username_input = ''; 
$reset_code_input = '';     
$new_password_input = '';   
$confirm_password_input = ''; 
$form_to_display = 'login'; 
$success_message = ''; 

// Check if already logged in
if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true && isset($_SESSION["school_id"])) {
    switch ($_SESSION["role"]) {
        case ROLE_SUPER_ADMIN: header("location: super_admin_dashboard.php"); break;
        case ROLE_ADMIN: header("location: admin_dashboard.php"); break;
        case ROLE_TEACHER: header("location: teacher_dashboard.php"); break;
        case ROLE_STUDENT: header("location: student_dashboard.php"); break;
        default: header("location: login.php?error=invalid_role"); break;
    }
    exit;
}

// Handle form submissions
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['action']) && $_POST['action'] == 'request_reset_code') {
        // [Logic: Request Reset]
        $reset_username_input = trim($_POST["reset_username"]);
        $reset_error = '';

        if (empty($reset_username_input)) {
            $reset_error = "Please enter your username.";
        } else {
            $sql_find_user = "SELECT id, username, phone_number FROM users WHERE username = ?";
            if ($stmt = $conn->prepare($sql_find_user)) {
                $stmt->bind_param("s", $reset_username_input);
                if ($stmt->execute()) {
                    $stmt->store_result();
                    if ($stmt->num_rows == 1) {
                        $stmt->bind_result($user_id_for_reset, $username_for_reset, $phone_number_for_reset);
                        $stmt->fetch();
                        $reset_code = str_pad(rand(0, 999999), 6, '0', STR_PAD_LEFT);
                        $expiry_time = date('Y-m-d H:i:s', strtotime('+10 minutes'));
                        
                        $sql_update_user_reset = "UPDATE users SET reset_code = ?, reset_code_expires_at = ? WHERE id = ?";
                        if ($stmt_update = $conn->prepare($sql_update_user_reset)) {
                            $stmt_update->bind_param("ssi", $reset_code, $expiry_time, $user_id_for_reset);
                            if ($stmt_update->execute()) {
                                $success_message = "A password reset code has been sent to your registered phone number.";
                                $_SESSION['reset_in_progress_username'] = $reset_username_input; 
                                $form_to_display = 'reset_password'; 
                            } else {
                                $reset_error = "Error storing reset code. Please try again.";
                                @error_log("Failed to update reset code: " . $stmt_update->error);
                            }
                            $stmt_update->close();
                        } else {
                             $reset_error = "Database error. Please try again later.";
                             @error_log("Failed to prepare reset update: " . $conn->error);
                        }
                    } else {
                        $reset_error = "Username not found.";
                    }
                } else {
                    $reset_error = "Database error.";
                    @error_log("Failed to execute find user query: " . $stmt->error);
                }
                $stmt->close();
            } else {
                $reset_error = "Database error.";
                @error_log("Failed to prepare find user query: " . $conn->error);
            }
        }
        $_SESSION['reset_error_msg'] = $reset_error;
        $_SESSION['success_message'] = $success_message;
        $_SESSION['form_to_display'] = $form_to_display;
        header("location: login.php");
        exit;

    } elseif (isset($_POST['action']) && $_POST['action'] == 'reset_password') {
        // [Logic: Reset Password]
        $reset_username_input = $_SESSION['reset_in_progress_username'] ?? ''; 
        $reset_code_input = trim($_POST["reset_code"]);
        $new_password_input = trim($_POST["new_password"]);
        $confirm_password_input = trim($_POST["confirm_password"]);
        $reset_error = '';

        if (empty($reset_code_input) || empty($new_password_input) || empty($confirm_password_input)) {
            $reset_error = "Please fill all fields.";
        } elseif ($new_password_input !== $confirm_password_input) {
            $reset_error = "Passwords do not match.";
        } elseif (strlen($new_password_input) < 6) { 
            $reset_error = "Password must be at least 6 characters long.";
        } else {
            $sql_verify_code = "SELECT id, reset_code, reset_code_expires_at FROM users WHERE username = ?";
            if ($stmt = $conn->prepare($sql_verify_code)) {
                $stmt->bind_param("s", $reset_username_input);
                if ($stmt->execute()) {
                    $stmt->store_result();
                    if ($stmt->num_rows == 1) {
                        $stmt->bind_result($user_id_to_reset, $stored_code, $code_expiry);
                        $stmt->fetch();
                        if ($reset_code_input === $stored_code && strtotime($code_expiry) > time()) {
                            $hashed_new_password = password_hash($new_password_input, PASSWORD_DEFAULT);
                            $sql_update_password = "UPDATE users SET password = ?, reset_code = NULL, reset_code_expires_at = NULL WHERE id = ?";
                            if ($stmt_update_pw = $conn->prepare($sql_update_password)) {
                                $stmt_update_pw->bind_param("si", $hashed_new_password, $user_id_to_reset);
                                if ($stmt_update_pw->execute()) {
                                    $success_message = "Your password has been reset successfully. You can now log in.";
                                    unset($_SESSION['reset_in_progress_username']); 
                                    $form_to_display = 'login'; 
                                } else {
                                    $reset_error = "Error updating password.";
                                    @error_log("Failed to update password: " . $stmt_update_pw->error);
                                }
                                $stmt_update_pw->close();
                            } else {
                                    $reset_error = "Database error.";
                                @error_log("Failed to prepare password update: " . $conn->error);
                            }
                        } else {
                            $reset_error = "Invalid or expired reset code.";
                        }
                    } else {
                        $reset_error = "User not found.";
                    }
                } else {
                    $reset_error = "Database error.";
                    @error_log("Failed to execute verify code query: " . $stmt->error);
                }
                $stmt->close();
            } else {
                $reset_error = "Database error.";
                @error_log("Failed to prepare verify code query: " . $conn->error);
            }
        }
        $_SESSION['reset_error_msg'] = $reset_error;
        $_SESSION['success_message'] = $success_message;
        $_SESSION['form_to_display'] = $form_to_display; 
        if ($form_to_display == 'reset_password') { 
             $_SESSION['reset_code_input_val'] = $reset_code_input;
        }
        header("location: login.php");
        exit;

    } else {
        // [Logic: Login]
        $full_username_input = trim($_POST["username"]);
        $password = trim($_POST["password"]);

        if (empty($password)) { $password_err = "Please enter your password."; }
        $school_id = null;
        $base_username = "";

        if (empty($full_username_input)) {
            $username_err = "Please enter username.";
        } else {
            $username_parts = explode('@', $full_username_input);
            if (count($username_parts) !== 2 || empty($username_parts[0]) || empty($username_parts[1])) {
                $username_err = "Format: 'username@school_abbreviation'.";
            } else {
                $base_username = $username_parts[0];
                $school_abbreviation = strtolower($username_parts[1]);
                $sql_get_school_id = "SELECT school_id FROM schools WHERE abbreviation = ?";
                if ($stmt_school = $conn->prepare($sql_get_school_id)) {
                    $stmt_school->bind_param("s", $school_abbreviation);
                    if ($stmt_school->execute()) {
                        $stmt_school->bind_result($school_id_db);
                        if ($stmt_school->fetch()) {
                            $school_id = $school_id_db;
                        } else {
                            $username_err = "School abbreviation '{$school_abbreviation}' not found.";
                        }
                    } else {
                        $login_err = "Database error.";
                        @error_log("Failed to execute school ID query: " . $stmt_school->error);
                    }
                    $stmt_school->close();
                } else {
                    $login_err = "Database error.";
                    @error_log("Failed to prepare school ID query: " . $conn->error);
                }
            }
        }

        if (empty($username_err) && empty($password_err) && !is_null($school_id)) {
            $sql = "SELECT id, username, password, role, status FROM users WHERE username = ? AND school_id = ?";
            if ($stmt = $conn->prepare($sql)) {
                $stmt->bind_param("si", $base_username, $school_id);
                if ($stmt->execute()) {
                    $stmt->store_result();
                    if ($stmt->num_rows == 1) {
                        $stmt->bind_result($id, $username_db, $hashed_password, $user_role, $user_status);
                        if ($stmt->fetch()) {
                            if (password_verify($password, $hashed_password)) {
                                if ($user_status === 'suspended') {
                                    $login_err = "Account suspended. Contact +256 (0)780-185-856.";
                                } else {
                                    session_regenerate_id(true);
                                    $_SESSION["loggedin"] = true;
                                    $_SESSION["id"] = $id;
                                    $_SESSION["username"] = $username_db;
                                    $_SESSION["role"] = $user_role;
                                    $_SESSION["school_id"] = $school_id;
                                    switch ($user_role) {
                                        case ROLE_SUPER_ADMIN: header("location: super_admin_dashboard.php"); break;
                                        case ROLE_ADMIN: header("location: admin_dashboard.php"); break;
                                        case ROLE_TEACHER: header("location: teacher_dashboard.php"); break;
                                        case ROLE_STUDENT: header("location: student_dashboard.php"); break;
                                        default: header("location: login.php?error=invalid_role"); break;
                                    }
                                    exit();
                                }
                            } else {
                                $login_err = "Invalid username or password.";
                            }
                        }
                    } else {
                        $login_err = "Invalid username or password.";
                    }
                } else {
                    $login_err = "System error.";
                    @error_log("Login query execution failed: " . $stmt->error);
                }
                $stmt->close();
            } else {
                $login_err = "System error.";
                @error_log("Failed to prepare login query: " . $conn->error);
            }
        } else if (empty($username_err) && empty($password_err) && is_null($school_id)) {
            $login_err = "Invalid school abbreviation.";
        }
        if (!empty($login_err)) { $_SESSION['login_error_msg'] = $login_err; }
        if (!empty($username_err)) { $_SESSION['login_error_msg'] = $username_err; }
        if (!empty($password_err)) { $_SESSION['login_error_msg'] = $password_err; }
        header("location: login.php");
        exit;
    }
} else { 
    if (isset($_SESSION['login_error_msg'])) { $login_err = $_SESSION['login_error_msg']; unset($_SESSION['login_error_msg']); }
    if (isset($_SESSION['reset_error_msg'])) { $login_err = $_SESSION['reset_error_msg']; unset($_SESSION['reset_error_msg']); }
    if (isset($_SESSION['success_message'])) { $success_message = $_SESSION['success_message']; unset($_SESSION['success_message']); }
    if (isset($_SESSION['form_to_display'])) { $form_to_display = $_SESSION['form_to_display']; unset($_SESSION['form_to_display']); }
    if (isset($_SESSION['reset_in_progress_username'])) { $reset_username_input = $_SESSION['reset_in_progress_username']; }
    if (isset($_SESSION['reset_code_input_val'])) { $reset_code_input = $_SESSION['reset_code_input_val']; unset($_SESSION['reset_code_input_val']); }
}
if (isset($conn) && $conn instanceof mysqli) { $conn->close(); }

$current_hour = date('H');
if ($current_hour >= 5 && $current_hour < 12) { $time_greeting = "Good morning"; }
elseif ($current_hour >= 12 && $current_hour < 18) { $time_greeting = "Good afternoon"; }
else { $time_greeting = "Good evening"; }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#0a66c2">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Login | Divine Reports</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #0a66c2; /* LinkedIn Blue */
            --primary-hover: #004182;
            --glass-bg: rgba(255, 255, 255, 0.95);
            --glass-border: rgba(255, 255, 255, 0.5);
            --input-bg: #f3f4f6;
        }

        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow-x: hidden;
            
            /* Professional Dark Overlay */
            background-image: 
                linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.85)), 
                url('images/laptop.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .login-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 2.5rem;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
            margin: 1rem;
            z-index: 10;
        }

        .floating-input-group {
            position: relative;
            margin-bottom: 1.25rem;
        }

        .floating-input {
            width: 100%;
            padding: 16px 16px 6px 16px;
            height: 56px;
            background: var(--input-bg);
            border: 1px solid transparent;
            border-radius: 8px;
            color: #1f2937;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.2s ease;
            outline: none;
        }

        .floating-input:focus {
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
        }

        .floating-label {
            position: absolute;
            left: 16px;
            top: 18px;
            color: #6b7280;
            font-size: 0.95rem;
            pointer-events: none;
            transition: all 0.2s ease;
        }

        .floating-input:focus ~ .floating-label,
        .floating-input:not(:placeholder-shown) ~ .floating-label {
            top: 8px;
            font-size: 0.7rem;
            color: var(--primary);
            font-weight: 700;
        }

        .btn-primary {
            width: 100%;
            height: 50px;
            background: var(--primary);
            color: white;
            font-weight: 600;
            border-radius: 9999px;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-primary:hover {
            background: var(--primary-hover);
        }

        .btn-primary:active {
            transform: scale(0.98);
        }

        .alert-box {
            padding: 0.75rem 1rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 500;
        }
        .alert-error {
            background: #fef2f2;
            border: 1px solid #fee2e2;
            color: #ef4444;
        }
        .alert-success {
            background: #f0fdf4;
            border: 1px solid #dcfce7;
            color: #16a34a;
        }

        .form-slider {
            display: flex;
            width: 300%;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .form-slide {
            width: 33.333%;
            padding: 0.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        .form-slide.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* Signup Trigger Styling - Positioned Below Card */
        .signup-trigger-container {
            margin-top: 1.5rem;
            text-align: center;
            z-index: 10;
        }
        .signup-trigger-text {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95rem;
            font-weight: 500;
        }
        .signup-trigger-link {
            color: white;
            font-weight: 700;
            text-decoration: none;
            border-bottom: 2px solid #0a66c2;
            padding-bottom: 1px;
            margin-left: 0.25rem;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        .signup-trigger-link:hover {
            color: #0a66c2;
            border-bottom-color: white;
        }

        /* Bottom Sheet */
        .sheet-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            z-index: 50;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        .sheet-overlay.visible { opacity: 1; visibility: visible; }

        .sheet-content {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 2rem;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 51;
            text-align: center;
            color: #333;
        }
        .sheet-overlay.visible .sheet-content { transform: translateY(0); }

        @media (min-width: 640px) {
            .sheet-content {
                bottom: auto;
                top: 50%;
                left: 50%;
                right: auto;
                width: 90%;
                max-width: 400px;
                transform: translate(-50%, -50%) scale(0.9);
                border-radius: 16px;
            }
            .sheet-overlay.visible .sheet-content { transform: translate(-50%, -50%) scale(1); }
        }
    </style>
</head>
<body>

    <div class="login-card">
        <div class="flex justify-center mb-6">
            <div class="h-14 w-14 bg-blue-50 rounded-xl flex items-center justify-center border border-blue-100 shadow-sm">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0a66c2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2v20M2 12h20"/>
                </svg>
            </div>
        </div>

        <div class="text-center mb-8">
            <p class="text-gray-500 text-xs font-semibold tracking-widest uppercase mb-1"><?php echo $time_greeting; ?></p>
            <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Divine Reports</h1>
        </div>

        <?php if (!empty($login_err)): ?>
            <div class="alert-box alert-error">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                <span><?php echo $login_err; ?></span>
            </div>
        <?php endif; ?>

        <?php if (!empty($success_message)): ?>
            <div class="alert-box alert-success">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                <span><?php echo $success_message; ?></span>
            </div>
        <?php endif; ?>

        <div class="overflow-hidden">
            <div class="form-slider" id="formSlider">
                
                <div class="form-slide <?php echo ($form_to_display === 'login') ? 'active' : ''; ?>">
                    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
                        <div class="floating-input-group">
                            <input type="text" name="username" id="username" class="floating-input" placeholder=" " value="<?php echo htmlspecialchars($full_username_input); ?>" required inputmode="email">
                            <label for="username" class="floating-label">Username</label>
                            <p class="helper-text">Format: username@school (e.g., john@smack)</p>
                        </div>
                        
                        <div class="floating-input-group">
                            <input type="password" name="password" id="password" class="floating-input" placeholder=" " required>
                            <label for="password" class="floating-label">Password</label>
                        </div>

                        <div class="flex items-center justify-between mb-6">
                            <label class="flex items-center text-sm text-gray-600 cursor-pointer hover:text-gray-900 transition-colors">
                                <input type="checkbox" name="remember_me" class="mr-2 accent-[#0a66c2] w-4 h-4 rounded border-gray-300">
                                Remember me
                            </label>
                            <button type="button" onclick="switchForm(1)" class="text-sm text-[#0a66c2] hover:text-[#004182] font-semibold">
                                Forgot Password?
                            </button>
                        </div>

                        <button type="submit" class="btn-primary shadow-lg shadow-blue-500/30">
                            Sign In
                        </button>
                    </form>
                </div>

                <div class="form-slide <?php echo ($form_to_display === 'request_reset') ? 'active' : ''; ?>">
                    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
                        <input type="hidden" name="action" value="request_reset_code">
                        <h3 class="text-lg font-bold text-gray-900 mb-2 text-center">Reset Password</h3>
                        <p class="text-gray-500 text-sm text-center mb-6">Enter your username to receive a 6-digit code via SMS.</p>
                        
                        <div class="floating-input-group">
                            <input type="text" name="reset_username" id="reset_username" class="floating-input" placeholder=" " value="<?php echo htmlspecialchars($reset_username_input); ?>" required>
                            <label for="reset_username" class="floating-label">Your Username</label>
                        </div>

                        <button type="submit" class="btn-primary mb-4">Send Code</button>
                        
                        <button type="button" onclick="switchForm(0)" class="w-full text-gray-400 text-sm hover:text-gray-600 font-medium">
                            Back to Login
                        </button>
                    </form>
                </div>

                <div class="form-slide <?php echo ($form_to_display === 'reset_password') ? 'active' : ''; ?>">
                    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
                        <input type="hidden" name="action" value="reset_password">
                        <h3 class="text-lg font-bold text-gray-900 mb-2 text-center">New Password</h3>
                        
                        <div class="floating-input-group">
                            <input type="text" name="reset_code" id="reset_code" class="floating-input" placeholder=" " value="<?php echo htmlspecialchars($reset_code_input); ?>" inputmode="numeric" required>
                            <label for="reset_code" class="floating-label">6-Digit Code</label>
                        </div>
                        
                        <div class="floating-input-group">
                            <input type="password" name="new_password" id="new_password" class="floating-input" placeholder=" " required>
                            <label for="new_password" class="floating-label">New Password</label>
                        </div>
                        
                        <div class="floating-input-group">
                            <input type="password" name="confirm_password" id="confirm_password" class="floating-input" placeholder=" " required>
                            <label for="confirm_password" class="floating-label">Confirm Password</label>
                        </div>

                        <button type="submit" class="btn-primary mb-4">Set Password</button>
                        
                        <button type="button" onclick="switchForm(0)" class="w-full text-gray-400 text-sm hover:text-gray-600 font-medium">
                            Cancel
                        </button>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="signup-trigger-container">
        <span class="signup-trigger-text">Don't have an account?</span>
        <a id="signup-trigger" class="signup-trigger-link">Sign Up</a>
    </div>

    <div id="signup-sheet" class="sheet-overlay">
        <div class="sheet-content">
            <div class="w-12 h-1.5 bg-gray-200 rounded-full mx-auto mb-6 sm:hidden"></div>
            
            <h3 class="text-xl font-bold mb-3 text-gray-900">Join Divine Reports</h3>
            <p class="text-gray-500 mb-6 text-sm leading-relaxed">
                To create a school account or student profile, please contact our support team directly.
            </p>
            
            <div class="bg-blue-50 rounded-xl p-4 mb-6 border border-blue-100">
                <p class="text-[10px] text-blue-600 uppercase tracking-widest font-bold mb-1">WhatsApp / Call</p>
                <p class="text-xl font-mono text-gray-900 font-bold tracking-wider">+256 780 185 856</p>
            </div>

            <button id="close-sheet" class="btn-primary">
                Got it
            </button>
        </div>
    </div>

    <script>
        // Form Logic
        const slider = document.getElementById('formSlider');
        const slides = document.querySelectorAll('.form-slide');
        
        const initialIndex = <?php 
            if($form_to_display === 'login') echo 0;
            elseif($form_to_display === 'request_reset') echo 1;
            elseif($form_to_display === 'reset_password') echo 2;
            else echo 0;
        ?>;
        
        function updateSlider(index) {
            slider.style.transform = `translateX(-${index * 33.333}%)`;
            slides.forEach((slide, i) => {
                if(i === index) slide.classList.add('active');
                else slide.classList.remove('active');
            });
        }

        function switchForm(index) {
            updateSlider(index);
        }

        updateSlider(initialIndex);

        // Modal/Sheet Logic
        const signupTrigger = document.getElementById('signup-trigger');
        const signupSheet = document.getElementById('signup-sheet');
        const closeSheet = document.getElementById('close-sheet');

        function toggleSheet(show) {
            if(show) signupSheet.classList.add('visible');
            else signupSheet.classList.remove('visible');
        }

        signupTrigger.addEventListener('click', (e) => {
            e.preventDefault();
            toggleSheet(true);
        });

        closeSheet.addEventListener('click', () => toggleSheet(false));
        
        signupSheet.addEventListener('click', (e) => {
            if(e.target === signupSheet) toggleSheet(false);
        });
    </script>
</body>
</html>