<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils as UnlockafeUtils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Icons_Manager;

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

/**
 * Feature Matrix Widget
 *
 * @since 1.0.0
 */
class Platform_Feature extends Widget_Base
{
    use Widget_helper, UnlockafeUtils;

    /**
     * Retrieve the widget name.
     */
    public function get_name()
    {
        return 'unlockafe-platform-feature';
    }

    /**
     * Retrieve the widget title.
     */
    public function get_title()
    {
        return __('Feature Matrix', 'unlock-addons-for-elementor');
    }

    /**
     * Retrieve the widget icon.
     */
    public function get_icon()
    {
        return 'eicon-icon-box ulicon';
    }

    /**
     * Retrieve the list of categories.
     */
    public function get_categories()
    {
        return ['unlockafe-addons'];
    }

    /**
     * Retrieve the list of keywords.
     */
    public function get_keywords()
    {
        return ['feature', 'matrix', 'cards', 'grid', 'pyramid', 'square', 'icon', 'showcase', 'flip'];
    }

    /**
     * Retrieve the list of scripts.
     */
    public function get_script_depends()
    {
        return ['unlockafe-platform-feature'];
    }

    /**
     * Retrieve the list of styles.
     */
    public function get_style_depends()
    {
        return ['unlockafe-platform-feature'];
    }

    /**
     * Register widget controls.
     */
    protected function register_controls()
    {
        $this->register_content_controls();
        $this->register_style_controls();
    }

    /**
     * Register content controls.
     */
    protected function register_content_controls()
    {
        // Layout Section
        $this->start_controls_section(
            'layout_section',
            [
                'label' => __('Layout Settings', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'shape_type',
            [
                'label' => __('Shape Type', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'square' => __('Square (Cross)', 'unlock-addons-for-elementor'),
                    'grid' => __('Grid', 'unlock-addons-for-elementor'),
                    'pyramid' => __('Pyramid', 'unlock-addons-for-elementor'),
                ],
                'default' => 'square',
            ]
        );

        $this->add_responsive_control(
            'grid_columns',
            [
                'label' => __('Cards Per Row', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 6,
                'step' => 1,
                'default' => 3,
                'tablet_default' => 2,
                'mobile_default' => 1,
                'condition' => [
                    'shape_type' => 'grid',
                ],
            ]
        );

        $this->add_responsive_control(
            'square_middle_row_width',
            [
                'label' => __('Middle Row Max Width', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vw'],
                'range' => [
                    'px' => [
                        'min' => 200,
                        'max' => 2000,
                        'step' => 10,
                    ],
                    '%' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'vw' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 1200,
                ],
                'tablet_default' => [
                    'unit' => 'px',
                    'size' => 800,
                ],
                'mobile_default' => [
                    'unit' => 'px',
                    'size' => 400,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-cards-grid.unlockafe-square-layout .unlockafe-middle-row' => 'max-width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'shape_type' => 'square',
                ],
            ]
        );

        $this->add_control(
            'show_heading',
            [
                'label' => __('Show Heading', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'unlock-addons-for-elementor'),
                'label_off' => __('No', 'unlock-addons-for-elementor'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'heading_text',
            [
                'label' => __('Heading', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Why Teams Switch to PostGhost?', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter heading text', 'unlock-addons-for-elementor'),
                'condition' => [
                    'show_heading' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'show_description',
            [
                'label' => __('Show Description', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'unlock-addons-for-elementor'),
                'label_off' => __('No', 'unlock-addons-for-elementor'),
                'return_value' => 'yes',
                'default' => 'yes',
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'description_text',
            [
                'label' => __('Description', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Transform comment chaos into connection, insight, and growth — powered by AI.', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter description text', 'unlock-addons-for-elementor'),
                'rows' => 3,
                'condition' => [
                    'show_description' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'enable_background_animation',
            [
                'label' => __('Enable Background Animation', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'unlock-addons-for-elementor'),
                'label_off' => __('No', 'unlock-addons-for-elementor'),
                'return_value' => 'yes',
                'default' => 'yes',
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'animation_speed',
            [
                'label' => __('Animation Speed (seconds)', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['s'],
                'range' => [
                    's' => [
                        'min' => 1,
                        'max' => 20,
                        'step' => 0.5,
                    ],
                ],
                'default' => [
                    'unit' => 's',
                    'size' => 8,
                ],
                'condition' => [
                    'enable_background_animation' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'animation_transparency',
            [
                'label' => __('Animation Transparency', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-background-effects .unlockafe-orb' => 'opacity: calc({{SIZE}} / 100 * 0.3);',
                    '{{WRAPPER}} .unlockafe-background-effects .unlockafe-wave-lines' => 'opacity: calc({{SIZE}} / 100 * 0.3);',
                    '{{WRAPPER}} .unlockafe-background-effects .unlockafe-grid-pattern' => 'opacity: calc({{SIZE}} / 100 * 0.03);',
                ],
                'condition' => [
                    'enable_background_animation' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'star_transparency',
            [
                'label' => __('Star/Particle Transparency', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 100,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-background-effects .unlockafe-particle' => 'opacity: calc({{SIZE}} / 100);',
                ],
                'condition' => [
                    'enable_background_animation' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'wave_line_width',
            [
                'label' => __('Background Wave Line Width', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0.5,
                        'max' => 10,
                        'step' => 0.5,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 2,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-background-effects .unlockafe-wave-path' => 'stroke-width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'enable_background_animation' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();

        // Cards Section
        $this->start_controls_section(
            'cards_section',
            [
                'label' => __('Cards', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'icon_type',
            [
                'label' => __('Icon Type', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'icon' => [
                        'title' => __('Icon', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-star',
                    ],
                    'image' => [
                        'title' => __('Image', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-image',
                    ],
                    'svg' => [
                        'title' => __('SVG', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-code',
                    ],
                ],
                'default' => 'icon',
                'toggle' => false,
            ]
        );

        $repeater->add_control(
            'selected_icon',
            [
                'label' => __('Icon', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-star',
                    'library' => 'solid',
                ],
                'condition' => [
                    'icon_type' => 'icon',
                ],
            ]
        );

        $repeater->add_control(
            'icon_image',
            [
                'label' => __('Image', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
                'condition' => [
                    'icon_type' => 'image',
                ],
            ]
        );

        $repeater->add_control(
            'icon_svg',
            [
                'label' => __('SVG Code', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::CODE,
                'language' => 'html',
                'default' => '',
                'description' => __('Paste your SVG code here. For Lucide sparkles icon, use: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>', 'unlock-addons-for-elementor'),
                'condition' => [
                    'icon_type' => 'svg',
                ],
            ]
        );

        $repeater->add_control(
            'card_title',
            [
                'label' => __('Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Card Title', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter card title', 'unlock-addons-for-elementor'),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'card_description',
            [
                'label' => __('Description', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __('Card description goes here.', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter card description', 'unlock-addons-for-elementor'),
                'rows' => 3,
            ]
        );

        $this->add_control(
            'cards_list',
            [
                'label' => __('Cards', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'icon_type' => 'icon',
                        'selected_icon' => [
                            'value' => 'fas fa-chart-bar',
                            'library' => 'solid',
                        ],
                        'card_title' => __('Performance Analytics', 'unlock-addons-for-elementor'),
                        'card_description' => __('See what\'s working at-a-glance. Dashboards that turn engagement data into your next move.', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'icon_type' => 'icon',
                        'selected_icon' => [
                            'value' => 'fas fa-shield-alt',
                            'library' => 'solid',
                        ],
                        'card_title' => __('Brand Protection', 'unlock-addons-for-elementor'),
                        'card_description' => __('Flags spam, scams & threats before audience sees them. 24/7 brand safeguarding.', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'icon_type' => 'svg',
                        'icon_svg' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>',
                        'card_title' => __('Engagement Intelligence', 'unlock-addons-for-elementor'),
                        'card_description' => __('Real-time sentiment tracking across platforms. Know audience reaction instantly.', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'icon_type' => 'icon',
                        'selected_icon' => [
                            'value' => 'fas fa-users',
                            'library' => 'solid',
                        ],
                        'card_title' => __('Audience Insights', 'unlock-addons-for-elementor'),
                        'card_description' => __('Auto-sorted questions, requests & complaints. Never miss high-value signals.', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'icon_type' => 'icon',
                        'selected_icon' => [
                            'value' => 'fas fa-heart',
                            'library' => 'solid',
                        ],
                        'card_title' => __('Relationship Building', 'unlock-addons-for-elementor'),
                        'card_description' => __('Identify VIPs & partnership opportunities. Turn comments into connections.', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'icon_type' => 'icon',
                        'selected_icon' => [
                            'value' => 'fas fa-rocket',
                            'library' => 'solid',
                        ],
                        'card_title' => __('Growth Acceleration', 'unlock-addons-for-elementor'),
                        'card_description' => __('Scale your business with data-driven insights and automated workflows.', 'unlock-addons-for-elementor'),
                    ],
                ],
                'title_field' => '{{{ card_title }}}',
            ]
        );

        $this->end_controls_section();

        // Buttons Section
        $this->start_controls_section(
            'buttons_section',
            [
                'label' => __('Buttons', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'show_buttons',
            [
                'label' => __('Show Buttons', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'unlock-addons-for-elementor'),
                'label_off' => __('No', 'unlock-addons-for-elementor'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        // Primary Button
        $this->add_control(
            'primary_button_heading',
            [
                'label' => __('Primary Button', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'primary_button_text',
            [
                'label' => __('Button Text', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Try PostGhost Free', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter button text', 'unlock-addons-for-elementor'),
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'primary_button_link',
            [
                'label' => __('Link', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'unlock-addons-for-elementor'),
                'show_external' => true,
                'default' => [
                    'url' => '#',
                    'is_external' => false,
                    'nofollow' => false,
                ],
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'primary_button_icon',
            [
                'label' => __('Icon', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-arrow-right',
                    'library' => 'solid',
                ],
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        // Secondary Button
        $this->add_control(
            'secondary_button_heading',
            [
                'label' => __('Secondary Button', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'secondary_button_text',
            [
                'label' => __('Button Text', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Watch Demo', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter button text', 'unlock-addons-for-elementor'),
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'secondary_button_link',
            [
                'label' => __('Link', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::URL,
                'placeholder' => __('https://your-link.com', 'unlock-addons-for-elementor'),
                'show_external' => true,
                'default' => [
                    'url' => '#',
                    'is_external' => false,
                    'nofollow' => false,
                ],
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Register style controls.
     */
    protected function register_style_controls()
    {
        // Container Style
        $this->start_controls_section(
            'container_style_section',
            [
                'label' => __('Container', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'container_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-platform-feature',
            ]
        );

        $this->add_responsive_control(
            'container_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-platform-feature' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Heading Style
        $this->start_controls_section(
            'heading_style_section',
            [
                'label' => __('Heading', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_heading' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'heading_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#0f172a',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-heading' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'heading_typography',
                'selector' => '{{WRAPPER}} .unlockafe-heading',
            ]
        );

        $this->add_control(
            'heading_font_style',
            [
                'label' => __('Font Style', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => __('Normal', 'unlock-addons-for-elementor'),
                    'italic' => __('Italic', 'unlock-addons-for-elementor'),
                    'oblique' => __('Oblique', 'unlock-addons-for-elementor'),
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-heading' => 'font-style: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'heading_size',
            [
                'label' => __('Font Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 200,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 48,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-heading' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'heading_margin',
            [
                'label' => __('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'heading_alignment',
            [
                'label' => __('Alignment', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __('Left', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __('Center', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => __('Right', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-heading' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Description Style (Widget Description)
        $this->start_controls_section(
            'widget_description_style_section',
            [
                'label' => __('Description', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_description' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'widget_description_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#64748b',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'widget_description_typography',
                'selector' => '{{WRAPPER}} .unlockafe-description',
            ]
        );

        $this->add_control(
            'widget_description_font_style',
            [
                'label' => __('Font Style', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'normal' => __('Normal', 'unlock-addons-for-elementor'),
                    'italic' => __('Italic', 'unlock-addons-for-elementor'),
                    'oblique' => __('Oblique', 'unlock-addons-for-elementor'),
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-description' => 'font-style: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'widget_description_size',
            [
                'label' => __('Font Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 8,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 18,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-description' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'widget_description_margin',
            [
                'label' => __('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'widget_description_alignment',
            [
                'label' => __('Alignment', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __('Left', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __('Center', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => __('Right', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-description' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Background Animation Style
        $this->start_controls_section(
            'background_animation_section',
            [
                'label' => __('Background Animation', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'enable_background_animation' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'orb_color_1',
            [
                'label' => __('Orb Color 1', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#8b1538',
                'selectors' => [
                    '{{WRAPPER}} .background-effects .orb-1' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'orb_color_2',
            [
                'label' => __('Orb Color 2', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#9333ea',
                'selectors' => [
                    '{{WRAPPER}} .background-effects .orb-2' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'wave_color',
            [
                'label' => __('Wave Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#8b1538',
                'selectors' => [
                    '{{WRAPPER}} .wave-path' => 'stroke: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'particle_color',
            [
                'label' => __('Particle Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#8b1538',
                'selectors' => [
                    '{{WRAPPER}} .particle' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Card Style
        $this->start_controls_section(
            'card_style_section',
            [
                'label' => __('Card', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'card_size',
            [
                'label' => __('Card Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range' => [
                    'px' => [
                        'min' => 100,
                        'max' => 500,
                        'step' => 10,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 280,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-flip-card-container' => 'max-width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'card_gap',
            [
                'label' => __('Card Gap', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 8,
                ],
                'selectors' => [
                    '{{WRAPPER}} .cards-grid' => 'gap: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .unlockafe-card-row' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'card_background',
                'label' => __('Card Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-flip-card-front',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'card_border',
                'selector' => '{{WRAPPER}} .unlockafe-flip-card-front',
            ]
        );

        $this->add_control(
            'card_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-flip-card-front, {{WRAPPER}} .unlockafe-flip-card-back' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'card_box_shadow',
                'selector' => '{{WRAPPER}} .unlockafe-flip-card-front, {{WRAPPER}} .unlockafe-flip-card-back',
            ]
        );

        $this->end_controls_section();

        // Icon Style
        $this->start_controls_section(
            'icon_style_section',
            [
                'label' => __('Icon/Image', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'icon_size',
            [
                'label' => __('Icon Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 200,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 24,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-icon-wrapper i' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .unlockafe-icon-wrapper svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_wrapper_size',
            [
                'label' => __('Icon Wrapper Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 20,
                        'max' => 200,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 56,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-icon-wrapper' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}}; min-height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'icon_background',
                'label' => __('Icon Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-icon-wrapper',
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label' => __('Icon Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-icon-wrapper i' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-icon-wrapper svg' => 'fill: {{VALUE}} !important; stroke: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-icon-wrapper svg path' => 'fill: {{VALUE}} !important; stroke: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_control(
            'icon_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-icon-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Title Style
        $this->start_controls_section(
            'title_style_section',
            [
                'label' => __('Title', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label' => __('Front Title Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#0f172a',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-flip-card-front h3' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'title_back_color',
            [
                'label' => __('Back Title Color (on hover)', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-flip-card-back h3' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-flip-card-container:hover .unlockafe-flip-card-back h3' => 'color: {{VALUE}} !important;',
                    '{{WRAPPER}} .unlockafe-flip-card.flipped .unlockafe-flip-card-back h3' => 'color: {{VALUE}} !important;',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'selector' => '{{WRAPPER}} .unlockafe-flip-card-front h3, {{WRAPPER}} .unlockafe-flip-card-back h3',
            ]
        );

        $this->add_responsive_control(
            'title_size',
            [
                'label' => __('Font Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-flip-card-front h3' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .unlockafe-flip-card-back h3' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'title_margin',
            [
                'label' => __('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-flip-card-front h3' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                    '{{WRAPPER}} .unlockafe-flip-card-back h3' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Description Style
        $this->start_controls_section(
            'description_style_section',
            [
                'label' => __('Description', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-flip-card-back p' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'description_typography',
                'selector' => '{{WRAPPER}} .unlockafe-flip-card-back p',
            ]
        );

        $this->add_responsive_control(
            'description_size',
            [
                'label' => __('Font Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', 'rem'],
                'range' => [
                    'px' => [
                        'min' => 8,
                        'max' => 50,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 14,
                ],
                'selectors' => [
                    '{{WRAPPER}} .flip-card-back p' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Card Back Style
        $this->start_controls_section(
            'card_back_style_section',
            [
                'label' => __('Card Back', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'card_back_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-flip-card-back',
            ]
        );

        $this->end_controls_section();

        // Primary Button Style
        $this->start_controls_section(
            'primary_button_style_section',
            [
                'label' => __('Primary Button', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'primary_button_text_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-btn-primary' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'primary_button_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-btn-primary',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'primary_button_typography',
                'selector' => '{{WRAPPER}} .unlockafe-btn-primary',
            ]
        );

        $this->add_responsive_control(
            'primary_button_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .btn-primary' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'primary_button_size',
            [
                'label' => __('Button Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 16,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-btn-primary' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'primary_button_border',
                'selector' => '{{WRAPPER}} .unlockafe-btn-primary',
            ]
        );

        $this->add_control(
            'primary_button_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-btn-primary' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'primary_button_box_shadow',
                'selector' => '{{WRAPPER}} .unlockafe-btn-primary',
            ]
        );

        // Hover
        $this->add_control(
            'primary_button_hover_heading',
            [
                'label' => __('Hover', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'primary_button_hover_text_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-btn-primary:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'primary_button_hover_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-btn-primary:hover',
            ]
        );

        $this->end_controls_section();

        // Secondary Button Style
        $this->start_controls_section(
            'secondary_button_style_section',
            [
                'label' => __('Secondary Button', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'secondary_button_text_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#0f172a',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-btn-secondary' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'secondary_button_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-btn-secondary',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'secondary_button_typography',
                'selector' => '{{WRAPPER}} .unlockafe-btn-secondary',
            ]
        );

        $this->add_responsive_control(
            'secondary_button_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .btn-secondary' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'secondary_button_size',
            [
                'label' => __('Button Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 16,
                ],
                'selectors' => [
                    '{{WRAPPER}} .btn-secondary' => 'font-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'secondary_button_border',
                'selector' => '{{WRAPPER}} .unlockafe-btn-secondary',
            ]
        );

        $this->add_control(
            'secondary_button_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .btn-secondary' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'secondary_button_box_shadow',
                'selector' => '{{WRAPPER}} .unlockafe-btn-secondary',
            ]
        );

        // Hover
        $this->add_control(
            'secondary_button_hover_heading',
            [
                'label' => __('Hover', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'secondary_button_hover_text_color',
            [
                'label' => __('Text Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-btn-secondary:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'secondary_button_hover_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-btn-secondary:hover',
            ]
        );

        // Buttons Container
        $this->add_control(
            'buttons_container_heading',
            [
                'label' => __('Buttons Container', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'buttons_gap',
            [
                'label' => __('Gap Between Buttons', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 16,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-cta-section' => 'gap: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'buttons_alignment',
            [
                'label' => __('Alignment', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'flex-start' => [
                        'title' => __('Left', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => __('Center', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'flex-end' => [
                        'title' => __('Right', 'unlock-addons-for-elementor'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-cta-section' => 'justify-content: {{VALUE}};',
                ],
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->add_responsive_control(
            'buttons_margin',
            [
                'label' => __('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-cta-section' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'show_buttons' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Render widget output on the frontend.
     */
    protected function render()
    {
        $settings = $this->get_settings_for_display();

        if (empty($settings['cards_list'])) {
            return;
        }

        $shape_type = $settings['shape_type'];
        $cards = $settings['cards_list'];
        $animation_speed = !empty($settings['animation_speed']['size']) ? $settings['animation_speed']['size'] : 8;
        $enable_animation = $settings['enable_background_animation'] === 'yes';
        $widget_id = $this->get_id();

        // Generate inline CSS for grid columns
        if ($shape_type === 'grid') {
            $grid_columns_desktop = !empty($settings['grid_columns']) ? intval($settings['grid_columns']) : 3;
            $grid_columns_tablet = !empty($settings['grid_columns_tablet']) ? intval($settings['grid_columns_tablet']) : 2;
            $grid_columns_mobile = !empty($settings['grid_columns_mobile']) ? intval($settings['grid_columns_mobile']) : 1;

            $inline_css = "
            .elementor-element-{$widget_id} .unlockafe-cards-grid.unlockafe-grid-layout {
                grid-template-columns: repeat({$grid_columns_desktop}, 1fr) !important;
            }
            @media (max-width: 1024px) {
                .elementor-element-{$widget_id} .unlockafe-cards-grid.unlockafe-grid-layout {
                    grid-template-columns: repeat({$grid_columns_tablet}, 1fr) !important;
                }
            }
            @media (max-width: 767px) {
                .elementor-element-{$widget_id} .unlockafe-cards-grid.unlockafe-grid-layout {
                    grid-template-columns: repeat({$grid_columns_mobile}, 1fr) !important;
                }
            }
            ";

            if (wp_style_is('unlockafe-platform-feature', 'enqueued') || wp_style_is('unlockafe-platform-feature', 'registered')) {
                wp_add_inline_style('unlockafe-platform-feature', $inline_css);
            } else {
                wp_register_style('unlockafe-platform-feature', false);
                wp_enqueue_style('unlockafe-platform-feature');
                wp_add_inline_style('unlockafe-platform-feature', $inline_css);
            }
        }

        // Set animation speed as data attribute
        $this->add_render_attribute('wrapper', 'data-animation-speed', $animation_speed);
        $this->add_render_attribute('wrapper', 'data-shape-type', $shape_type);
        $this->add_render_attribute('wrapper', 'class', 'unlockafe-platform-feature');
        if ($enable_animation) {
            $this->add_render_attribute('wrapper', 'class', 'has-animation');
        }

        // Get back title color from settings
        $back_title_color = !empty($settings['title_back_color']) ? $settings['title_back_color'] : '#ffffff';
        
        // Calculate animation durations
        $orb1_duration = $animation_speed . 's';
        $orb2_duration = ($animation_speed * 1.25) . 's';
        $wave_duration = ($animation_speed * 0.25) . 's';
        $particle1_duration = ($animation_speed * 0.375) . 's';
        $particle2_duration = ($animation_speed * 0.5) . 's';
        $particle3_duration = ($animation_speed * 0.475) . 's';
        $particle4_duration = ($animation_speed * 0.5625) . 's';
        $particle5_duration = ($animation_speed * 0.475) . 's';
        
        // Add inline style for back title color and animation speeds
        $inline_styles = "
        .elementor-element-{$widget_id} .unlockafe-flip-card-back h3,
        .elementor-element-{$widget_id} .unlockafe-flip-card-container:hover .unlockafe-flip-card-back h3,
        .elementor-element-{$widget_id} .unlockafe-flip-card.flipped .unlockafe-flip-card-back h3 {
            color: {$back_title_color} !important;
        }
        ";
        
        if ($enable_animation) {
            $inline_styles .= "
        .elementor-element-{$widget_id} .unlockafe-orb-1 {
            animation-duration: {$orb1_duration} !important;
        }
        .elementor-element-{$widget_id} .unlockafe-orb-2 {
            animation-duration: {$orb2_duration} !important;
        }
        .elementor-element-{$widget_id} .unlockafe-wave-1,
        .elementor-element-{$widget_id} .unlockafe-wave-2,
        .elementor-element-{$widget_id} .unlockafe-wave-3 {
            animation-duration: {$wave_duration} !important;
        }
        .elementor-element-{$widget_id} .unlockafe-p1 {
            animation-duration: {$particle1_duration} !important;
        }
        .elementor-element-{$widget_id} .unlockafe-p2 {
            animation-duration: {$particle2_duration} !important;
        }
        .elementor-element-{$widget_id} .unlockafe-p3 {
            animation-duration: {$particle3_duration} !important;
        }
        .elementor-element-{$widget_id} .unlockafe-p4 {
            animation-duration: {$particle4_duration} !important;
        }
        .elementor-element-{$widget_id} .unlockafe-p5 {
            animation-duration: {$particle5_duration} !important;
        }
        ";
        }
        
        if (wp_style_is('unlockafe-platform-feature', 'enqueued') || wp_style_is('unlockafe-platform-feature', 'registered')) {
            wp_add_inline_style('unlockafe-platform-feature', $inline_styles);
        } else {
            wp_register_style('unlockafe-platform-feature', false);
            wp_enqueue_style('unlockafe-platform-feature');
            wp_add_inline_style('unlockafe-platform-feature', $inline_styles);
        }

        // Ensure CSS loads in Elementor editor preview
        if (\Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode()) {
            if (!wp_style_is('unlockafe-platform-feature', 'enqueued')) {
                wp_enqueue_style(
                    'unlockafe-platform-feature',
                    UNLOCKAFE_ASSETS . 'front-end/css/platform-feature.css',
                    [],
                    UNLOCKAFE_VERSION
                );
            }
        }

        ?>
        <div <?php echo $this->get_render_attribute_string('wrapper'); ?>>
            <?php if ($enable_animation): ?>
            <div class="unlockafe-background-effects">
                <div class="unlockafe-orb unlockafe-orb-1"></div>
                <div class="unlockafe-orb unlockafe-orb-2"></div>
                <?php 
                $wave_line_width = !empty($settings['wave_line_width']['size']) ? $settings['wave_line_width']['size'] : 2;
                ?>
                <svg class="unlockafe-wave-lines" viewBox="0 0 1440 800" preserveAspectRatio="none">
                    <defs>
                        <linearGradient id="gradient-<?php echo esc_attr($widget_id); ?>" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stop-color="currentColor" stop-opacity="0" />
                            <stop offset="50%" stop-color="currentColor" stop-opacity="1" />
                            <stop offset="100%" stop-color="currentColor" stop-opacity="0" />
                        </linearGradient>
                    </defs>
                    <path class="unlockafe-wave-path unlockafe-wave-1" d="M0,400 Q360,300 720,400 T1440,400" fill="none" stroke="url(#gradient-<?php echo esc_attr($widget_id); ?>)" stroke-width="<?php echo esc_attr($wave_line_width); ?>" />
                    <path class="unlockafe-wave-path unlockafe-wave-2" d="M0,450 Q360,350 720,450 T1440,450" fill="none" stroke="url(#gradient-<?php echo esc_attr($widget_id); ?>)" stroke-width="<?php echo esc_attr($wave_line_width); ?>" />
                    <path class="unlockafe-wave-path unlockafe-wave-3" d="M0,350 Q360,250 720,350 T1440,350" fill="none" stroke="url(#gradient-<?php echo esc_attr($widget_id); ?>)" stroke-width="<?php echo esc_attr($wave_line_width); ?>" />
                </svg>
                <div class="unlockafe-grid-pattern"></div>
                <div class="unlockafe-particle unlockafe-p1"></div>
                <div class="unlockafe-particle unlockafe-p2"></div>
                <div class="unlockafe-particle unlockafe-p3"></div>
                <div class="unlockafe-particle unlockafe-p4"></div>
                <div class="unlockafe-particle unlockafe-p5"></div>
            </div>
            <?php endif; ?>

            <div class="content-wrapper">
                <?php if ($settings['show_heading'] === 'yes' && !empty($settings['heading_text'])): ?>
                    <h2 class="unlockafe-heading"><?php echo esc_html($settings['heading_text']); ?></h2>
                <?php endif; ?>

                <?php if ($settings['show_description'] === 'yes' && !empty($settings['description_text'])): ?>
                    <p class="unlockafe-description"><?php echo esc_html($settings['description_text']); ?></p>
                <?php endif; ?>

                <div class="unlockafe-cards-grid unlockafe-<?php echo esc_attr($shape_type); ?>-layout">
                    <?php
                    if ($shape_type === 'square') {
                        $this->render_square_layout($cards);
                    } elseif ($shape_type === 'grid') {
                        $this->render_grid_layout($cards);
                    } elseif ($shape_type === 'pyramid') {
                        $this->render_pyramid_layout($cards);
                    }
                    ?>
                </div>

                <?php if ($settings['show_buttons'] === 'yes'): ?>
                    <div class="unlockafe-cta-section">
                        <?php
                        // Primary Button
                        $primary_text = !empty($settings['primary_button_text']) ? esc_html($settings['primary_button_text']) : '';
                        $primary_link = !empty($settings['primary_button_link']['url']) ? esc_url($settings['primary_button_link']['url']) : '#';
                        $primary_target = !empty($settings['primary_button_link']['is_external']) ? 'target="_blank"' : '';
                        $primary_nofollow = !empty($settings['primary_button_link']['nofollow']) ? 'rel="nofollow"' : '';
                        $primary_icon_html = '';

                        if (!empty($settings['primary_button_icon'])) {
                            ob_start();
                            Icons_Manager::render_icon($settings['primary_button_icon'], ['aria-hidden' => 'true']);
                            $primary_icon_html = ob_get_clean();
                        }

                        if ($primary_text):
                            ?>
                            <a href="<?php echo $primary_link; ?>" class="unlockafe-btn-primary" <?php echo $primary_target; ?> <?php echo $primary_nofollow; ?>>
                                <span class="unlockafe-btn-content">
                                    <?php echo $primary_text; ?>
                                    <?php if ($primary_icon_html): ?>
                                        <span class="unlockafe-btn-icon"><?php echo $primary_icon_html; ?></span>
                                    <?php endif; ?>
                                </span>
                                <div class="unlockafe-btn-glow"></div>
                            </a>
                        <?php endif; ?>

                        <?php
                        // Secondary Button
                        $secondary_text = !empty($settings['secondary_button_text']) ? esc_html($settings['secondary_button_text']) : '';
                        $secondary_link = !empty($settings['secondary_button_link']['url']) ? esc_url($settings['secondary_button_link']['url']) : '#';
                        $secondary_target = !empty($settings['secondary_button_link']['is_external']) ? 'target="_blank"' : '';
                        $secondary_nofollow = !empty($settings['secondary_button_link']['nofollow']) ? 'rel="nofollow"' : '';

                        if ($secondary_text):
                            ?>
                            <a href="<?php echo $secondary_link; ?>" class="unlockafe-btn-secondary" <?php echo $secondary_target; ?> <?php echo $secondary_nofollow; ?>>
                                <?php echo $secondary_text; ?>
                            </a>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <?php
    }

    /**
     * Render square (cross) layout
     */
    protected function render_square_layout($cards)
    {
        $total_cards = count($cards);
        if ($total_cards === 0) return;

        // Square layout: 1 top, 3 middle, 1 bottom (only show first 5 cards)
        $cards = array_slice($cards, 0, 5);
        $total_cards = count($cards);
        
        $top_card = isset($cards[0]) ? $cards[0] : null;
        $middle_cards = array_slice($cards, 1, 3);
        $bottom_card = isset($cards[4]) ? $cards[4] : null;

        // Top row
        if ($top_card):
            ?>
            <div class="unlockafe-card-row unlockafe-top-row">
                <?php $this->render_card($top_card); ?>
            </div>
        <?php endif; ?>

        <!-- Middle row -->
        <?php if (!empty($middle_cards)): ?>
            <div class="unlockafe-card-row unlockafe-middle-row">
                <?php foreach ($middle_cards as $card): ?>
                    <?php $this->render_card($card); ?>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Bottom row -->
        <?php if ($bottom_card): ?>
            <div class="unlockafe-card-row unlockafe-bottom-row">
                <?php $this->render_card($bottom_card); ?>
            </div>
        <?php endif;
    }

    /**
     * Render grid layout
     */
    protected function render_grid_layout($cards)
    {
        foreach ($cards as $card) {
            $this->render_card($card);
        }
    }

    /**
     * Render pyramid layout
     */
    protected function render_pyramid_layout($cards)
    {
        $total_cards = count($cards);
        if ($total_cards === 0) return;

        // Calculate pyramid rows
        $rows = [];
        $current_index = 0;
        $row_number = 1;

        while ($current_index < $total_cards) {
            $cards_in_row = min($row_number, $total_cards - $current_index);
            $rows[] = array_slice($cards, $current_index, $cards_in_row);
            $current_index += $cards_in_row;
            $row_number++;
        }

        // Render rows
        foreach ($rows as $row_cards) {
            ?>
            <div class="unlockafe-card-row unlockafe-pyramid-row">
                <?php foreach ($row_cards as $card): ?>
                    <?php $this->render_card($card); ?>
                <?php endforeach; ?>
            </div>
            <?php
        }
    }

    /**
     * Render individual card
     */
    protected function render_card($card)
    {
        $icon_type = !empty($card['icon_type']) ? $card['icon_type'] : 'icon';
        $icon_html = '';
        $back_icon_html = '';

        if ($icon_type === 'icon' && !empty($card['selected_icon'])) {
            ob_start();
            Icons_Manager::render_icon($card['selected_icon'], ['aria-hidden' => 'true']);
            $icon_html = ob_get_clean();
            $back_icon_html = $icon_html;
        } elseif ($icon_type === 'image' && !empty($card['icon_image']['url'])) {
            $icon_html = '<img src="' . esc_url($card['icon_image']['url']) . '" alt="' . esc_attr($card['card_title']) . '" />';
            $back_icon_html = $icon_html;
        } elseif ($icon_type === 'svg' && !empty($card['icon_svg'])) {
            // Allow SVG code - sanitize but preserve SVG structure
            $icon_svg = $card['icon_svg'];
            // Basic sanitization - allow SVG tags and attributes
            $allowed_html = [
                'svg' => [
                    'xmlns' => true,
                    'width' => true,
                    'height' => true,
                    'viewbox' => true,
                    'viewBox' => true,
                    'fill' => true,
                    'stroke' => true,
                    'stroke-width' => true,
                    'stroke-linecap' => true,
                    'stroke-linejoin' => true,
                    'class' => true,
                    'style' => true,
                ],
                'path' => [
                    'd' => true,
                    'fill' => true,
                    'stroke' => true,
                    'stroke-width' => true,
                    'stroke-linecap' => true,
                    'stroke-linejoin' => true,
                    'class' => true,
                ],
                'circle' => ['cx' => true, 'cy' => true, 'r' => true, 'fill' => true, 'stroke' => true],
                'rect' => ['x' => true, 'y' => true, 'width' => true, 'height' => true, 'fill' => true],
                'g' => ['fill' => true, 'stroke' => true],
            ];
            $icon_html = wp_kses($icon_svg, $allowed_html);
            $back_icon_html = $icon_html;
        }

        $title = !empty($card['card_title']) ? esc_html($card['card_title']) : '';
        $description = !empty($card['card_description']) ? wp_kses_post($card['card_description']) : '';

        ?>
        <div class="unlockafe-flip-card-container">
            <div class="unlockafe-flip-card">
                <div class="unlockafe-flip-card-front">
                    <?php if ($icon_html): ?>
                        <div class="unlockafe-icon-wrapper">
                            <?php echo $icon_html; ?>
                        </div>
                    <?php endif; ?>
                    <?php if ($title): ?>
                        <h3><?php echo $title; ?></h3>
                    <?php endif; ?>
                    <div class="unlockafe-glow-effect"></div>
                </div>
                <div class="unlockafe-flip-card-back">
                    <?php if ($back_icon_html): ?>
                        <div class="unlockafe-back-icon-wrapper">
                            <?php echo $back_icon_html; ?>
                        </div>
                    <?php endif; ?>
                    <?php if ($title): ?>
                        <h3><?php echo $title; ?></h3>
                    <?php endif; ?>
                    <?php if ($description): ?>
                        <p><?php echo $description; ?></p>
                    <?php endif; ?>
                    <div class="unlockafe-accent-glow"></div>
                </div>
            </div>
        </div>
        <?php
    }
}

