<?php
require_once 'config/config.php';
session_start();
require_once 'config/database.php';
require_once 'includes/functions.php';
require_once 'config/email.php';  // ✅ LISATUD: Email funktsioonid

// Kui kasutaja on juba sisse logitud, suuna ümber
if (isLoggedIn()) {
    $redirect_url = isAdmin() ? url('admin/dashboard.php') : url('athlete/dashboard.php');
    header('Location: ' . $redirect_url);
    exit;
}

$error = '';
$success = '';
$step = 'register'; // register, email_sent

// Email system check
$email_enabled = function_exists('mail') || function_exists('sendRegistrationEmail');

// Töötle registreerimist
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $firstName = getPost('firstName');
    $lastName = getPost('lastName');
    $email = getPost('email');
    $phone = getPost('phone');
    $birthDate = getPost('birthDate');
    $username = getPost('username');
    $password = getPost('password');
    $confirm_password = getPost('confirm_password');
    
    // Valideerimine
    if (empty($firstName) || empty($lastName) || empty($email) || empty($birthDate) || empty($username) || empty($password)) {
        $error = 'Kõik kohustuslikud väljad peavad olema täidetud';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = 'Palun sisesta kehtiv e-maili aadress';
    } elseif ($password !== $confirm_password) {
        $error = 'Paroolid ei ühti';
    } elseif (strlen($password) < 6) {
        $error = 'Parool peab olema vähemalt 6 tähemärki pikk';
    } else {
        try {
            // Kontrolli kas kasutajanimi või e-mail on juba kasutusel
            $stmt = $pdo->prepare("SELECT id FROM users WHERE username = ? OR email = ?");
            $stmt->execute([$username, $email]);
            if ($stmt->fetch()) {
                $error = 'Kasutajanimi või e-mail on juba kasutusel';
            } else {
                // Loo uus kasutaja
                $hashed_password = hashPassword($password);
                
                if ($email_enabled && function_exists('sendRegistrationEmail')) {
                    // Email kinnitusega registreerimine
                    $verification_token = bin2hex(random_bytes(32));
                    $verification_expires = date('Y-m-d H:i:s', strtotime('+24 hours'));
                    
                    $stmt = $pdo->prepare("
                        INSERT INTO users (firstName, lastName, email, phone, birthDate, username, password, role, isActive, email_verified, verification_token, verification_expires)
                        VALUES (?, ?, ?, ?, ?, ?, ?, 'athlete', 0, 0, ?, ?)
                    ");
                    $stmt->execute([$firstName, $lastName, $email, $phone, $birthDate, $username, $hashed_password, $verification_token, $verification_expires]);
                    
                    $user_id = $pdo->lastInsertId();
                    
                    // Saada kinnitusmail
                    $full_name = $firstName . ' ' . $lastName;
                    $email_sent = sendRegistrationEmail($email, $full_name, $verification_token);
                    
                    if ($email_sent) {
                        $success = 'Konto loodud! Kontrolli oma e-maili ja järgi juhiseid konto kinnitamiseks.';
                        $step = 'email_sent';
                        logActivity($user_id, 'register', 'New user registered - email verification pending');
                    } else {
                        // Email ei läinud, kustuta kasutaja
                        $stmt = $pdo->prepare("DELETE FROM users WHERE id = ?");
                        $stmt->execute([$user_id]);
                        $error = 'Registreerimine ebaõnnestus - kinnitusmaili ei õnnestunud saata. Palun proovi hiljem uuesti.';
                    }
                } else {
                    // Otsene registreerimine ilma emailita
                    $stmt = $pdo->prepare("
                        INSERT INTO users (firstName, lastName, email, phone, birthDate, username, password, role, isActive, email_verified)
                        VALUES (?, ?, ?, ?, ?, ?, ?, 'athlete', 1, 1)
                    ");
                    $stmt->execute([$firstName, $lastName, $email, $phone, $birthDate, $username, $hashed_password]);
                    
                    $user_id = $pdo->lastInsertId();
                    
                    $success = 'Konto edukalt loodud! Võid nüüd sisse logida.';
                    $step = 'account_created';
                    logActivity($user_id, 'register', 'New user registered - direct activation');
                }
            }
            
        } catch(PDOException $e) {
            $error = 'Registreerimine ebaõnnestus. Palun proovi hiljem uuesti.';
            error_log('Registration error: ' . $e->getMessage());
        }
    }
}

$page_title = 'Registreerimine';
$page_description = 'Loo uus konto Estreka Ratsaklubi punktiarvestuse süsteemis.';
$body_class = 'register-page';

include 'includes/header.php';
?>

<main class="auth-main">
    <div class="auth-container">
        <!-- Left side - Form -->
        <div class="auth-form-section">
            <div class="auth-card">
                <!-- Logo ja pealkiri -->
                <div class="auth-header">
                    <div class="auth-logo">
                        <div class="logo-icon">
                            <i class="icon-user"></i>
                        </div>
                        <div class="logo-text">
                            <h1><?php echo getSystemName(); ?></h1>
                            <span>Ratsaspordi areng</span>
                        </div>
                    </div>
                    
                    <?php if ($step === 'register'): ?>
                        <div class="auth-title-section">
                            <h2 class="auth-title">Loo uus konto</h2>
                            <p class="auth-subtitle">
                                Liitu meiega ja jälgi oma arengut ratsaspordis
                            </p>
                        </div>
                    <?php elseif ($step === 'email_sent'): ?>
                        <div class="auth-title-section">
                            <h2 class="auth-title">Kontrolli oma e-maili</h2>
                            <p class="auth-subtitle">
                                Saatsime sulle kinnitusmaili
                            </p>
                        </div>
                    <?php else: ?>
                        <div class="auth-title-section">
                            <h2 class="auth-title">Konto loodud!</h2>
                            <p class="auth-subtitle">
                                Võid nüüd sisse logida
                            </p>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Registreerimise vorm või tulemus -->
                <div class="auth-form-container">
                    <?php if ($error): ?>
                        <div class="alert alert-error">
                            <i class="icon-alert-circle"></i>
                            <span><?php echo htmlspecialchars($error); ?></span>
                        </div>
                    <?php endif; ?>

                    <?php if ($success): ?>
                        <div class="alert alert-success">
                            <i class="icon-check-circle"></i>
                            <span><?php echo htmlspecialchars($success); ?></span>
                        </div>
                    <?php endif; ?>

                    <?php if ($step === 'register'): ?>
                        <form method="POST" class="auth-form">
                            <div class="form-grid">
                                <div class="form-group">
                                    <label for="firstName" class="form-label">
                                        <i class="icon-user"></i>
                                        Eesnimi *
                                    </label>
                                    <input 
                                        type="text" 
                                        id="firstName" 
                                        name="firstName" 
                                        class="form-input"
                                        placeholder="Sisesta eesnimi"
                                        value="<?php echo htmlspecialchars($firstName ?? ''); ?>"
                                        required
                                    >
                                </div>

                                <div class="form-group">
                                    <label for="lastName" class="form-label">
                                        <i class="icon-user"></i>
                                        Perekonnanimi *
                                    </label>
                                    <input 
                                        type="text" 
                                        id="lastName" 
                                        name="lastName" 
                                        class="form-input"
                                        placeholder="Sisesta perekonnanimi"
                                        value="<?php echo htmlspecialchars($lastName ?? ''); ?>"
                                        required
                                    >
                                </div>

                                <div class="form-group form-group-wide">
                                    <label for="email" class="form-label">
                                        <i class="icon-mail"></i>
                                        E-maili aadress *
                                    </label>
                                    <input 
                                        type="email" 
                                        id="email" 
                                        name="email" 
                                        class="form-input"
                                        placeholder="Sisesta e-mail"
                                        value="<?php echo htmlspecialchars($email ?? ''); ?>"
                                        required
                                    >
                                </div>

                                <div class="form-group">
                                    <label for="phone" class="form-label">
                                        <i class="icon-phone"></i>
                                        Telefon
                                    </label>
                                    <input 
                                        type="tel" 
                                        id="phone" 
                                        name="phone" 
                                        class="form-input"
                                        placeholder="Sisesta telefon"
                                        value="<?php echo htmlspecialchars($phone ?? ''); ?>"
                                    >
                                </div>

                                <div class="form-group">
                                    <label for="birthDate" class="form-label">
                                        <i class="icon-calendar"></i>
                                        Sünniaeg *
                                    </label>
                                    <input 
                                        type="date" 
                                        id="birthDate" 
                                        name="birthDate" 
                                        class="form-input"
                                        value="<?php echo htmlspecialchars($birthDate ?? ''); ?>"
                                        max="<?php echo date('Y-m-d', strtotime('-5 years')); ?>"
                                        required
                                    >
                                </div>

                                <div class="form-group form-group-wide">
                                    <label for="username" class="form-label">
                                        <i class="icon-user"></i>
                                        Kasutajanimi *
                                    </label>
                                    <input 
                                        type="text" 
                                        id="username" 
                                        name="username" 
                                        class="form-input"
                                        placeholder="Sisesta kasutajanimi"
                                        value="<?php echo htmlspecialchars($username ?? ''); ?>"
                                        pattern="[a-zA-Z0-9_]{3,20}"
                                        title="3-20 tähemärki, ainult tähed, numbrid ja alakriips"
                                        required
                                    >
                                    <div class="form-help">3-20 tähemärki, ainult tähed, numbrid ja alakriips</div>
                                </div>

                                <div class="form-group">
                                    <label for="password" class="form-label">
                                        <i class="icon-lock"></i>
                                        Parool *
                                    </label>
                                    <div class="password-input-container">
                                        <input 
                                            type="password" 
                                            id="password" 
                                            name="password" 
                                            class="form-input"
                                            placeholder="Sisesta parool"
                                            minlength="6"
                                            required
                                        >
                                        <button type="button" class="password-toggle" onclick="togglePassword('password')">
                                            <i class="icon-eye" id="password-toggle-icon"></i>
                                        </button>
                                    </div>
                                    <div class="form-help">Vähemalt 6 tähemärki</div>
                                </div>

                                <div class="form-group">
                                    <label for="confirm_password" class="form-label">
                                        <i class="icon-lock"></i>
                                        Korda parooli *
                                    </label>
                                    <div class="password-input-container">
                                        <input 
                                            type="password" 
                                            id="confirm_password" 
                                            name="confirm_password" 
                                            class="form-input"
                                            placeholder="Korda parooli"
                                            minlength="6"
                                            required
                                        >
                                        <button type="button" class="password-toggle" onclick="togglePassword('confirm_password')">
                                            <i class="icon-eye" id="confirm_password-toggle-icon"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-large">
                                <i class="icon-user"></i>
                                <span>Loo konto</span>
                            </button>
                        </form>
                        
                    <?php elseif ($step === 'email_sent'): ?>
                        <!-- Email saadetud teade -->
                        <div class="success-container">
                            <div class="success-icon">
                                <i class="icon-mail"></i>
                            </div>
                            
                            <div class="success-content">
                                <h3>Kinnitusmail saadetud!</h3>
                                <p>Saatsime kinnitusmaili aadressile:</p>
                                <div class="email-address"><?php echo htmlspecialchars($email); ?></div>
                                
                                <div class="instructions-box">
                                    <h4>Järgmised sammud:</h4>
                                    <ol>
                                        <li>Kontrolli oma postkasti (ka rämpspost kausta)</li>
                                        <li>Kliki kinnituslingile meilos</li>
                                        <li>Pärast kinnitamist saad sisse logida</li>
                                    </ol>
                                </div>
                                
                                <div class="help-box">
                                    <p><strong>Ei saanud maili?</strong></p>
                                    <ul>
                                        <li>Kontrolli rämpspost kausta</li>
                                        <li>Oota mõni minut (võib aega võtta)</li>
                                        <li>Veendu, et e-mail on õigesti kirjutatud</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                    <?php else: ?>
                        <!-- Konto loodud teade -->
                        <div class="success-container">
                            <div class="success-icon">
                                <i class="icon-check-circle"></i>
                            </div>
                            
                            <div class="success-content">
                                <h3>Konto loodud!</h3>
                                <p>Sinu konto on edukalt loodud ja aktiveeritud.</p>
                                <div class="instructions-box">
                                    <p>Võid nüüd sisse logida ja hakata kasutama süsteemi:</p>
                                    <ul>
                                        <li>Jälgi oma võistluste tulemusi</li>
                                        <li>Pea treeningu päevikut</li>
                                        <li>Vaata hooaja statistikat</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>

                    <!-- Toimingu nupud -->
                    <div class="auth-actions">
                        <?php if ($step === 'register'): ?>
                            <div class="auth-divider">
                                <span>Juba on konto?</span>
                            </div>
                            <a href="<?php echo url('login.php'); ?>" class="btn btn-outline btn-large">
                                <i class="icon-log-in"></i>
                                <span>Logi sisse</span>
                            </a>
                        <?php else: ?>
                            <div class="action-buttons">
                                <?php if ($step === 'email_sent'): ?>
                                    <a href="<?php echo url('register.php'); ?>" class="btn btn-secondary">
                                        <i class="icon-user"></i>
                                        <span>Registreeru uuesti</span>
                                    </a>
                                <?php endif; ?>
                                <a href="<?php echo url('login.php'); ?>" class="btn btn-primary">
                                    <i class="icon-log-in"></i>
                                    <span>Mine sisselogimislehele</span>
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right side - Info -->
        <div class="auth-info-section">
            <div class="info-container">
                <div class="info-hero">
                    <div class="info-icon">
                        <i class="icon-trophy"></i>
                    </div>
                    <h3>Liitu <?php echo getSystemName(); ?>ga</h3>
                    <p>Jälgi oma progressi ja saavutusi ratsaspordis</p>
                </div>

                <div class="features-list">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="icon-bar-chart"></i>
                        </div>
                        <div class="feature-text">
                            <h4>Jälgi tulemusi</h4>
                            <p>Vaata kõiki oma võistluste tulemusi ja statistikat</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="icon-list"></i>
                        </div>
                        <div class="feature-text">
                            <h4>Hooaja tabelid</h4>
                            <p>Näe oma positsiooni distsipliinide kaupa</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="icon-calendar"></i>
                        </div>
                        <div class="feature-text">
                            <h4>Treeningu päevik</h4>
                            <p>Pea treeningu päevikut ja jälgi arengut</p>
                        </div>
                    </div>

                    <div class="feature-item">
                        <div class="feature-icon">
                            <i class="icon-trending-up"></i>
                        </div>
                        <div class="feature-text">
                            <h4>Progress ja analüüs</h4>
                            <p>Detailne statistika ja graafikud</p>
                        </div>
                    </div>
                </div>

                <div class="contact-info">
                    <h4>Vajad abi?</h4>
                    <p>Kui sul on küsimusi registreerimise kohta:</p>
                    <a href="mailto:<?php echo getSystemEmail('contact'); ?>" class="contact-email">
                        <i class="icon-mail"></i>
                        <?php echo getSystemEmail('contact'); ?>
                    </a>
                </div>
            </div>
        </div>
    </div>
</main>

<style>
/* TÄIELIK PARANDATUD CSS register.php jaoks - asenda kogu <style> sektsioon */

/* Register Page Base */
.register-page {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    min-height: 100vh;
}

.auth-main {
    padding: var(--spacing-6) 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.auth-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

/* Form Section */
.auth-form-section {
    position: sticky;
    top: var(--spacing-6);
}

.auth-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-8);
    border: 1px solid var(--gray-200);
}

/* Header */
.auth-header {
    margin-bottom: var(--spacing-8);
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.logo-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.logo-text h1 {
    margin: 0 0 var(--spacing-1);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
}

.logo-text span {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    font-weight: 500;
}

.auth-title-section {
    text-align: center;
}

.auth-title {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
}

.auth-subtitle {
    color: var(--gray-600);
    font-size: var(--font-size-lg);
    margin: 0;
    line-height: 1.5;
}

/* Form Container */
.auth-form-container {
    margin-bottom: var(--spacing-6);
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-6);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form-group-wide {
    grid-column: 1 / -1;
}

.form-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    color: var(--gray-700);
    font-size: var(--font-size-sm);
}

.form-label i {
    color: var(--primary-color);
    width: 16px;
}

.form-input {
    padding: var(--spacing-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    background: var(--gray-50);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.form-input:invalid {
    border-color: var(--danger-color);
}

/* Password Input */
.password-input-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius);
    transition: color var(--transition-fast);
}

.password-toggle:hover {
    color: var(--gray-600);
}

.form-help {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    margin-top: var(--spacing-1);
}

/* Buttons */
.btn-large {
    padding: var(--spacing-4) var(--spacing-6);
    font-size: var(--font-size-lg);
    font-weight: 600;
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

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

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* Success States */
.success-container {
    text-align: center;
    padding: var(--spacing-6) var(--spacing-4);
}

.success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--success-color), #059669);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto var(--spacing-6);
}

.success-content h3 {
    color: var(--gray-900);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-xl);
}

.email-address {
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
    margin: var(--spacing-4) 0;
    font-family: monospace;
    font-size: var(--font-size-lg);
}

.instructions-box,
.help-box {
    text-align: left;
    background: var(--gray-50);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    margin: var(--spacing-6) 0;
    border: 1px solid var(--gray-200);
}

.instructions-box h4,
.help-box p strong {
    margin-bottom: var(--spacing-3);
    color: var(--gray-900);
}

.instructions-box ol {
    padding-left: var(--spacing-5);
    color: var(--gray-700);
}

.instructions-box li,
.help-box li {
    margin-bottom: var(--spacing-2);
    line-height: 1.5;
}

.help-box ul {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

/* Auth Actions - PARANDATUD */
.auth-actions {
    margin-top: var(--spacing-6);
}

.auth-divider {
    text-align: center;
    margin: var(--spacing-6) 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gray-200);
}

.auth-divider span {
    background: white;
    padding: 0 var(--spacing-3);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    position: relative;
    z-index: 2;
}

/* "Logi sisse" nupp - PARANDATUD */
.auth-actions .btn-outline {
    background-color: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: var(--spacing-4) var(--spacing-6);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    width: 100%;
    justify-content: center;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
}

.auth-actions .btn-outline:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.action-buttons {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    flex-wrap: wrap;
}

.action-buttons .btn {
    flex: 1;
    min-width: 150px;
}

.action-buttons .btn-secondary {
    background-color: var(--gray-600);
    color: white;
    border: 2px solid var(--gray-600);
}

.action-buttons .btn-secondary:hover {
    background-color: var(--gray-700);
    border-color: var(--gray-700);
}

/* Info Section */
.auth-info-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-lg);
}

.info-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.info-hero {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.info-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto var(--spacing-4);
}

.info-hero h3 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.info-hero p {
    font-size: var(--font-size-lg);
    opacity: 0.9;
}

.features-list {
    margin-bottom: var(--spacing-8);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.feature-text h4 {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.feature-text p {
    opacity: 0.9;
    line-height: 1.5;
}

.contact-info {
    text-align: center;
    padding: var(--spacing-6);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    margin-top: auto;
}

.contact-info h4 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.contact-info p {
    margin-bottom: var(--spacing-4);
    opacity: 0.9;
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-lg);
    padding: var(--spacing-3) var(--spacing-4);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.contact-email:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Alerts */
.alert {
    padding: var(--spacing-4);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.alert-error {
    background-color: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 20%, transparent);
}

.alert-success {
    background-color: color-mix(in srgb, var(--success-color) 10%, transparent);
    color: var(--success-color);
    border: 1px solid color-mix(in srgb, var(--success-color) 20%, transparent);
}

/* Responsive */
@media (max-width: 1024px) {
    .auth-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .auth-form-section {
        position: static;
    }
    
    .auth-info-section {
        order: -1;
    }
}

@media (max-width: 768px) {
    .auth-main {
        padding: var(--spacing-4) 0;
    }
    
    .auth-card {
        padding: var(--spacing-6);
    }
    
    .auth-info-section {
        padding: var(--spacing-6);
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
        margin-bottom: var(--spacing-5);
    }
}

@media (max-width: 480px) {
    .auth-logo {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-3);
    }
    
    .logo-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Loading states */
.auth-form button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-form button[disabled] i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>

<script>
function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(inputId + '-toggle-icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'icon-eye-off';
    } else {
        input.type = 'password';
        icon.className = 'icon-eye';
    }
}

// Form validation and enhancement
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.auth-form');
    if (form) {
        // Real-time password confirmation
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirm_password');
        
        function validatePasswords() {
            if (confirmPassword.value && password.value !== confirmPassword.value) {
                confirmPassword.setCustomValidity('Paroolid ei ühti');
            } else {
                confirmPassword.setCustomValidity('');
            }
        }
        
        password.addEventListener('input', validatePasswords);
        confirmPassword.addEventListener('input', validatePasswords);
        
        // Username validation
        const username = document.getElementById('username');
        username.addEventListener('input', function() {
            const value = this.value;
            if (value && !/^[a-zA-Z0-9_]{3,20}$/.test(value)) {
                this.setCustomValidity('Kasutajanimi peab olema 3-20 tähemärki pikk ja sisaldama ainult tähti, numbreid ja alakriipse');
            } else {
                this.setCustomValidity('');
            }
        });
        
        // Form submission
        form.addEventListener('submit', function(e) {
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirm_password').value;
            
            if (password !== confirmPassword) {
                e.preventDefault();
                alert('Paroolid ei ühti!');
                return false;
            }
            
            if (password.length < 6) {
                e.preventDefault();
                alert('Parool peab olema vähemalt 6 tähemärki pikk!');
                return false;
            }
            
            // Show loading state
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="icon-loader"></i><span>Registreerimine...</span>';
            submitBtn.disabled = true;
            
            // Reset after timeout (in case of errors)
            setTimeout(function() {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 10000);
        });
    }
    
    // Auto-focus first input
    const firstInput = document.getElementById('firstName');
    if (firstInput) {
        firstInput.focus();
    }
    
    // Smooth animations for success states
    const successContainer = document.querySelector('.success-container');
    if (successContainer) {
        successContainer.style.opacity = '0';
        successContainer.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            successContainer.style.transition = 'all 0.5s ease';
            successContainer.style.opacity = '1';
            successContainer.style.transform = 'translateY(0)';
        }, 100);
    }
});
</script>

<?php include 'includes/footer.php'; ?>