<?php
/**
 * Template for displaying single destination custom post type posts
 */
get_header();

// Check if this post is built with Elementor to bypass standard template
if ( class_exists( '\Elementor\Plugin' ) && \Elementor\Plugin::$instance->documents->get( get_the_ID() ) && \Elementor\Plugin::$instance->documents->get( get_the_ID() )->is_built_with_elementor() ) {
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
    get_footer();
    return;
}


// Fetch metadata from custom fields or use smart defaults based on post slug
$post_slug = sanitize_title( get_the_title() );
$defaults = array(
    'ganvie' => array(
        'region' => 'Sud · Lac Nokoué',
        'duration' => 'Demi-journée conseillée',
        'access' => 'Pirogue depuis Abomey-Calavi',
        'ideal' => 'Tôt le matin',
        'rating' => 'Patrimoine UNESCO'
    ),
    'ouidah' => array(
        'region' => 'Sud · Atlantique',
        'duration' => '1 journée',
        'access' => 'Route nationale inter-états (RNIE1)',
        'ideal' => 'Matin ou fin d\'après-midi',
        'rating' => 'Berceau du Vodun'
    ),
    'palais-royaux-dabomey' => array(
        'region' => 'Centre · Zou',
        'duration' => 'Demi-journée',
        'access' => 'Route depuis Cotonou (135 km)',
        'ideal' => 'Matinée',
        'rating' => 'Patrimoine mondial UNESCO'
    ),
    'parc-de-la-pendjari' => array(
        'region' => 'Nord · Atacora',
        'duration' => '2 à 3 jours conseillés',
        'access' => 'Véhicule 4x4 requis',
        'ideal' => 'Décembre à Avril (saison sèche)',
        'rating' => 'Réserve de biosphère'
    ),
    'grand-popo' => array(
        'region' => 'Sud · Mono',
        'duration' => '1 à 2 jours',
        'access' => 'Route depuis Cotonou (80 km)',
        'ideal' => 'Fin d\'après-midi',
        'rating' => 'Station balnéaire'
    ),
    'porto-novo' => array(
        'region' => 'Sud · Ouémé',
        'duration' => '1 journée',
        'access' => 'Route depuis Cotonou (30 km)',
        'ideal' => 'Toute la journée',
        'rating' => 'Capitale administrative'
    ),
    'cotonou' => array(
        'region' => 'Sud · Littoral',
        'duration' => '1 à 3 jours',
        'access' => 'Aéroport international',
        'ideal' => 'Toute la journée',
        'rating' => 'Poumon économique'
    ),
);

$default = isset( $defaults[ $post_slug ] ) ? $defaults[ $post_slug ] : array(
    'region' => 'Sud · Lac Nokoué',
    'duration' => 'Demi-journée conseillée',
    'access' => 'Pirogue depuis Abomey-Calavi',
    'ideal' => 'Tôt le matin',
    'rating' => 'Patrimoine UNESCO'
);

$region = get_post_meta( get_the_ID(), '_destination_region', true ) ?: $default['region'];
$duration = get_post_meta( get_the_ID(), '_destination_duration', true ) ?: $default['duration'];
$access_text = get_post_meta( get_the_ID(), '_destination_access', true ) ?: $default['access'];
$ideal_time = get_post_meta( get_the_ID(), '_destination_ideal', true ) ?: $default['ideal'];
$rating = get_post_meta( get_the_ID(), '_destination_rating', true ) ?: $default['rating'];


if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        ?>
        <div style="font-family:'Sora',sans-serif; color:#241009; background:#FBF7EF; overflow:hidden;">

          <!-- ===================== HERO ===================== -->
          <section style="position:relative; height:560px; overflow:hidden; background:#241009;">
            <?php
            $hero_img = get_the_post_thumbnail_url( get_the_ID(), 'full' ) ? get_the_post_thumbnail_url( get_the_ID(), 'full' ) : ( guide_benin_get_slot_image_src('gv-hero') ? guide_benin_get_slot_image_src('gv-hero') : 'https://dahomeydiscovery.com/wp-content/uploads/2026/05/Attractions-banner.jpg' );
            $bg_style = "background-image:url('{$hero_img}');";

            ?>
            <div style="position:absolute; inset:0; <?php echo $bg_style; ?> background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
            <div style="position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,16,9,0.5) 0%, rgba(36,16,9,0.1) 40%, rgba(36,16,9,0.85) 100%); pointer-events:none;"></div>
            <div style="position:absolute; inset:0; max-width:1180px; margin:0 auto; left:0; right:0; padding:0 56px; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:48px; pointer-events:none;">
              <div style="display:flex; align-items:center; gap:9px; font-weight:500; font-size:13px; color:rgba(251,247,239,0.78); margin-bottom:18px;">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><span style="color:#FB9A02;">Accueil</span></a>
                <span>›</span>
                <a href="<?php echo esc_url( home_url( '/decouvrez/' ) ); ?>"><span style="color:#FB9A02;">Découvrez</span></a>
                <span>›</span>
                <span><?php the_title(); ?></span>
              </div>
              <div style="display:inline-flex; align-items:center; gap:8px; background:rgba(251,154,2,0.92); color:#241009; font-weight:700; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; padding:7px 14px; border-radius:20px; align-self:flex-start; margin-bottom:18px;">Destination</div>
              <h1 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:78px; line-height:0.98; letter-spacing:-0.02em; color:#FBF7EF; margin:0 0 14px;"><?php the_title(); ?></h1>
              <div style="display:flex; align-items:center; gap:22px; flex-wrap:wrap;">
                <div style="display:flex; align-items:center; gap:8px; font-weight:500; font-size:16px; color:rgba(251,247,239,0.92);">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FB9A02" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                  <?php echo esc_html($region); ?>
                </div>
                <div style="display:flex; align-items:center; gap:8px; font-weight:500; font-size:16px; color:rgba(251,247,239,0.92);">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FB9A02" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 15 14"></polyline></svg>
                  <?php echo esc_html($duration); ?>
                </div>
              </div>
            </div>
          </section>

          <!-- ===================== INTRO + INFO CARD ===================== -->
          <section style="max-width:1180px; margin:0 auto; padding:72px 56px 40px; display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start;">
            <div>
              <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#E8431E; text-transform:uppercase;">Le lieu</span>
              <h2 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:36px; line-height:1.1; letter-spacing:-0.015em; color:#241009; margin:12px 0 22px;">Découvrir la destination</h2>
              <div style="font-weight:400; font-size:17px; line-height:1.8; color:#3A2415; margin:0;">
                <?php the_content(); ?>
              </div>
            </div>
            
            <div style="background:#fff; border:1px solid #EFE2CE; border-radius:20px; padding:32px;">
              <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:18px; color:#241009; margin-bottom:22px;">En bref</div>
              <div style="display:flex; flex-direction:column; gap:18px;">
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Région</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($region); ?></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Accès</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($access_text); ?></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Durée</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($duration); ?></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Idéal</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($ideal_time); ?></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #F0E6D6;">
                  <span style="font-weight:500; font-size:14px; color:#9A8270;">Classement</span>
                  <span style="font-weight:600; font-size:14px; color:#241009; text-align:right;"><?php echo esc_html($rating); ?></span>
                </div>
              </div>
              <div class="gb-btn" style="margin-top:26px; text-align:center; background:linear-gradient(95deg,#FB9A02,#E8431E); color:#FBF7EF; font-weight:600; font-size:15px; padding:15px; border-radius:30px; cursor:pointer; width:100%;">Réserver une excursion</div>
              
              <?php
              $etab_id = get_post_meta( get_the_ID(), '_associated_etablissement_id', true );
              if ( $etab_id ) {
                  $etab_post = get_post( $etab_id );
                  if ( $etab_post ) {
                      ?>
                      <div style="margin-top: 24px; padding-top: 20px; border-top: 1px dashed #EFE2CE;">
                        <span style="font-weight:600; font-size:11px; letter-spacing:0.06em; color:#9A8270; text-transform:uppercase;">Géré par</span>
                        <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:18px; color:#241009; margin-top:4px;"><?php echo esc_html( $etab_post->post_title ); ?></div>
                        <div style="font-size:13px; color:#6A4A38; margin-top:4px;"><?php echo wp_trim_words( $etab_post->post_content, 14 ); ?></div>
                      </div>
                      <?php
                  }
              } else {
                  ?>
                  <div style="margin-top: 24px; padding-top: 20px; border-top: 1px dashed #EFE2CE;">
                    <div id="gb-claim-trigger" class="gb-btn" style="text-align:center; background:#241009; color:#FBF7EF; font-weight:600; font-size:13.5px; padding:12px; border-radius:30px; cursor:pointer; width:100%;">Revendiquer cet article</div>
                  </div>
                  <?php
              }
              ?>
            </div>

          </section>

          <!-- ===================== GALLERY ===================== -->
          <section style="max-width:1180px; margin:0 auto; padding:40px 56px;">
            <div style="display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px;">
              <?php
              $gallery_slots = array(
                array('id' => 'gv-gal-1', 'col' => 2, 'row' => 2),
                array('id' => 'gv-gal-2', 'col' => 2, 'row' => 1),
                array('id' => 'gv-gal-3', 'col' => 1, 'row' => 1),
                array('id' => 'gv-gal-4', 'col' => 1, 'row' => 1),
                array('id' => 'gv-gal-5', 'col' => 2, 'row' => 1),
              );
              foreach ($gallery_slots as $g) {
                  $slot_img = guide_benin_get_slot_image_src($g['id']);
                  $bg_style = !empty($slot_img) ? "background-image:url('{$slot_img}');" : "background-color:#3A2415;";
                  ?>
                  <div class="gb-gal" style="grid-column:span <?php echo $g['col']; ?>; grid-row:span <?php echo $g['row']; ?>; border-radius:18px; position:relative; overflow:hidden;">
                    <div class="gb-galimg" style="position:absolute; inset:0; <?php echo $bg_style; ?> background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
                  </div>
                  <?php
              }
              ?>
            </div>
          </section>

          <!-- ===================== À VOIR / À FAIRE ===================== -->
          <section style="max-width:1180px; margin:0 auto; padding:56px 56px;">
            <div style="margin-bottom:36px;">
              <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#FB9A02; text-transform:uppercase;">À voir, à faire</span>
              <h2 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:36px; letter-spacing:-0.015em; color:#241009; margin:10px 0 0;">Les incontournables</h2>
            </div>
            
            <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:20px;">
              <?php
              $todo = array(
                array('n' => '1', 'title' => 'Les visites guidées', 'text' => 'Découvrez les trésors historiques et culturels accompagnés par des guides locaux certifiés.'),
                array('n' => '2', 'title' => 'L’artisanat local', 'text' => 'Allez à la rencontre des tisserands, potiers et créateurs qui font vivre les savoir-faire.'),
                array('n' => '3', 'title' => 'Paysages et nature', 'text' => 'Prenez le temps d’admirer les couchers de soleil et les panoramas exceptionnels de la région.'),
                array('n' => '4', 'title' => 'Gastronomie', 'text' => 'Dégustez les plats traditionnels préparés avec soin par les habitants de la communauté.'),
              );
              foreach ($todo as $t) {
                  ?>
                  <div style="display:flex; gap:20px; align-items:flex-start; background:#fff; border:1px solid #EFE2CE; border-radius:18px; padding:26px;">
                    <div style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:22px; color:#fff; background:linear-gradient(135deg,#FBA70A,#E8431E); width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center;"><?php echo esc_html($t['n']); ?></div>
                    <div>
                      <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:19px; color:#241009; margin-bottom:6px;"><?php echo esc_html($t['title']); ?></div>
                      <div style="font-weight:400; font-size:14.5px; color:#6A4A38; line-height:1.6;"><?php echo esc_html($t['text']); ?></div>
                    </div>
                  </div>
                  <?php
              }
              ?>
            </div>
          </section>

          <!-- ===================== PRATIQUE + MAP ===================== -->
          <?php
          $map_img = guide_benin_get_slot_image_src('gv-map');
          $map_style = !empty($map_img) ? "background-image:url('{$map_img}');" : "background-color:#3A2415;";
          ?>
          <section style="max-width:1180px; margin:0 auto; padding:40px 56px 72px;">
            <div style="display:grid; grid-template-columns:1fr 1.1fr; gap:24px; align-items:stretch;">
              <div style="background:#241009; border-radius:24px; padding:48px;">
                <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#FB9A02; text-transform:uppercase;">Y aller</span>
                <h3 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:28px; line-height:1.1; color:#FBF7EF; margin:12px 0 24px;">Accès & conseils</h3>
                <div style="display:flex; flex-direction:column; gap:18px;">
                  <div style="display:flex; gap:14px; align-items:flex-start;">
                    <div style="width:8px; height:8px; flex:0 0 auto; margin-top:7px; border-radius:50%; background:#FB9A02;"></div>
                    <div style="font-weight:400; font-size:15px; line-height:1.6; color:rgba(251,247,239,0.82);">Renseignez-vous auprès de l’Office du Tourisme pour connaître les moyens d’accès les plus directs.</div>
                  </div>
                  <div style="display:flex; gap:14px; align-items:flex-start;">
                    <div style="width:8px; height:8px; flex:0 0 auto; margin-top:7px; border-radius:50%; background:#FB9A02;"></div>
                    <div style="font-weight:400; font-size:15px; line-height:1.6; color:rgba(251,247,239,0.82);">Privilégiez les départs tôt le matin pour profiter des plus belles lumières et éviter la chaleur.</div>
                  </div>
                  <div style="display:flex; gap:14px; align-items:flex-start;">
                    <div style="width:8px; height:8px; flex:0 0 auto; margin-top:7px; border-radius:50%; background:#FB9A02;"></div>
                    <div style="font-weight:400; font-size:15px; line-height:1.6; color:rgba(251,247,239,0.82);">Faites appel à un guide certifié pour un accompagnement optimal et respectueux de la communauté.</div>
                  </div>
                </div>
              </div>
              <div style="border-radius:24px; overflow:hidden; position:relative; min-height:360px; border:1px solid #EFE2CE; <?php echo $map_style; ?> background-size:cover; background-position:center; background-repeat:no-repeat;">
              </div>
            </div>
          </section>

          <!-- ===================== À PROXIMITÉ ===================== -->
          <section style="background:#FBF4E8; border-top:1px solid #EFE2CE;">
            <div style="max-width:1180px; margin:0 auto; padding:80px 56px;">
              <div style="display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px;">
                <div>
                  <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#E8431E; text-transform:uppercase;">À proximité</span>
                  <h2 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:34px; letter-spacing:-0.015em; color:#241009; margin:10px 0 0;">Poursuivre le voyage</h2>
                </div>
                <a href="<?php echo esc_url( home_url( '/decouvrez/' ) ); ?>"><span class="gb-navlink" style="display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:#5D351C;">Toutes les destinations
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5D351C" stroke-width="2.2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                </span></a>
              </div>
              <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:24px;">
                <?php
                $nearby = array(
                  array('name' => 'Cotonou', 'dist' => 'à 25 km · 40 min', 'slotId' => 'gv-near-1'),
                  array('name' => 'Ouidah', 'dist' => 'à 50 km · 1 h', 'slotId' => 'gv-near-2'),
                  array('name' => 'Porto-Novo', 'dist' => 'à 40 km · 50 min', 'slotId' => 'gv-near-3'),
                );
                foreach ($nearby as $n) {
                    $slot_img = guide_benin_get_slot_image_src($n['slotId']);
                    $bg_style = !empty($slot_img) ? "background-image:url('{$slot_img}');" : "background-color:#3A2415;";
                    ?>
                    <a href="<?php echo esc_url( home_url( '/destination/' . sanitize_title($n['name']) . '/' ) ); ?>">
                      <div class="gb-card" style="border-radius:20px; overflow:hidden; position:relative; height:280px;">
                        <div style="position:absolute; inset:0; <?php echo $bg_style; ?> background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
                        <div style="position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,16,9,0) 40%, rgba(36,16,9,0.85) 100%); pointer-events:none;"></div>
                        <div style="position:absolute; left:0; right:0; bottom:0; padding:24px; pointer-events:none;">
                          <div style="font-weight:600; font-size:11px; letter-spacing:0.06em; color:#FB9A02; text-transform:uppercase; margin-bottom:6px;"><?php echo esc_html($n['dist']); ?></div>
                          <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:23px; color:#FBF7EF; line-height:1.08;"><?php echo esc_html($n['name']); ?></div>
                        </div>
                      </div>
                    </a>
                    <?php
                }
                ?>
              </div>
            </div>
          </section>

         <!-- Claim Modal -->
         <div id="gb-claim-modal" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(26,11,5,0.7); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px;">
           <div style="background:#fff; border-radius:24px; max-width:480px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,0.3); overflow:hidden; border:1px solid #EFE2CE; position:relative; font-family:'Sora',sans-serif;">
             
             <!-- Header -->
             <div style="padding:24px 30px; background:#241009; color:#FBF7EF; display:flex; justify-content:space-between; align-items:center;">
               <h3 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:22px; margin:0;">Revendiquer cet article</h3>
               <div id="gb-claim-close" style="cursor:pointer; opacity:0.8; font-size:24px; line-height:1;">&times;</div>
             </div>

             <!-- Inner container -->
             <div style="padding:30px;" id="gb-modal-body">
               <?php if ( ! is_user_logged_in() ) : ?>
                 <!-- STEP 1: LOGIN / REGISTER -->
                 <div style="display:flex; border-bottom:1px solid #EFE2CE; margin-bottom:24px;">
                   <div id="tab-login-btn" style="flex:1; text-align:center; padding-bottom:12px; font-weight:700; font-size:15px; color:#E8431E; border-bottom:2px solid #E8431E; cursor:pointer;">Connexion</div>
                   <div id="tab-register-btn" style="flex:1; text-align:center; padding-bottom:12px; font-weight:700; font-size:15px; color:#9A8270; border-bottom:2px solid transparent; cursor:pointer;">Créer un compte</div>
                 </div>

                 <form id="gb-auth-form">
                   <input type="hidden" name="auth_action" id="gb-auth-action" value="login">
                   
                   <div id="reg-fields" style="display:none; margin-bottom:16px;">
                     <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Nom de votre établissement</label>
                     <input type="text" name="etablissement_name" placeholder="Ex: Awalé Plage" style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; background:#FFF;">
                   </div>

                   <div style="margin-bottom:16px;">
                     <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Adresse e-mail</label>
                     <input type="email" name="email" required placeholder="Ex: partenaire@gmail.com" style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; background:#FFF;">
                   </div>

                   <div style="margin-bottom:20px;">
                     <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Mot de passe</label>
                     <input type="password" name="password" required placeholder="Saisissez un mot de passe" style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; background:#FFF;">
                   </div>

                   <div id="gb-auth-error" style="color:#E8431E; font-size:13.5px; margin-bottom:16px; display:none;"></div>

                   <button type="submit" class="gb-btn" style="background:linear-gradient(95deg,#FB9A02,#E8431E); color:#fff; font-weight:600; font-size:15px; padding:14px; border-radius:30px; width:100%; border:none; outline:none; cursor:pointer;">Suivant</button>
                 </form>
               <?php else : ?>
                 <!-- STEP 2: JUSTIFICATION -->
                 <form id="gb-claim-form">
                   <input type="hidden" name="post_id" value="<?php echo get_the_ID(); ?>">
                   <div style="margin-bottom:20px;">
                     <label style="font-weight:600; font-size:12px; color:#9A8270; text-transform:uppercase; display:block; margin-bottom:6px;">Justificatif de revendication</label>
                     <textarea name="justification" required rows="5" placeholder="Décrivez votre lien avec cet établissement et fournissez des preuves (site web, SIRET, contact professionnel) pour que l'administrateur puisse valider votre demande." style="width:100%; padding:12px; border-radius:10px; border:1px solid #EFE2CE; font-size:14px; outline:none; font-family:'Sora',sans-serif; line-height:1.5; resize:none; background:#FFF;"></textarea>
                   </div>

                   <div id="gb-claim-error" style="color:#E8431E; font-size:13.5px; margin-bottom:16px; display:none;"></div>
                   <div id="gb-claim-success" style="color:green; font-size:13.5px; margin-bottom:16px; display:none;"></div>

                   <button type="submit" class="gb-btn" style="background:linear-gradient(95deg,#FB9A02,#E8431E); color:#fff; font-weight:600; font-size:15px; padding:14px; border-radius:30px; width:100%; border:none; outline:none; cursor:pointer;">Soumettre la demande</button>
                 </form>
               <?php endif; ?>
             </div>
           </div>
         </div>

         <script>
         document.addEventListener('DOMContentLoaded', function() {
             const trigger = document.getElementById('gb-claim-trigger');
             const modal = document.getElementById('gb-claim-modal');
             const closeBtn = document.getElementById('gb-claim-close');

             if (trigger) {
                 trigger.addEventListener('click', () => modal.style.display = 'flex');
             }
             if (closeBtn) {
                 closeBtn.addEventListener('click', () => modal.style.display = 'none');
             }
             window.addEventListener('click', (e) => {
                 if (e.target === modal) modal.style.display = 'none';
             });

             // Handle Login/Register Tabs Toggle
             const tabLogin = document.getElementById('tab-login-btn');
             const tabRegister = document.getElementById('tab-register-btn');
             const authAction = document.getElementById('gb-auth-action');
             const regFields = document.getElementById('reg-fields');

             if (tabLogin && tabRegister) {
                 tabLogin.addEventListener('click', () => {
                     tabLogin.style.color = '#E8431E';
                     tabLogin.style.borderBottom = '2px solid #E8431E';
                     tabRegister.style.color = '#9A8270';
                     tabRegister.style.borderBottom = '2px solid transparent';
                     authAction.value = 'login';
                     regFields.style.display = 'none';
                 });

                 tabRegister.addEventListener('click', () => {
                     tabRegister.style.color = '#E8431E';
                     tabRegister.style.borderBottom = '2px solid #E8431E';
                     tabLogin.style.color = '#9A8270';
                     tabLogin.style.borderBottom = '2px solid transparent';
                     authAction.value = 'register';
                     regFields.style.display = 'block';
                 });
             }

             // Handle Authentication Form Submit via AJAX
             const authForm = document.getElementById('gb-auth-form');
             if (authForm) {
                 authForm.addEventListener('submit', function(e) {
                     e.preventDefault();
                     const errorDiv = document.getElementById('gb-auth-error');
                     errorDiv.style.display = 'none';

                     const formData = new FormData(this);
                     formData.append('action', 'gb_auth_user');
                     formData.append('security', gb_auth_vars.nonce);

                     fetch(gb_auth_vars.ajax_url, {
                         method: 'POST',
                         body: formData
                     })
                     .then(res => res.json())
                     .then(data => {
                         if (data.success) {
                             location.reload(); 
                         } else {
                             errorDiv.textContent = data.data.message;
                             errorDiv.style.display = 'block';
                         }
                     })
                     .catch(() => {
                         errorDiv.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                         errorDiv.style.display = 'block';
                     });
                 });
             }

             // Handle Claim Form Submit via AJAX
             const claimForm = document.getElementById('gb-claim-form');
             if (claimForm) {
                 claimForm.addEventListener('submit', function(e) {
                     e.preventDefault();
                     const errorDiv = document.getElementById('gb-claim-error');
                     const successDiv = document.getElementById('gb-claim-success');
                     errorDiv.style.display = 'none';
                     successDiv.style.display = 'none';

                     const formData = new FormData(this);
                     formData.append('action', 'gb_submit_claim');
                     formData.append('security', gb_auth_vars.nonce);

                     fetch(gb_auth_vars.ajax_url, {
                         method: 'POST',
                         body: formData
                     })
                     .then(res => res.json())
                     .then(data => {
                         if (data.success) {
                             successDiv.textContent = data.data.message;
                             successDiv.style.display = 'block';
                             claimForm.reset();
                             setTimeout(() => {
                                 modal.style.display = 'none';
                                 location.reload();
                             }, 2500);
                         } else {
                             errorDiv.textContent = data.data.message;
                             errorDiv.style.display = 'block';
                         }
                     })
                     .catch(() => {
                         errorDiv.textContent = 'Une erreur est survenue. Veuillez réessayer.';
                         errorDiv.style.display = 'block';
                     });
                 });
             }
         });
         </script>

        </div>
        <?php
    endwhile;
endif;
get_footer();
