{% extends "base.html" %}

{% block title %}Explore States - VacationWeb{% endblock %}

{% block extra_css %}
<style>
    body {
        background: linear-gradient(135deg, #0c2461, #1e3799, #4a69bd);
        min-height: 100vh;
        color: white;
    }
    .hero-section {
        padding: 80px 0 40px;
        text-align: center;
    }
    .state-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        transition: all 0.3s ease;
        overflow: hidden;
        height: 100%;
    }
    .state-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.15);
        border-color: #FFD700;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    .state-img {
        height: 200px;
        width: 100%;
        object-fit: cover;
        border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    }
    .state-title {
        color: #FFD700;
        font-family: 'Playfair Display', serif;
        margin: 15px 0;
    }
    .btn-explore {
        background: linear-gradient(45deg, #FFD700, #FFA500);
        color: #0c2461;
        border: none;
        border-radius: 10px;
        font-weight: bold;
        transition: 0.3s;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="hero-section">
        <h1 class="display-4 fw-bold" style="color: #FFD700;">Malaysian States</h1>
        <p class="lead text-white-50">Choose a state to begin your adventure</p>
    </div>

    <div class="row g-4 mb-5">
        {% for state in states %}
        <div class="col-md-4 col-lg-3">
            <div class="state-card p-3 text-center">
                <img src="https://images.unsplash.com/photo-1596422846543-75c6fc197f07?w=400" alt="{{ state.state_name }}" class="state-img rounded mb-3">
                <h3 class="state-title">{{ state.state_name }}</h3>
                <p class="small text-white-50 mb-3">Discover the unique culture and landmarks of {{ state.state_name }}.</p>
                <a href="/state/{{ state.state_id }}" class="btn btn-explore w-100">Explore State</a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}