{% extends 'base.html' %}

{% block title %}Generate Business Idea - Bizness Navigator{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto space-y-8">
    <!-- Header -->
    <div class="text-center space-y-4">
        <h1 class="text-4xl font-bold text-gray-900 tracking-tight">
            AI Business Idea Generator
        </h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
            Let artificial intelligence analyze market trends and generate a personalized business idea based on your interests and budget.
        </p>
    </div>

    <!-- Main Form Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="p-8 md:p-12">
            <form method="POST" class="space-y-8">
                {% csrf_token %}

                <!-- Interests Field -->
                <div class="space-y-3">
                    <label for="interests" class="block text-sm font-semibold text-gray-900">
                        Your Interests
                    </label>
                    <input
                        type="text"
                        id="interests"
                        name="interests"
                        placeholder="e.g., Technology, Food, Education, Retail"
                        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900 placeholder-gray-400"
                        required
                    >
                    <p class="text-sm text-gray-500">
                        Describe your areas of interest or expertise
                    </p>
                </div>

                <!-- Budget Field -->
                <div class="space-y-3">
                    <label for="budget" class="block text-sm font-semibold text-gray-900">
                        Available Budget (UZS)
                    </label>
                    <input
                        type="number"
                        id="budget"
                        name="budget"
                        placeholder="10000000"
                        min="1000000"
                        step="100000"
                        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900 placeholder-gray-400"
                        required
                    >
                    <p class="text-sm text-gray-500">
                        Minimum: 1,000,000 UZS
                    </p>
                </div>

                <!-- Location Field -->
                <div class="space-y-3">
                    <label for="location" class="block text-sm font-semibold text-gray-900">
                        Location
                    </label>
                    <select
                        id="location"
                        name="location"
                        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition text-gray-900"
                    >
                        <option value="Tashkent">Tashkent</option>
                        <option value="Samarkand">Samarkand</option>
                        <option value="Bukhara">Bukhara</option>
                        <option value="Fergana">Fergana</option>
                        <option value="Andijan">Andijan</option>
                        <option value="Namangan">Namangan</option>
                    </select>
                </div>

                <!-- Submit Button -->
                <div class="pt-4">
                    <button
                        type="submit"
                        class="w-full bg-gray-900 hover:bg-gray-800 text-white font-semibold py-4 px-6 rounded-lg transition-all duration-200 transform hover:scale-[1.02] focus:ring-4 focus:ring-gray-300 focus:outline-none"
                    >
                        Generate Business Idea
                    </button>
                </div>
            </form>
        </div>

        <!-- Info Panel -->
        <div class="bg-gray-50 border-t border-gray-200 px-8 md:px-12 py-6">
            <div class="flex items-start space-x-3">
                <svg class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div class="text-sm text-gray-600 space-y-1">
                    <p class="font-medium text-gray-900">How it works:</p>
                    <p>Our AI analyzes current market trends, your budget constraints, and local opportunities to generate a tailored business idea with financial projections.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Grid -->
    <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-3">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-blue-600" 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="font-semibold text-gray-900">Market Analysis</h3>
            <p class="text-sm text-gray-600">
                Comprehensive analysis of market opportunities and competition
            </p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-3">
            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900">Financial Model</h3>
            <p class="text-sm text-gray-600">
                Detailed projections including ROI and break-even analysis
            </p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-3">
            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
            </div>
            <h3 class="font-semibold text-gray-900">Risk Assessment</h3>
            <p class="text-sm text-gray-600">
                Identify potential risks and mitigation strategies
            </p>
        </div>
    </div>
</div>
{% endblock %}