<?php
require_once '../config/config.php';
session_start();
require_once '../config/database.php';
require_once '../includes/functions.php';

$page_title = 'Motivatsioonisüsteem - Avasta oma edusammud';
$page_description = 'Tutvu meie uue motivatsioonisüsteemiga - kogud saavutusi, täidad väljakutseid ja jälgid oma progressi graafikutes.';

include '../includes/header.php';
?>

<main class="motivation-system-main">
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="hero-content">
                <div class="hero-badge">
                    <span class="badge-icon">✨</span>
                    <span class="badge-text">Uus funktsioon</span>
                </div>
                
                <h1 class="hero-title">
                    Avasta oma <span class="text-gradient">edusammud</span>
                </h1>
                
                <p class="hero-description">
                    Meie revolutsiooniline motivatsioonisüsteem muudab ratsaspordi veel põnevamaks! 
                    Jälgi automaatselt oma arengut, kogud saavutusi ja saad isiklikke väljakutseid.
                </p>
                
                <div class="hero-actions">
                    <?php if (isLoggedIn() && isAthlete()): ?>
                        <a href="<?php echo url('athlete/motivation.php'); ?>" class="hero-btn hero-btn-primary">
                            <span class="btn-icon">🚀</span>
                            <span>Vaata oma edusamme</span>
                        </a>
                    <?php else: ?>
                        <a href="<?php echo url('login.php'); ?>" class="hero-btn hero-btn-primary">
                            <span class="btn-icon">🚀</span>
                            <span>Alusta kohe</span>
                        </a>
                    <?php endif; ?>
                    <a href="#features" class="hero-btn hero-btn-secondary">
                        <span class="btn-icon">📚</span>
                        <span>Uuri lähemalt</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Overview -->
    <section class="features-overview" id="features">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Miks <span class="text-gradient">motivatsioonisüsteem</span>?</h2>
                <p class="section-subtitle">
                    Süsteem tunnustab sinu pingutusi ja aitab seada uusi eesmärke
                </p>
            </div>
            
            <div class="features-grid">
                <div class="feature-item">
                    <div class="feature-visual">
                        <div class="feature-icon">🏆</div>
                        <div class="feature-badge">Automaatne</div>
                    </div>
                    <div class="feature-content">
                        <h3>Saavutuste jälgimine</h3>
                        <p>Süsteem tunnustab automaatselt sinu pingutusi - alates esimestest sammudest kuni tipptulemuseni.</p>
                        <ul class="feature-list">
                            <li>40+ erinevat saavutust</li>
                            <li>Punktide kogumine</li>
                            <li>Haruldased märgid</li>
                            <li>Progressi jälgimine</li>
                        </ul>
                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-visual">
                        <div class="feature-icon">🎯</div>
                        <div class="feature-badge">Isiklik</div>
                    </div>
                    <div class="feature-content">
                        <h3>Kuised väljakutsed</h3>
                        <p>Iga kuu saad 5 personaalset väljakutset, mis sobivad täpselt sinu taseme ja eesmärkidega.</p>
                        <ul class="feature-list">
                            <li>5 väljakutset kuus</li>
                            <li>Sinu tasemele kohandatud</li>
                            <li>Mitmekesised eesmärgid</li>
                            <li>Auhinnad täitmise eest</li>
                        </ul>
                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-visual">
                        <div class="feature-icon">📈</div>
                        <div class="feature-badge">Visuaalne</div>
                    </div>
                    <div class="feature-content">
                        <h3>Progressi analüüs</h3>
                        <p>Näe oma arengut kaasaegsetes graafikutes ja statistikates. Järgi trende ja leia parimaid tulemusi.</p>
                        <ul class="feature-list">
                            <li>Interaktiivsed graafikud</li>
                            <li>Võrdlused aja lõikes</li>
                            <li>Trendide analüüs</li>
                            <li>Detailne statistika</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="how-it-works">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Kuidas see <span class="text-gradient">töötab</span>?</h2>
                <p class="section-subtitle">Lihtne ja automaatne - pole vaja midagi lisaks teha</p>
            </div>
            
            <div class="steps-container">
                <div class="step-item">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>Lisa tulemusi</h3>
                        <p>Sisesta oma võistluste tulemusi nagu tavaliselt. Süsteem jälgib automaatselt sinu progressi.</p>
                    </div>
                    <div class="step-visual">
                        <div class="step-mockup">
                            <div class="mockup-header">Lisa tulemus</div>
                            <div class="mockup-form">
                                <div class="form-field">Võistlus: Talveturniir</div>
                                <div class="form-field">Punktid: 8.5</div>
                                <div class="form-field">Koht: 3</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="step-item">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>Kogud saavutusi</h3>
                        <p>Automaatselt avanevad uued saavutused ja kogud punkte. Iga tulemus toob sind järgmise märgi lähemale.</p>
                    </div>
                    <div class="step-visual">
                        <div class="achievement-popup">
                            <div class="popup-icon">🏆</div>
                            <div class="popup-title">Uus saavutus!</div>
                            <div class="popup-badge">TOP 5 koht</div>
                            <div class="popup-points">+5 punkti</div>
                        </div>
                    </div>
                </div>
                
                <div class="step-item">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>Täidad väljakutseid</h3>
                        <p>Iga kuu alguses saad uued isiklikud väljakutsed. Lihtsalt ratasta ja väljakutsed täituvad automaatselt.</p>
                    </div>
                    <div class="step-visual">
                        <div class="challenge-card">
                            <div class="challenge-header">🎯 Kuu sõdalane</div>
                            <div class="challenge-desc">Osale 3 võistlusel</div>
                            <div class="challenge-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 67%"></div>
                                </div>
                                <span class="progress-text">2/3</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="step-item">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>Jälgid progressi</h3>
                        <p>Vaata oma arengut kaasaegsetes graafikutes. Näe trende, võrdle perioode ja leia motivatsiooni.</p>
                    </div>
                    <div class="step-visual">
                        <div class="chart-mockup">
                            <div class="chart-header">Sinu progress</div>
                            <div class="mini-chart">
                                <div class="chart-bar" data-height="40"></div>
                                <div class="chart-bar" data-height="60"></div>
                                <div class="chart-bar" data-height="80"></div>
                                <div class="chart-bar" data-height="100"></div>
                                <div class="chart-bar" data-height="85"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Achievement Categories -->
    <section class="achievement-categories">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Saavutuste <span class="text-gradient">kategooriad</span></h2>
                <p class="section-subtitle">Igale ratsutajale leidub sobiv väljakutse</p>
            </div>
            
            <div class="categories-grid">
                <div class="category-card">
                    <div class="category-icon">🥇</div>
                    <h3>Kohtade saavutamine</h3>
                    <div class="category-examples">
                        <div class="example-badge">🏆 TOP 10</div>
                        <div class="example-badge">🥉 Poodiumil</div>
                        <div class="example-badge">🥇 Võitja</div>
                    </div>
                    <p>Tunnustame iga head kohta - alates TOP 10st kuni võiduni.</p>
                </div>
                
                <div class="category-card">
                    <div class="category-icon">⭐</div>
                    <h3>Punktide kogumine</h3>
                    <div class="category-examples">
                        <div class="example-badge">⭐ 5+ punkti</div>
                        <div class="example-badge">🌟 10+ punkti</div>
                        <div class="example-badge">💫 Korduvalt tipus</div>
                    </div>
                    <p>Iga hea tulemus loeb - kogud punkte ja avad uusi tasemeid.</p>
                </div>
                
                <div class="category-card">
                    <div class="category-icon">🔥</div>
                    <h3>Järjekindlus</h3>
                    <div class="category-examples">
                        <div class="example-badge">🔥 Järjekindel</div>
                        <div class="example-badge">🔥🔥 Ülistabiilne</div>
                        <div class="example-badge">🔥🔥🔥 Peatamatu</div>
                    </div>
                    <p>Stabiilsus on võitja võti - tunnustame järjepidevat osalemist.</p>
                </div>
                
                <div class="category-card">
                    <div class="category-icon">🌈</div>
                    <h3>Mitmekülgsus</h3>
                    <div class="category-examples">
                        <div class="example-badge">🎭 Koolisõitja</div>
                        <div class="example-badge">🚀 Takistussõitja</div>
                        <div class="example-badge">🌟 Mitmekülgne</div>
                    </div>
                    <p>Proovi erinevaid distsipliine ja ava uusi väljakutseid.</p>
                </div>
                
                <div class="category-card">
                    <div class="category-icon">💪</div>
                    <h3>Treening</h3>
                    <div class="category-examples">
                        <div class="example-badge">💪 Entusiast</div>
                        <div class="example-badge">🏋️ Tööloom</div>
                        <div class="example-badge">😊 Rahulolev</div>
                    </div>
                    <p>Märgi treeninguid ja kogud lisapunkte ning erilisi märke.</p>
                </div>
                
                <div class="category-card">
                    <div class="category-icon">🎨</div>
                    <h3>Erilised</h3>
                    <div class="category-examples">
                        <div class="example-badge">💯 Perfektsionist</div>
                        <div class="example-badge">📈 Arenguhüpe</div>
                        <div class="example-badge">🐦 Varajane lind</div>
                    </div>
                    <p>Haruldased ja ainulaadsed saavutused erilisel puhul.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits -->
    <section class="benefits-section">
        <div class="container">
            <div class="benefits-content">
                <div class="benefits-text">
                    <h2 class="benefits-title">
                        Miks kasutada <span class="text-gradient">motivatsioonisüsteemi</span>?
                    </h2>
                    
                    <div class="benefits-grid">
                        <div class="benefit-item">
                            <div class="benefit-icon">🎯</div>
                            <div class="benefit-text">
                                <h4>Selged eesmärgid</h4>
                                <p>Alati tead, millele järgmisena keskenduda</p>
                            </div>
                        </div>
                        
                        <div class="benefit-item">
                            <div class="benefit-icon">📊</div>
                            <div class="benefit-text">
                                <h4>Progress on nähtav</h4>
                                <p>Näed oma arengut visuaalselt ja numbrites</p>
                            </div>
                        </div>
                        
                        <div class="benefit-item">
                            <div class="benefit-icon">🏆</div>
                            <div class="benefit-text">
                                <h4>Tunnustuse saamine</h4>
                                <p>Iga saavutus leiab tunnustamist</p>
                            </div>
                        </div>
                        
                        <div class="benefit-item">
                            <div class="benefit-icon">🚀</div>
                            <div class="benefit-text">
                                <h4>Motivatsioon säilib</h4>
                                <p>Uued väljakutsed hoiavad huvi üleval</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="benefits-visual">
                    <div class="stats-card">
                        <div class="stats-header">
                            <h4>Sinu saavutused</h4>
                            <div class="total-points">247 punkti</div>
                        </div>
                        <div class="stats-breakdown">
                            <div class="stat-line">
                                <span class="stat-icon">🏆</span>
                                <span class="stat-text">12 saavutust</span>
                            </div>
                            <div class="stat-line">
                                <span class="stat-icon">🎯</span>
                                <span class="stat-text">4/5 väljakutset</span>
                            </div>
                            <div class="stat-line">
                                <span class="stat-icon">📈</span>
                                <span class="stat-text">+15% progress</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="faq-section">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Korduma kippuvad <span class="text-gradient">küsimused</span></h2>
            </div>
            
            <div class="faq-grid">
                <div class="faq-item">
                    <h4>Kuidas saavutused avanevad?</h4>
                    <p>Täiesti automaatselt! Kui sisestadm tulemusi või märgid treeninguid, kontrollitakse saavutusi. Pole vaja midagi lisaks teha.</p>
                </div>
                
                <div class="faq-item">
                    <h4>Kas need punktid mõjutavad ametlikke tabeleid?</h4>
                    <p>Ei, motivatsioonipunktid on ainult sinu isiklikuks motivatsiooniks. Ametlikud hooaja tabelid põhinevad tavalisel punktiarvestusel.</p>
                </div>
                
                <div class="faq-item">
                    <h4>Kas näen ka eelmiste aastate andmeid?</h4>
                    <p>Jah! Saavutused ja statistikad säilivad aastast aastasse. Saad võrrelda erinevate hooaegade tulemusi.</p>
                </div>
                
                <div class="faq-item">
                    <h4>Kui tihti tulevad uued väljakutsed?</h4>
                    <p>Iga kuu alguses saad 5 uut personaalset väljakutset, mis sobivad sinu taseme ja eesmärkidega.</p>
                </div>
                
                <div class="faq-item">
                    <h4>Mida teha kui saavutus ei avanenud?</h4>
                    <p>Värskenda lehte või tule tagasi hiljem. Mõnikord võib kuluda 2-3 lehe värskendamist, kuni kõik uued saavutused ilmuvad.</p>
                </div>
                
                <div class="faq-item">
                    <h4>Mis juhtub kui ei osale mõni kuu?</h4>
                    <p>Miski ei kao! Saavutused jäävad alles ja progress jätkub sealt, kus pooleli jäi.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="final-cta">
        <div class="container">
            <div class="cta-content">
                <h2 class="cta-title">
                    Alusta oma <span class="text-gradient">motivatsiooniretke</span> juba täna!
                </h2>
                <p class="cta-description">
                    Liitu ja hakka koguma oma esimesi saavutusi. Süsteem töötab automaatselt - sa pead ainult ratsutama!
                </p>
                
                <div class="cta-actions">
                    <?php if (isLoggedIn() && isAthlete()): ?>
                        <a href="<?php echo url('athlete/motivation.php'); ?>" class="cta-btn cta-btn-primary">
                            <span class="btn-icon">🚀</span>
                            <span>Vaata oma edusamme</span>
                        </a>
                        <a href="<?php echo url('athlete/results.php'); ?>" class="cta-btn cta-btn-secondary">
                            <span class="btn-icon">📊</span>
                            <span>Lisa tulemusi</span>
                        </a>
                    <?php elseif (isLoggedIn()): ?>
                        <a href="<?php echo url('athlete/dashboard.php'); ?>" class="cta-btn cta-btn-primary">
                            <span class="btn-icon">🏠</span>
                            <span>Mine oma alale</span>
                        </a>
                    <?php else: ?>
                        <a href="<?php echo url('register.php'); ?>" class="cta-btn cta-btn-primary">
                            <span class="btn-icon">🚀</span>
                            <span>Registreeru</span>
                        </a>
                        <a href="<?php echo url('login.php'); ?>" class="cta-btn cta-btn-secondary">
                            <span class="btn-icon">👋</span>
                            <span>Logi sisse</span>
                        </a>
                    <?php endif; ?>
                </div>
                
                <div class="cta-features">
                    <div class="feature-point">
                        <span class="feature-icon">✓</span>
                        <span>Automaatne töö</span>
                    </div>
                    <div class="feature-point">
                        <span class="feature-icon">✓</span>
                        <span>40+ saavutust</span>
                    </div>
                    <div class="feature-point">
                        <span class="feature-icon">✓</span>
                        <span>Isiklikud väljakutsed</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
/* Motivation System Page Styles */
.motivation-system-main {
    padding-top: 0;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: var(--spacing-20) 0;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: var(--spacing-2) var(--spacing-4);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--spacing-6);
    line-height: 1.1;
}

.text-gradient {
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--spacing-8);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 200px;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-btn-primary {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    border: none;
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

/* Features Overview */
.features-overview {
    padding: var(--spacing-20) 0;
    background: white;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-8);
}

.feature-item {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
}

.feature-icon {
    font-size: 3rem;
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-badge {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 50px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.feature-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    color: var(--gray-900);
}

.feature-content p {
    color: var(--gray-600);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
}

.feature-list li::before {
    content: '✓';
    color: var(--success-color);
    font-weight: bold;
    width: 16px;
}

/* How It Works */
.how-it-works {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.steps-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
}

.step-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-8);
    align-items: center;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200);
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.step-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    color: var(--gray-900);
}

.step-content p {
    color: var(--gray-600);
    line-height: 1.6;
    max-width: 400px;
}

.step-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Step Mockups */
.step-mockup {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    min-width: 200px;
}

.mockup-header {
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    text-align: center;
    color: var(--gray-900);
}

.form-field {
    background: white;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.achievement-popup {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    padding: var(--spacing-6);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.popup-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
}

.popup-title {
    font-weight: 600;
    margin-bottom: var(--spacing-2);
}

.popup-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 50px;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.popup-points {
    font-weight: 800;
    font-size: var(--font-size-lg);
}

.challenge-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    min-width: 200px;
}

.challenge-header {
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--gray-900);
}

.challenge-desc {
    color: var(--gray-600);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
}

.challenge-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(45deg, #10b981, #059669);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.chart-mockup {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    min-width: 180px;
}

.chart-header {
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    text-align: center;
    color: var(--gray-900);
}

.mini-chart {
    display: flex;
    align-items: end;
    gap: var(--spacing-1);
    height: 60px;
    justify-content: center;
}

.chart-bar {
    flex: 1;
    max-width: 20px;
    background: linear-gradient(to top, #3b82f6, #1e40af);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
    height: 20%; /* Default fallback height */
}

/* Achievement Categories */
.achievement-categories {
    padding: var(--spacing-20) 0;
    background: white;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
}

.category-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.category-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
}

.category-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

.category-examples {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.example-badge {
    background: var(--gray-100);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--gray-700);
}

.category-card p {
    color: var(--gray-600);
    line-height: 1.5;
}

/* Benefits Section */
.benefits-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.benefits-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
}

.benefits-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-8);
    color: var(--gray-900);
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    background: white;
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-text h4 {
    font-weight: 600;
    margin-bottom: var(--spacing-1);
    color: var(--gray-900);
}

.benefit-text p {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.benefits-visual {
    display: flex;
    justify-content: center;
}

.stats-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--gray-200);
    min-width: 280px;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--gray-200);
}

.stats-header h4 {
    font-weight: 600;
    color: var(--gray-900);
}

.total-points {
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    color: white;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: 50px;
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.stats-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.stat-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2);
    background: var(--gray-50);
    border-radius: var(--radius);
}

.stat-icon {
    font-size: 1.2rem;
}

.stat-text {
    font-weight: 500;
    color: var(--gray-700);
}

/* FAQ Section */
.faq-section {
    padding: var(--spacing-20) 0;
    background: white;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
}

.faq-item {
    background: var(--gray-50);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.faq-item h4 {
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    color: var(--gray-900);
}

.faq-item p {
    color: var(--gray-600);
    line-height: 1.6;
}

/* Final CTA */
.final-cta {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    text-align: center;
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    line-height: 1.2;
}

.cta-description {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    margin-bottom: var(--spacing-8);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

.cta-btn {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 200px;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-btn-primary {
    background: linear-gradient(45deg, #10b981, #059669);
    color: white;
    border: none;
}

.cta-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.feature-point {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.feature-icon {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .step-item {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
        text-align: center;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        text-align: center;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .cta-features {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-3);
    }
}

@media (max-width: 480px) {
    .hero-badge {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-3);
    }
    
    .step-mockup,
    .challenge-card,
    .chart-mockup {
        min-width: auto;
        width: 100%;
    }
    
    .achievement-popup {
        padding: var(--spacing-4);
    }
    
    .stats-card {
        min-width: auto;
        width: 100%;
    }
}
</style>

<script>
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Animated counter for stats
function animateValue(element, start, end, duration) {
    if (!element) return;
    
    let startTimestamp = null;
    const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const current = Math.floor(progress * (end - start) + start);
        element.textContent = current;
        if (progress < 1) {
            window.requestAnimationFrame(step);
        }
    };
    window.requestAnimationFrame(step);
}

// Initialize animations when elements come into view
const observerOptions = {
    threshold: 0.3,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Animate achievement popup
            if (entry.target.classList.contains('achievement-popup')) {
                entry.target.style.animation = 'bounce 2s infinite';
            }
            
            // PARANDATUD: Animate chart bars using data-height attribute
            if (entry.target.classList.contains('mini-chart')) {
                const bars = entry.target.querySelectorAll('.chart-bar');
                bars.forEach((bar, index) => {
                    const height = bar.getAttribute('data-height') || '20';
                    setTimeout(() => {
                        bar.style.height = height + '%';
                        bar.style.transition = 'height 1s ease-out';
                    }, index * 200);
                });
            }
            
            // Animate progress bars
            if (entry.target.classList.contains('progress-fill')) {
                entry.target.style.transition = 'width 2s ease-out';
            }
        }
    });
}, observerOptions);

// Observe elements for animation
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.achievement-popup, .mini-chart, .progress-fill').forEach(el => {
        observer.observe(el);
    });
    
    // Animate FAQ items on hover
    document.querySelectorAll('.faq-item').forEach(item => {
        item.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-3px)';
            this.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.15)';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
        });
    });
    
    console.log('✨ Motivation system page initialized with fixed chart!');
});
</script>

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