{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="hero-section">
        <div class="hero-content">
            <h1>Your Journey Begins Here</h1>
            <p class="hero-subtitle">Discover flights, hotels, activities, and more - all in one place.</p>
        </div>
    </div>

    <div class="destinations-section">
        <h2>Popular U.S. Destinations</h2>
        <div class="destinations-grid">
            {% for city, data in destinations.items() %}
            <div class="destination-card" style="background-image: url('{{ data.image }}?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80')">
                <div class="destination-content">
                    <h3>{{ city }}</h3>
                    <p>{{ data.nickname }}</p>
                    <div class="destination-meta">
                        <span><i class="fas fa-calendar-alt"></i> Best Time: {{ data.best_time }}</span>
                        <span><i class="fas fa-temperature-high"></i> {{ data.temp_range }}</span>
                    </div>
                    <p class="destination-description">{{ data.description }}</p>
                    {% if data.current_temp %}
                    <div class="current-weather">
                        <i class="fas fa-thermometer-half"></i>
                        Current: {{ data.current_temp }}°C
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="features-section">
        <h2>Plan Your Perfect Trip</h2>
        <div class="features-grid">
            <div class="feature-card">
                <i class="fas fa-plane-departure"></i>
                <h3>Flight Booking</h3>
                <p>Find the best deals on flights to your dream destinations.</p>
                <a href="{{ url_for('flights') }}" class="feature-link">Search Flights</a>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-hotel"></i>
                <h3>Hotel Stays</h3>
                <p>Book comfortable accommodations worldwide at great prices.</p>
                <a href="{{ url_for('hotels') }}" class="feature-link">Find Hotels</a>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-calendar-alt"></i>
                <h3>Things to Do</h3>
                <p>Explore exciting activities and events at your destination.</p>
                <a href="{{ url_for('things_to_do') }}" class="feature-link">Discover Activities</a>
            </div>
            
            <div class="feature-card">
                <i class="fas fa-cloud-sun"></i>
                <h3>Weather Updates</h3>
                <p>Stay informed about weather conditions for your trip.</p>
                <a href="{{ url_for('weather') }}" class="feature-link">Check Weather</a>
            </div>
        </div>
    </div>

    <div class="why-us-section">
        <h2>Why Choose TravelBuddy?</h2>
        <div class="benefits-grid">
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <p>All-in-one travel planning platform</p>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <p>Real-time weather updates</p>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <p>Curated local experiences</p>
            </div>
            <div class="benefit-item">
                <i class="fas fa-check-circle"></i>
                <p>Best price guarantees</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}