{% extends "base.html" %}

{% block title %}Welcome to Travel Records{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8 text-center">
        <div class="hero-section py-5">
            <div class="mb-5">
                <i data-feather="map" style="width: 120px; height: 120px;" class="travel-icon mb-4"></i>
                <h1 class="cinematic-title mb-4">Travel Records Manager</h1>
                <p class="hero-subtitle lead mb-5">
                    Document your journeys around the world. Keep track of destinations, dates, and memories 
                    with our beautifully designed travel record system.
                </p>
            </div>
            
            <div class="card glass-card mb-5">
                <div class="card-body p-5">
                    <h3 class="cinematic-title mb-4" style="font-size: 2rem;">Ready to start your journey?</h3>
                    <p class="hero-subtitle mb-4">
                        Sign in with your account to access your personal travel records
                    </p>
                    <a href="{{ url_for('replit_auth.login') }}" class="btn btn-success btn-lg floating-cta" id="signInBtn">
                        <i data-feather="log-in" class="me-2"></i>
                        <span class="btn-text">Sign In to Continue</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                    </a>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <i data-feather="globe" class="feature-icon mb-3"></i>
                        <h5>Track Destinations</h5>
                        <p class="text-muted">Record every country and city you've visited with detailed information</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <i data-feather="calendar" class="feature-icon mb-3"></i>
                        <h5>Manage Dates</h5>
                        <p class="text-muted">Keep track of departure and return dates for all your trips</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="feature-card">
                        <i data-feather="file-text" class="feature-icon mb-3"></i>
                        <h5>Export Records</h5>
                        <p class="text-muted">Export your travel history to CSV for personal records or applications</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hero-section {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-dark);
}

.feature-card {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    height: 100%;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
}

.feature-icon {
    width: 48px;
    height: 48px;
    color: var(--travel-accent);
    filter: drop-shadow(0 0 10px rgba(233, 69, 96, 0.3));
}

.feature-card h5 {
    color: var(--travel-platinum);
    font-weight: 600;
    margin-bottom: 1rem;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const signInBtn = document.getElementById('signInBtn');
    
    signInBtn.addEventListener('click', function() {
        const btnText = this.querySelector('.btn-text');
        const spinner = this.querySelector('.spinner-border');
        
        btnText.textContent = 'Redirecting...';
        spinner.classList.remove('d-none');
        this.classList.add('disabled');
    });
});
</script>
{% endblock %}