---
import { Waves, Sprout, Bed, WifiOff, HousePlus } from 'lucide-astro';
import { Image } from 'astro:assets';
import about_1 from '../assets/images/about_1.jpg';
import about_2 from '../assets/images/about_2.jpg';
import about_3 from '../assets/images/about_3.jpg';
import about_4 from '../assets/images/about_4.jpg';
---

<section id="about" class="py-32 scroll-mt-20">
  <div class="max-w-6xl mx-auto px-6">
    <div class="grid md:grid-cols-2 gap-16 items-center">

      <div>
        <span class="block text-xs tracking-[0.3em] uppercase text-primary mb-5">
          La maison
        </span>
        <h2 class="font-serif text-5xl md:text-6xl font-light leading-tight mb-8">
          Une maison vivante,<br/>entre rivière et forêt
        </h2>
        <p class="text-dark/70 leading-relaxed mb-4">
          Charmante maison de village surplombant l'Allier, Cécile l'a faite à son image :
          chaleureuse, vivante, colorée.
          Vous pouvez profiter de la terrasse abritée et du jardin, accueillant et verdoyant où il fait bon traîner.<br/>
          Ses murs épais garantissent une fraîcheur bienvenue par grosses chaleurs.
          On y arrive parfois fatigué du sentier, on en repart ressourcé.
        </p>
        <p class="text-dark/70 leading-relaxed mb-8">
          Pas de l'hôtellerie, pas un gîte comme les autres... plutôt une escale humaine,
          dans une maison qui a une âme.
        </p>
        <ul class="space-y-3 list-none">
          <li class="flex items-center gap-3 text-dark/70">
            <Waves class="w-8 h-8 text-blue-500 flex-shrink-0" />
            À 500m de la plage
          </li>
          <li class="flex items-center gap-3 text-dark/70">
            <Sprout class="w-8 h-8 text-green-500 flex-shrink-0" />
            Jardin, terrasse et coins de verdure
          </li>
          <li class="flex items-center gap-3 text-dark/70">
            <Bed class="w-8 h-8 text-red-500 flex-shrink-0" />
            3 chambres · 1 dortoir · Jusqu'à 9 personnes
          </li>          
          <li class="flex items-center gap-3 text-dark/70">
            <HousePlus class="w-8 h-8 text-yellow-500 flex-shrink-0" />
            Au format Gite ou chambre d'hôtes, selon vos envies 
          </li>
          <li class="flex items-center gap-3 text-dark/70">
            <WifiOff class="w-8 h-8 text-gray-500 flex-shrink-0" />
            Sans wifi, pour mieux décrocher
          </li>
        </ul>
      </div>
      
      <div class="relative flex items-center justify-center">
        <div class="grid grid-cols-2 md:grid-cols-2 gap-1 bg-white p-1">
            <Image
              src={about_1}
              alt="La Maison de Cécile"
              class="w-full h-64 object-cover rounded-sm"
            />
            <Image
                src={about_2}
                alt="Jardin et terrasse de la maison de Cécile"
                class="w-full h-64 object-cover rounded-sm"
            />
            <Image
                src={about_3}
                alt="Vue sur l'Allier depuis la maison de Cécile"
                class="w-full h-64 object-cover rounded-sm"
            />
            <Image
                src={about_4}
                alt="Vue sur la terrasse et le jardin de la maison de Cécile"
                class="w-full h-64 object-cover rounded-sm"
            />
        </div>
    </div>
  </div>
</section>