{% extends 'base.html' %}

{% block title %}Bizness Navigator - AI Business Platform for Uzbekistan{% endblock %}

{% block content %}
<div class="space-y-24">
    <!-- Hero Section -->
    <section class="text-center py-16 md:py-24">
        <div class="max-w-4xl mx-auto space-y-8">
            <div class="inline-flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-full text-sm font-medium text-gray-700">
                <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Powered by AI</span>
            </div>

            <h1 class="text-5xl md:text-6xl font-bold text-gray-900 tracking-tight leading-tight">
                Launch Your Business<br>
                <span class="text-gray-600">with Artificial Intelligence</span>
            </h1>

            <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Bizness Navigator uses AI to help entrepreneurs in Uzbekistan generate business ideas, validate locations, and create financial models — all in one platform.
            </p>

            <!-- ⭐ ИСПРАВЛЕНО - Кнопки -->
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
                {% if user.is_authenticated %}
                <a href="{% url 'dashboard' %}" class="inline-flex items-center justify-center px-8 py-4 bg-gray-900 hover:bg-gray-800 text-white text-base font-semibold rounded-lg transition-all duration-200 transform hover:scale-105">
                    Go to Dashboard
                </a>
                {% else %}
                <a href="{% url 'register' %}" class="inline-flex items-center justify-center px-8 py-4 bg-gray-900 hover:bg-gray-800 text-white text-base font-semibold rounded-lg transition-all duration-200 transform hover:scale-105">
                    Создать аккаунт
                </a>
                <a href="{% url 'login' %}" class="inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-50 text-gray-900 text-base font-semibold rounded-lg border border-gray-300 transition">
                    Войти
                </a>
                {% endif %}
            </div>

            <div class="pt-8 text-sm text-gray-500">
                <p>Demo access: <span class="font-mono bg-gray-100 px-2 py-1 rounded">demo</span> / <span class="font-mono bg-gray-100 px-2 py-1 rounded">demo123</span></p>
            </div>
        </div>
    </section>

    <!-- Stats -->
    <section>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white rounded-2xl border border-gray-200 p-8 text-center">
                <div class="text-4xl font-bold text-gray-900 mb-2">14,400</div>
                <div class="text-sm text-gray-600">Free AI requests per day</div>
            </div>
            <div class="bg-white rounded-2xl border border-gray-200 p-8 text-center">
                <div class="text-4xl font-bold text-gray-900 mb-2">30s</div>
                <div class="text-sm text-gray-600">Average location check time</div>
            </div>
            <div class="bg-white rounded-2xl border border-gray-200 p-8 text-center">
                <div class="text-4xl font-bold text-gray-900 mb-2">100%</div>
                <div class="text-sm text-gray-600">Free platform access</div>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section id="features" class="scroll-mt-20">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Everything You Need to Start
            </h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                Comprehensive tools for every stage of your business journey
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            <!-- Feature 1 -->
            <div class="bg-white rounded-2xl border border-gray-200 p-8 hover:border-gray-300 hover:shadow-lg transition group">
                <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center mb-6 group-hover:bg-gray-900 transition">
                    <svg class="w-6 h-6 text-gray-900 group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Business Idea Generator</h3>
                <p class="text-gray-600 leading-relaxed mb-4">
                    AI analyzes market trends and generates personalized business ideas based on your interests and budget.
                </p>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        Financial modeling
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        Market analysis
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        Risk assessment
                    </li>
                </ul>
            </div>

            <!-- Feature 2 - Primary -->
            <div class="bg-gray-900 rounded-2xl p-8 text-white relative overflow-hidden group">
                <div class="absolute top-4 right-4">
                    <span class="bg-white text-gray-900 text-xs font-semibold px-3 py-1 rounded-full">
                        Featured
                    </span>
                </div>
                <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mb-6">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-3">Smart Location Check</h3>
                <p class="text-white/80 leading-relaxed mb-4">
                    Validate business locations with AI-powered analysis of legal restrictions, requirements, and costs.
                </p>
                <ul class="space-y-2 text-sm text-white/80">
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        Legal compliance check
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        Nearby objects analysis
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        Cost estimation
                    </li>
                </ul>
            </div>

            <!-- Feature 3 -->
            <div class="bg-white rounded-2xl border border-gray-200 p-8 hover:border-gray-300 hover:shadow-lg transition group">
                <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center mb-6 group-hover:bg-gray-900 transition">
                    <svg class="w-6 h-6 text-gray-900 group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-3">Financial Planning</h3>
                <p class="text-gray-600 leading-relaxed mb-4">
                    Detailed revenue and expense forecasts with break-even analysis and optimization recommendations.
                </p>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        12-month forecasts
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        ROI calculations
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        Profit projections
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <!-- How it Works -->
    <section class="bg-white rounded-3xl border border-gray-200 p-12 md:p-16">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                How It Works
            </h2>
            <p class="text-xl text-gray-600">
                Four simple steps to launch your business
            </p>
        </div>

        <div class="grid md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="w-14 h-14 bg-gray-900 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                    1
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Sign Up</h3>
                <p class="text-sm text-gray-600">Create your free account in seconds</p>
            </div>

            <div class="text-center">
                <div class="w-14 h-14 bg-gray-900 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                    2
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Generate Idea</h3>
                <p class="text-sm text-gray-600">AI creates a business plan for you</p>
            </div>

            <div class="text-center">
                <div class="w-14 h-14 bg-gray-900 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                    3
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Check Location</h3>
                <p class="text-sm text-gray-600">Validate your business address</p>
            </div>

            <div class="text-center">
                <div class="w-14 h-14 bg-gray-900 text-white rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
                    4
                </div>
                <h3 class="font-semibold text-gray-900 mb-2">Launch</h3>
                <p class="text-sm text-gray-600">Start your business journey</p>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="bg-gray-900 rounded-3xl p-12 md:p-16 text-center text-white">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">
            Ready to Start Your Business?
        </h2>
        <p class="text-xl text-white/80 mb-8 max-w-2xl mx-auto">
            Join entrepreneurs using Bizness Navigator to launch successful businesses in Uzbekistan.
        </p>

        <!-- ⭐ ИСПРАВЛЕНО - Кнопка CTA -->
        {% if user.is_authenticated %}
        <a href="{% url 'dashboard' %}" class="inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-100 text-gray-900 text-base font-semibold rounded-lg transition-all duration-200 transform hover:scale-105">
            Go to Dashboard
        </a>
        {% else %}
        <a href="{% url 'register' %}" class="inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-100 text-gray-900 text-base font-semibold rounded-lg transition-all duration-200 transform hover:scale-105">
            Создать аккаунт бесплатно
        </a>
        {% endif %}
    </section>
</div>
{% endblock %}