<?php
require_once 'includes/config.php';
$db = getDB();

$stmt = $db->query("SELECT * FROM properties WHERE featured = 1 AND publication_status = 'publie' ORDER BY id DESC LIMIT 6");
$featuredProperties = $stmt->fetchAll();

$headerStyle = 'transparent';
$currentPage = 'home';
?>
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
  <?= renderHead('L\'Excellence en Immobilier à Dar Bouazza', 'Découvrez une sélection exclusive de propriétés prestigieuses à Sidi Rahal Casablanca avec AJOUAMAI IMMO-BUSINESS.', SITE_URL . '/assets/img/home.jpeg') ?>
</head>
<body class="bg-offwhite text-dark overflow-x-hidden font-sans">

<?php include 'components/header.php'; ?>

<!-- HERO SECTION WITH IMAGE PARALLAX -->
<section class="relative h-screen min-h-[700px] flex items-center justify-center overflow-hidden bg-black">
  <div class="absolute inset-0 z-0 overflow-hidden">
    <img src="<?= SITE_URL ?>/assets/img/home.jpeg" data-parallax-speed="0.2" class="parallax-bg w-full h-full object-cover opacity-90 scale-105 transition-transform duration-1000" alt="Immobilier de Luxe Dar Bouazza - AJOUAMAI IMMO-BUSINESS" />
    <div class="absolute inset-0" style="background: linear-gradient(to bottom, rgba(245,235,220,0.55) 0%, rgba(235,225,210,0.45) 40%, rgba(210,195,175,0.75) 100%);"></div>
  </div>

  <div class="relative z-10 text-center text-white px-6 w-full max-w-5xl mx-auto pt-16">
    <p class="text-xs tracking-[0.35em] uppercase font-sans mb-6 text-amber-900 font-semibold clip-up active">
      Sidi Rahal - Casablanca
    </p>
    
    <h1 class="font-serif text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-8 leading-[1.1] text-stone-900" style="text-shadow: 0 2px 20px rgba(245,235,220,0.8), 0 1px 4px rgba(0,0,0,0.15);">
      L'Excellence en <br class="hidden sm:inline"/>
      <span class="italic font-normal text-amber-900">Immobilier</span> de Luxe
    </h1>
    
    <p class="text-stone-800 text-sm sm:text-base md:text-lg font-sans font-medium max-w-2xl mx-auto mb-10 tracking-wide leading-relaxed reveal delay-200" style="text-shadow: 0 1px 8px rgba(255,255,255,0.7);">
      Une sélection d'exception guidée par le goût du travail bien fait, la rigueur et une vision durable de vos projets d'avenir.
    </p>
    
    <div class="max-w-3xl mx-auto reveal delay-300">
      <?php $searchStyle = 'solid'; include 'components/search-bar.php'; ?>
    </div>
  </div>

  <!-- Scroll Down Indicator -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 text-stone-700/70">
    <span class="text-[9px] tracking-[0.3em] uppercase font-sans">Découvrir</span>
    <div class="w-px h-8 bg-gradient-to-b from-amber-800/60 to-transparent animate-pulse"></div>
  </div>
</section>

<!-- TICKER MARQUEE STRIP -->
<section class="bg-black text-white py-5 border-y border-white/10 overflow-hidden">
  <div class="ticker-wrapper">
    <div class="ticker-content text-gold-light">
      <div class="ticker-item"><span>DAR BOUAZZA</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>EXCELLENCE IMMOBILIÈRE</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>AJOUAMAI IMMO-BUSINESS</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>ESTIMATIONS SUR MESURE</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>PROPRIÉTÉS D'EXCEPTION</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>ACCUEIL & CONFIANCE</span> <span class="text-white/30">•</span></div>
      <!-- Repeat for seamless loop -->
      <div class="ticker-item"><span>DAR BOUAZZA</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>EXCELLENCE IMMOBILIÈRE</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>AJOUAMAI IMMO-BUSINESS</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>ESTIMATIONS SUR MESURE</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>PROPRIÉTÉS D'EXCEPTION</span> <span class="text-white/30">•</span></div>
      <div class="ticker-item"><span>ACCUEIL & CONFIANCE</span> <span class="text-white/30">•</span></div>
    </div>
  </div>
</section>

<!-- FEATURED LISTINGS SLIDER SECTION -->
<section class="py-28 bg-white relative">
  <div class="max-w-7xl mx-auto px-6">
    
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-16 reveal">
      <div>
        <h2 class="font-serif text-3xl sm:text-4xl md:text-5xl font-light text-black">Propriétés</h2>
      </div>
      <a href="<?= SITE_URL ?>/pages/properties" class="mt-4 md:mt-0 text-xs tracking-[0.2em] uppercase font-sans text-black hover:text-gold transition-colors flex items-center gap-3 font-medium">
        <span>Voir l'ensemble des biens</span>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"/></svg>
      </a>
    </div>

    <!-- Swiper Properties Slider -->
    <?php if (!empty($featuredProperties)): ?>
      <div class="drag-scroll flex gap-6 sm:gap-8 pb-6 overflow-x-auto scrollbar-none select-none reveal delay-100">
        <?php foreach($featuredProperties as $prop):
          $img = getPrimaryImage($prop['id']);
          $cardPhoto = $img; 
          $cardTitle = $prop['title']; 
          $cardLocation = $prop['city'];
          $cardSurface = $prop['surface']; 
          $cardBedrooms = $prop['bedrooms']; 
          $cardBathrooms = $prop['bathrooms'];
          $cardPrice = $prop['price_label'];
          $cardBadge = getPropertyStatuses()[$prop['status']] ?? 'À vendre'; 
          $cardType = getPropertyTypes()[$prop['type']] ?? ucfirst($prop['type']);
          $cardLink = SITE_URL . '/pages/property?slug=' . htmlspecialchars($prop['slug']);
        ?>
          <div class="w-[280px] sm:w-[340px] md:w-[380px] flex-shrink-0">
            <?php include 'components/property-card.php'; ?>
          </div>
        <?php endforeach; ?>
      </div>
    <?php else: ?>
      <div class="text-center py-12 text-gray-400 font-sans text-sm">
        Aucune propriété en vedette pour le moment.
      </div>
    <?php endif; ?>

  </div>
</section>

<!-- NUMERICAL STATS & BRAND PROMISE BANNER -->
<section class="bg-black text-white py-24 relative overflow-hidden">
  <div class="absolute inset-0 opacity-10" style="background-image:url('<?= SITE_URL ?>/assets/img/prj.jpg'); background-size:cover; background-position:center; filter:grayscale(100%)"></div>
  <div class="max-w-7xl mx-auto px-6 relative z-10">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-12 text-center divide-x divide-white/10">
      <div class="reveal px-4">
        <div class="font-serif text-5xl md:text-6xl font-light text-gold"><span class="counter" data-target="7" data-suffix="+">0</span></div>
        <p class="text-[10px] text-gray-400 tracking-[0.25em] uppercase font-sans mt-3">Années d'Expertise</p>
      </div>
      <div class="reveal delay-100 px-4">
        <div class="font-serif text-5xl md:text-6xl font-light text-gold"><span class="counter" data-target="150" data-suffix="+">0</span></div>
        <p class="text-[10px] text-gray-400 tracking-[0.25em] uppercase font-sans mt-3">Transactions Réalisées</p>
      </div>
      <div class="reveal delay-200 px-4">
        <div class="font-serif text-5xl md:text-6xl font-light text-gold"><span class="counter" data-target="100" data-suffix="%">0</span></div>
        <p class="text-[10px] text-gray-400 tracking-[0.25em] uppercase font-sans mt-3">Confiance & Rigueur</p>
      </div>
      <div class="reveal delay-300 px-4">
        <div class="font-serif text-5xl md:text-6xl font-light text-gold"><span class="counter" data-target="48" data-suffix="h">0</span></div>
        <p class="text-[10px] text-gray-400 tracking-[0.25em] uppercase font-sans mt-3">Délai d'Estimation</p>
      </div>
    </div>
  </div>
</section>

<!-- ABOUT TEASER SECTION (LE MONDE EDITORIAL LAYOUT) -->
<section class="py-32 bg-offwhite overflow-hidden">
  <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-12 gap-16 items-center">
    
    <!-- Image Column -->
    <div class="lg:col-span-5 relative reveal-left">
      <div class="aspect-[4/5] overflow-hidden bg-gray-200 shadow-2xl relative">
        <img src="<?= SITE_URL ?>/assets/img/hind-ajouamai.jpg" class="w-full h-full object-cover zoom-on-hover grayscale hover:grayscale-0 transition-all duration-700" alt="Hind Ajouamai - Fondatrice AJOUAMAI IMMO-BUSINESS" />
      </div>
      <!-- Floating Badge -->
      <div class="absolute -bottom-8 -right-8 bg-black text-white p-8 hidden sm:block border border-gold/30">
        <div class="font-serif text-3xl font-light text-gold">Hind Ajouamai</div>
        <p class="text-[10px] tracking-[0.2em] uppercase text-gray-400 mt-1 font-sans">Fondatrice & Agent Immobiler</p>
      </div>
    </div>

    <!-- Content Column -->
    <div class="lg:col-span-7 reveal-right">
      <p class="text-[11px] tracking-[0.3em] uppercase text-gold font-sans font-medium mb-4">Notre Philosophie</p>
      <h2 class="font-serif text-3xl sm:text-4xl md:text-5xl font-light text-black mb-8 leading-tight">
        Créer une relation de confiance et de continuité
      </h2>
      
      <p class="text-gray-600 leading-relaxed text-base mb-6 font-sans font-light">
        Dotée d’une expérience de plus que 7 ans en tant qu’agent immobilier dans la région de Dar Bouazza, je suis animée par le goût du travail bien fait.
      </p>
      
      <blockquote class="border-l-2 border-gold pl-6 py-2 my-8 italic text-lg font-serif text-gray-800">
        « Notre intervention ne se résume pas qu’aux transactions, il s’agit de construire des relations durables et de sécuriser votre avenir dans votre projet de vie. »
      </blockquote>

      <div class="grid sm:grid-cols-2 gap-6 mb-10 pt-4 border-t border-gray-200">
        <div>
          <h4 class="font-serif text-lg text-black mb-2">Sélection Filtrée</h4>
          <p class="text-xs text-gray-500 font-sans leading-relaxed">Étude minutieuse du besoin client et sélection rigoureuse de biens d'exception.</p>
        </div>
        <div>
          <h4 class="font-serif text-lg text-black mb-2">Suivi Intégral</h4>
          <p class="text-xs text-gray-500 font-sans leading-relaxed">Accompagnement personnalisé à chaque étape administrative et juridique.</p>
        </div>
      </div>

      <a href="<?= SITE_URL ?>/pages/about" class="btn-lemonde-consultation inline-flex">
        <span>Découvrir la maison AJOUAMAI IMMO-BUSINESS</span>
        <svg class="w-4 h-4 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"/></svg>
      </a>
    </div>

  </div>
</section>

<!-- SERVICES PREVIEW SECTION -->
<section class="py-28 bg-white border-t border-gray-100">
  <div class="max-w-7xl mx-auto px-6">
    
    <div class="text-center max-w-2xl mx-auto mb-20 reveal">
      <p class="text-[11px] tracking-[0.3em] uppercase text-gold font-sans font-medium mb-3">Domaines d'Intervention</p>
      <h2 class="font-serif text-3xl sm:text-4xl md:text-5xl font-light text-black mb-6">Nos Services Sur-Mesure</h2>
      <div class="w-12 h-px bg-gold mx-auto"></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
      
      <!-- Card 1: Achat & Vente -->
      <div class="bg-offwhite p-10 card-hover-lift border border-gray-100 reveal delay-100 flex flex-col justify-between">
        <div>
          <div class="w-12 h-12 bg-black text-gold flex items-center justify-center mb-8">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
          </div>
          <h3 class="font-serif text-2xl font-normal text-black mb-4">Achat & Vente</h3>
          <p class="text-xs text-gray-500 font-sans leading-relaxed mb-6">
            Découvrez une sélection exclusive de biens à vendre ou confiez-nous la commercialisation de votre propriété avec une stratégie ciblée.
          </p>
        </div>
        <a href="<?= SITE_URL ?>/pages/services#achat-vente" class="text-xs tracking-[0.2em] uppercase font-sans text-black hover:text-gold transition-colors flex items-center gap-2 font-medium">
          <span>En savoir plus</span> →
        </a>
      </div>

      <!-- Card 2: Estimation -->
      <div class="bg-offwhite p-10 card-hover-lift border border-gray-100 reveal delay-200 flex flex-col justify-between">
        <div>
          <div class="w-12 h-12 bg-black text-gold flex items-center justify-center mb-8">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
          </div>
          <h3 class="font-serif text-2xl font-normal text-black mb-4">Estimation Précise</h3>
          <p class="text-xs text-gray-500 font-sans leading-relaxed mb-6">
            Valorisation objective et confidentielle de votre bien immobilier à Dar Bouazza basée sur les prix réels du marché local.
          </p>
        </div>
        <a href="<?= SITE_URL ?>/pages/estimation" class="text-xs tracking-[0.2em] uppercase font-sans text-black hover:text-gold transition-colors flex items-center gap-2 font-medium">
          <span>Estimer mon bien</span> →
        </a>
      </div>

      <!-- Card 3: Location & Gestion -->
      <div class="bg-offwhite p-10 card-hover-lift border border-gray-100 reveal delay-300 flex flex-col justify-between">
        <div>
          <div class="w-12 h-12 bg-black text-gold flex items-center justify-center mb-8">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
          </div>
          <h3 class="font-serif text-2xl font-normal text-black mb-4">Location & Gestion</h3>
          <p class="text-xs text-gray-500 font-sans leading-relaxed mb-6">
            Service complet de gestion locative pour tranquillité d'esprit maximale, sélection des locataires et suivi rigoureux.
          </p>
        </div>
        <a href="<?= SITE_URL ?>/pages/services#gestion" class="text-xs tracking-[0.2em] uppercase font-sans text-black hover:text-gold transition-colors flex items-center gap-2 font-medium">
          <span>Nos formules</span> →
        </a>
      </div>

    </div>

  </div>
</section>

<!-- CALL TO ACTION ESTIMATION FOOTER STRIP -->
<section class="bg-black text-white py-24 relative overflow-hidden">
  <div class="max-w-4xl mx-auto px-6 text-center reveal">
    <p class="text-[11px] tracking-[0.3em] uppercase text-gold font-sans font-medium mb-4">Projet Immobilier</p>
    <h2 class="font-serif text-3xl sm:text-5xl font-light mb-6 leading-tight">Vous souhaitez faire estimer votre bien à Dar Bouazza ?</h2>
    <p class="text-gray-400 text-sm font-sans mb-10 max-w-xl mx-auto leading-relaxed">
      Bénéficiez d'une étude personnalisée et confidentielle réalisée par nos experts sous 48h.
    </p>
    <a href="<?= SITE_URL ?>/pages/estimation" class="btn-lemonde-consultation inline-flex">
      <span>Faire une demande d'estimation</span>
    </a>
  </div>
</section>

<?php include 'components/footer.php'; ?>
<script src="<?= SITE_URL ?>/assets/js/app.js"></script>
</body>
</html>
