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

$success = false; 
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!verifyCSRF($_POST['csrf_token'] ?? '')) {
        $error = "Session expirée. Veuillez réessayer.";
    } else {
        $nom = sanitize($_POST['nom'] ?? '');
        $email = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
        $telephone = sanitize($_POST['telephone'] ?? '');
        $type_bien = sanitize($_POST['type_bien'] ?? '');

        if (!$nom || !$email || !$type_bien) {
            $error = "Veuillez remplir les champs obligatoires (*).";
        } else {
            $autres_espaces = isset($_POST['autres_espaces']) && is_array($_POST['autres_espaces'])
                ? json_encode(array_map('sanitize', $_POST['autres_espaces']))
                : null;

            $recherche_bien = sanitize($_POST['recherche_bien'] ?? 'Non');
            $commentaires = sanitize($_POST['commentaires'] ?? '') . " | Recherche active: " . $recherche_bien;

            $stmt = $db->prepare("INSERT INTO estimation_requests (
                adresse_type, adresse_detail, type_bien, type_bien_autre, categorie, type_meuble,
                superficie_totale, superficie_habitable, annee_construction,
                nombre_niveaux, nombre_pieces, nombre_chambres, etage,
                surface_balcon, surface_terrasse, surface_jardin, autres_espaces,
                ascenseur, orientation, vue, finition,
                nom, email, telephone, commentaires
            ) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");

            $ok = $stmt->execute([
                sanitize($_POST['adresse_type'] ?? ''),
                sanitize($_POST['adresse_detail'] ?? ''),
                $type_bien,
                sanitize($_POST['type_bien_autre'] ?? ''),
                sanitize($_POST['categorie'] ?? ''),
                sanitize($_POST['type_meuble'] ?? ''),
                !empty($_POST['superficie_totale']) ? (float)$_POST['superficie_totale'] : null,
                !empty($_POST['superficie_habitable']) ? (float)$_POST['superficie_habitable'] : null,
                !empty($_POST['annee_construction']) ? (int)$_POST['annee_construction'] : null,
                !empty($_POST['nombre_niveaux']) ? (int)$_POST['nombre_niveaux'] : null,
                !empty($_POST['nombre_pieces']) ? (int)$_POST['nombre_pieces'] : null,
                !empty($_POST['nombre_chambres']) ? (int)$_POST['nombre_chambres'] : null,
                !empty($_POST['etage']) ? (int)$_POST['etage'] : null,
                !empty($_POST['surface_balcon']) ? (float)$_POST['surface_balcon'] : null,
                !empty($_POST['surface_terrasse']) ? (float)$_POST['surface_terrasse'] : null,
                !empty($_POST['surface_jardin']) ? (float)$_POST['surface_jardin'] : null,
                $autres_espaces,
                sanitize($_POST['ascenseur'] ?? ''),
                sanitize($_POST['orientation'] ?? ''),
                sanitize($_POST['vue'] ?? ''),
                sanitize($_POST['finition'] ?? ''),
                $nom,
                $email,
                $telephone,
                $commentaires,
            ]);

            if ($ok) {
                $success = true;
                sendNotificationEmail('estimation_notification', [
                    'nom' => $nom,
                    'email' => $email,
                    'telephone' => $telephone,
                    'type_bien' => $type_bien,
                    'categorie' => $_POST['categorie'] ?? '',
                    'superficie' => $_POST['superficie_totale'] ?? 'N/A',
                ]);
            } else {
                $error = "Une erreur est survenue lors de l'enregistrement. Veuillez réessayer.";
            }
        }
    }
}

$headerStyle = 'transparent'; 
$currentPage = 'estimation';
?>
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
  <?= renderHead('Estimer Votre Bien Immobilier — Daniel Féau Style', 'Faites estimer votre villa ou appartement à Dar Bouazza par AJOUAMAI IMMO-BUSINESS. Rapport d\'estimation gratuit et confidentiel sous 48h.', SITE_URL . '/assets/img/project-1.jpg') ?>
</head>
<body class="bg-offwhite text-dark font-sans">
<?php include __DIR__.'/../components/header.php'; ?>

<!-- HERO BANNER (DANIEL FÉAU STYLE EDITORIAL INTRO) -->
<section class="relative h-[65vh] min-h-[500px] flex items-center justify-center overflow-hidden bg-black">
  <img src="<?= SITE_URL ?>/assets/img/project-1.jpg" data-parallax-speed="0.2" class="parallax-bg absolute inset-0 w-full h-[120%] object-cover opacity-60" alt="Estimation AJOUAMAI IMMO-BUSINESS"/>
  <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-black/70"></div>
  
  <div class="relative z-10 text-center text-white px-6 max-w-4xl mx-auto reveal-scale">
    <p class="text-[11px] tracking-[0.35em] uppercase font-sans mb-4 text-gold font-medium">L'ART DE L'ESTIMATION IMMOBILIÈRE</p>
    <h1 class="font-serif text-4xl sm:text-6xl md:text-7xl font-light tracking-tight mb-6">Estimer Votre Bien</h1>
    <div class="w-16 h-px bg-gold mx-auto mb-6"></div>
  </div>
</section>

<!-- DANIEL FÉAU EDITORIAL INTRO PARAGRAPH SECTION -->
<section class="py-20 bg-black text-white border-b border-gold/20">
  <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-semibold mb-4">CONFIDENTIALITÉ & RIGUEUR</p>
    
    <p class="font-serif text-xl sm:text-2xl font-light leading-relaxed text-gray-200 mb-8 italic">
      « Connaître la valeur exacte de son bien est la première étape indispensable avant toute mise en vente ou restructuration de patrimoine. »
    </p>

    <p class="text-sm sm:text-base text-gray-400 font-sans leading-relaxed font-light max-w-3xl mx-auto">
      À Dar Bouazza, marché d'exception aux spécificités affirmées, AJOUAMAI IMMO-BUSINESS met à votre service sa parfaite connaissance du terrain, des transactions récentes et des caractéristiques uniques de chaque résidence ou lotissement. Nos études comparatives garantissent une évaluation au juste prix de marché.
    </p>
  </div>
</section>

<!-- 3-STEP ESTIMATION FORM SECTION (BRETEUIL HOMES STYLE) -->
<section class="py-24 bg-white">
  <div class="max-w-4xl mx-auto px-6">

    <!-- STEP PROGRESS INDICATOR BAR -->
    <div class="mb-16">
      <div class="flex items-center justify-between text-xs tracking-[0.25em] uppercase font-sans text-gray-400 font-medium mb-4">
        <span>Étape 01 — Le Bien</span>
        <span>Étape 02 — Caractéristiques</span>
        <span>Étape 03 — Vos Coordonnées</span>
      </div>
      
      <div class="step-progress-bar">
        <div id="step-progress-fill" class="step-progress-fill w-1/3"></div>
      </div>

      <div class="flex justify-between mt-3">
        <span class="step-indicator-dot w-3 h-3 rounded-full bg-gold transition-colors"></span>
        <span class="step-indicator-dot w-3 h-3 rounded-full bg-gray-300 transition-colors"></span>
        <span class="step-indicator-dot w-3 h-3 rounded-full bg-gray-300 transition-colors"></span>
      </div>
    </div>

    <!-- FORM MESSAGES -->
    <?php if($success): ?>
    <div class="bg-emerald-900/10 border border-emerald-700/30 p-10 text-center mb-12 reveal">
      <div class="w-16 h-16 bg-emerald-800 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">✓</div>
      <h3 class="font-serif text-3xl font-normal text-black mb-3">Demande d'estimation envoyée avec succès</h3>
      <p class="text-gray-600 font-sans text-sm max-w-lg mx-auto">
        Nous vous remercions de votre confiance. Hind Ajouamai et l'équipe AJOUAMAI IMMO-BUSINESS étudieront votre dossier avec la plus haute confidentialité et vous contacteront sous 48 heures.
      </p>
    </div>
    <?php endif; ?>

    <?php if($error): ?>
    <div class="bg-rose-900/10 border border-rose-700/30 p-6 mb-8 text-center text-rose-800 font-sans text-sm">
      <?= htmlspecialchars($error) ?>
    </div>
    <?php endif; ?>

    <!-- BRETEUIL HOMES 3-STEP FORM -->
    <form method="POST" id="estimation-form" class="bg-offwhite p-8 sm:p-14 border border-gray-200/70 shadow-xl" novalidate>
      <input type="hidden" name="csrf_token" value="<?= htmlspecialchars(generateCSRF()) ?>"/>

      <!-- ════════════════════════════════════════════════════════════
           STEP 1: LE BIEN (Breteuil Step 1)
           ════════════════════════════════════════════════════════════ -->
      <div class="estimation-step space-y-10">
        
        <div class="border-b border-gray-200 pb-4">
          <span class="text-[10px] tracking-[0.3em] uppercase text-gold font-sans font-semibold">ÉTAPE 1 SUR 3</span>
          <h2 class="font-serif text-3xl font-light text-black mt-1">Localisation & Nature du bien</h2>
        </div>

        <!-- Adresse / Localisation -->
        <div>
          <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-3">
            Localisation à Dar Bouazza / Casablanca *
          </label>
          <div class="flex flex-wrap gap-4 mb-4">
            <?php foreach([['residence','Résidence'],['lotissement','Lotissement / Quartier'],['autre','Autre adresse']] as [$val,$label]): ?>
            <label class="cursor-pointer flex-1 min-w-[140px]">
              <input type="radio" name="adresse_type" value="<?=$val?>" class="peer hidden addr-type-radio" checked/>
              <div class="border border-gray-300 bg-white text-center py-3.5 px-4 text-xs tracking-wider uppercase font-sans peer-checked:bg-black peer-checked:text-white peer-checked:border-black transition-all hover:border-black">
                <?=$label?>
              </div>
            </label>
            <?php endforeach; ?>
          </div>
          
          <input type="text" name="adresse_detail" class="input-underline" placeholder="Nom de la résidence, rue ou lotissement exact..."/>
        </div>

        <!-- Type de bien -->
        <div>
          <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-3">
            Type de bien *
          </label>
          <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <?php foreach(['Villa','Appartement','Duplex','Terrain'] as $t): ?>
            <label class="cursor-pointer">
              <input type="radio" name="type_bien" value="<?=$t?>" class="peer hidden type-bien-radio" required/>
              <div class="border border-gray-300 bg-white text-center py-3.5 text-xs tracking-wider uppercase font-sans peer-checked:bg-gold peer-checked:text-white peer-checked:border-gold transition-all hover:border-gold">
                <?=$t?>
              </div>
            </label>
            <?php endforeach; ?>
          </div>
        </div>

        <!-- Catégorie & Meublé -->
        <div class="grid sm:grid-cols-2 gap-8 pt-4">
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-3">Objectif de l'estimation</label>
            <div class="flex gap-3">
              <?php foreach(['vente'=>'Vente','location'=>'Location'] as $v=>$l): ?>
              <label class="cursor-pointer flex-1">
                <input type="radio" name="categorie" value="<?=$v?>" class="peer hidden" checked/>
                <div class="border border-gray-300 bg-white text-center py-3 text-xs tracking-wider uppercase font-sans peer-checked:bg-black peer-checked:text-white peer-checked:border-black transition-all hover:border-black"><?=$l?></div>
              </label>
              <?php endforeach; ?>
            </div>
          </div>

          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-3">État du bien</label>
            <div class="flex gap-3">
              <?php foreach(['vide'=>'Vide','meuble'=>'Meublé'] as $v=>$l): ?>
              <label class="cursor-pointer flex-1">
                <input type="radio" name="type_meuble" value="<?=$v?>" class="peer hidden" checked/>
                <div class="border border-gray-300 bg-white text-center py-3 text-xs tracking-wider uppercase font-sans peer-checked:bg-black peer-checked:text-white peer-checked:border-black transition-all hover:border-black"><?=$l?></div>
              </label>
              <?php endforeach; ?>
            </div>
          </div>
        </div>

        <!-- Step 1 Navigation Button -->
        <div class="pt-8 border-t border-gray-200 flex justify-end">
          <button type="button" class="btn-next-step btn-lemonde-consultation">
            <span>Étape suivante : Caractéristiques</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>
          </button>
        </div>

      </div>

      <!-- ════════════════════════════════════════════════════════════
           STEP 2: CARACTÉRISTIQUES (Breteuil Step 2)
           ════════════════════════════════════════════════════════════ -->
      <div class="estimation-step hidden space-y-10">
        
        <div class="border-b border-gray-200 pb-4">
          <span class="text-[10px] tracking-[0.3em] uppercase text-gold font-sans font-semibold">ÉTAPE 2 SUR 3</span>
          <h2 class="font-serif text-3xl font-light text-black mt-1">Superficies & Équipements</h2>
        </div>

        <!-- Superficies -->
        <div class="grid sm:grid-cols-2 gap-8">
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Superficie Totale (m²)</label>
            <input type="number" name="superficie_totale" class="input-underline" placeholder="Ex: 250" min="1"/>
          </div>
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Superficie Habitable (m²)</label>
            <input type="number" name="superficie_habitable" class="input-underline" placeholder="Ex: 200" min="1"/>
          </div>
        </div>

        <!-- Niveaux & Pièces -->
        <div class="grid sm:grid-cols-3 gap-6">
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Pièces principales</label>
            <input type="number" name="nombre_pieces" class="input-underline" placeholder="Ex: 5" min="1"/>
          </div>
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Chambres</label>
            <input type="number" name="nombre_chambres" class="input-underline" placeholder="Ex: 3" min="1"/>
          </div>
          <div id="field-niveaux">
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Niveaux / Étages</label>
            <input type="number" name="nombre_niveaux" class="input-underline" placeholder="Ex: 2" min="1"/>
          </div>
        </div>

        <!-- Surfaces Annexes -->
        <div class="grid sm:grid-cols-3 gap-6 pt-4 border-t border-gray-200">
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-gray-500 mb-2">Balcon (m²)</label>
            <input type="number" name="surface_balcon" class="input-underline" placeholder="0"/>
          </div>
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-gray-500 mb-2">Terrasse (m²)</label>
            <input type="number" name="surface_terrasse" class="input-underline" placeholder="0"/>
          </div>
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-gray-500 mb-2">Jardin / Extérieur (m²)</label>
            <input type="number" name="surface_jardin" class="input-underline" placeholder="0"/>
          </div>
        </div>

        <!-- Prestations & Équipements -->
        <div class="pt-4">
          <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-4">Équipements & Atouts</label>
          <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
            <?php foreach(['Piscine privative','Garage / Parking','Chambre personnel','Vue mer / dégagée','Ascenseur','Jardin paysager'] as $eq): ?>
            <label class="flex items-center gap-3 cursor-pointer p-3 bg-white border border-gray-200">
              <input type="checkbox" name="autres_espaces[]" value="<?=$eq?>" class="w-4 h-4 accent-gold"/>
              <span class="text-xs font-sans text-dark"><?=$eq?></span>
            </label>
            <?php endforeach; ?>
          </div>
        </div>

        <!-- Step 2 Navigation Buttons -->
        <div class="pt-8 border-t border-gray-200 flex justify-between">
          <button type="button" class="btn-prev-step btn-gold-outline">
            ← Étape précédente
          </button>
          <button type="button" class="btn-next-step btn-lemonde-consultation">
            <span>Étape suivante : Coordonnées</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>
          </button>
        </div>

      </div>

      <!-- ════════════════════════════════════════════════════════════
           STEP 3: VOS COORDONNÉES + PROJET (Breteuil Step 3)
           ════════════════════════════════════════════════════════════ -->
      <div class="estimation-step hidden space-y-10">
        
        <div class="border-b border-gray-200 pb-4">
          <span class="text-[10px] tracking-[0.3em] uppercase text-gold font-sans font-semibold">ÉTAPE 3 SUR 3</span>
          <h2 class="font-serif text-3xl font-light text-black mt-1">Vos coordonnées & Projet de vie</h2>
        </div>

        <div class="grid sm:grid-cols-2 gap-8">
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Nom et Prénom *</label>
            <input type="text" name="nom" required class="input-underline" placeholder="Votre nom complet"/>
          </div>
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Adresse Email *</label>
            <input type="email" name="email" required class="input-underline" placeholder="votre@email.com"/>
          </div>
        </div>

        <div class="grid sm:grid-cols-2 gap-8">
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Numéro de Téléphone *</label>
            <input type="tel" name="telephone" required class="input-underline" placeholder="+212 6 XX XX XX XX"/>
          </div>
          <div>
            <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Période souhaitée pour la visite</label>
            <select name="vue" class="select-underline">
              <option value="">Sélectionner une disponibilité...</option>
              <option value="Dès que possible">Dès que possible (Urgent)</option>
              <option value="Dans les 7 prochains jours">Dans les 7 prochains jours</option>
              <option value="Dans le mois">Dans le mois</option>
            </select>
          </div>
        </div>

        <!-- Question exigée dans taf.docx : "Êtes-vous également à la recherche d'un bien ?" -->
        <div class="p-6 bg-white border border-gray-200">
          <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-3">
            Êtes-vous également à la recherche d'un nouveau bien à acquérir ou louer ? *
          </label>
          <div class="flex gap-6">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="recherche_bien" value="Oui" class="w-4 h-4 accent-gold" checked/>
              <span class="text-sm font-sans">Oui, je suis en recherche active</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="radio" name="recherche_bien" value="Non" class="w-4 h-4 accent-gold"/>
              <span class="text-sm font-sans">Non, uniquement estimation</span>
            </label>
          </div>
        </div>

        <div>
          <label class="block text-xs tracking-[0.2em] uppercase font-sans text-black font-medium mb-2">Précisions complémentaires</label>
          <textarea name="commentaires" rows="3" class="input-underline resize-none" placeholder="Projet particulier, contraintes, questions..."></textarea>
        </div>

        <!-- Step 3 Submit & Prev Buttons -->
        <div class="pt-8 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-4">
          <button type="button" class="btn-prev-step btn-gold-outline w-full sm:w-auto">
            ← Étape précédente
          </button>
          <button type="submit" class="btn-lemonde-consultation w-full sm:w-auto">
            <span>Valider et envoyer ma demande</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>
          </button>
        </div>

      </div>

    </form>

  </div>
</section>

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