@extends('layouts.app')

@section('content')

<!-- Slider -->
<div x-data="{ activeSlide: 1 }" 
     x-init="setInterval(() => { activeSlide = activeSlide === 3 ? 1 : activeSlide + 1 }, 5000)" 
     class="relative w-full overflow-hidden rounded-2xl shadow-2xl mb-12">
     
    @foreach(['slider1.webp', 'slider2.webp', 'slider3.webp'] as $index => $image)
        <div x-show="activeSlide === {{ $index + 1 }}" class="transition-opacity duration-700 ease-in-out">
            <img src="/images/{{ $image }}" class="w-full h-[500px] object-cover" alt="Heliconias Lodge">
        </div>
    @endforeach
    
    <!-- Controles del Slider -->
    <button @click="activeSlide = activeSlide === 1 ? 3 : activeSlide - 1" class="absolute left-4 top-1/2 bg-black/30 p-2 text-white rounded-full z-10 hover:bg-black/50 transition">❮</button>
    <button @click="activeSlide = activeSlide === 3 ? 1 : activeSlide + 1" class="absolute right-4 top-1/2 bg-black/30 p-2 text-white rounded-full z-10 hover:bg-black/50 transition">❯</button>
</div>

<!-- Intro -->
<section class="text-center py-12 px-4">
    <h1 class="text-4xl md:text-5xl font-serif text-green-800 mb-6">Welcome home, to our home. Welcome to Heliconias Nature Lodge.</h1>
    <p class="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
        Find your home away from home in one of our exquisite bungalows in a serene and secluded jungle paradise. All of the tours and adventures you want are close. The beautiful Costa Rican nature that brought you here is even closer.
    </p>
</section>

<!-- Arenal Unlimited Shuttle Pass (Premium Section) -->
<section class="bg-green-900 text-white py-16 px-6 rounded-3xl my-12 shadow-xl">
    <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-3xl font-bold mb-4">Arenal Unlimited Shuttle Pass</h2>
        <p class="mb-6 opacity-90">We are the only company who offer transportation service for 3 days at a very low price. You can visit La Fortuna Waterfall, Arenal Volcano, Hot Springs and more.</p>
        <a href="https://www.heliconiasnaturelodge.com/#:~:text=Arenal%20Unlimited%20Shuttle,BOOK%20NOW" target="_blank" class="bg-white text-green-900 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">BOOK NOW</a>
    </div>
</section>

<!-- Bloques de Características -->
<section class="grid md:grid-cols-2 gap-8 mb-16">
    @php
    $blocks = [
        ['img' => 'Serenity-Heliconias.webp', 'title' => 'Serenity', 'text' => 'We don’t just work here, we live here. Stay with us in our tranquil and peaceful paradise.'],
        ['img' => 'Adventure-Heliconias.webp', 'title' => 'Adventure', 'text' => 'Jungle-adjacent means you don’t have to leave to adventure; we’ve got a growing number of tours right here.'],
        ['img' => 'Confort-Heliconias.webp', 'title' => 'Comfort', 'text' => 'With all the amenities you expect: thermal pool, salon, wifi, comfy beds, and private balconies.'],
        ['img' => 'Family-Heliconias.webp', 'title' => 'Family', 'text' => 'Our family built this hotel. When you come, you’re a part of that family. We can’t wait to share it!']
    ];
    @endphp

    @foreach($blocks as $block)
    <div class="bg-white p-6 rounded-2xl shadow-md border border-gray-100 hover:shadow-xl transition">
        <img src="/images/{{ $block['img'] }}" class="w-full h-64 object-cover rounded-xl mb-4" alt="{{ $block['title'] }}">
        <h3 class="text-2xl font-bold mb-2 text-green-700">{{ $block['title'] }}</h3>
        <p class="text-gray-600">{{ $block['text'] }}</p>
    </div>
    @endforeach
</section>

<!-- Extra Premium Section: Experiencia Concierge -->
<section class="bg-gradient-to-r from-green-600 to-emerald-700 p-10 rounded-3xl text-white text-center mb-12">
    <h3 class="text-3xl font-serif mb-4">The Heliconias Signature Experience</h3>
    <p class="max-w-2xl mx-auto italic">"More than a stay, a gateway to the soul of the rainforest. From personalized jungle tours to our farm-to-table dining, we curate every moment to ensure your Costa Rican dream becomes a reality."</p>
</section>

@endsection