{% extends "base.html" %}

{% block title %}{{ _('About') }} - {{ app_name }}{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
    <div>
        <h1 class="text-2xl font-bold">{{ _('About') }}</h1>
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Professional time tracking and project management') }}</p>
    </div>
    <div class="text-sm text-text-muted-light dark:text-text-muted-dark mt-2 md:mt-0">
        <i class="fas fa-circle-info"></i> / {{ _('About') }}
    </div>
</div>

<!-- Hero -->
<div class="bg-gradient-to-br from-primary/10 via-secondary/10 to-primary/5 dark:from-primary/20 dark:via-secondary/20 dark:to-primary/10 border border-border-light dark:border-border-dark p-4 sm:p-8 rounded-lg shadow-lg mb-6 sm:mb-8 text-center relative overflow-hidden">
    <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -mr-32 -mt-32"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-secondary/5 rounded-full blur-3xl -ml-32 -mb-32"></div>
    <div class="relative z-10">
        <img src="{{ url_for('static', filename='images/timetracker-logo.svg') }}" alt="TimeTracker Logo" class="w-20 h-20 sm:w-32 sm:h-32 mx-auto mb-4 sm:mb-6 drop-shadow-lg">
        <h2 class="text-2xl sm:text-3xl font-bold mb-3 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">TimeTracker</h2>
        <p class="text-text-muted-light dark:text-text-muted-dark max-w-2xl mx-auto text-sm sm:text-lg">
            {{ _('A comprehensive web-based time tracking application built with Flask, featuring project management, client organization, task management, invoicing, and advanced analytics.') }}
        </p>

    <div class="flex flex-wrap gap-2 mt-4 justify-center">
        <span class="px-3 py-1 rounded-full border border-primary text-primary">
            <i class="fas fa-clock mr-1"></i>{{ _('Time Tracking') }}
        </span>
        <span class="px-3 py-1 rounded-full border border-green-600 text-green-600">
            <i class="fas fa-project-diagram mr-1"></i>{{ _('Project Management') }}
        </span>
        <span class="px-3 py-1 rounded-full border border-sky-600 text-sky-600">
            <i class="fas fa-file-invoice-dollar mr-1"></i>{{ _('Invoicing') }}
        </span>
        <span class="px-3 py-1 rounded-full border border-amber-600 text-amber-600">
            <i class="fas fa-chart-line mr-1"></i>{{ _('Analytics') }}
        </span>
    </div>
</div>

{% if current_user.is_authenticated and current_user.ui_show_donate and not is_license_activated %}
<div class="mb-6 sm:mb-8 p-4 sm:p-5 rounded-xl border border-border-light dark:border-border-dark bg-card-light dark:bg-card-dark flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
    <p class="text-sm text-text-light dark:text-text-dark">{{ _('TimeTracker is free and open source. You can donate or buy a supporter license — features are never locked.') }}</p>
    <button type="button" class="btn btn-primary flex-shrink-0 w-full sm:w-auto text-center js-open-support-modal">{{ _('Support TimeTracker') }}</button>
</div>
{% endif %}

<!-- Highlights -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-stopwatch text-primary"></i>
            <h3 class="font-semibold">{{ _('Smart Timers') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Real-time tracking with idle detection and live updates') }}</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-building text-green-600"></i>
            <h3 class="font-semibold">{{ _('Client Management') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Organize clients with contacts, rates, and project relations') }}</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-tasks text-sky-600"></i>
            <h3 class="font-semibold">{{ _('Task System') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Break down projects into tasks with progress tracking') }}</p>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <div class="flex items-center gap-3 mb-2">
            <i class="fas fa-file-pdf text-amber-600"></i>
            <h3 class="font-semibold">{{ _('PDF Invoices') }}</h3>
        </div>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Generate professional invoices from tracked time') }}</p>
    </div>
</div>

<!-- Core vs Advanced -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <h3 class="text-lg font-semibold mb-4"><i class="fas fa-star text-amber-500 mr-2"></i>{{ _('Core Features') }}</h3>
        <ul class="space-y-2 text-text-muted-light dark:text-text-muted-dark">
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Start/stop timers with project and task association') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Manual time entry with notes and tags') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Client and project organization') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Role-based access and user profiles') }}</span></li>
        </ul>
    </div>
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
        <h3 class="text-lg font-semibold mb-4"><i class="fas fa-rocket text-primary mr-2"></i>{{ _('Advanced Features') }}</h3>
        <ul class="space-y-2 text-text-muted-light dark:text-text-muted-dark">
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Branded PDF invoicing with tax and payment tracking') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('Visual analytics and detailed reporting') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('REST API for integrations') }}</span></li>
            <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i><span>{{ _('PWA capabilities and mobile-friendly UI') }}</span></li>
        </ul>
    </div>
</div>

<!-- Platform Support -->
<div class="bg-card-light dark:bg-card-dark p-4 sm:p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm mb-6 sm:mb-8">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-globe mr-2"></i>{{ _('Platform Support') }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
        <div>
            <h4 class="font-semibold mb-2">{{ _('Web Application') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Desktop browsers (Chrome, Firefox, Safari, Edge)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Mobile responsive design') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Progressive Web App (PWA)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Touch-friendly tablet interface') }}</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Operating Systems') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Windows, macOS, Linux') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Android and iOS (browser)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Raspberry Pi support') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Dockerized deployment') }}</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Database Support') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('PostgreSQL (recommended)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('SQLite (dev/test)') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Automatic migrations with Flask-Migrate') }}</li>
                <li class="flex items-start gap-2"><i class="fas fa-check text-green-600 mt-1"></i>{{ _('Backup and restoration tools') }}</li>
            </ul>
        </div>
    </div>
</div>

<!-- Technical Specifications -->
<div class="bg-card-light dark:bg-card-dark p-4 sm:p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm mb-6 sm:mb-8">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-cogs mr-2"></i>{{ _('Technical Specifications') }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
        <div>
            <h4 class="font-semibold mb-2">{{ _('Technology Stack') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li><i class="fas fa-code text-primary mr-2"></i><strong>{{ _('Backend') }}:</strong> Python, Flask, SQLAlchemy</li>
                <li><i class="fas fa-palette text-green-600 mr-2"></i><strong>{{ _('Frontend') }}:</strong> Tailwind CSS, JS, Font Awesome</li>
                <li><i class="fas fa-database text-sky-600 mr-2"></i><strong>{{ _('Database') }}:</strong> PostgreSQL, SQLite</li>
                <li><i class="fas fa-server text-amber-600 mr-2"></i><strong>{{ _('Deployment') }}:</strong> Docker, Docker Compose</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Key Capabilities') }}</h4>
            <ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
                <li><i class="fas fa-bolt text-primary mr-2"></i><strong>{{ _('Real-time') }}:</strong> WebSocket updates, live timers</li>
                <li><i class="fas fa-language text-green-600 mr-2"></i><strong>{{ _('i18n') }}:</strong> Multi-language support</li>
                <li><i class="fas fa-shield-alt text-sky-600 mr-2"></i><strong>{{ _('Security') }}:</strong> CSRF, session management</li>
                <li><i class="fas fa-mobile-alt text-amber-600 mr-2"></i><strong>{{ _('Mobile') }}:</strong> Responsive, PWA</li>
            </ul>
        </div>
    </div>
</div>

<!-- Open Source & Community -->
<div class="bg-card-light dark:bg-card-dark p-4 sm:p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm mb-6 sm:mb-8">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-code-branch mr-2"></i>{{ _('Open Source & Community') }}</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-text-muted-light dark:text-text-muted-dark">
        <div>
            <h4 class="font-semibold mb-2">{{ _('Open Source Benefits') }}</h4>
            <ul class="space-y-1">
                <li><i class="fas fa-code text-primary mr-2"></i>{{ _('Full source code available on GitHub') }}</li>
                <li><i class="fas fa-balance-scale text-primary mr-2"></i>{{ _('Licensed under GPL v3.0') }}</li>
                <li><i class="fas fa-users text-primary mr-2"></i>{{ _('Community-driven development') }}</li>
                <li><i class="fas fa-bug text-primary mr-2"></i>{{ _('Transparent issue tracking and bug reports') }}</li>
            </ul>
        </div>
        <div>
            <h4 class="font-semibold mb-2">{{ _('Deployment Options') }}</h4>
            <ul class="space-y-1">
                <li><i class="fas fa-docker text-sky-600 mr-2"></i>{{ _('Docker images (GHCR)') }}</li>
                <li><i class="fas fa-server text-sky-600 mr-2"></i>{{ _('Self-hosted deployment with full control') }}</li>
                <li><i class="fas fa-cloud text-sky-600 mr-2"></i>{{ _('Cloud-ready with Compose configs') }}</li>
            </ul>
        </div>
    </div>
    <div class="mt-4 flex flex-wrap gap-3">
        <a href="https://github.com/drytrix/TimeTracker" target="_blank" rel="noopener" class="px-4 py-2 rounded-lg border border-border-light dark:border-border-dark hover:bg-background-light dark:hover:bg-background-dark">
            <i class="fab fa-github mr-2"></i>{{ _('View on GitHub') }}
        </a>
        {% if current_user.is_authenticated and (not settings or not getattr(settings, 'donate_ui_hidden', false)) and current_user.ui_show_donate %}
        <a href="{{ url_for('main.donate') }}" class="px-4 py-2 rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-semibold shadow-md hover:shadow-lg transition-all">
            <i class="fas fa-heart mr-2"></i>{{ _('Support updates') }}
        </a>
        {% endif %}
    </div>
    
    {% if current_user.is_authenticated and (not settings or not getattr(settings, 'donate_ui_hidden', false)) and current_user.ui_show_donate %}
    <!-- Support Section -->
    <div class="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 p-6 rounded-lg border border-amber-200 dark:border-amber-800 mt-6">
        <div class="flex items-start gap-4">
            <div class="flex-shrink-0">
                <i class="fas fa-mug-saucer text-3xl text-amber-600 dark:text-amber-400"></i>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-semibold mb-2 text-amber-900 dark:text-amber-100">
                    {{ _('Support TimeTracker Development') }}
                </h3>
                <p class="text-sm text-amber-800 dark:text-amber-200 mb-4">
                    {{ _('TimeTracker is free and open-source. Support updates and new features — or remove prompts with a one-time key.') }}
                </p>
                <div class="flex flex-wrap gap-2">
                    <a href="{{ url_for('main.donate') }}" class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-lg font-medium transition-colors">
                        <i class="fas fa-info-circle mr-2"></i>{{ _('Support / Get key') }}
                    </a>
                    <a href="https://buymeacoffee.com/DryTrix?utm_source=timetracker&utm_medium=about_page&utm_campaign=support" target="_blank" rel="noopener" onclick="trackDonationClick('about_page')" class="px-4 py-2 bg-white hover:bg-amber-50 text-amber-600 rounded-lg font-medium transition-colors border border-amber-600">
                        <i class="fas fa-mug-saucer mr-2"></i>{{ _('Donate') }}
                    </a>
                </div>
                <p class="mt-3 text-xs text-amber-700 dark:text-amber-300">
                    {{ _('Remove prompts with a one-time key.') }}
                    <a href="{{ support_purchase_url }}" target="_blank" rel="noopener noreferrer" class="underline hover:no-underline">{{ _('Get key') }}</a>
                </p>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Getting Help -->
<div class="bg-card-light dark:bg-card-dark p-4 sm:p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
    <h3 class="text-lg font-semibold mb-4"><i class="fas fa-question-circle mr-2"></i>{{ _('Getting Help & Resources') }}</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
        <div class="text-center p-4 rounded-lg border border-border-light dark:border-border-dark">
            <div class="mx-auto mb-3 w-14 h-14 rounded-full flex items-center justify-center bg-primary/10">
                <i class="fas fa-book text-primary"></i>
            </div>
            <h4 class="font-semibold mb-1">{{ _('Documentation') }}</h4>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Step-by-step guides for all features.') }}</p>
            <a href="{{ url_for('main.help') }}" class="px-3 py-2 text-sm rounded-lg bg-primary text-white hover:opacity-90">
                <i class="fas fa-book mr-1"></i>{{ _('View Help') }}
            </a>
        </div>
        <div class="text-center p-4 rounded-lg border border-border-light dark:border-border-dark">
            <div class="mx-auto mb-3 w-14 h-14 rounded-full flex items-center justify-center bg-green-600/10">
                <i class="fas fa-info-circle text-green-600"></i>
            </div>
            <h4 class="font-semibold mb-1">{{ _('System Information') }}</h4>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Status, versions, and configuration details.') }}</p>
            {% if current_user.is_admin %}
            <a href="{{ url_for('admin.system_info') }}" class="px-3 py-2 text-sm rounded-lg border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20">
                <i class="fas fa-info-circle mr-1"></i>{{ _('System Info') }}
            </a>
            {% else %}
            <span class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Admin access required') }}</span>
            {% endif %}
        </div>
        <div class="text-center p-4 rounded-lg border border-border-light dark:border-border-dark">
            <div class="mx-auto mb-3 w-14 h-14 rounded-full flex items-center justify-center bg-amber-600/10">
                <i class="fab fa-github text-amber-600"></i>
            </div>
            <h4 class="font-semibold mb-1">{{ _('Community Support') }}</h4>
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark mb-3">{{ _('Report issues, request features, contribute.') }}</p>
            <a href="https://github.com/drytrix/TimeTracker/issues" target="_blank" rel="noopener" class="px-3 py-2 text-sm rounded-lg border border-amber-600 text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20">
                <i class="fab fa-github mr-1"></i>{{ _('GitHub Issues') }}
            </a>
        </div>
    </div>
</div>
{% endblock %}