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

{% block title %}TravelConsult - Curated Flight & Points Deals{% endblock %}

{% block content %}
<section class="hero-section">
    <div class="container text-center text-md-start">
        <div class="row align-items-center">
            <div class="col-md-7 mb-5 mb-md-0">
                <h1 class="hero-title">Track Price Drops, Maximize Points.</h1>
                <p class="hero-subtitle mb-4">We aggregate the best travel deals so you don't have to. From points-based upgrades to unbelievable flight flash sales.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="#deals" class="btn btn-accent btn-lg px-5 shadow-lg">Browse Deals</a>
                    <a href="/admin/" class="btn btn-outline-light btn-lg px-5">Join our Consultant Network</a>
                </div>
            </div>
            <div class="col-md-5 d-none d-md-block text-center position-relative">
                <div class="hero-shape shadow-lg bg-white p-4 rounded-4 text-dark text-start rotate-3">
                    <span class="badge bg-danger mb-2">HOT DEAL</span>
                    <h5>Round Trip: London &rarr; Bali</h5>
                    <p class="mb-2 text-muted">Airlines Flash Sale</p>
                    <div class="d-flex align-items-end">
                        <span class="text-decoration-line-through me-2 text-muted">$890</span>
                        <h2 class="mb-0 text-primary">$450</h2>
                    </div>
                </div>
                <div class="hero-shape shadow-lg bg-light p-4 rounded-4 text-dark text-start rotate--3 mt-n4 ms-4">
                    <span class="badge bg-primary mb-2">POINTS DEAL</span>
                    <h5>New York &rarr; Paris Business</h5>
                    <p class="mb-2 text-muted">Amex &rarr; Virgin Transfer</p>
                    <h2 class="mb-0 text-primary">15k Points</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5" id="deals">
    <div class="container">
        <div class="row mb-5">
            <div class="col-12 text-center">
                <h2 class="mb-3">Latest Curated Opportunities</h2>
                <p class="text-muted max-width-600 mx-auto">Updated in real-time by our network of travel consultants across the globe.</p>
            </div>
        </div>
        
        <div class="row g-4">
            {% for deal in deals %}
                <div class="col-md-6 col-lg-4">
                    <div class="deal-card h-100">
                        {% if deal.image_url %}
                            <img src="{{ deal.image_url }}" alt="{{ deal.title }}" class="deal-img">
                        {% else %}
                            <img src="https://images.pexels.com/photos/2166553/pexels-photo-2166553.jpeg?auto=compress&cs=tinysrgb&w=800" alt="{{ deal.title }}" class="deal-img">
                        {% endif %}
                        <div class="deal-body d-flex flex-column">
                            <span class="deal-badge text-uppercase">{{ deal.get_deal_type_display }}</span>
                            <h4 class="mb-2">{{ deal.title }}</h4>
                            <p class="text-muted flex-grow-1 mb-4">{{ deal.description|truncatewords:20 }}</p>
                            
                            <div class="d-flex align-items-center justify-content-between mt-auto">
                                <div class="price-container">
                                    {% if deal.deal_type == 'flight' %}
                                        <span class="old-price">${{ deal.original_price|floatformat:0 }}</span>
                                        <span class="price-tag">${{ deal.current_price|floatformat:0 }}</span>
                                    {% else %}
                                        <span class="price-tag">{{ deal.points_required|default:0 }} Points</span>
                                    {% endif %}
                                </div>
                                <a href="{% url 'deal_detail' deal.id %}" class="btn btn-primary btn-sm px-4">View Deal</a>
                            </div>
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-12 text-center py-5">
                    <p class="text-muted">No active deals found. Check back later!</p>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<style>
    .rotate-3 { transform: rotate(3deg); }
    .rotate--3 { transform: rotate(-3deg); }
    .mt-n4 { margin-top: -1.5rem; }
    .ms-4 { margin-left: 1.5rem; }
    .max-width-600 { max-width: 600px; }
</style>
{% endblock %}