---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getRelativeLocaleUrl } from 'astro:i18n';
import { Umbrella, Car, Wifi, Snowflake, Utensils, Home as HomeIcon, Users, Baby } from 'lucide-astro';
const title = 'Home';
const contactHref = getRelativeLocaleUrl('en', '/contact/');
const t2Href = getRelativeLocaleUrl('en','/apartments/t2-corail/');
const t3Href = getRelativeLocaleUrl('en','/apartments/t3-azur/');
---
<BaseLayout title={title} lang="en" description="Comfortable stays in Le Gosier for couples and small families">
  <section class="relative h-[70vh] md:h-[80vh]">
    <img src="/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg" alt="Bright living room" class="absolute inset-0 w-full h-full object-cover" />
    <div class="absolute inset-0 bg-gradient-to-b from-black/50 via-black/35 to-black/30" />
    <div class="absolute inset-0 flex items-center">
      <div class="mx-auto max-w-6xl px-6">
        <h1 class="text-white text-4xl md:text-6xl font-semibold leading-tight max-w-3xl drop-shadow">Comfortable stays in Le Gosier for couples and small families</h1>
        <p class="text-white/90 mt-4 max-w-2xl text-lg">Two bright apartments near the beaches. Send a request or book instantly.</p>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href={contactHref} class="inline-flex items-center rounded-lg bg-brand px-5 py-3 text-white hover:bg-brand-600">Send a Request</a>
          <a href="https://www.booking.com/hotel/gp/villafleurie.fr.html" target="_blank" rel="noopener" class="inline-flex items-center rounded-lg border border-white/70 bg-white/90 px-5 py-3 text-slate-900 hover:bg-white" onclick="plausible('click_booking',{props:{locale:'en',page:'home',position:'hero'}})">Book on Booking.com</a>
          <a href="https://airbnb.fr/h/villafleurie-t2" target="_blank" rel="noopener" class="inline-flex items-center rounded-lg border border-white/70 bg-white/90 px-5 py-3 text-slate-900 hover:bg-white" onclick="plausible('click_airbnb',{props:{locale:'en',page:'home',position:'hero'}})">Book on Airbnb (T2)</a>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-slate-50">
    <div class="mx-auto max-w-6xl px-6 py-6 grid grid-cols-1 md:grid-cols-3 gap-4 text-slate-800">
      <div class="flex items-center gap-3"><Umbrella class="h-5 w-5 text-brand" /><span>Near the beaches</span></div>
      <div class="flex items-center gap-3"><Car class="h-5 w-5 text-brand" /><span>Secured onsite parking</span></div>
      <div class="flex items-center gap-3"><Wifi class="h-5 w-5 text-brand" /><span>Fast, reliable Wi‑Fi</span></div>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-12">
    <div class="max-w-3xl">
      <h2 class="text-2xl md:text-3xl font-semibold">Get to know VillaFleurie</h2>
      <div class="mt-2 h-1 w-16 bg-brand rounded"></div>
      <p class="mt-4 text-slate-700 leading-relaxed">Villa is a unique holiday retreat in the beautiful Guadeloupe archipelago, ready to welcome tranquility‑seeking guests all year round.</p>
    </div>
  </section>
  <section class="mx-auto max-w-6xl px-6 py-8">
    <div class="relative">
      <div id="desc-carousel-en" class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4" style="scroll-behavior:smooth">
        {[ '/assets/images/villafleurie_t2_terrasse.jpg', '/assets/images/villafleurie_t3_salon.jpg', '/assets/images/villafleurie_t2_cuisine.jpg', '/assets/images/villafleurie_t3_chambre.jpg' ].map((src) => (
          <img src={src} alt="Preview" class="h-48 w-80 object-cover rounded-lg snap-start" />
        ))}
      </div>
      <div class="absolute inset-y-0 left-0 flex items-center">
        <button type="button" class="rounded-full bg-white/90 shadow p-2" onclick="(function(){ const el=document.getElementById('desc-carousel-en'); el && el.scrollBy({left:-300,behavior:'smooth'}); })()">‹</button>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center">
        <button type="button" class="rounded-full bg-white/90 shadow p-2" onclick="(function(){ const el=document.getElementById('desc-carousel-en'); el && el.scrollBy({left:300,behavior:'smooth'}); })()">›</button>
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-12 bg-slate-50">
    <h2 class="text-2xl md:text-3xl font-semibold">Facilities</h2>
    <div class="mt-2 h-1 w-16 bg-brand rounded"></div>
    <div class="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 text-sm">
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Snowflake class="h-5 w-5 text-brand" /> Air conditioning</div>
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Wifi class="h-5 w-5 text-brand" /> Fast Wi‑Fi</div>
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Utensils class="h-5 w-5 text-brand" /> Equipped kitchen</div>
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Baby class="h-5 w-5 text-brand" /> Crib on demand</div>
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Car class="h-5 w-5 text-brand" /> Secured parking</div>
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Umbrella class="h-5 w-5 text-brand" /> Near the beaches</div>
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><HomeIcon class="h-5 w-5 text-brand" /> Quiet neighborhood</div>
      <div class="rounded-xl border border-slate-200 p-4 bg-white flex items-center gap-2"><Users class="h-5 w-5 text-brand" /> Family‑friendly</div>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-12 bg-slate-50">
    <h2 class="text-2xl md:text-3xl font-semibold">Apartments</h2>
    <div class="mt-2 h-1 w-16 bg-brand rounded"></div>
    <div class="mt-6 grid md:grid-cols-2 gap-6">
      <article class="rounded-xl overflow-hidden border border-slate-200 bg-white shadow-sm">
        <img src="/assets/images/villafleurie_t2_salon_2.jpg" alt="T2 Corail" class="h-48 w-full object-cover" />
        <div class="p-4">
          <h3 class="text-lg font-semibold">T2 Corail</h3>
          <p class="mt-1 text-sm text-slate-600">45 m² • 2–3 guests • 1 queen + sofa‑bed • €59/night</p>
          <a href={t2Href} class="mt-3 inline-block rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">Discover</a>
        </div>
      </article>
      <article class="rounded-xl overflow-hidden border border-slate-200 bg-white shadow-sm">
        <img src="/assets/images/villafleurie_t3_salon.jpg" alt="T3 Azur" class="h-48 w-full object-cover" />
        <div class="p-4">
          <h3 class="text-lg font-semibold">T3 Azur</h3>
          <p class="mt-1 text-sm text-slate-600">55 m² • up to 4 guests • 2 queen beds • €79/night</p>
          <a href={t3Href} class="mt-3 inline-block rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">Discover</a>
        </div>
      </article>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-12 bg-slate-50 rounded-2xl">
    <h2 class="text-2xl md:text-3xl font-semibold">Reviews</h2>
    <div class="mt-2 h-1 w-16 bg-brand rounded"></div>
    <div class="mt-6 grid md:grid-cols-3 gap-6">
      <figure class="rounded-xl border border-slate-200 bg-white p-4">
        <figcaption class="text-sm text-slate-600">Michel — 10/10</figcaption>
        <blockquote class="mt-2 text-slate-800">“Perfect. Great value for money. Kind hosts.”</blockquote>
      </figure>
      <figure class="rounded-xl border border-slate-200 bg-white p-4">
        <figcaption class="text-sm text-slate-600">Caratterina — 9/10</figcaption>
        <blockquote class="mt-2 text-slate-800">“Very spacious, comfortable and extremely clean.”</blockquote>
      </figure>
      <figure class="rounded-xl border border-slate-200 bg-white p-4">
        <figcaption class="text-sm text-slate-600">Anaïs — 10/10</figcaption>
        <blockquote class="mt-2 text-slate-800">“Friendly hosts, spotless apartment, comfy bedding!”</blockquote>
      </figure>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-8">
    <h2 class="text-2xl font-semibold">Location & Access</h2>
    <p class="text-slate-700">4 rue Gerty Archimède, 97190 Le Gosier · Secured onsite parking</p>
    <div class="mt-4 aspect-video w-full">
      <iframe class="w-full h-full" style="border:0" loading="lazy" allowfullscreen
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde"></iframe>
    </div>
  </section>
</BaseLayout>
