<?php
/**
 * Elementor Widget: GB À Propos Engagements
 */

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

class Guide_Benin_Apropos_Commitments_Widget extends \Elementor\Widget_Base {

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

    public function get_title() {
        return __( 'GB À Propos Engagements', 'guide-benin' );
    }

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

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

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

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

        $this->add_control(
            'title',
            array(
                'label'   => __( 'Titre principal', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'Trois promesses',
            )
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'title',
            array(
                'label'   => __( 'Titre de l\'engagement', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'Authenticité',
            )
        );

        $repeater->add_control(
            'text',
            array(
                'label'   => __( 'Description', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXTAREA,
                'default' => 'Mettre en lumière les cultures vivantes, les savoir-faire and l’hospitalité béninoise, sans artifice.',
            )
        );

        $repeater->add_control(
            'svg_path',
            array(
                'label'   => __( 'SVG Path (D)', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'M12 2 15 8l6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 8.9 9 8z',
            )
        );

        $this->add_control(
            'commitments_list',
            array(
                'label'       => __( 'Liste des engagements', 'guide-benin' ),
                'type'        => \Elementor\Controls_Manager::REPEATER,
                'fields'      => $repeater->get_controls(),
                'title_field' => '{{{ title }}}',
                'default'     => array(
                    array(
                        'title' => 'Authenticité',
                        'text' => 'Mettre en lumière les cultures vivantes, les savoir-faire and l’hospitalité béninoise, sans artifice.',
                        'svg_path' => 'M12 2 15 8l6 .9-4.5 4.3 1 6-5.5-3-5.5 3 1-6L3 8.9 9 8z',
                    ),
                    array(
                        'title' => 'Durabilité',
                        'text' => 'Protéger les écosystèmes and le patrimoine, and soutenir un tourisme qui bénéficie aux communautés.',
                        'svg_path' => 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z',
                    ),
                    array(
                        'title' => 'Accessibilité',
                        'text' => 'Donner à chacun les clés — pratiques, claires and fiables — pour préparer son voyage en confiance.',
                        'svg_path' => 'M3 11l19-9-9 19-2-8-8-2z',
                    ),
                ),
            )
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $commitments = ! empty( $settings['commitments_list'] ) ? $settings['commitments_list'] : array();
        $widget_id = $this->get_id();
        ?>
        <style>
            #gb-ap-commit-<?php echo esc_attr( $widget_id ); ?> .gb-commit-grid {
                display: grid;
                grid-template-columns: repeat(<?php echo count($commitments); ?>, 1fr);
                gap: 24px;
            }
            @media (max-width: 991px) {
                #gb-ap-commit-<?php echo esc_attr( $widget_id ); ?> {
                    padding: 40px 24px !important;
                }
                #gb-ap-commit-<?php echo esc_attr( $widget_id ); ?> .gb-commit-grid {
                    grid-template-columns: 1fr !important;
                }
            }
        </style>
        <section id="gb-ap-commit-<?php echo esc_attr( $widget_id ); ?>" style="max-width:1180px; margin:0 auto; padding:56px 56px; font-family:'Sora',sans-serif; text-align: left;">
            <div style="text-align:center; margin-bottom:44px;">
              <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:12px 0 0;"><?php echo esc_html( $settings['title'] ); ?></h2>
            </div>
            <div class="gb-commit-grid">
              <?php foreach ($commitments as $p) : ?>
                  <div style="background:#fff; border:1px solid #EFE2CE; border-radius:20px; padding:38px 34px;">
                    <div style="width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#FBA70A,#E8431E); display:flex; align-items:center; justify-content:center; margin-bottom:24px;">
                      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#FBF7EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="<?php echo esc_attr($p['svg_path']); ?>"></path>
                      </svg>
                    </div>
                    <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:22px; color:#241009; margin-bottom:12px;"><?php echo esc_html($p['title']); ?></div>
                    <div style="font-weight:400; font-size:15px; line-height:1.7; color:#6A4A38;"><?php echo esc_html($p['text']); ?></div>
                  </div>
              <?php endforeach; ?>
            </div>
        </section>
        <?php
    }
}
