{% extends "layout.html" %}

{% block meta_description %}{{ g.branding.app_name if g.branding else 'TimeTrack' }} - Free enterprise time tracking software with project management, team collaboration, billing & invoicing. Track time, manage projects, generate reports. Open-source & self-hosted.{% endblock %}

{% block meta_keywords %}time tracking software, project time tracker, team time management, billing and invoicing, enterprise time tracking, open source time tracker, self-hosted time tracking, project management software, team productivity tools, work hours tracker{% endblock %}

{% block og_title %}{{ g.branding.app_name if g.branding else 'TimeTrack' }} - Enterprise Time Tracking & Project Management{% endblock %}

{% block og_description %}Transform your team's productivity with intelligent time tracking, real-time analytics, project management, and automated billing. Free, open-source, and enterprise-ready.{% endblock %}

{% block structured_data %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "{{ g.branding.app_name if g.branding else 'TimeTrack' }}",
    "url": "{{ request.host_url }}",
    "description": "Free enterprise time tracking software with project management, team collaboration, billing & invoicing.",
    "potentialAction": {
        "@type": "SearchAction",
        "@context": "https://schema.org",
        "target": "{{ request.host_url }}search?q={search_term_string}",
        "query-input": "required name=search_term_string"
    }
}
</script>

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "What is TimeTrack?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "TimeTrack is a comprehensive, open-source time tracking and project management software that helps teams track work hours, manage projects, collaborate, and handle billing/invoicing - all in one platform."
            }
        },
        {
            "@type": "Question",
            "name": "Is TimeTrack really free?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Yes! TimeTrack is 100% free and open-source. You can use our hosted version at no cost or self-host it on your own servers. There are no hidden fees, no user limits, and all features are included."
            }
        },
        {
            "@type": "Question",
            "name": "What features does TimeTrack include?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "TimeTrack includes one-click time tracking, project management, sprint planning, team collaboration, billing & invoicing, custom reporting, multi-company support, two-factor authentication, and GDPR compliance features."
            }
        }
    ]
}
</script>
{% endblock %}

{% 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>

    <!-- Sliding Features Banner -->
    <section class="features-banner">
        <div class="features-slider">
            <div class="features-track">
                <div class="feature-item">
                    <i class="ti ti-clock"></i>
                    <span>One-Click Time Tracking</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-chart-line"></i>
                    <span>Real-Time Analytics Dashboard</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-users-group"></i>
                    <span>Team Collaboration Tools</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-calendar-event"></i>
                    <span>Sprint & Project Management</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-shield-lock"></i>
                    <span>Enterprise-Grade Security</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-device-mobile"></i>
                    <span>Mobile-Friendly Interface</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-code"></i>
                    <span>Open Source & Customizable</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-cloud-download"></i>
                    <span>Export Reports in Multiple Formats</span>
                </div>
                <!-- Duplicate for seamless loop -->
                <div class="feature-item">
                    <i class="ti ti-clock"></i>
                    <span>One-Click Time Tracking</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-chart-line"></i>
                    <span>Real-Time Analytics Dashboard</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-users-group"></i>
                    <span>Team Collaboration Tools</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-calendar-event"></i>
                    <span>Sprint & Project Management</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-shield-lock"></i>
                    <span>Enterprise-Grade Security</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-device-mobile"></i>
                    <span>Mobile-Friendly Interface</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-code"></i>
                    <span>Open Source & Customizable</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-cloud-download"></i>
                    <span>Export Reports in Multiple Formats</span>
                </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>

    <!-- Second Sliding Features Banner -->
    <section class="features-banner reverse">
        <div class="features-slider">
            <div class="features-track">
                <div class="feature-item">
                    <i class="ti ti-markdown"></i>
                    <span>Rich Markdown Notes & Documentation</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-folder-open"></i>
                    <span>Organized Folder Structure</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-checkbox"></i>
                    <span>Integrated Task Management</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-archive"></i>
                    <span>Sprint History & Archives</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-brand-slack"></i>
                    <span>Third-Party Integrations</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-shield-check"></i>
                    <span>Two-Factor Authentication</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-palette"></i>
                    <span>Custom Branding Options</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-map-pin"></i>
                    <span>Hosted in Europe with GDPR Compliance</span>
                </div>
                <!-- Duplicate for seamless loop -->
                <div class="feature-item">
                    <i class="ti ti-markdown"></i>
                    <span>Rich Markdown Notes & Documentation</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-folder-open"></i>
                    <span>Organized Folder Structure</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-checkbox"></i>
                    <span>Integrated Task Management</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-archive"></i>
                    <span>Sprint History & Archives</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-brand-slack"></i>
                    <span>Third-Party Integrations</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-shield-check"></i>
                    <span>Two-Factor Authentication</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-palette"></i>
                    <span>Custom Branding Options</span>
                </div>
                <div class="feature-item">
                    <i class="ti ti-map-pin"></i>
                    <span>Hosted in Europe with GDPR Compliance</span>
                </div>
            </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 %}