<?php
/**
 * Elementor Widget: GB Vivez Bento
 */

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

class Guide_Benin_Vivez_Bento_Widget extends \Elementor\Widget_Base {

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

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

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

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

    protected function register_controls() {
        $this->start_controls_section(
            'section_content',
            array(
                'label' => __( 'Titre & En-tête', 'guide-benin' ),
            )
        );

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

        $this->add_control(
            'title',
            array(
                'label'   => __( 'Titre Principal', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'Qu\'avez-vous envie de vivre ?',
            )
        );

        $this->end_controls_section();
    }

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

        $envies = array(
            array('name' => 'Safari & grande faune', 'blurb' => 'Éléphants, lions et savanes de la Pendjari et du Parc W.', 'col' => 2, 'row' => 2, 'size' => '30px', 'slotId' => 'viv-env-safari'),
            array('name' => 'Culture & Vodun', 'blurb' => 'Ouidah, Abomey et les cérémonies vivantes.', 'col' => 2, 'row' => 1, 'size' => '24px', 'slotId' => 'viv-env-culture'),
            array('name' => 'Plages & détente', 'blurb' => 'Grand-Popo, Fidjrossè, lagunes.', 'col' => 1, 'row' => 1, 'size' => '21px', 'slotId' => 'viv-env-plage'),
            array('name' => 'Saveurs & marchés', 'blurb' => 'Dantokpa, cuisine, artisanat.', 'col' => 1, 'row' => 1, 'size' => '21px', 'slotId' => 'viv-env-saveurs'),
            array('name' => 'Aventure & plein air', 'blurb' => 'Randonnées et cascades de l’Atacora, balades en pirogue et sorties nature.', 'col' => 2, 'row' => 1, 'size' => '24px', 'slotId' => 'viv-env-aventure'),
        );
        ?>
        <style>
            .bento-section-<?php echo esc_attr( $this->get_id() ); ?> .bento-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 200px;
                gap: 22px;
            }
            @media (max-width: 991px) {
                .bento-section-<?php echo esc_attr( $this->get_id() ); ?> {
                    padding: 48px 24px 40px !important;
                }
                .bento-section-<?php echo esc_attr( $this->get_id() ); ?> h2 {
                    font-size: 30px !important;
                }
                .bento-section-<?php echo esc_attr( $this->get_id() ); ?> .bento-grid {
                    grid-template-columns: repeat(2, 1fr) !important;
                    grid-auto-rows: 220px !important;
                    gap: 16px !important;
                }
                .bento-section-<?php echo esc_attr( $this->get_id() ); ?> .gb-card {
                    grid-column: span 1 !important;
                    grid-row: span 1 !important;
                }
            }
            @media (max-width: 576px) {
                .bento-section-<?php echo esc_attr( $this->get_id() ); ?> .bento-grid {
                    grid-template-columns: 1fr !important;
                    grid-auto-rows: 250px !important;
                }
                .bento-section-<?php echo esc_attr( $this->get_id() ); ?> .gb-card {
                    height: 250px !important;
                }
            }
        </style>
        <section class="bento-section-<?php echo esc_attr( $this->get_id() ); ?>" style="max-width:1180px; margin:0 auto; padding:84px 56px 40px; font-family:'Sora',sans-serif; text-align: left;">
          <div style="margin-bottom:34px;">
            <span style="font-weight:600; font-size:13px; letter-spacing:0.22em; color:#FB9A02; text-transform:uppercase;"><?php echo esc_html( $settings['tagline'] ); ?></span>
            <h2 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:38px; letter-spacing:-0.015em; color:#241009; margin:10px 0 0;"><?php echo esc_html( $settings['title'] ); ?></h2>
          </div>
          
          <div class="bento-grid">
            <?php
            foreach ($envies as $e) {
                $slot_img = function_exists('guide_benin_get_slot_image_src') ? guide_benin_get_slot_image_src($e['slotId']) : '';
                $bg_style = !empty($slot_img) ? "background-image:url('{$slot_img}');" : "background-color:#3A2415;";
                ?>
                <div class="gb-card" style="grid-column:span <?php echo $e['col']; ?>; grid-row:span <?php echo $e['row']; ?>; border-radius:20px; overflow:hidden; position:relative;">
                  <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:26px; pointer-events:none;">
                    <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:<?php echo $e['size']; ?>; color:#FBF7EF; line-height:1.08;"><?php echo esc_html($e['name']); ?></div>
                    <div style="font-weight:400; font-size:13.5px; color:rgba(251,247,239,0.82); margin-top:6px; line-height:1.5;"><?php echo esc_html($e['blurb']); ?></div>
                  </div>
                </div>
                <?php
            }
            ?>
          </div>
        </section>
        <?php
    }
}
