{% extends "base.html" %}

{% block title %}Moto Adventure Community - Explore Romania on Two Wheels{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-blue-600 via-purple-600 to-teal-600 text-white py-24" style="background-image: url('{{ url_for('static', filename='images/pano transalpina.jpg') }}'); background-size: cover; background-position: center; background-blend-mode: overlay;">
    <div class="absolute inset-0 bg-black opacity-40"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="flex justify-center mb-6">
            <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Moto Adventure" class="h-24 w-24 mb-4">
        </div>
        <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight drop-shadow-lg">
            Adventure Awaits
        </h1>
        <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-md">
            Discover Romania's most breathtaking motorcycle routes, connect with fellow riders, 
            and find the perfect accommodation for your next adventure.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="#about" class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-gray-100 transition transform hover:scale-105 shadow-lg">
                <i class="fas fa-compass mr-2"></i>Start Exploring
            </a>
            <a href="{{ url_for('community.index') }}" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-purple-600 transition transform hover:scale-105">
                <i class="fas fa-users mr-2"></i>Join Community
            </a>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">
                <i class="fas fa-route text-blue-600 mr-3"></i>
                Discover Romania's Hidden Gems
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Join our passionate community of motorcycle enthusiasts as we explore the most spectacular 
                routes Romania has to offer. From winding mountain passes to scenic coastal roads.
            </p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-6">
                <div class="flex items-start space-x-4">
                    <div class="bg-blue-100 p-3 rounded-lg">
                        <i class="fas fa-mountain text-blue-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">Epic Mountain Routes</h3>
                        <p class="text-gray-600">
                            Experience breathtaking rides through the Carpathian Mountains, including the famous 
                            Transfăgărășan and Transalpina highways.
                        </p>
                    </div>
                </div>
                
                <div class="flex items-start space-x-4">
                    <div class="bg-purple-100 p-3 rounded-lg">
                        <i class="fas fa-users text-purple-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">Vibrant Community</h3>
                        <p class="text-gray-600">
                            Connect with fellow riders, share your adventures, and discover new routes through 
                            our active community platform.
                        </p>
                    </div>
                </div>
                
                <div class="flex items-start space-x-4">
                    <div class="bg-teal-100 p-3 rounded-lg">
                        <i class="fas fa-map-marked-alt text-teal-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2">GPS Tracks & Guides</h3>
                        <p class="text-gray-600">
                            Download detailed GPS tracks, get insider tips, and access comprehensive guides 
                            for the best motorcycle routes.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="relative">
                <div class="bg-gradient-to-br from-emerald-400 via-cyan-400 to-blue-500 rounded-2xl p-8 text-white shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-300">
                    <div class="bg-white bg-opacity-20 rounded-lg p-6 mb-6">
                        <i class="fas fa-motorcycle text-4xl mb-4"></i>
                        <h3 class="text-2xl font-bold mb-2">Adventure Stats</h3>
                    </div>
                    <div class="grid grid-cols-2 gap-6">
                        <div class="text-center">
                            <div class="text-3xl font-bold">150+</div>
                            <div class="text-blue-100">Routes Mapped</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold">500+</div>
                            <div class="text-cyan-100">Active Riders</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold">50K+</div>
                            <div class="text-emerald-100">KMs Explored</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold">25+</div>
                            <div class="text-blue-100">Counties Covered</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Accommodation Section -->
<section id="accommodation" class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">
                <i class="fas fa-bed text-purple-600 mr-3"></i>
                Pensiune BuonGusto
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Your perfect base camp for motorcycle adventures. Enjoy comfortable accommodation, 
                secure parking, and warm hospitality in the heart of Romania's scenic landscapes.
            </p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-6">
                <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-blue-500">
                    <h3 class="text-xl font-semibold text-gray-900 mb-3 flex items-center">
                        <i class="fas fa-shield-alt text-blue-600 mr-2"></i>
                        Secure Motorcycle Parking
                    </h3>
                    <p class="text-gray-600">
                        Rest easy knowing your motorcycle is safe in our covered, monitored parking area. 
                        We understand how precious your bike is to you.
                    </p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-teal-500">
                    <h3 class="text-xl font-semibold text-gray-900 mb-3 flex items-center">
                        <i class="fas fa-map-marked-alt text-teal-600 mr-2"></i>
                        Local Route Expertise
                    </h3>
                    <p class="text-gray-600">
                        Our staff are passionate about motorcycling and can recommend the best local routes, 
                        hidden gems, and must-see attractions in the area.
                    </p>
                </div>
            </div>
            
            <div class="relative">
                <div class="bg-white rounded-2xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-6 text-white">
                        <h3 class="text-2xl font-bold mb-2">
                            <i class="fas fa-star mr-2"></i>
                            Premium Accommodation
                        </h3>
                        <p class="text-blue-100">Experience comfort and convenience</p>
                    </div>
                    
                    <div class="p-6 space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600">Comfortable Rooms</span>
                            <i class="fas fa-check text-green-500"></i>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600">Free WiFi</span>
                            <i class="fas fa-check text-green-500"></i>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600">Draft Beers for Responsible Drivers</span>
                            <i class="fas fa-check text-green-500"></i>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-600">Route Planning</span>
                            <i class="fas fa-check text-green-500"></i>
                        </div>
                        
                        <div class="border-t pt-4">
                            <div class="flex items-center justify-between text-lg font-semibold">
                                <span>Starting from</span>
                                <span class="text-purple-600">€45/night</span>
                            </div>
                        </div>
                        
                        <a href="https://buongusto.ro/index.php/book-now/" target="_blank" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition transform hover:scale-105 block text-center">
                            <i class="fas fa-calendar-alt mr-2"></i>
                            Book Now
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Community Section -->
<section id="community" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">
                <i class="fas fa-users text-teal-600 mr-3"></i>
                Stories & Tracks Community
            </h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Share your adventures, discover new routes, and connect with fellow motorcycle enthusiasts. 
                Every ride has a story - what's yours?
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            <div class="text-center group">
                <div class="bg-emerald-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-emerald-200 transition">
                    <i class="fas fa-camera text-emerald-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Share Photos</h3>
                <p class="text-gray-600">
                    Upload stunning photos from your rides and inspire others to explore new destinations.
                </p>
            </div>
            
            <div class="text-center group">
                <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition">
                    <i class="fas fa-route text-blue-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Upload GPS Tracks</h3>
                <p class="text-gray-600">
                    Share your favorite routes with detailed GPS tracks that others can download and follow.
                </p>
            </div>
            
            <div class="text-center group">
                <div class="bg-purple-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-purple-200 transition">
                    <i class="fas fa-comments text-purple-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Connect & Discuss</h3>
                <p class="text-gray-600">
                    Join conversations, get tips, and plan group rides with our active community.
                </p>
            </div>
        </div>
        
        <div class="text-center">
            <div class="bg-gradient-to-r from-emerald-500 via-cyan-500 to-blue-500 rounded-2xl p-8 text-white">
                <h3 class="text-2xl font-bold mb-4">Ready to Share Your Adventure?</h3>
                <p class="text-blue-100 mb-6 text-lg">
                    Join thousands of riders who are already sharing their stories and discovering new routes.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    {% if current_user.is_authenticated %}
                        <a href="{{ url_for('community.new_post') }}" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition transform hover:scale-105">
                            <i class="fas fa-plus mr-2"></i>Create New Post
                        </a>
                        <a href="{{ url_for('community.index') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-cyan-600 transition transform hover:scale-105">
                            <i class="fas fa-eye mr-2"></i>Browse Stories
                        </a>
                    {% else %}
                        <a href="{{ url_for('auth.register') }}" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition transform hover:scale-105">
                            <i class="fas fa-user-plus mr-2"></i>Join Community
                        </a>
                        <a href="{{ url_for('community.index') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-cyan-600 transition transform hover:scale-105">
                            <i class="fas fa-eye mr-2"></i>Browse Stories
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}