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

{% block title %}{% trans "Virtual Fitting System - Find Your Perfect Fit" %}{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="relative overflow-hidden">
    <div class="gradient-bg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
            <div class="text-center">
                <h1 class="text-5xl md:text-6xl font-extrabold text-white mb-6 animate-fade-in">
                    {% trans "Find Your Perfect Fit" %}
                    <span class="block text-transparent bg-clip-text bg-gradient-to-r from-[#7DB8D8] to-white mt-2">
                        {% trans "With AI Technology" %}
                    </span>
                </h1>
                <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
                    {% trans "Get personalized clothing recommendations based on your body measurements and skin tone." %}
                    {% trans "No more guessing sizes!" %}
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{% url 'fitting_system:scan' %}"
                        class="bg-white text-[#1B3A6B] px-8 py-4 rounded-lg font-bold text-lg hover:shadow-2xl transition transform hover:scale-105 inline-flex items-center justify-center">
                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
                            </path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        {% trans "Start Virtual Fitting" %}
                    </a>
                    <a href="{% url 'fitting_system:store' %}"
                        class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-[#1B3A6B] transition transform hover:scale-105 inline-flex items-center justify-center">
                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                        </svg>
                        {% trans "Browse Store" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Wave decoration -->
    <div class="absolute bottom-0 w-full">
        <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z"
                fill="#EAF3F8" />
        </svg>
    </div>
</div>

<!-- Features Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <div class="text-center mb-16">
        <h2 class="text-4xl font-bold text-gray-900 mb-4">{% trans "How It Works" %}</h2>
        <p class="text-xl text-gray-600">{% trans "Three simple steps to find your perfect fit" %}</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Feature 1 -->
        <div class="bg-white rounded-2xl p-8 shadow-lg hover-lift">
            <div
                class="w-16 h-16 bg-gradient-to-br from-[#1B3A6B] to-[#2E5FA3] rounded-full flex items-center justify-center mb-6">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
                    </path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-3">{% trans "1. Body Scan" %}</h3>
            <p class="text-gray-600">{% trans "Stand in front of the camera and let our AI analyze your body measurements using advanced pose detection technology." %}</p>
        </div>

        <!-- Feature 2 -->
        <div class="bg-white rounded-2xl p-8 shadow-lg hover-lift">
            <div
                class="w-16 h-16 bg-gradient-to-br from-[#2E5FA3] to-[#5B8FC9] rounded-full flex items-center justify-center mb-6">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
                    </path>
                </svg>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-3">{% trans "2. Skin Tone Analysis" %}</h3>
            <p class="text-gray-600">{% trans "Our AI analyzes your skin tone to recommend colors that complement you best, ensuring you look amazing." %}</p>
        </div>

        <!-- Feature 3 -->
        <div class="bg-white rounded-2xl p-8 shadow-lg hover-lift">
            <div
                class="w-16 h-16 bg-gradient-to-br from-[#5B8FC9] to-[#7DB8D8] rounded-full flex items-center justify-center mb-6">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-3">{% trans "3. Get Recommendations" %}</h3>
            <p class="text-gray-600">{% trans "Receive personalized size and color recommendations from your available inventory." %}</p>
        </div>
    </div>
</div>



<!-- CTA Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
    <div class="bg-gradient-to-r from-[#1B3A6B] to-[#2E5FA3] rounded-3xl shadow-2xl p-12 text-center">
        <h2 class="text-4xl font-bold text-white mb-4">{% trans "Ready to Find Your Perfect Fit?" %}</h2>
        <p class="text-xl text-white/90 mb-8">{% trans "Experience the future of clothing shopping today" %}</p>
        <a href="{% url 'fitting_system:scan' %}"
            class="bg-white text-[#1B3A6B] px-10 py-4 rounded-lg font-bold text-lg hover:shadow-2xl transition transform hover:scale-105 inline-block">
            {% trans "Start Now" %}
        </a>
    </div>
</div>
{% endblock %}