<?php
/**
 * Template Name: Découvrez
 */
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;
}
?>


<div style="font-family:'Sora',sans-serif; color:#241009; background:#FBF7EF; overflow:hidden;">

  <!-- ===================== PAGE HERO ===================== -->
  <section style="position:relative; height:420px; overflow:hidden; background:#241009;">
    <?php
    $hero_img = guide_benin_get_slot_image_src('dec-hero');
    $bg_style = !empty($hero_img) ? "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.45) 0%, rgba(36,16,9,0.35) 50%, rgba(36,16,9,0.82) 100%); pointer-events:none;"></div>
    <div style="position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 56px; max-width:1180px; margin:0 auto; left:0; right:0; pointer-events:none;">
      <div style="display:flex; align-items:center; gap:9px; font-weight:500; font-size:13px; color:rgba(251,247,239,0.7); margin-bottom:18px;">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><span style="color:#FB9A02;">Accueil</span></a>
        <span>›</span>
        <span>Découvrez</span>
      </div>
      <h1 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:64px; line-height:1; letter-spacing:-0.02em; color:#FBF7EF; margin:0 0 18px;">Découvrez le Bénin</h1>
      <p style="font-weight:300; font-size:20px; line-height:1.5; color:rgba(251,247,239,0.9); margin:0; max-width:54ch;">Cités lacustres, palais royaux, parcs sauvages et plages atlantiques — explorez les lieux qui font la richesse de la destination.</p>
    </div>
  </section>

  <!-- ===================== FILTER + GRID ===================== -->
  <section style="max-width:1180px; margin:0 auto; padding:54px 56px 96px;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:38px; flex-wrap:wrap; gap:20px;">
      <div style="display:flex; gap:12px; flex-wrap:wrap;">
        <?php
        $cats = array('Tout', 'Nature & faune', 'Culture & patrimoine', 'Plages & lagunes', 'Villes');
        foreach ($cats as $index => $label) {
            $active_style = $label === 'Tout'
                ? 'background:linear-gradient(95deg,#FB9A02,#E8431E); color:#fff; box-shadow:0 8px 20px rgba(232,67,30,0.26);'
                : 'background:#fff; color:#5D351C; border:1px solid #EFE2CE;';
            echo sprintf(
                '<div class="gb-chip filter-btn" data-filter="%s" style="font-weight:600; font-size:14px; padding:11px 20px; border-radius:30px; transition:all .22s; cursor:pointer; %s">%s</div>',
                esc_attr($label),
                $active_style,
                esc_html($label)
            );
        }
        ?>
      </div>
      <div id="dest-count-label" style="font-weight:500; font-size:14px; color:#9A8270;">12 destinations</div>
    </div>

    <div id="destinations-list-grid" style="display:grid; grid-template-columns:repeat(3,1fr); gap:28px;">
      <?php
      $all_destinations = array(
        array('name' => 'Ganvié', 'region' => 'Sud · Lac Nokoué', 'cat' => 'Nature & faune', 'blurb' => 'La plus grande cité lacustre d’Afrique, surnommée la « Venise de l’Afrique ».', 'href' => home_url('/destination/ganvie/'), 'slotId' => 'dc-ganvie' ),
        array('name' => 'Ouidah', 'region' => 'Sud · Atlantique', 'cat' => 'Culture & patrimoine', 'blurb' => 'Berceau du Vodun, la Route des esclaves et la Porte du Non-Retour.', 'href' => home_url('/destination/ouidah/'), 'slotId' => 'dc-ouidah' ),
        array('name' => 'Palais royaux d’Abomey', 'region' => 'Centre · Zou', 'cat' => 'Culture & patrimoine', 'blurb' => 'Ensemble classé à l’UNESCO, cœur de l’ancien royaume du Dahomey.', 'href' => home_url('/destination/palais-royaux-dabomey/'), 'slotId' => 'dc-abomey' ),
        array('name' => 'Parc de la Pendjari', 'region' => 'Nord · Atacora', 'cat' => 'Nature & faune', 'blurb' => 'Réserve de biosphère : éléphants, lions, hippopotames et savanes.', 'href' => home_url('/destination/parc-de-la-pendjari/'), 'slotId' => 'dc-pendjari' ),
        array('name' => 'Grand-Popo', 'region' => 'Sud · Mono', 'cat' => 'Plages & lagunes', 'blurb' => 'Longues plages de sable, cocotiers et embouchure de la Bouche du Roy.', 'href' => home_url('/destination/grand-popo/'), 'slotId' => 'dc-grandpopo' ),
        array('name' => 'Porto-Novo', 'region' => 'Sud · Ouémé', 'cat' => 'Villes', 'blurb' => 'La capitale, son architecture afro-brésilienne et ses musées.', 'href' => home_url('/destination/porto-novo/'), 'slotId' => 'dc-portonovo' ),
        array('name' => 'Cotonou', 'region' => 'Sud · Littoral', 'cat' => 'Villes', 'blurb' => 'Le poumon économique : marché Dantokpa, plage de Fidjrossè et art contemporain.', 'href' => home_url('/destination/cotonou/'), 'slotId' => 'dc-cotonou' ),
        array('name' => 'Tata Somba, Boukoumbé', 'region' => 'Nord · Atacora', 'cat' => 'Culture & patrimoine', 'blurb' => 'Les châteaux de terre du pays Tammari, habitat traditionnel fortifié.', 'href' => home_url('/destination/tata-somba-boukoumbe/'), 'slotId' => 'dc-tatasomba' ),
        array('name' => 'Dassa-Zoumè', 'region' => 'Centre · Collines', 'cat' => 'Culture & patrimoine', 'blurb' => 'Les collines sacrées et le grand pèlerinage marial d’Arigbo.', 'href' => home_url('/destination/dassa-zoume/'), 'slotId' => 'dc-dassa' ),
        array('name' => 'Lac Ahémé & Possotomè', 'region' => 'Sud · Mono', 'cat' => 'Plages & lagunes', 'blurb' => 'Lagune paisible, sources thermales et villages de pêcheurs.', 'href' => home_url('/destination/lac-aheme-possotome/'), 'slotId' => 'dc-aheme' ),
        array('name' => 'Parc national du W', 'region' => 'Nord · Alibori', 'cat' => 'Nature & faune', 'blurb' => 'Réserve transfrontalière classée UNESCO, sanctuaire de la grande faune.', 'href' => home_url('/destination/parc-national-du-w/'), 'slotId' => 'dc-parcw' ),
        array('name' => 'Chutes de Tanougou', 'region' => 'Nord · Atacora', 'cat' => 'Nature & faune', 'blurb' => 'Cascade spectaculaire nichée dans les reliefs de l’Atacora.', 'href' => home_url('/destination/chutes-de-tanougou/'), 'slotId' => 'dc-tanougou' ),
      );

      foreach ($all_destinations as $d) {
          $slot_img = guide_benin_get_slot_image_src($d['slotId']);
          $bg_style = !empty($slot_img) ? "background-image:url('{$slot_img}');" : "background-color:#3A2415;";
          ?>
          <a href="<?php echo esc_url($d['href']); ?>" class="destination-item gb-card" data-cat="<?php echo esc_attr($d['cat']); ?>" style="background:#fff; border-radius:20px; overflow:hidden; border:1px solid #EFE2CE; display:block;">
            <div style="position:relative; height:240px; overflow:hidden; <?php echo $bg_style; ?> background-size:cover; background-position:center;">
              <div style="position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:7px; background:rgba(26,11,5,0.78); backdrop-filter:blur(4px); color:#FBF7EF; font-weight:600; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; padding:7px 13px; border-radius:20px;"><?php echo esc_html($d['cat']); ?></div>
            </div>
            <div style="padding:26px;">
              <div style="display:flex; align-items:center; gap:7px; margin-bottom:9px;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#E8431E" stroke-width="2.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>
                <span style="font-weight:600; font-size:12px; letter-spacing:0.06em; color:#E8431E; text-transform:uppercase;"><?php echo esc_html($d['region']); ?></span>
              </div>
              <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:24px; color:#241009; line-height:1.1; margin-bottom:10px;"><?php echo esc_html($d['name']); ?></div>
              <div style="font-weight:400; font-size:14.5px; color:#6A4A38; line-height:1.6; margin-bottom:20px;"><?php echo esc_html($d['blurb']); ?></div>
              <div class="gb-navlink" style="display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:#5D351C;">Découvrir
                <svg width="15" height="15" 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>
              </div>
            </div>
          </a>
          <?php
      }
      ?>
    </div>
  </section>

  <!-- ===================== SORTEZ ===================== -->
  <section style="background:#241009; position:relative; overflow:hidden;">
    <div style="position:absolute; inset:0; background-image:radial-gradient(circle at 16px 16px, rgba(251,154,2,0.08) 2.5px, transparent 3px); background-size:56px 56px; opacity:0.6;"></div>
    <div style="position:relative; max-width:1180px; margin:0 auto; padding:88px 56px;">
      <div style="display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:20px;">
        <div>
          <div style="display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FB9A02" stroke-width="2.2"><path d="M12 2v4"></path><path d="m6.3 6.3 2.8 2.8"></path><path d="M2 12h4"></path><circle cx="12" cy="14" r="7"></circle></svg>
            <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#FB9A02; text-transform:uppercase;">Sortez</span>
          </div>
          <h2 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:40px; letter-spacing:-0.015em; color:#FBF7EF; margin:0;">Événements &amp; soirées</h2>
        </div>
        <p style="font-weight:300; font-size:16px; line-height:1.6; color:rgba(251,247,239,0.72); margin:0; max-width:40ch;">Festivals, concerts et nuits béninoises — l'agenda pour vivre la destination après le coucher du soleil.</p>
      </div>

      <!-- featured event -->
      <?php
      $feat_img = guide_benin_get_slot_image_src('sortez-feature');
      $feat_style = !empty($feat_img) ? "background-image:url('{$feat_img}');" : "background-color:#3A2415;";
      ?>
      <a href="<?php echo esc_url( home_url( '/actualites/' ) ); ?>" style="display:block; margin:34px 0 24px;">
        <div class="gb-card" style="display:grid; grid-template-columns:1.3fr 1fr; background:rgba(251,247,239,0.04); border:1px solid rgba(251,247,239,0.1); border-radius:22px; overflow:hidden; min-height:300px;">
          <div style="position:relative; overflow:hidden; <?php echo $feat_style; ?> background-size:cover; background-position:center;">
            <div style="position:absolute; top:18px; left:18px; background:linear-gradient(95deg,#FB9A02,#E8431E); color:#fff; font-weight:700; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; padding:8px 15px; border-radius:20px;">À l'affiche</div>
          </div>
          <div style="padding:44px; display:flex; flex-direction:column; justify-content:center;">
            <div style="display:flex; align-items:center; gap:8px; margin-bottom:14px;">
              <span style="font-weight:600; font-size:11px; letter-spacing:0.08em; color:#FB9A02; text-transform:uppercase;">Festival</span>
              <span style="width:3px; height:3px; border-radius:50%; background:rgba(251,247,239,0.3);"></span>
              <span style="font-weight:400; font-size:12px; color:rgba(251,247,239,0.6);">10 - 15 Janvier 2026</span>
            </div>
            <h4 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:32px; color:#FBF7EF; line-height:1.08; margin:0 0 12px;">Festival International Vodun</h4>
            <p style="font-weight:300; font-size:15px; line-height:1.6; color:rgba(251,247,239,0.72); margin:0 0 24px; max-width:38ch;">Le rendez-vous culturel majeur de Ouidah : chants, danses et parades des divinités au rythme des tambours sacrés.</p>
            <div class="gb-navlink" style="display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:#FB9A02;">Voir le programme
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FB9A02" stroke-width="2.2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </div>
          </div>
        </div>
      </a>

      <!-- events list -->
      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:22px;">
        <?php
        $events = array(
          array('day' => '18', 'month' => 'Jan', 'type' => 'Concert', 'name' => 'Nuit Afrobeat à Cotonou', 'place' => 'Blues Bar · Cotonou'),
          array('day' => '25', 'month' => 'Jan', 'type' => 'Soirée', 'name' => 'Sunset Party — Fidjrossè', 'place' => 'Plage de Fidjrossè · Cotonou'),
          array('day' => '08', 'month' => 'Fév', 'type' => 'Festival', 'name' => 'Récréâtrales — scène ouverte', 'place' => 'Quartier Jonquet · Cotonou'),
        );
        foreach ($events as $ev) {
            ?>
            <div style="display:flex; align-items:center; gap:20px; background:rgba(251,247,239,0.03); border:1px solid rgba(251,247,239,0.07); padding:20px; border-radius:18px;">
              <div style="flex:0 0 auto; width:58px; height:58px; border-radius:12px; background:#FBF7EF; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#241009; text-align:center;">
                <span style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:18px; line-height:1;"><?php echo esc_html($ev['day']); ?></span>
                <span style="font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:#E8431E; margin-top:2px;"><?php echo esc_html($ev['month']); ?></span>
              </div>
              <div>
                <span style="font-weight:600; font-size:10px; color:#FB9A02; text-transform:uppercase; letter-spacing:0.06em;"><?php echo esc_html($ev['type']); ?></span>
                <h5 style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:16px; color:#FBF7EF; margin:3px 0 2px; line-height:1.15;"><?php echo esc_html($ev['name']); ?></h5>
                <span style="font-size:12.5px; color:rgba(251,247,239,0.5);"><?php echo esc_html($ev['place']); ?></span>
              </div>
            </div>
            <?php
        }
        ?>
      </div>
    </div>
  </section>

  <!-- ===================== MAP / PLAN CTA ===================== -->
  <?php
  $map_img = guide_benin_get_slot_image_src('dec-map');
  $map_style = !empty($map_img) ? "background-image:url('{$map_img}');" : "background-color:#3A2415;";
  ?>
  <section style="max-width:1180px; margin:0 auto; padding:88px 56px 96px;">
    <div style="border-radius:28px; overflow:hidden; position:relative; background:#241009; display:grid; grid-template-columns:1fr 1fr; min-height:340px;">
      <div style="padding:62px 56px; display:flex; flex-direction:column; justify-content:center;">
        <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#FB9A02; text-transform:uppercase; margin-bottom:16px;">Préparer sa visite</span>
        <h3 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:34px; line-height:1.1; color:#FBF7EF; margin:0 0 16px;">Composez votre itinéraire idéal</h3>
        <p style="font-weight:300; font-size:16px; line-height:1.65; color:rgba(251,247,239,0.74); margin:0 0 30px; max-width:42ch;">Du sud au nord, organisez votre voyage étape par étape with nos suggestions de circuits et nos partenaires locaux.</p>
        <a href="<?php echo esc_url( home_url( '/organisez/' ) ); ?>" class="gb-btn" style="align-self:flex-start; background:linear-gradient(95deg,#FB9A02,#E8431E); color:#FBF7EF; font-weight:600; font-size:15px; padding:16px 30px; border-radius:40px;">Voir les itinéraires</a>
      </div>
      <div style="position:relative; <?php echo $map_style; ?> background-size:cover; background-position:center; background-repeat:no-repeat;">
      </div>
    </div>
  </section>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const items = document.querySelectorAll('.destination-item');
    const countLabel = document.getElementById('dest-count-label');

    filterButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const filterValue = this.getAttribute('data-filter');

            // Reset buttons styling
            filterButtons.forEach(b => {
                b.style.background = '#fff';
                b.style.color = '#5D351C';
                b.style.border = '1px solid #EFE2CE';
                b.style.boxShadow = 'none';
            });

            // Set active button styling
            this.style.background = 'linear-gradient(95deg,#FB9A02,#E8431E)';
            this.style.color = '#fff';
            this.style.border = 'none';
            this.style.boxShadow = '0 8px 20px rgba(232,67,30,0.26)';

            // Filter items
            let visibleCount = 0;
            items.forEach(item => {
                const cat = item.getAttribute('data-cat');
                if (filterValue === 'Tout' || cat === filterValue) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });

            // Update label
            countLabel.textContent = visibleCount + (visibleCount > 1 ? ' destinations' : ' destination');
        });
    });
});
</script>

<?php
get_footer();
