---
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 = 'Accueil';
const contactHref = getRelativeLocaleUrl('fr', '/contact/');
const t2Href = getRelativeLocaleUrl('fr','/appartements/t2-corail/');
const t3Href = getRelativeLocaleUrl('fr','/appartements/t3-azur/');
---
<BaseLayout title={title} lang="fr" description="Séjours confortables au Gosier pour couples et petites familles">
  <section class="relative h-[70vh] md:h-[80vh]">
    <img src="/assets/images/villafleurie_t2_salon_1_wl81yXI.jpg" alt="Salon lumineux" 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">Séjours confortables au Gosier pour couples et petites familles</h1>
        <p class="text-white/90 mt-4 max-w-2xl text-lg">Deux appartements lumineux, près des plages. Envoyez une demande ou réservez instantanément.</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">Envoyer une demande</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" on:click={() => plausible('click_booking', {props:{locale:'fr',page:'home',position:'hero'}})}>Réserver sur 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" on:click={() => plausible('click_airbnb', {props:{locale:'fr',page:'home',position:'hero'}})}>Réserver sur 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>Près des plages</span></div>
      <div class="flex items-center gap-3"><Car class="h-5 w-5 text-brand" /><span>Parking sécurisé sur place</span></div>
      <div class="flex items-center gap-3"><Wifi class="h-5 w-5 text-brand" /><span>Wi‑Fi rapide et stable</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">Découvrir VillaFleurie</h2>
      <div class="mt-2 h-1 w-16 bg-brand rounded"></div>
      <p class="mt-4 text-slate-700 leading-relaxed">Villa est un lieu de vacances unique situé sur le magnifique archipel de la Guadeloupe, prête à accueillir des touristes en quête de tranquillité tout au long de l'année.</p>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-8">
    <div class="relative">
      <div id="desc-carousel" 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="Aperçu" 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'); 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'); 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">Installations</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" /> Climatisation</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" /> Wi‑Fi rapide</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" /> Cuisine équipée</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" /> Lit bébé sur demande</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" /> Parking sécurisé</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" /> Près des plages</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" /> Quartier calme</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" /> Adapté familles</div>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-12">
    <h2 class="text-2xl md:text-3xl font-semibold">Appartements</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 pers. • 1 lit queen + canapé‑lit • 59 €/nuit</p>
          <a href={t2Href} class="mt-3 inline-block rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">Découvrir</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² • jusqu’à 4 pers. • 2 lits queen • 79 €/nuit</p>
          <a href={t3Href} class="mt-3 inline-block rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">Découvrir</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">Avis</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">« Parfait. Rapport qualité‑prix imbattable. Hôtes aux petits soins. »</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">« Très spacieux, confortable et extrêmement propre. Quartier calme. »</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">« Gentillesse des hôtes, propreté et literie très confortable ! »</blockquote>
      </figure>
    </div>
  </section>

  <section class="mx-auto max-w-6xl px-6 py-8">
    <h2 class="text-2xl font-semibold">Accès</h2>
    <div class="mt-2 h-1 w-16 bg-brand rounded"></div>
    <p class="text-slate-700">4 rue Gerty Archimède, 97190 Le Gosier · Parking sécurisé sur place</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>
