<?php
require_once __DIR__ . '/../includes/config.php';
$db = getDB();
if (empty($_GET['slug']) && empty($_GET['id'])) { redirect(SITE_URL . '/pages/properties'); }
$prop = null;
if (!empty($_GET['slug'])) { $stmt=$db->prepare("SELECT * FROM properties WHERE slug = ?"); $stmt->execute([$_GET['slug']]); $prop=$stmt->fetch(); }
elseif (!empty($_GET['id'])) { $stmt=$db->prepare("SELECT * FROM properties WHERE id = ?"); $stmt->execute([$_GET['id']]); $prop=$stmt->fetch(); }
if (!$prop) { redirect(SITE_URL . '/pages/properties'); }
$images = getPropertyImages($prop['id']);
if (empty($images)) { $images = [['image_path'=>'assets/property-1.jpg']]; }
$stmt = $db->prepare("SELECT * FROM properties WHERE type = ? AND id != ? LIMIT 3"); $stmt->execute([$prop['type'],$prop['id']]);
$similar = $stmt->fetchAll();
$headerStyle = 'solid'; $currentPage = '';
?>
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
  <meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title><?=htmlspecialchars($prop['title'])?> | AJOUAMAI IMMO-BUSINESS</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind.config={theme:{extend:{fontFamily:{serif:['"Playfair Display"','Georgia','serif'],sans:['"Inter"','system-ui','sans-serif']}}}}</script>
  <link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/app.css"/>
</head>
<body class="bg-[#F5F5F5] text-gray-800 font-sans">
<?php include __DIR__ . '/../components/header.php'; ?>

<!-- BIG TITLE HEADER SECTION FIRST -->
<section class="pt-32 pb-8 bg-white border-b border-gray-200/60">
  <div class="max-w-7xl mx-auto px-6">
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
      <div>
        <div class="flex items-center gap-3 mb-3">
          <span class="bg-gold text-white text-[10px] tracking-[0.25em] uppercase font-sans px-3 py-1 font-semibold">
            <?= htmlspecialchars($prop['city'] ?? 'Sidi Rahal Casablanca') ?>
          </span>
          <span class="bg-black text-white text-[10px] tracking-[0.2em] uppercase font-sans px-3 py-1 font-medium">
            <?= htmlspecialchars(getPropertyStatuses()[$prop['status']] ?? 'À Vendre') ?>
          </span>
        </div>
        <h1 class="font-serif text-3xl sm:text-5xl font-light text-black tracking-tight leading-tight">
          <?= htmlspecialchars($prop['title']) ?>
        </h1>
      </div>
      <div class="text-left md:text-right">
        <p class="text-[10px] tracking-[0.2em] uppercase text-gray-400 font-sans mb-1">Prix de présentation</p>
        <p class="font-serif text-3xl sm:text-4xl text-gold font-normal">
          <?= htmlspecialchars($prop['price_label'] ?: formatPrice($prop['price'])) ?>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- AUTOMATIC GALLERY SLIDER SECTION (AFTER BIG TITLE) -->
<section class="py-8 max-w-7xl mx-auto px-4 sm:px-6">
  <div class="w-full h-[45vh] sm:h-[60vh] md:h-[72vh] overflow-hidden bg-black relative rounded-sm shadow-2xl group">
    <img id="gallery-main" src="<?= htmlspecialchars(resolveAssetUrl($images[0]['image_path'])) ?>" class="w-full h-full object-cover transition-opacity duration-500" alt="<?=htmlspecialchars($prop['title'])?>" />
    
    <!-- Image Counter Badge -->
    <div id="gallery-counter" class="absolute bottom-4 right-4 bg-black/80 backdrop-blur-md text-white text-xs px-3.5 py-1.5 font-sans tracking-widest uppercase rounded-xs border border-white/10 z-10">
      1 / <?= count($images) ?>
    </div>

    <?php if (count($images) > 1): ?>
      <!-- Prev Button -->
      <button id="gallery-prev" class="absolute left-4 top-1/2 -translate-y-1/2 w-11 h-11 bg-black/70 hover:bg-black text-white flex items-center justify-center backdrop-blur-md transition-all opacity-80 hover:opacity-100 rounded-full cursor-pointer border border-white/20 shadow-lg z-10" aria-label="Photo précédente">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>
      </button>
      <!-- Next Button -->
      <button id="gallery-next" class="absolute right-4 top-1/2 -translate-y-1/2 w-11 h-11 bg-black/70 hover:bg-black text-white flex items-center justify-center backdrop-blur-md transition-all opacity-80 hover:opacity-100 rounded-full cursor-pointer border border-white/20 shadow-lg z-10" aria-label="Photo suivante">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/></svg>
      </button>
    <?php endif; ?>
  </div>

  <?php if(count($images)>1): ?>
  <div class="flex gap-3 mt-4 overflow-x-auto pb-2 scrollbar-none">
    <?php foreach($images as $i=>$img): 
      $imgUrl = resolveAssetUrl($img['image_path']);
    ?>
    <img src="<?= htmlspecialchars($imgUrl) ?>" data-src="<?= htmlspecialchars($imgUrl) ?>" data-index="<?= $i ?>" class="gallery-thumb w-24 sm:w-28 h-16 sm:h-18 object-cover cursor-pointer border-2 <?=$i===0?'border-gold scale-95':'border-transparent opacity-70 hover:opacity-100'?> transition-all flex-shrink-0 rounded-xs" alt="Thumbnail <?= $i + 1 ?>" />
    <?php endforeach; ?>
  </div>
  <?php endif; ?>
</section>

<!-- Content + Sidebar -->
<section class="max-w-7xl mx-auto px-6 py-16">
  <div class="flex flex-col lg:flex-row gap-12">
    <!-- Main Content -->
    <div class="flex-1 reveal">
      <p class="text-[11px] tracking-[0.2em] uppercase text-gray-400 mb-2 font-sans">
        <?=htmlspecialchars($prop['city'])?> — <?=htmlspecialchars(getPropertyStatuses()[$prop['status']] ?? 'À vendre')?>
      </p>
      <h1 class="font-serif text-3xl md:text-4xl font-light mb-8 text-black"><?=htmlspecialchars($prop['title'])?></h1>

      <!-- Quick Specs -->
      <div class="flex flex-wrap gap-6 text-sm font-sans text-gray-700 bg-white p-6 border border-gray-200 mb-10">
        <?php if($prop['type']): ?><div class="flex items-center gap-2"><span class="text-gray-400">Type</span> <span class="font-medium"><?=htmlspecialchars(getPropertyTypes()[$prop['type']] ?? $prop['type'])?></span></div><?php endif; ?>
        <?php if($prop['surface']): ?><div class="flex items-center gap-2"><span class="text-gray-400">Surface</span> <span class="font-medium"><?=htmlspecialchars($prop['surface'])?> m²</span></div><?php endif; ?>
        <?php if($prop['bedrooms']): ?><div class="flex items-center gap-2"><span class="text-gray-400">Chambres</span> <span class="font-medium"><?=htmlspecialchars($prop['bedrooms'])?></span></div><?php endif; ?>
        <?php if($prop['bathrooms']): ?><div class="flex items-center gap-2"><span class="text-gray-400">SDB</span> <span class="font-medium"><?=htmlspecialchars($prop['bathrooms'])?></span></div><?php endif; ?>
        <?php if($prop['year_built']): ?><div class="flex items-center gap-2"><span class="text-gray-400">Année</span> <span class="font-medium"><?=htmlspecialchars($prop['year_built'])?></span></div><?php endif; ?>
      </div>

      <!-- Description -->
      <h3 class="font-serif text-xl font-light mb-4 text-black">Description</h3>
      <div class="prose-editorial mb-12"><?=nl2br(htmlspecialchars($prop['description'] ?? ''))?></div>

      <!-- Features -->
      <div class="grid grid-cols-2 gap-4 border-t border-gray-100 pt-8 mb-12">
        <?php if($prop['surface']): ?><div class="flex justify-between text-sm font-sans py-2 border-b border-gray-50"><span class="text-gray-500">Surface habitable</span><span class="font-medium"><?=htmlspecialchars($prop['surface'])?> m²</span></div><?php endif; ?>
        <?php if($prop['bedrooms']): ?><div class="flex justify-between text-sm font-sans py-2 border-b border-gray-50"><span class="text-gray-500">Chambres</span><span class="font-medium"><?=htmlspecialchars($prop['bedrooms'])?></span></div><?php endif; ?>
        <?php if($prop['bathrooms']): ?><div class="flex justify-between text-sm font-sans py-2 border-b border-gray-50"><span class="text-gray-500">Salles de bain</span><span class="font-medium"><?=htmlspecialchars($prop['bathrooms'])?></span></div><?php endif; ?>
        <?php if($prop['year_built']): ?><div class="flex justify-between text-sm font-sans py-2 border-b border-gray-50"><span class="text-gray-500">Année de construction</span><span class="font-medium"><?=htmlspecialchars($prop['year_built'])?></span></div><?php endif; ?>
        <?php if($prop['address']): ?><div class="flex justify-between text-sm font-sans py-2 border-b border-gray-50"><span class="text-gray-500">Adresse</span><span class="font-medium"><?=htmlspecialchars($prop['address'])?></span></div><?php endif; ?>
      </div>

      <!-- Map -->
      <?php if($prop['lat'] && $prop['lng']): ?>
      <h3 class="font-serif text-xl font-light mb-4 text-black">Localisation</h3>
      <div class="h-64 bg-gray-100 border border-gray-200 mb-8">
        <iframe src="https://www.google.com/maps?q=<?=$prop['lat']?>,<?=$prop['lng']?>&hl=fr&z=14&output=embed" class="w-full h-full border-0" loading="lazy"></iframe>
      </div>
      <?php endif; ?>
    </div>

    <!-- Sidebar -->
    <?php
      $sidebarPrice = $prop['price_label'];
      $sidebarPriceLabel = $prop['status']==='location' ? 'Loyer mensuel' : 'Prix de vente';
      $sidebarSurface = $prop['surface'];
      $sidebarBedrooms = $prop['bedrooms'];
      $sidebarBathrooms = $prop['bathrooms'];
      $sidebarYear = $prop['year_built'];
      $sidebarPropertyId = $prop['id'];
      $sidebarPropertyTitle = $prop['title'];
      include __DIR__ . '/../components/agent-sidebar.php';
    ?>
  </div>
</section>

<!-- Similar Properties -->
<?php if(!empty($similar)): ?>
<section class="bg-white py-20 border-t border-gray-200">
  <div class="max-w-7xl mx-auto px-6">
    <h2 class="font-serif text-2xl font-light mb-10 text-black reveal">Propriétés Similaires</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <?php foreach($similar as $s):
        $img=getPrimaryImage($s['id']); $specs=[];
        if($s['surface']) $specs[]=$s['surface'].' m²';
        if($s['bedrooms']) $specs[]=$s['bedrooms'].' ch';
        $cardPhoto=$img;$cardTitle=$s['title'];$cardLocation=$s['city'];
        $cardSpecs=implode(' · ',$specs);$cardPrice=$s['price_label'];
        $cardBadge=getPropertyStatuses()[$s['status']] ?? 'À vendre';
        $cardType=getPropertyTypes()[$s['type']] ?? $s['type'];
        $cardLink=SITE_URL . '/pages/property.php?slug='.htmlspecialchars($s['slug']);
      ?>
        <div class="reveal"><?php include __DIR__ . '/../components/property-card.php'; ?></div>
      <?php endforeach; ?>
    </div>
  </div>
</section>
<?php endif; ?>

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