<?php
/**
 * Elementor Widget: GB Accès & Déplacement
 */

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

class Guide_Benin_Acces_Widget extends \Elementor\Widget_Base {

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

    public function get_title() {
        return __( 'GB Accès & Déplacement', 'guide-benin' );
    }

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

    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' => 'ACCÈS',
            )
        );

        $this->add_control(
            'title',
            array(
                'label'   => __( 'Titre Principal', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'Comment venir & se déplacer',
            )
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'card_title',
            array(
                'label'   => __( 'Titre de l\'info', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'Vol international',
            )
        );

        $repeater->add_control(
            'card_text',
            array(
                'label'   => __( 'Description', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXTAREA,
                'default' => 'Arrivée à l’aéroport de Cotonou-Cadjehoun, relié à Paris, Bruxelles et plusieurs hubs africains.',
            )
        );

        $repeater->add_control(
            'card_icon',
            array(
                'label'       => __( 'Nom de l\'icône Lucide', 'guide-benin' ),
                'type'        => \Elementor\Controls_Manager::TEXT,
                'default'     => 'plane',
                'description' => __( 'Saisir le nom d\'une icône Lucide (ex: plane, file-text, car, map-pin). Voir lucide.dev', 'guide-benin' ),
            )
        );

        $this->add_control(
            'cards_list',
            array(
                'label'       => __( 'Infos d\'Accès', 'guide-benin' ),
                'type'        => \Elementor\Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'title_field' => '{{{ card_title }}}',
                'default'     => array(
                    array(
                        'card_title' => 'Vol international',
                        'card_text'  => 'Arrivée à l’aéroport de Cotonou-Cadjehoun, relié à Paris, Bruxelles et plusieurs hubs africains.',
                        'card_icon'  => 'plane',
                    ),
                    array(
                        'card_title' => 'Visa & formalités',
                        'card_text'  => 'e-Visa en ligne avant le départ. Passeport valide 6 mois et carnet de vaccination à jour.',
                        'card_icon'  => 'file-text',
                    ),
                    array(
                        'card_title' => 'Sur place',
                        'card_text'  => 'Taxis, zémidjans (moto-taxis), bus inter-villes et location de voiture avec chauffeur.',
                        'card_icon'  => 'car',
                    ),
                    array(
                        'card_title' => 'Meilleure saison',
                        'card_text'  => 'La saison sèche, de novembre à mars, offre les meilleures conditions pour visiter et observer la faune.',
                        'card_icon'  => 'map-pin',
                    ),
                ),
            )
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $cards = ! empty( $settings['cards_list'] ) ? $settings['cards_list'] : array();
        $widget_id = $this->get_id();

        // Enqueue Lucide script dynamically
        echo '<script src="https://unpkg.com/lucide@latest"></script>';
        ?>
        <style>
            #gb-acces-<?php echo esc_attr( $widget_id ); ?> .gb-acces-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 24px;
            }
            @media (max-width: 991px) {
                #gb-acces-<?php echo esc_attr( $widget_id ); ?> .gb-acces-grid {
                    grid-template-columns: repeat(2, 1fr) !important;
                }
                #gb-acces-<?php echo esc_attr( $widget_id ); ?> {
                    padding: 60px 24px !important;
                }
            }
            @media (max-width: 767px) {
                #gb-acces-<?php echo esc_attr( $widget_id ); ?> .gb-acces-grid {
                    grid-template-columns: 1fr !important;
                }
                #gb-acces-<?php echo esc_attr( $widget_id ); ?> h2 {
                    font-size: 30px !important;
                }
            }
        </style>
        <section id="gb-acces-<?php echo esc_attr( $widget_id ); ?>" style="background:#FBF7EF; padding:80px 56px; font-family:'Sora',sans-serif; text-align: left;">
            <div style="max-width:1180px; margin:0 auto;">
                <!-- Header -->
                <div style="margin-bottom:44px;">
                    <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:38px; letter-spacing:-0.015em; color:#241009; margin:10px 0 0;"><?php echo esc_html( $settings['title'] ); ?></h2>
                </div>

                <!-- Cards Grid (4 columns) -->
                <div class="gb-acces-grid">
                    <?php foreach ( $cards as $c ) : ?>
                        <div style="background:#ffffff; border:1px solid #EFE2CE; border-radius:24px; padding:38px 28px; box-shadow:0 10px 30px rgba(36,16,9,0.02); display:flex; flex-direction:column; align-items:flex-start;">
                            <!-- Icon Container (Gradient background, white icon) -->
                            <div style="width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#FB9A02,#E8431E); display:flex; align-items:center; justify-content:center; margin-bottom:24px;">
                                <i data-lucide="<?php echo esc_attr( $c['card_icon'] ); ?>" style="width:22px; height:22px; stroke:#ffffff;"></i>
                            </div>

                            <!-- Title -->
                            <h4 style="font-family:'Sora',sans-serif; font-weight:700; font-size:16.5px; color:#241009; margin:0 0 12px; line-height:1.2;"><?php echo esc_html( $c['card_title'] ); ?></h4>
                            
                            <!-- Text -->
                            <p style="font-weight:400; font-size:14px; color:#6A4A38; line-height:1.6; margin:0;"><?php echo esc_html( $c['card_text'] ); ?></p>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <script>
        (function() {
            if (window.lucide) {
                window.lucide.createIcons();
            }
        })();
        </script>
        <?php
    }
}
