{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block title %}
    {% if user.is_authenticated %}
        {% translate "Dashboard - ERICA" %}
    {% else %}
        {% translate "Welcome to ERICA - Enterprise Resource Integration Communication App" %}
    {% endif %}
{% endblock %}

{% block extra_css %}
<style>
/* Professional animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Utility classes */
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-slide-in { animation: slideIn 0.8s ease-out; }
.animate-pulse-subtle { animation: pulse 2s infinite; }
.animate-shimmer { animation: shimmer 2s infinite; }

/* Professional card styling */
.professional-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.professional-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(15, 118, 110, 0.05), transparent);
    transition: left 0.5s;
}

.professional-card:hover::before {
    left: 100%;
}

.professional-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, 0.2);
}

/* Status indicators */
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.status-online { background-color: #10b981; }
.status-warning { background-color: #f59e0b; }
.status-error { background-color: #ef4444; }

/* Professional gradient backgrounds */
.hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0d47a1 100%);
    position: relative;
    overflow: hidden;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(15, 118, 110, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(217, 119, 6, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(34, 197, 194, 0.2) 0%, transparent 50%);
    animation: float 6s ease-in-out infinite;
}

.hero-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: moveBackground 20s linear infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes moveBackground {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(-100px) translateY(-100px); }
}

/* Enhanced CTA gradient */
.cta-gradient {
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 50%, #d97706 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 118, 110, 0.4);
}

.cta-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-gradient:hover::before {
    left: 100%;
}

.cta-gradient:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 25px 50px rgba(15, 118, 110, 0.6);
}

/* Secondary CTA styling */
.secondary-cta {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.secondary-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.secondary-cta:hover::before {
    left: 100%;
}

.secondary-cta:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Enhanced feature cards */
.feature-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.08) 0%, rgba(217, 119, 6, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 24px;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Icon containers with enhanced styling */
.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 50%, #d97706 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    box-shadow: 0 10px 30px rgba(15, 118, 110, 0.3);
    transition: all 0.4s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px rgba(15, 118, 110, 0.5);
}

/* Stats section with enhanced styling */
.stats-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 25%, #fffbeb 50%, #f0f9ff 75%, #ecfdf5 100%);
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(15, 118, 110, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(217, 119, 6, 0.05) 0%, transparent 50%);
    animation: statsFloat 8s ease-in-out infinite;
}

@keyframes statsFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

.stats-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239ca3af' fill-opacity='0.04'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm10 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Enhanced stat cards */
.stat-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Market section styling */
.market-section {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 50%, #ecfdf5 100%);
    position: relative;
    overflow: hidden;
}

.market-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 10% 90%, rgba(15, 118, 110, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(217, 119, 6, 0.08) 0%, transparent 50%);
}

/* Enhanced market cards */
.market-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.market-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(15, 118, 110, 0.3);
}

/* Progress bars */
.progress-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Floating elements */
.floating-element {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.15), rgba(217, 119, 6, 0.15));
    animation: floating 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    width: 60px;
    height: 60px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    width: 40px;
    height: 40px;
    top: 20%;
    right: 15%;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    width: 80px;
    height: 80px;
    bottom: 15%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Beautiful metric cards */
.metric-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 100%);
    border: 1px solid #cffafe;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.metric-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30px, -30px);
}

/* Elegant feature cards */
.feature-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Stats section styling */
.stats-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 50%, #fffbeb 100%);
    position: relative;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239ca3af' fill-opacity='0.03'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm10 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
{% endblock %}

{% block content %}
<main role="main" class="bg-gray-50 min-h-screen">
    {% if user.is_authenticated %}
        <!-- Professional Dashboard for Authenticated Users -->
        <div class="max-w-7xl mx-auto">
            <!-- Welcome Header -->
            <div class="mb-8 animate-fade-in-up">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">
                                {% blocktranslate with name=user.get_full_name|default:user.username %}
                                    Welcome back, {{ name }}
                                {% endblocktranslate %}
                            </h1>
                            <p class="text-gray-600 mt-1">
                                {% translate "Here's what's happening with your business today." %}
                            </p>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="text-right">
                                <p class="text-sm text-gray-500">{% translate "Last updated" %}</p>
                                <p class="text-sm font-medium text-gray-900" id="last-updated">
                                    {{ "now"|date:"H:i" }}
                                </p>
                            </div>
                            <button class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
                                    hx-get="{% url 'core:refresh_dashboard' %}"
                                    hx-target="#dashboard-content"
                                    hx-swap="innerHTML">
                                <i class="fas fa-sync-alt mr-2"></i>
                                {% translate "Refresh" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dashboard Content -->
            <div id="dashboard-content" class="space-y-6">
                <!-- Key Metrics Row -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- Total Users -->
                    <div class="metric-card animate-slide-in">
                        <div class="flex items-center justify-between relative z-10">
                            <div>
                                <p class="text-sm font-medium text-gray-600 mb-2">{% translate "Total Users" %}</p>
                                <p class="text-3xl font-bold text-gray-900 mt-2">{{ total_users|default:0 }}</p>
                            </div>
                            <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Total Companies -->
                    <div class="metric-card animate-slide-in" style="animation-delay: 0.1s">
                        <div class="flex items-center justify-between relative z-10">
                            <div>
                                <p class="text-sm font-medium text-gray-600 mb-2">{% translate "Total Companies" %}</p>
                                <p class="text-3xl font-bold text-gray-900 mt-2">{{ total_companies|default:0 }}</p>
                            </div>
                            <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-building text-white text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Active Projects -->
                    <div class="metric-card animate-slide-in" style="animation-delay: 0.2s">
                        <div class="flex items-center justify-between relative z-10">
                            <div>
                                <p class="text-sm font-medium text-gray-600 mb-2">{% translate "Active Projects" %}</p>
                                {% if user.is_authenticated %}
                                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ user_active_projects|default:0 }}</p>
                                {% else %}
                                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ active_projects|default:0 }}</p>
                                {% endif %}
                            </div>
                            <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-project-diagram text-white text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Team Members -->
                    <div class="metric-card animate-slide-in" style="animation-delay: 0.3s">
                        <div class="flex items-center justify-between relative z-10">
                            <div>
                                <p class="text-sm font-medium text-gray-600 mb-2">{% translate "Team Members" %}</p>
                                {% if user.is_authenticated %}
                                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ user_team_members|default:0 }}</p>
                                {% else %}
                                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ total_team_members|default:0 }}</p>
                                {% endif %}
                            </div>
                            <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Content Grid -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- Recent Activity -->
                    <div class="lg:col-span-2">
                        <div class="professional-card p-6">
                            <div class="flex items-center justify-between mb-6">
                                <h2 class="text-lg font-semibold text-gray-900">{% translate "Recent Activity" %}</h2>
                                <a href="#" class="text-sm text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200">
                                    {% translate "View all" %}
                                </a>
                            </div>
                            <div hx-get="{% url 'core:recent_activity' %}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
                                <div class="space-y-4">
                                    <div class="loading-skeleton h-4 w-full rounded"></div>
                                    <div class="loading-skeleton h-4 w-3/4 rounded"></div>
                                    <div class="loading-skeleton h-4 w-1/2 rounded"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions & Notifications -->
                    <div class="space-y-6">
                        <!-- Quick Actions -->
                        <div class="professional-card p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">{% translate "Quick Actions" %}</h3>
                            {% include "core/partials/quick_actions.html" %}
                        </div>

                        <!-- Notifications -->
                        <div class="professional-card p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-semibold text-gray-900">{% translate "Notifications" %}</h3>
                                <span class="status-indicator status-warning animate-pulse-subtle"></span>
                            </div>
                            <div hx-get="{% url 'core:notifications' %}" hx-trigger="load, every 30s" hx-target="this" hx-swap="innerHTML">
                                <div class="loading-skeleton h-4 w-full rounded mb-2"></div>
                                <div class="loading-skeleton h-4 w-3/4 rounded"></div>
                            </div>
                        </div>

                        <!-- System Status (Superuser only) -->
                        {% if user.is_superuser %}
                        <div class="professional-card p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-semibold text-gray-900">{% translate "System Status" %}</h3>
                                <span class="status-indicator status-online"></span>
                            </div>
                            <div hx-get="{% url 'core:system_status' %}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
                                <div class="loading-skeleton h-4 w-full rounded"></div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

    {% else %}
        <!-- Exceptional Landing Page for Non-Authenticated Users -->
        <div class="hero-gradient min-h-screen relative">
            <!-- Floating Elements -->
            <div class="floating-element"></div>
            <div class="floating-element"></div>
            <div class="floating-element"></div>

            <!-- Hero Section -->
            <div class="w-full py-16 relative z-10">
                <div class="max-w-4xl mx-auto text-center animate-fade-in-up px-6">
                    <div class="mb-8">
                        <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-white bg-opacity-20 backdrop-blur-sm text-white border border-white border-opacity-30 mb-6">
                            <i class="fas fa-star text-amber-300 mr-2"></i>
                            {% translate "Enterprise-Grade Business Solutions" %}
                        </span>
                    </div>

                    <h1 class="text-5xl md:text-7xl font-bold text-white mb-8 leading-tight">
                        <span class="block">{% translate "Transform Your" %}</span>
                        <span class="block bg-gradient-to-r from-amber-300 via-cyan-300 to-teal-300 bg-clip-text text-transparent animate-pulse">
                            {% translate "Business Future" %}
                        </span>
                    </h1>

                    <p class="text-xl md:text-2xl text-white text-opacity-90 mb-4 max-w-4xl mx-auto leading-relaxed">
                        {% translate "Experience the next generation of enterprise management with ERICA - where innovation meets excellence in business operations." %}
                    </p>

                    <p class="text-lg text-white text-opacity-80 max-w-3xl mx-auto mb-12 leading-relaxed">
                        {% translate "Streamline processes, enhance collaboration, and drive unprecedented growth with our comprehensive platform designed for modern enterprises." %}
                    </p>

                    <div class="flex flex-col sm:flex-row justify-center gap-6 mb-16">
                        <a href="{% url 'accounts:register' %}"
                           class="cta-gradient text-white px-10 py-5 rounded-2xl font-bold text-xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:scale-105 inline-flex items-center">
                            <i class="fas fa-rocket mr-3"></i>
                            {% translate "Start Free Trial" %}
                            <i class="fas fa-arrow-right ml-3"></i>
                        </a>
                        <a href="{% url 'accounts:login' %}"
                           class="secondary-cta text-white px-10 py-5 rounded-2xl font-bold text-xl border border-white border-opacity-40 hover:bg-opacity-30 transition-all duration-500 transform hover:scale-105 inline-flex items-center">
                            <i class="fas fa-play-circle mr-3"></i>
                            {% translate "Watch Demo" %}
                        </a>
                    </div>

                    <!-- Trust Indicators -->
                    <div class="flex flex-col sm:flex-row justify-center items-center gap-8 text-white text-opacity-80">
                        <div class="flex items-center">
                            <i class="fas fa-shield-alt text-teal-400 mr-2"></i>
                            <span class="text-sm font-medium">{% translate "Enterprise Security" %}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-clock text-cyan-400 mr-2"></i>
                            <span class="text-sm font-medium">{% translate "24/7 Support" %}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-users text-amber-400 mr-2"></i>
                            <span class="text-sm font-medium">{% translate "10,000+ Users" %}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Scroll Indicator -->
            <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
                <div class="w-6 h-10 border-2 border-white border-opacity-60 rounded-full flex justify-center">
                    <div class="w-1 h-3 bg-white bg-opacity-60 rounded-full mt-2 animate-pulse"></div>
                </div>
            </div>
        </div>

        <!-- Features Section -->
        <div class="py-16 bg-gradient-to-br from-white via-blue-50 to-teal-50 relative overflow-hidden">
            <!-- Background Pattern -->
            <div class="absolute inset-0 opacity-5">
                <div class="absolute inset-0" style="background-image: radial-gradient(circle at 25% 25%, #0f766e 2px, transparent 2px), radial-gradient(circle at 75% 75%, #d97706 2px, transparent 2px); background-size: 50px 50px;"></div>
            </div>

            <div class="w-full relative z-10">
                <div class="max-w-4xl mx-auto text-center mb-20">
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-teal-100 to-amber-100 text-teal-800 mb-6">
                        <i class="fas fa-crown text-amber-600 mr-2"></i>
                        {% translate "Premium Features" %}
                    </span>

                    <h2 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                        <span class="block">{% translate "Everything You Need" %}</span>
                        <span class="block bg-gradient-to-r from-teal-600 via-cyan-600 to-amber-600 bg-clip-text text-transparent">
                            {% translate "to Succeed" %}
                        </span>
                    </h2>

                    <p class="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
                        {% translate "Discover powerful tools designed to transform your business operations, enhance team collaboration, and drive measurable results." %}
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 px-6">
                    <!-- Company Management -->
                    <div class="feature-card animate-slide-in group"
                         hx-get="{% url 'core:feature_detail' %}?feature=company"
                         hx-trigger="click"
                         hx-target="#feature-modal"
                         hx-swap="innerHTML">
                        <div class="feature-icon group-hover:rotate-12 transition-transform duration-500">
                            <i class="fas fa-building text-white text-4xl"></i>
                        </div>
                        <h3 class="text-3xl font-bold text-gray-900 mb-6 group-hover:text-teal-600 transition-colors duration-300">
                            {% translate "Company Management" %}
                        </h3>
                        <p class="text-gray-600 leading-relaxed text-lg mb-6">
                            {% translate "Organize your company structure, manage departments, and streamline operations with our comprehensive management tools." %}
                        </p>
                        <div class="flex items-center justify-center text-teal-600 font-semibold group-hover:text-teal-700 transition-colors duration-300">
                            <span>{% translate "Learn More" %}</span>
                            <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform duration-300"></i>
                        </div>
                    </div>

                    <!-- Team Collaboration -->
                    <div class="feature-card animate-slide-in group"
                         hx-get="{% url 'core:feature_detail' %}?feature=team"
                         hx-trigger="click"
                         hx-target="#feature-modal"
                         hx-swap="innerHTML"
                         style="animation-delay: 0.2s">
                        <div class="feature-icon group-hover:rotate-12 transition-transform duration-500">
                            <i class="fas fa-users text-white text-4xl"></i>
                        </div>
                        <h3 class="text-3xl font-bold text-gray-900 mb-6 group-hover:text-cyan-600 transition-colors duration-300">
                            {% translate "Team Collaboration" %}
                        </h3>
                        <p class="text-gray-600 leading-relaxed text-lg mb-6">
                            {% translate "Enhance productivity with advanced collaboration tools, messaging, and project management features." %}
                        </p>
                        <div class="flex items-center justify-center text-cyan-600 font-semibold group-hover:text-cyan-700 transition-colors duration-300">
                            <span>{% translate "Learn More" %}</span>
                            <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform duration-300"></i>
                        </div>
                    </div>

                    <!-- Analytics & Reporting -->
                    <div class="feature-card animate-slide-in group"
                         hx-get="{% url 'core:feature_detail' %}?feature=analytics"
                         hx-trigger="click"
                         hx-target="#feature-modal"
                         hx-swap="innerHTML"
                         style="animation-delay: 0.4s">
                        <div class="feature-icon group-hover:rotate-12 transition-transform duration-500">
                            <i class="fas fa-chart-bar text-white text-4xl"></i>
                        </div>
                        <h3 class="text-3xl font-bold text-gray-900 mb-6 group-hover:text-amber-600 transition-colors duration-300">
                            {% translate "Analytics & Reporting" %}
                        </h3>
                        <p class="text-gray-600 leading-relaxed text-lg mb-6">
                            {% translate "Gain deep insights with powerful analytics, custom reports, and real-time business intelligence." %}
                        </p>
                        <div class="flex items-center justify-center text-amber-600 font-semibold group-hover:text-amber-700 transition-colors duration-300">
                            <span>{% translate "Learn More" %}</span>
                            <i class="fas fa-arrow-right ml-2 transform group-hover:translate-x-2 transition-transform duration-300"></i>
                        </div>
                    </div>
                </div>

                <!-- Additional Features Preview -->
                <div class="max-w-4xl mx-auto mt-20 text-center">
                    <p class="text-gray-600 mb-8 text-lg">
                        {% translate "And much more..." %}
                    </p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <span class="px-4 py-2 bg-white bg-opacity-60 backdrop-blur-sm rounded-full text-sm font-medium text-gray-700 border border-gray-200">
                            <i class="fas fa-tasks mr-2 text-blue-500"></i>{% translate "Project Management" %}
                        </span>
                        <span class="px-4 py-2 bg-white bg-opacity-60 backdrop-blur-sm rounded-full text-sm font-medium text-gray-700 border border-gray-200">
                            <i class="fas fa-chart-line mr-2 text-green-500"></i>{% translate "Financial Tracking" %}
                        </span>
                        <span class="px-4 py-2 bg-white bg-opacity-60 backdrop-blur-sm rounded-full text-sm font-medium text-gray-700 border border-gray-200">
                            <i class="fas fa-envelope mr-2 text-purple-500"></i>{% translate "Internal Messaging" %}
                        </span>
                        <span class="px-4 py-2 bg-white bg-opacity-60 backdrop-blur-sm rounded-full text-sm font-medium text-gray-700 border border-gray-200">
                            <i class="fas fa-clock mr-2 text-orange-500"></i>{% translate "Time Tracking" %}
                        </span>
                        <span class="px-4 py-2 bg-white bg-opacity-60 backdrop-blur-sm rounded-full text-sm font-medium text-gray-700 border border-gray-200">
                            <i class="fas fa-file-invoice-dollar mr-2 text-red-500"></i>{% translate "Payroll Management" %}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Section -->
        <div class="stats-section py-12 relative">
            <div class="w-full relative z-10">
                <div class="max-w-4xl mx-auto text-center mb-16">
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-teal-100 to-cyan-100 text-teal-800 mb-6">
                        <i class="fas fa-chart-line text-teal-600 mr-2"></i>
                        {% translate "Proven Results" %}
                    </span>

                    <h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
                        <span class="block">{% translate "Trusted by" %}</span>
                        <span class="block bg-gradient-to-r from-teal-600 via-cyan-600 to-amber-600 bg-clip-text text-transparent">
                            {% translate "Enterprises Worldwide" %}
                        </span>
                    </h2>

                    <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed mb-12">
                        {% translate "Join thousands of companies worldwide who have transformed their business operations with ERICA." %}
                    </p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 lg:gap-8 px-6">
                    <!-- Active Users -->
                    <div class="stat-card group animate-fade-in-up">
                        <div class="text-center group-hover:scale-105 transition-all duration-500">
                            <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg group-hover:shadow-xl transition-shadow duration-300">
                                <i class="fas fa-users text-white text-lg"></i>
                            </div>
                            <div class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent mb-2 transition-all duration-500 group-hover:from-blue-500 group-hover:to-blue-700">
                                10,000+
                            </div>
                            <p class="text-gray-600 font-semibold text-sm mb-3">{% translate "Active Users" %}</p>
                            <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-full rounded-full transition-all duration-1000 animate-pulse" style="width: 85%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">{% translate "Growing daily" %}</p>
                        </div>
                    </div>

                    <!-- Companies -->
                    <div class="stat-card group animate-fade-in-up" style="animation-delay: 0.1s">
                        <div class="text-center group-hover:scale-105 transition-all duration-500">
                            <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg group-hover:shadow-xl transition-shadow duration-300">
                                <i class="fas fa-building text-white text-lg"></i>
                            </div>
                            <div class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent mb-2 transition-all duration-500 group-hover:from-green-500 group-hover:to-green-700">{{ total_companies|default:0 }}</div>
                            <p class="text-gray-600 font-semibold text-sm mb-3">{% translate "Companies" %}</p>
                            <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                <div class="bg-gradient-to-r from-green-500 to-green-600 h-full rounded-full transition-all duration-1000 animate-pulse" style="width: 92%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">{% translate "Enterprise clients" %}</p>
                        </div>
                    </div>

                    <!-- Uptime -->
                    <div class="stat-card group animate-fade-in-up" style="animation-delay: 0.2s">
                        <div class="text-center group-hover:scale-105 transition-all duration-500">
                            <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg group-hover:shadow-xl transition-shadow duration-300">
                                <i class="fas fa-shield-alt text-white text-lg"></i>
                            </div>
                            <div class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-purple-600 to-purple-800 bg-clip-text text-transparent mb-2 transition-all duration-500 group-hover:from-purple-500 group-hover:to-purple-700">99.9%</div>
                            <p class="text-gray-600 font-semibold text-sm mb-3">{% translate "Uptime" %}</p>
                            <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                <div class="bg-gradient-to-r from-purple-500 to-purple-600 h-full rounded-full transition-all duration-1000 animate-pulse" style="width: 99%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">{% translate "Reliability guaranteed" %}</p>
                        </div>
                    </div>

                    <!-- Support -->
                    <div class="stat-card group animate-fade-in-up" style="animation-delay: 0.3s">
                        <div class="text-center group-hover:scale-105 transition-all duration-500">
                            <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg group-hover:shadow-xl transition-shadow duration-300">
                                <i class="fas fa-headset text-white text-lg"></i>
                            </div>
                            <div class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-orange-600 to-orange-800 bg-clip-text text-transparent mb-2 transition-all duration-500 group-hover:from-orange-500 group-hover:to-orange-700">24/7</div>
                            <p class="text-gray-600 font-semibold text-sm mb-3">{% translate "Support" %}</p>
                            <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                                <div class="bg-gradient-to-r from-orange-500 to-orange-600 h-full rounded-full transition-all duration-1000 animate-pulse" style="width: 100%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">{% translate "Always available" %}</p>
                        </div>
                    </div>
                </div>

                <!-- Trust Badges -->
                <div class="mt-16 text-center">
                    <p class="text-gray-500 mb-6 text-base font-medium">{% translate "Trusted by industry leaders" %}</p>
                    <div class="flex flex-wrap justify-center items-center gap-6 opacity-60">
                        <div class="text-xl font-bold text-gray-400 hover:text-gray-600 transition-colors duration-300">TECH CORP</div>
                        <div class="text-xl font-bold text-gray-400 hover:text-gray-600 transition-colors duration-300">GLOBAL INC</div>
                        <div class="text-xl font-bold text-gray-400 hover:text-gray-600 transition-colors duration-300">ENTERPRISE LTD</div>
                        <div class="text-xl font-bold text-gray-400 hover:text-gray-600 transition-colors duration-300">DIGITAL SOLUTIONS</div>
                        <div class="text-xl font-bold text-gray-400 hover:text-gray-600 transition-colors duration-300">INNOVATE CO</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Market Indices Section -->
        <div class="market-section py-16 relative overflow-hidden">
            <div class="w-full relative z-10">
                <div class="max-w-4xl mx-auto text-center mb-20">
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-amber-100 to-orange-100 text-amber-800 mb-6">
                        <i class="fas fa-chart-line text-amber-600 mr-2"></i>
                        {% translate "Market Intelligence" %}
                    </span>

                    <h2 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                        <span class="block">{% translate "Stay Ahead with" %}</span>
                        <span class="block bg-gradient-to-r from-amber-600 via-orange-600 to-red-600 bg-clip-text text-transparent">
                            {% translate "Live Market Data" %}
                        </span>
                    </h2>

                    <p class="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed mb-8">
                        {% translate "Monitor global market trends and trading insights in real-time. Make informed decisions with comprehensive financial data." %}
                    </p>

                    <div class="flex items-center justify-center mb-12">
                        <div class="flex items-center space-x-2 bg-green-100 bg-opacity-80 backdrop-blur-sm px-4 py-2 rounded-full border border-green-200">
                            <span class="status-indicator status-online animate-pulse-subtle"></span>
                            <span class="text-sm font-medium text-green-800">{% translate "Live Data" %}</span>
                            <i class="fas fa-wifi text-green-600"></i>
                        </div>
                    </div>
                </div>

                <div class="professional-card p-8 lg:p-12">
                    <div class="flex items-center justify-between mb-8">
                        <div>
                            <h3 class="text-2xl font-bold text-gray-900 mb-2">{% translate "Global Market Indices" %}</h3>
                            <p class="text-gray-600">{% translate "Real-time trading data from major world markets" %}</p>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="text-right">
                                <p class="text-sm text-gray-500">{% translate "Last updated" %}</p>
                                <p class="text-sm font-medium text-gray-900" id="market-last-updated">
                                    {{ "now"|date:"H:i:s" }}
                                </p>
                            </div>
                            <button class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
                                    onclick="location.reload()">
                                <i class="fas fa-sync-alt mr-2"></i>
                                {% translate "Refresh" %}
                            </button>
                        </div>
                    </div>

                    <div hx-get="{% url 'core:market_indices' %}" hx-trigger="load, every 30s" hx-target="this" hx-swap="innerHTML">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-6">
                            <div class="market-card p-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-2">S&P 500</h4>
                                <canvas id="sp500-chart" width="200" height="100"></canvas>
                            </div>
                            <div class="market-card p-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-2">NASDAQ</h4>
                                <canvas id="nasdaq-chart" width="200" height="100"></canvas>
                            </div>
                            <div class="market-card p-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-2">Dow Jones</h4>
                                <canvas id="dow-chart" width="200" height="100"></canvas>
                            </div>
                            <div class="market-card p-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-2">FTSE 100</h4>
                                <canvas id="ftse-chart" width="200" height="100"></canvas>
                            </div>
                            <div class="market-card p-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-2">DAX</h4>
                                <canvas id="dax-chart" width="200" height="100"></canvas>
                            </div>
                            <div class="market-card p-4">
                                <h4 class="text-sm font-semibold text-gray-900 mb-2">CAC 40</h4>
                                <canvas id="cac-chart" width="200" height="100"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Market Insights -->
                <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 px-6">
                    <div class="bg-white bg-opacity-80 backdrop-blur-sm rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2">
                        <div class="w-12 h-12 bg-gradient-to-r from-teal-500 to-teal-600 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-eye text-white"></i>
                        </div>
                        <h4 class="text-lg font-bold text-gray-900 mb-2">{% translate "Market Watch" %}</h4>
                        <p class="text-gray-600 text-sm">{% translate "Monitor key market movements and trading volumes in real-time." %}</p>
                    </div>

                    <div class="bg-white bg-opacity-80 backdrop-blur-sm rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2">
                        <div class="w-12 h-12 bg-gradient-to-r from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-chart-pie text-white"></i>
                        </div>
                        <h4 class="text-lg font-bold text-gray-900 mb-2">{% translate "Analytics" %}</h4>
                        <p class="text-gray-600 text-sm">{% translate "Advanced analytics and reporting for informed decision making." %}</p>
                    </div>

                    <div class="bg-white bg-opacity-80 backdrop-blur-sm rounded-2xl p-6 border border-gray-200 hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2">
                        <div class="w-12 h-12 bg-gradient-to-r from-amber-500 to-amber-600 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-bell text-white"></i>
                        </div>
                        <h4 class="text-lg font-bold text-gray-900 mb-2">{% translate "Alerts" %}</h4>
                        <p class="text-gray-600 text-sm">{% translate "Get notified about significant market movements and opportunities." %}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Final CTA Section -->
        <div class="py-16 bg-gradient-to-r from-slate-900 via-teal-900 to-amber-900 relative overflow-hidden">
            <!-- Background Effects -->
            <div class="absolute inset-0">
                <div class="absolute inset-0 bg-gradient-to-r from-teal-600/20 via-cyan-600/20 to-amber-600/20"></div>
                <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 20% 80%, rgba(15, 118, 110, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(217, 119, 6, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(34, 197, 194, 0.2) 0%, transparent 50%);"></div>
            </div>

            <div class="w-full relative z-10 text-center">
                <div class="max-w-4xl mx-auto px-6">
                    <h2 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
                        {% translate "Ready to Transform" %}
                        <span class="block bg-gradient-to-r from-amber-300 via-cyan-300 to-teal-300 bg-clip-text text-transparent">
                            {% translate "Your Business?" %}
                        </span>
                    </h2>

                    <p class="text-xl text-white text-opacity-90 mb-12 leading-relaxed">
                        {% translate "Join thousands of enterprises already using ERICA to streamline operations, boost productivity, and drive growth. Start your free trial today." %}
                    </p>

                    <div class="flex flex-col sm:flex-row justify-center gap-6 mb-12">
                        <a href="{% url 'accounts:register' %}"
                           class="bg-gradient-to-r from-amber-400 via-cyan-500 to-teal-600 text-white px-12 py-6 rounded-2xl font-bold text-xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:scale-105 hover:rotate-1 inline-flex items-center">
                            <i class="fas fa-rocket mr-3 text-2xl"></i>
                            {% translate "Start Free Trial" %}
                            <i class="fas fa-arrow-right ml-3 text-2xl"></i>
                        </a>
                        <a href="#features"
                           class="bg-white bg-opacity-10 backdrop-blur-sm text-white px-12 py-6 rounded-2xl font-bold text-xl border-2 border-white border-opacity-30 hover:bg-opacity-20 transition-all duration-500 transform hover:scale-105 inline-flex items-center">
                            <i class="fas fa-play-circle mr-3 text-2xl"></i>
                            {% translate "Explore Features" %}
                        </a>
                    </div>

                    <!-- Social Proof -->
                    <div class="flex flex-col sm:flex-row justify-center items-center gap-8 text-white text-opacity-80">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
                            <span>{% translate "No credit card required" %}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
                            <span>{% translate "14-day free trial" %}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-green-400 mr-2"></i>
                            <span>{% translate "Cancel anytime" %}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Floating Elements -->
            <div class="absolute top-20 left-10 w-20 h-20 bg-white bg-opacity-10 rounded-full animate-float" style="animation-delay: 0s;"></div>
            <div class="absolute top-40 right-20 w-16 h-16 bg-amber-300 bg-opacity-20 rounded-full animate-float" style="animation-delay: 2s;"></div>
            <div class="absolute bottom-20 left-20 w-24 h-24 bg-cyan-300 bg-opacity-20 rounded-full animate-float" style="animation-delay: 4s;"></div>
            <div class="absolute bottom-40 right-10 w-18 h-18 bg-teal-300 bg-opacity-20 rounded-full animate-float" style="animation-delay: 6s;"></div>
        </div>
        <div id="feature-modal"
             class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
             role="dialog"
             aria-modal="true"
             aria-labelledby="modal-title"
             aria-hidden="true">
            <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 id="modal-title" class="text-2xl font-bold text-gray-900">
                            {% translate "Feature Details" %}
                        </h3>
                        <button onclick="hideModal()"
                                class="text-gray-400 hover:text-gray-600 transition-colors p-2 rounded-full hover:bg-gray-100"
                                aria-label="{% translate 'Close modal' %}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div id="feature-content" class="text-gray-700">
                        <!-- Content loaded via HTMX -->
                    </div>
                </div>
            </div>
        </div>

    {% endif %}
</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
// Enhanced professional HTMX configuration
document.addEventListener('DOMContentLoaded', function() {
    // Update timestamps
    function updateTimestamps() {
        const now = new Date();
        const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
        const fullTimeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':' + now.getSeconds().toString().padStart(2, '0');

        // Update dashboard timestamp
        const dashboardTimestamp = document.getElementById('last-updated');
        if (dashboardTimestamp) {
            dashboardTimestamp.textContent = timeString;
        }

        // Update market timestamp
        const marketTimestamp = document.getElementById('market-last-updated');
        if (marketTimestamp) {
            marketTimestamp.textContent = fullTimeString;
        }
    }

    // Update timestamps on load and every second
    updateTimestamps();
    setInterval(updateTimestamps, 1000);

    // Enhanced HTMX configuration
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        updateTimestamps();

        // Add success animation to loaded content
        if (evt.detail.successful) {
            const target = evt.detail.target;
            if (target) {
                target.style.animation = 'none';
                setTimeout(() => {
                    target.style.animation = 'fadeInUp 0.5s ease-out';
                }, 10);
            }
            // Re-render charts after HTMX load
            renderMarketCharts();
        }
    });

    // Auto-refresh for authenticated users
    {% if user.is_authenticated %}
    setInterval(function() {
        htmx.trigger('#dashboard-content', 'refresh-dashboard');
    }, 300000); // 5 minutes
    {% endif %}

    // Smooth scrolling 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'
                });
            }
        });
    });

    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Observe all animated elements
    document.querySelectorAll('.animate-fade-in-up, .animate-slide-in').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
        observer.observe(el);
    });

    // Enhanced loading states
    document.body.addEventListener('htmx:beforeRequest', function(evt) {
        const target = evt.detail.target;
        if (target) {
            // Add loading class for enhanced feedback
            target.classList.add('htmx-loading');
        }
    });

    document.body.addEventListener('htmx:afterRequest', function(evt) {
        const target = evt.detail.target;
        if (target) {
            target.classList.remove('htmx-loading');
        }
    });

    // Render market charts
    function renderMarketCharts() {
        const charts = [
            { id: 'sp500-chart', label: 'S&P 500', data: [4500, 4550, 4600, 4580, 4620, 4650, 4630] },
            { id: 'nasdaq-chart', label: 'NASDAQ', data: [14000, 14100, 14200, 14150, 14300, 14400, 14350] },
            { id: 'dow-chart', label: 'Dow Jones', data: [35000, 35200, 35400, 35300, 35500, 35700, 35600] },
            { id: 'ftse-chart', label: 'FTSE 100', data: [7500, 7520, 7550, 7540, 7580, 7600, 7590] },
            { id: 'dax-chart', label: 'DAX', data: [15500, 15550, 15600, 15580, 15620, 15650, 15630] },
            { id: 'cac-chart', label: 'CAC 40', data: [6500, 6520, 6550, 6540, 6580, 6600, 6590] }
        ];

        charts.forEach(chart => {
            const ctx = document.getElementById(chart.id);
            if (ctx) {
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
                        datasets: [{
                            label: chart.label,
                            data: chart.data,
                            borderColor: 'rgba(59, 130, 246, 1)',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            pointRadius: 0,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            x: {
                                display: false
                            },
                            y: {
                                display: false
                            }
                        },
                        elements: {
                            point: {
                                hoverRadius: 0
                            }
                        }
                    }
                });
            }
        });
    }

    renderMarketCharts();
});

// Modal functions
function showModal() {
    const modal = document.getElementById('feature-modal');
    if (modal) {
        modal.classList.remove('hidden');
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
    }
}

function hideModal() {
    const modal = document.getElementById('feature-modal');
    if (modal) {
        modal.classList.add('hidden');
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = 'auto';
    }
}

// Keyboard navigation
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        hideModal();
    }
});

// Professional notification system
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 ${
        type === 'error' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white'
    } max-w-sm`;
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas ${type === 'error' ? 'fa-exclamation-triangle' : 'fa-info-circle'} mr-3"></i>
            <p class="font-medium">${message}</p>
        </div>
    `;

    document.body.appendChild(notification);

    // Animate in
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);

    // Animate out
    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}
</script>

{% endblock %}