---
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">
          Le gîte
        </span>
        <h2 class="font-serif text-5xl md:text-6xl font-light leading-tight mb-8">
          Un havre de paix<br/>au bord de l'Allier
        </h2>
        <p class="text-dark/70 leading-relaxed mb-8">
          Ancien moulin rénové avec soin, mêlant authenticité, pierre naturelle
          et confort moderne. Laissez-vous bercer par le doux bruit de l'eau
          et la beauté des paysages environnants.
        </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>
            6 couchages
          </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>
            Terrasse avec vue sur la rivière
          </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>
            Nature préservée
          </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>
            Repas maison disponibles
          </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>

