<?php
/**
 * Elementor Widget: GB Destination Nearby
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

class Guide_Benin_Destination_Nearby_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'gb_destination_nearby';
    }

    public function get_title() {
        return __( 'GB Destination Nearby', 'guide-benin' );
    }

    public function get_icon() {
        return 'eicon-navigator';
    }

    public function get_categories() {
        return array( 'guide-benin' );
    }

    protected function register_controls() {
        $this->start_controls_section(
            'section_content',
            array(
                'label' => __( 'Options', 'guide-benin' ),
            )
        );

        $this->add_control(
            'tagline',
            array(
                'label'   => __( 'Sous-titre', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'À proximité',
            )
        );

        $this->add_control(
            'title',
            array(
                'label'   => __( 'Titre Principal', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'Poursuivre le voyage',
            )
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        $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'),
        );
        ?>
        <style>
            .nearby-section-<?php echo esc_attr( $this->get_id() ); ?> .nearby-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
            }
            @media (max-width: 991px) {
                .nearby-section-<?php echo esc_attr( $this->get_id() ); ?> {
                    padding: 48px 24px !important;
                }
                .nearby-section-<?php echo esc_attr( $this->get_id() ); ?> h2 {
                    font-size: 30px !important;
                }
                .nearby-section-<?php echo esc_attr( $this->get_id() ); ?> .nearby-grid {
                    grid-template-columns: repeat(2, 1fr) !important;
                }
            }
            @media (max-width: 767px) {
                .nearby-section-<?php echo esc_attr( $this->get_id() ); ?> .nearby-grid {
                    grid-template-columns: 1fr !important;
                }
            }
        </style>
        <section class="nearby-section-<?php echo esc_attr( $this->get_id() ); ?>" style="background:#FBF4E8; border-top:1px solid #EFE2CE; font-family:'Sora',sans-serif; text-align: left;">
          <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; flex-wrap:wrap; gap:20px;">
              <div>
                <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#E8431E; text-transform:uppercase;"><?php echo esc_html( $settings['tagline'] ); ?></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;"><?php echo esc_html( $settings['title'] ); ?></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 class="nearby-grid">
              <?php
              foreach ($nearby as $n) {
                  $slot_img = function_exists('guide_benin_get_slot_image_src') ? 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>
        <?php
    }
}
