---
import { Image } from 'astro:assets';
import facade from '../assets/images/facade.jpg';
---

<section class="relative h-screen flex items-center justify-center overflow-hidden">
  <!-- Image de fond -->
  <div class="absolute inset-0">
    <Image
      src={facade}
      alt="La Maison de Cécile"
      class="w-full h-full object-cover"
      loading="eager"
    />
    <div class="absolute inset-0 bg-dark/50"></div>
  </div>

  <!-- Contenu centré -->
  <div class="relative z-10 text-center text-white px-6 max-w-4xl mx-auto">
    <span class="block text-xs tracking-[0.4em] uppercase text-white/60 mb-6">
      Gite et Chambres d'hôtes · Gorges du Haut-Allier · Alleyras, Haute-Loire
    </span>

    <h1 class="font-serif text-7xl md:text-9xl font-light leading-none mb-6">
      La Maison de Cécile
    </h1>

    <p class="text-lg text-white/70 font-light mb-12 max-w-lg mx-auto">
      Une halte authentique sur le GR470 & la Via Allier, à deux pas de l'Allier sauvage.
    </p>

    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a
        href="#about"
        class="border border-white/60 text-white px-10 py-4 text-xs tracking-[0.25em] uppercase hover:bg-white/10 transition-colors"
      >
        Découvrir la maison
      </a>
      <a
        href="#location"
        class="text-white/60 px-10 py-4 text-xs tracking-[0.25em] uppercase hover:text-white transition-colors"
      >
        Les activités
      </a>
    </div>
  </div>

  <!-- Indicateur de défilement -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/40">
    <span class="text-[10px] tracking-widest uppercase">Défiler</span>
    <div class="w-px h-8 bg-white/30"></div>
  </div>
</section>