---
import { Image } from 'astro:assets';
import gallery1 from '../assets/images/gallery_1.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">
            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
            À 500m de la plage
          </li>
          <li class="flex items-center gap-3 text-dark/70">
            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
            Jardin, terrasse et coins de verdure
          </li>
          <li class="flex items-center gap-3 text-dark/70">
            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
            3 chambres · 1 dortoir 
          </li>          
          <li class="flex items-center gap-3 text-dark/70">
            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
            Jusqu'à 9 personnes
          </li>
          <li class="flex items-center gap-3 text-dark/70">
            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
            Au format Gite ou chambre d'hôtes, selon vos envies 
          </li>
          <li class="flex items-center gap-3 text-dark/70">
            <span class="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0"></span>
            Sans wifi — pour mieux décrocher
          </li>
        </ul>
      </div>

      <div class="relative">
        <Image
          src={gallery1}
          alt="Intérieur du gîte"
          class="w-full h-[500px] object-cover rounded-sm object-center"
        />
        <div class="absolute -bottom-5 -left-5 w-40 h-40 border border-primary/25 -z-10"></div>
      </div>

    </div>
  </div>
</section>

