<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<!-- Hero Section -->
<section class="position-relative d-flex align-items-center justify-content-center border-0" style="min-height: 80vh; background: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&q=80&w=2074') center/cover no-repeat;">
    <!-- Overlay -->
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(135deg, rgba(13,110,253,0.7) 0%, rgba(0,0,0,0.5) 100%); backdrop-filter: blur(2px);"></div>
    
    <div class="container position-relative z-2 fade-in mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-10 text-center text-white mb-5">
                <h1 class="display-3 fw-bold mb-3 text-shadow">Where will your next adventure take you?</h1>
                <p class="lead fs-4 text-shadow-sm">Discover and book flights & premium hotels worldwide at unbeatable prices.</p>
            </div>
            
            <div class="col-lg-10">
                <div class="card p-1 rounded-4 shadow-lg border-0 bg-white bg-opacity-75" style="backdrop-filter: blur(15px);">
                    <div class="card-body p-4">
                        <ul class="nav nav-pills nav-fill mb-4 border-bottom pb-3" id="searchTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active rounded-pill fw-semibold fs-5 px-5" id="flight-tab" data-bs-toggle="tab" data-bs-target="#flight" type="button" role="tab" aria-selected="true"><i class="fa-solid fa-plane-departure me-2"></i> Flights</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link rounded-pill fw-semibold fs-5 px-5" id="hotel-tab" data-bs-toggle="tab" data-bs-target="#hotel" type="button" role="tab" aria-selected="false"><i class="fa-solid fa-hotel me-2"></i> Hotels</button>
                            </li>
                        </ul>
                        
                        <div class="tab-content" id="searchTabContent">
                            <!-- Flights Tab -->
                            <div class="tab-pane fade show active" id="flight" role="tabpanel" tabindex="0">
                                <form action="<?= base_url('flights') ?>" method="GET">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <label class="form-label text-dark fw-bold mb-1"><i class="fa-solid fa-location-dot me-1 text-primary"></i> Source</label>
                                            <input type="text" name="source" class="form-control form-control-lg border-0 shadow-sm" placeholder="From (e.g. DEL)">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label text-dark fw-bold mb-1"><i class="fa-solid fa-location-dot me-1 text-primary"></i> Destination</label>
                                            <input type="text" name="destination" class="form-control form-control-lg border-0 shadow-sm" placeholder="To (e.g. BOM)">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label text-dark fw-bold mb-1"><i class="fa-regular fa-calendar-days me-1 text-primary"></i> Date</label>
                                            <input type="date" name="date" class="form-control form-control-lg border-0 shadow-sm">
                                        </div>
                                        <div class="col-md-3 d-flex align-items-end">
                                            <button type="submit" class="btn btn-primary btn-lg w-100 shadow"><i class="fa-solid fa-magnifying-glass me-2"></i> Search Flights</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            
                            <!-- Hotels Tab -->
                            <div class="tab-pane fade" id="hotel" role="tabpanel" tabindex="0">
                                <form action="<?= base_url('hotels') ?>" method="GET">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label text-dark fw-bold mb-1"><i class="fa-solid fa-city me-1 text-success"></i> Destination City</label>
                                            <input type="text" name="city" class="form-control form-control-lg border-0 shadow-sm" placeholder="Where do you want to stay?">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label text-dark fw-bold mb-1"><i class="fa-regular fa-calendar-check me-1 text-success"></i> Check-in</label>
                                            <input type="date" name="checkin" class="form-control form-control-lg border-0 shadow-sm">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label text-dark fw-bold mb-1"><i class="fa-solid fa-users me-1 text-success"></i> Guests</label>
                                            <select name="guests" class="form-select form-select-lg border-0 shadow-sm">
                                                <option value="1">1 Guest</option>
                                                <option value="2" selected>2 Guests</option>
                                                <option value="3">3 Guests</option>
                                                <option value="4">4 Guests</option>
                                            </select>
                                        </div>
                                        <div class="col-md-2 d-flex align-items-end">
                                            <button type="submit" class="btn btn-success btn-lg w-100 shadow"><i class="fa-solid fa-magnifying-glass me-2"></i> Search</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Destinations snippet -->
<section class="py-5 bg-white">
    <div class="container py-4">
        <h2 class="text-center fw-bold mb-5 text-dark">Top Destinations</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 rounded-4 overflow-hidden position-relative group-hover">
                    <img src="https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&q=80&w=2071" class="w-100 h-100 object-fit-cover" style="min-height: 250px; transition: transform 0.5s ease;" alt="Taj Mahal">
                    <div class="position-absolute bottom-0 start-0 w-100 p-4" style="background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);">
                        <h3 class="text-white fw-bold mb-0">Agra, India</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 rounded-4 overflow-hidden position-relative group-hover">
                    <img src="https://images.unsplash.com/photo-1548013146-72479768bada?auto=format&fit=crop&q=80&w=2076" class="w-100 h-100 object-fit-cover" style="min-height: 250px; transition: transform 0.5s ease;" alt="Taj Mahal">
                    <div class="position-absolute bottom-0 start-0 w-100 p-4" style="background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);">
                        <h3 class="text-white fw-bold mb-0">Jaipur, India</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 rounded-4 overflow-hidden position-relative group-hover">
                    <img src="https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?auto=format&fit=crop&q=80&w=1967" class="w-100 h-100 object-fit-cover" style="min-height: 250px; transition: transform 0.5s ease;" alt="Goa">
                    <div class="position-absolute bottom-0 start-0 w-100 p-4" style="background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);">
                        <h3 class="text-white fw-bold mb-0">Goa, India</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.text-shadow {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.text-shadow-sm {
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.nav-pills .nav-link.active {
    background: var(--primary-gradient);
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4);
}
.nav-pills .nav-link {
    color: var(--text-muted);
}
.group-hover:hover img {
    transform: scale(1.1);
}
</style>
<?= $this->endSection() ?>
