{% extends "layout.html" %}

{% block content %}
{% if not g.user %}

<!-- Decadent Splash Page -->
<div class="splash-container">
    <!-- Hero Section -->
    <section class="splash-hero">
        <div class="hero-content">
            <h1 class="hero-title">Transform Your Productivity</h1>
            <p class="hero-subtitle">Experience the future of time management with {{ g.branding.app_name if g.branding else 'TimeTrack' }}'s intelligent tracking system</p>
            <div class="cta-buttons">
                <a href="{{ url_for('register') }}" class="btn-primary">Get Started Free</a>
                <a href="{{ url_for('login') }}" class="btn-secondary">Sign In</a>
            </div>
        </div>
        <div class="hero-visual">
            <div class="floating-clock">
                <div class="clock-face">
                    <div class="hour-hand"></div>
                    <div class="minute-hand"></div>
                    <div class="second-hand"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Grid -->
    <section class="features-grid">
        <h2 class="section-title">Powerful Features for Modern Teams</h2>
        <div class="feature-cards">
            <div class="feature-card">
                <div class="feature-icon"><i class="ti ti-bolt"></i></div>
                <h3>Lightning Fast</h3>
                <p>Start tracking in seconds with our intuitive one-click interface</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="ti ti-chart-bar"></i></div>
                <h3>Advanced Analytics</h3>
                <p>Gain insights with comprehensive reports and visual dashboards</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="ti ti-run"></i></div>
                <h3>Sprint Management</h3>
                <p>Organize work into sprints with agile project tracking</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="ti ti-users"></i></div>
                <h3>Team Collaboration</h3>
                <p>Manage teams, projects, and resources all in one place</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="ti ti-lock"></i></div>
                <h3>Enterprise Security</h3>
                <p>Bank-level encryption with role-based access control</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="ti ti-world"></i></div>
                <h3>Multi-Company Support</h3>
                <p>Perfect for agencies managing multiple client accounts</p>
            </div>
        </div>
    </section>

    <!-- Why Choose Section -->
    <section class="statistics">
        <h2 class="section-title">Why Choose {{ g.branding.app_name if g.branding else 'TimeTrack' }}?</h2>
        <div class="stat-item">
            <div class="stat-number">100%</div>
            <div class="stat-label">Free & Open Source</div>
        </div>
        <div class="stat-item">
            <div class="stat-number"><i class="ti ti-infinity"></i></div>
            <div class="stat-label">Unlimited Tracking</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">0</div>
            <div class="stat-label">Hidden Fees</div>
        </div>
        <div class="stat-item">
            <div class="stat-number">24/7</div>
            <div class="stat-label">Always Available</div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="testimonials">
        <h2 class="section-title">Get Started in Minutes</h2>
        <div class="testimonial-grid">
            <div class="testimonial-card">
                <div class="feature-icon"><i class="ti ti-number-1"></i></div>
                <h3>Sign Up</h3>
                <p>Create your free account in seconds. No credit card required.</p>
            </div>
            <div class="testimonial-card">
                <div class="feature-icon"><i class="ti ti-number-2"></i></div>
                <h3>Set Up Your Workspace</h3>
                <p>Add your company, teams, and projects to organize your time tracking.</p>
            </div>
            <div class="testimonial-card">
                <div class="feature-icon"><i class="ti ti-number-3"></i></div>
                <h3>Start Tracking</h3>
                <p>Click "Arrive" to start tracking, "Leave" when done. It's that simple!</p>
            </div>
        </div>
    </section>

    <!-- Open Source Section -->
    <section class="pricing">
        <h2 class="section-title">Forever Free, Forever Open</h2>
        <div class="pricing-cards">
            <div class="pricing-card featured">
                <div class="badge">100% Free</div>
                <h3>{{ g.branding.app_name if g.branding else 'TimeTrack' }} Community</h3>
                <div class="price">$0<span>/forever</span></div>
                <ul class="pricing-features">
                    <li><i class="ti ti-check"></i> Unlimited users</li>
                    <li><i class="ti ti-check"></i> All features included</li>
                    <li><i class="ti ti-check"></i> Time tracking & analytics</li>
                    <li><i class="ti ti-check"></i> Sprint management</li>
                    <li><i class="ti ti-check"></i> Team collaboration</li>
                    <li><i class="ti ti-check"></i> Project management</li>
                    <li><i class="ti ti-check"></i> Self-hosted option</li>
                    <li><i class="ti ti-check"></i> No restrictions</li>
                </ul>
                <a href="{{ url_for('register') }}" class="btn-pricing">Get Started Free</a>
            </div>
        </div>
        <p style="text-align: center; margin-top: 2rem; color: #666;">
            The software {{ g.branding.app_name if g.branding else 'TimeTrack' }} runs is open source software.<br />
            Host it yourself or use our free hosted version.<br />
            The source is available on GitHub:
            <a href="https://github.com/nullmedium/TimeTrack" target="_blank">https://github.com/nullmedium/TimeTrack</a>
        </p>
    </section>

    <!-- Final CTA -->
    <section class="final-cta">
        <h2>Ready to Take Control of Your Time?</h2>
        <p>Start tracking your time effectively today - no strings attached</p>
        <a href="{{ url_for('register') }}" class="btn-primary large">Create Free Account</a>
    </section>
</div>

{% else %}

<!-- Include the shared time tracking interface -->
{% include '_time_tracking_interface.html' %}

{% endif %}

{% endblock %}