<?php
namespace Unlockafe_addons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Utils;


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

/**
 * Showcase Slider Widget
 */
class Showcase_Slider extends Widget_Base
{

    public function get_name()
    {
        return 'unlockafe-showcase-slider';
    }

    public function get_title()
    {
        return __('Showcase Slider', 'unlock-addons-for-elementor');
    }

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

    public function get_categories()
    {
        return ['unlockafe-addons'];
    }

    public function get_keywords()
    {
        return ['showcase', 'slider', 'effect', 'style', 'unlockafe'];
    }

    public function get_script_depends()
    {
        return ['unlockafe-showcase-slider-script'];
    }

    public function get_style_depends()
    {
        return ['unlockafe-showcase-slider-style'];
    }

    /**
     * Get all pages for select control
     *
     * @return array
     */
    private function get_all_pages()
    {
        $pages_options = [];
        $pages = get_pages();
        if ($pages) {
            foreach ($pages as $page) {
                $pages_options[$page->ID] = $page->post_title;
            }
        }
        return $pages_options;
    }


    protected function register_controls()
    {
        //======================================================================
        // Design Layout Panel
        //======================================================================
        $this->start_controls_section(
            'uafe_design_layout',
            [
                'label' => esc_html__('Design Layout', 'unlock-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'uafe_design_style',
            [
                'label' => esc_html__('Select Layout', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'layout-1' => esc_html__('Layout 1 (Creative Thumb)', 'unlock-addons-for-elementor'),
                    'layout-2' => esc_html__('Layout 2 (Vertical Showcase)', 'unlock-addons-for-elementor'),
                    'layout-3' => esc_html__('Layout 3 (Letter Showcase)', 'unlock-addons-for-elementor'),
                ],
                'default' => 'layout-1',
            ]
        );
        $this->add_control('uafe_use_demo_data', [
            'label' => esc_html__('Use Demo Content', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SWITCHER,
            'label_on' => esc_html__('Yes', 'unlock-addons-for-elementor'),
            'label_off' => esc_html__('No', 'unlock-addons-for-elementor'),
            'return_value' => 'yes',
            'default' => 'yes',
            'description' => esc_html__('Turn this OFF to use the content you add in the "Showcase Items" list below.', 'unlock-addons-for-elementor'),
            'separator' => 'before',
        ]);

        $this->end_controls_section();

        //======================================================================
        // Showcase Items Section
        //======================================================================
        $this->start_controls_section(
            'uafe_showcase_section',
            [
                'label' => __('Showcase Items', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'uafe_use_demo_data!' => 'yes',
                ]
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'repeater_condition',
            [
                'label' => __('Field condition', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'style_1' => __('Layout 1', 'unlock-addons-for-elementor'),
                    'style_2' => __('Layout 2', 'unlock-addons-for-elementor'),
                    'style_3' => __('Layout 3', 'unlock-addons-for-elementor'),
                ],
                'default' => 'style_1',
                'frontend_available' => true,
                'style_transfer' => true,
            ]
        );

        $repeater->add_control(
            'uafe_showcase_title',
            [
                'label' => esc_html__('Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Showcase Title', 'unlock-addons-for-elementor'),
                'label_block' => true,
                
            ]
        );

        $repeater->add_control(
            'uafe_showcase_subtitle',
            [
                'label' => esc_html__('Subtitle', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Case study', 'unlock-addons-for-elementor'),
                'label_block' => true,
                'condition' => [
                    'repeater_condition' => ['style_3'],
                ]
            ]
        );

        $repeater->add_control(
            'uafe_showcase_description',
            [
                'label' => esc_html__('Description', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => esc_html__('A brief description of the showcase item goes here.', 'unlock-addons-for-elementor'),
                'label_block' => true,
                'condition' => [
                    'repeater_condition' => ['style_2','style_3'],
                ]
            ]
        );

        $repeater->add_control(
            'uafe_showcase_button_text',
            [
                'label' => esc_html__('Button Text', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('See Project', 'unlock-addons-for-elementor'),
                'label_block' => true,
            ]
        );

        $repeater->add_control(
            'uafe_showcase_date',
            [
                'label' => esc_html__('Date', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('August 3, 2025', 'unlock-addons-for-elementor'),
                'label_block' => true,
                'condition' => [
                    'repeater_condition' => ['style_1'],
                ]
            ]
        );

        $repeater->add_control(
            'uafe_item_btn_link',
            [
                'label' => esc_html__('Link URL', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::URL,
                'dynamic' => ['active' => true],
                'placeholder' => esc_html__('https://your-link.com', 'unlock-addons-for-elementor'),
                'default' => ['url' => '#'],
            ]
        );

        $repeater->add_control(
            'hr_media',
            ['type' => Controls_Manager::DIVIDER, 'style' => 'thick']
        );

        $repeater->add_control(
            'uafe_media_type',
            [
                'label' => esc_html__('Media Type', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'image' => ['title' => esc_html__('Image', 'unlock-addons-for-elementor'), 'icon' => 'eicon-image'],
                    'video' => ['title' => esc_html__('Video', 'unlock-addons-for-elementor'), 'icon' => 'eicon-play'],
                ],
                'default' => 'image',
                'toggle' => false,
            ]
        );

        $repeater->add_control(
            'uafe_showcase_image',
            [
                'label' => esc_html__('Image', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => ['url' => Utils::get_placeholder_image_src()],
                'condition' => ['uafe_media_type' => 'image'],
            ]
        );

        $repeater->add_control(
            'uafe_showcase_video_thumb',
            [
                'label' => esc_html__('Video Thumbnail', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => ['url' => Utils::get_placeholder_image_src()],
                'condition' => ['uafe_media_type' => 'video'],
            ]
        );

        $repeater->add_control(
            'uafe_showcase_video_url',
            [
                'label' => esc_html__('Video URL (.mp4)', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'placeholder' => 'https://example.com/video.mp4',
                'label_block' => true,
                'condition' => ['uafe_media_type' => 'video'],
            ]
        );

        $this->add_control(
            'uafe_showcase_slides',
            [
                'show_label' => false,
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'title_field' => '{{{ uafe_showcase_title }}}',
                'default' => [
                    ['uafe_showcase_title' => __('Showcase Item 1', 'unlock-addons-for-elementor')],
                    ['uafe_showcase_title' => __('Showcase Item 2', 'unlock-addons-for-elementor')],
                    ['uafe_showcase_title' => __('Showcase Item 3', 'unlock-addons-for-elementor')],
                ]
            ]
        );

        $this->end_controls_section();

        //======================================================================
        // Social Links Section
        //======================================================================
        $this->start_controls_section(
            'uafe_showcase_social_section',
            [
                'label' => __('Social Links', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
                'condition' => [
                    'uafe_design_style' => ['layout-1', 'layout-2']
                ]
            ]
        );

        $this->add_control(
            'uafe_show_social',
            [
                'label' => __('Show Social Links?', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'uafe_showcase_social_title',
            [
                'label' => esc_html__('Social Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Follow Us', 'unlock-addons-for-elementor'),
                'label_block' => true,
                'condition' => [
                    'uafe_show_social' => 'yes',
                    'uafe_design_style' => 'layout-1',
                ]
            ]
        );

        $social_repeater = new Repeater();

        $social_repeater->add_control(
            'social_icon',
            [
                'label' => esc_html__('Icon', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fab fa-facebook-f',
                    'library' => 'fa-brands',
                ],
            ]
        );

        $social_repeater->add_control(
            'social_link',
            [
                'label' => esc_html__('Link', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::URL,
                'placeholder' => esc_html__('https://your-link.com', 'unlock-addons-for-elementor'),
                'default' => ['url' => '#'],
            ]
        );

        $this->add_control(
            'uafe_social_links',
            [
                'label' => esc_html__('Social Items', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $social_repeater->get_controls(),
                'default' => [
                    ['social_icon' => ['value' => 'fa fa-facebook', 'library' => 'fa-brands'], 'social_link' => ['url' => '#']],
                    ['social_icon' => ['value' => 'fa fa-twitter', 'library' => 'fa-brands'], 'social_link' => ['url' => '#']],
                    ['social_icon' => ['value' => 'fa fa-instagram', 'library' => 'fa-brands'], 'social_link' => ['url' => '#']],
                    ['social_icon' => ['value' => 'fa fa-linkedin', 'library' => 'fa-brands'], 'social_link' => ['url' => '#']],
                ],
                'title_field' => '{{{ social_icon.value }}}',
                'condition' => [
                    'uafe_show_social' => 'yes'
                ]
            ]
        );

        $this->end_controls_section();

        //======================================================================
        // Slider Settings Section
        //======================================================================
        $this->start_controls_section(
            'uafe_slider_settings_sec',
            [
                'label' => esc_html__('Slider Settings', 'unlock-addons-for-elementor'),
                'condition' => [
                    'uafe_design_style!' => 'layout-3',
                ]
            ]
        );

        $this->add_control(
            'uafe_slider_arrow',
            [
                'label' => esc_html__('Show Next/Prev Arrow', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'condition' => [
                    'uafe_design_style' => ['layout-2']
                ]
            ]
        );

        $this->add_control(
            'uafe_scroll_bar_title',
            [
                'label' => esc_html__('Scroll Bar Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('[SCROLL MORE]', 'unlock-addons-for-elementor'),
                'label_block' => true,
                'condition' => [
                    'uafe_design_style' => ['layout-1']
                ]
            ]
        );

        $this->add_control(
            'uafe_showcase_scroll_bar',
            [
                'label' => esc_html__('Show Scroll Bar', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
                'condition' => [
                    'uafe_design_style' => ['layout-1']
                ]
            ]
        );

        $this->end_controls_section();

        $this->register_style_controls();
    }

    protected function register_style_controls()
    {
        //======================================================================
        // Section Style
        //======================================================================
        $this->start_controls_section(
            'uafe_section_style_section',
            [
                'label' => esc_html__('Section Style', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'section_background',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .uafe-showcase-wrapper',
            ]
        );

        $this->add_responsive_control(
            'section_padding',
            [
                'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em', 'rem'],
                'selectors' => [
                    '{{WRAPPER}} .uafe-showcase-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'separator' => 'before',
            ]
        );
        $this->end_controls_section();

        //======================================================================
        // Titles & Content Style
        //======================================================================
        $this->start_controls_section(
            'uafe_titles_style_section',
            [
                'label' => esc_html__('Titles & Content', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control('item_subtitle_style', ['label' => esc_html__('Item Subtitle', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before']);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'item_subtitle_typography', 'selector' => '{{WRAPPER}} .uafe-item-subtitle, {{WRAPPER}} .slide-content .category']);
        $this->add_control('item_subtitle_color', ['label' => esc_html__('Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .uafe-item-subtitle' => 'color: {{VALUE}};', '{{WRAPPER}} .slide-content .category' => 'color: {{VALUE}};']]);

        $this->add_control('item_title_style', ['label' => esc_html__('Item Title', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before']);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'item_title_typography', 'selector' => '{{WRAPPER}} .uafe-item-title, {{WRAPPER}} .creative-thumb-title, {{WRAPPER}} .slide-content .title']);
        $this->add_control('item_title_color', ['label' => esc_html__('Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .uafe-item-title' => 'color: {{VALUE}};', '{{WRAPPER}} .creative-thumb-title' => 'color: {{VALUE}};', '{{WRAPPER}} .slide-content .title' => 'color: {{VALUE}};']]);

        $this->add_control('item_date_style', ['label' => esc_html__('Item Date', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => ['uafe_design_style' => ['layout-1']]]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'item_date_typography', 'selector' => '{{WRAPPER}} .uafe-item-date', 'condition' => ['uafe_design_style' => ['layout-1']]]);
        $this->add_control('item_date_color', ['label' => esc_html__('Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .uafe-item-date' => 'color: {{VALUE}};'], 'condition' => ['uafe_design_style' => ['layout-1']]]);

        $this->add_control('item_desc_style', ['label' => esc_html__('Item Description', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before']);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'item_desc_typography', 'selector' => '{{WRAPPER}} .uafe-item-desc, {{WRAPPER}} .slide-content p']);
        $this->add_control('item_desc_color', ['label' => esc_html__('Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .uafe-item-desc' => 'color: {{VALUE}};', '{{WRAPPER}} .slide-content p' => 'color: {{VALUE}};']]);

        $this->end_controls_section();

        //======================================================================
        // Links & Buttons Style
        //======================================================================
        $this->start_controls_section(
            'uafe_links_style_section',
            [
                'label' => esc_html__('Links & Buttons', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control('social_links_title_style', ['label' => esc_html__('Social Title', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::HEADING, 'condition' => ['uafe_show_social' => 'yes', 'uafe_design_style' => 'layout-1']]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'social_title_typography', 'selector' => '{{WRAPPER}} .creative-thumb__footer .social-share', 'condition' => ['uafe_show_social' => 'yes', 'uafe_design_style' => 'layout-1']]);
        $this->add_control('social_title_color', ['label' => esc_html__('Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .creative-thumb__footer .social-share' => 'color: {{VALUE}};'], 'condition' => ['uafe_show_social' => 'yes', 'uafe_design_style' => 'layout-1']]);


        $this->add_control('social_links_style', ['label' => esc_html__('Social Links', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::HEADING, 'condition' => ['uafe_show_social' => 'yes'], 'separator' => 'before']);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'social_links_typography', 'selector' => '{{WRAPPER}} .uafe-social-link i, {{WRAPPER}} .vertical-showcase__social a, {{WRAPPER}} .creative-thumb__footer .social-media a', 'condition' => ['uafe_show_social' => 'yes']]);
        $this->add_control('social_links_color', ['label' => esc_html__('Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .uafe-social-link i' => 'color: {{VALUE}};', '{{WRAPPER}} .vertical-showcase__social a' => 'color: {{VALUE}};', '{{WRAPPER}} .creative-thumb__footer .social-media a' => 'color: {{VALUE}};'], 'condition' => ['uafe_show_social' => 'yes']]);
        $this->add_control('social_links_hover_color', ['label' => esc_html__('Hover Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .uafe-social-link:hover i' => 'color: {{VALUE}};', '{{WRAPPER}} .vertical-showcase__social a:hover' => 'color: {{VALUE}};', '{{WRAPPER}} .creative-thumb__footer .social-media a:hover' => 'color: {{VALUE}};'], 'condition' => ['uafe_show_social' => 'yes']]);

        $this->add_control('item_button_style', ['label' => esc_html__('Item Link/Button', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::HEADING, 'separator' => 'before']);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'item_button_typography', 'selector' => '{{WRAPPER}} .see-project, {{WRAPPER}} .slide-arrow']);
        $this->add_control('item_button_color', ['label' => esc_html__('Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .see-project' => 'color: {{VALUE}};', '{{WRAPPER}} .slide-arrow' => 'color: {{VALUE}};', '{{WRAPPER}} .slide-arrow .circle' => 'border-color: {{VALUE}};', '{{WRAPPER}} .slide-arrow .spine' => 'background-color: {{VALUE}};']]);
        $this->add_control('item_button_hover_color', ['label' => esc_html__('Hover Color', 'unlock-addons-for-elementor'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .see-project:hover' => 'color: {{VALUE}};']]);

        $this->end_controls_section();

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

        $this->add_responsive_control(
            'uafe_showcase_img_w',
            [
                'label' => esc_html__('Width', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vw'],
                'range' => [
                    'px' => ['min' => 100, 'max' => 2000],
                    '%' => ['min' => 10, 'max' => 100],
                    'vw' => ['min' => 10, 'max' => 100],
                ],
                'selectors' => [
                    '{{WRAPPER}} .uafe-item-image img' => 'width: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .slider-thumb' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'uafe_showcase_img_h',
            [
                'label' => esc_html__('Height', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh'],
                'range' => [
                    'px' => ['min' => 100, 'max' => 1000],
                    'vh' => ['min' => 10, 'max' => 100],
                ],
                'selectors' => [
                    '{{WRAPPER}} .uafe-item-image img' => 'height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .slider-thumb' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control('image_object_fit', [
            'label' => esc_html__('Object Fit', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SELECT,
            'default' => 'cover',
            'options' => [
                'cover' => esc_html__('Cover', 'unlock-addons-for-elementor'),
                'contain' => esc_html__('Contain', 'unlock-addons-for-elementor'),
                'fill' => esc_html__('Fill', 'unlock-addons-for-elementor'),
            ],
            'selectors' => [
                '{{WRAPPER}} .uafe-item-image img' => 'object-fit: {{VALUE}};',
                '{{WRAPPER}} .slider-thumb img' => 'object-fit: {{VALUE}};',
                '{{WRAPPER}} .showcase-figure img' => 'object-fit: {{VALUE}};',
            ],
        ]);

        $this->end_controls_section();

        // Letter Style Section
        $this->start_controls_section(
            'section_letter_style',
            [
                'label' => esc_html__('Letter Style', 'unlock-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [
                    'uafe_design_style' => 'layout-3',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'letter_typography',
                'label' => esc_html__('Typography', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .letter-showcase__slider .swiper-slide-active .letter-showcase__letter',
            ]
        );

        $this->add_control(
            'letter_color',
            [
                'label' => esc_html__('Letter Color', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .letter-showcase__slider .swiper-slide-active .letter-showcase__letter' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Bullets Style Section
        $this->start_controls_section(
            'section_bullets_style',
            [
                'label' => esc_html__('Bullets', 'unlock-addons-for-elementor'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
                'condition' => [
                    'uafe_design_style' => 'layout-3',
                ],
            ]
        );

        $this->add_responsive_control(
            'bullet_size',
            [
                'label' => esc_html__('Size', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 5,
                        'max' => 50,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .letter-showcase__slider .bullets ul li span' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'bullet_spacing',
            [
                'label' => esc_html__('Spacing', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 30,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .letter-showcase__slider .bullets ul li' => 'margin: 0 {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'bullet_color',
            [
                'label' => esc_html__('Color', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .letter-showcase__slider .bullets ul li' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'bullet_active_color',
            [
                'label' => esc_html__('Active Color', 'unlock-addons-for-elementor'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .letter-showcase__slider .bullets ul li.active' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .letter-showcase__slider .bullets ul li:hover' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $layout = $settings['uafe_design_style'];
        $slides = $settings['uafe_showcase_slides'];
        
        // Check if we're in Elementor editor or preview mode
        $is_editor_mode = \Elementor\Plugin::$instance->editor->is_edit_mode();
        $is_preview_mode = \Elementor\Plugin::$instance->preview->is_preview_mode();
        ?>
        <div class="uafe-showcase-wrapper uafe-layout-<?php echo esc_attr($layout); ?>">
            <?php
            // Check if demo data should be used
            if ('yes' === $settings['uafe_use_demo_data']) {
                // Render static demo content based on layout
                $this->render_demo_content($layout, $settings);
            } else {
                // Render dynamic content from Elementor controls
                switch ($layout) {
                    case 'layout-2':
                        $this->render_layout_2($settings, $slides);
                        break;
                    case 'layout-3':
                        $this->render_layout_3($settings, $slides);
                        break;
                    default: // 'layout-1'
                        $this->render_layout_1($settings, $slides);
                        break;
                }
            }
            ?>
        </div>
        <?php
        
        // Add inline script for editor/preview mode initialization
        if ($is_editor_mode || $is_preview_mode) {
            ?>
            <script type="text/javascript">
            (function() {
                function initShowcaseSlider() {
                    if (typeof jQuery === 'undefined') {
                        setTimeout(initShowcaseSlider, 100);
                        return;
                    }
                    
                    var $ = jQuery;
                    var $widget = $('.elementor-widget-unlockafe-showcase-slider').last();
                    var $wrapper = $widget.find('.uafe-showcase-wrapper');
                    
                    if ($wrapper.length === 0) {
                        setTimeout(initShowcaseSlider, 100);
                        return;
                    }
                    
                    // Wait for Swiper to be available
                    if (typeof Swiper === 'undefined') {
                        setTimeout(initShowcaseSlider, 200);
                        return;
                    }
                    
                    // Set background images
                    var $bgElements = $wrapper.find('[data-bg-src]');
                    $bgElements.each(function() {
                        var src = $(this).attr('data-bg-src');
                        if (src) {
                            $(this).css('background-image', 'url(' + src + ')');
                            $(this).addClass('background-image');
                            $(this).removeAttr('data-bg-src');
                        }
                    });
                    
                    // Initialize sliders based on layout
                    var layout = $wrapper.attr('class').match(/uafe-layout-([^\s]+)/);
                    layout = layout ? layout[1] : 'layout-1';
                    
                    // Initialize letter showcase (layout-3)
                    if (layout === 'layout-3') {
                        var $letterSlider = $wrapper.find('.letter-showcase__slider');
                        var $bulletsUl = $wrapper.find('.bullets ul');
                        var $sliderImages = $wrapper.find('.slider-images ul');
                        
                        if ($letterSlider.length && $bulletsUl.length && $sliderImages.length) {
                            $bulletsUl.empty();
                            
                            var $titles = $wrapper.find('.swiper-slide .slide-content .title');
                            if ($titles.length > 0) {
                                $titles.each(function() {
                                    var txt = $(this).text().charAt(0);
                                    var $li = $('<li></li>').addClass('magnetize').attr('data-dist', '1');
                                    var $span = $('<span></span>').attr('data-cursor-type', 'medium').text(txt);
                                    $li.append($span);
                                    $bulletsUl.append($li);
                                });
                                
                                $bulletsUl.find('li:first-child').addClass('focus');
                                $sliderImages.find('li:first-child').addClass('focus');
                                
                                try {
                                    new Swiper($letterSlider[0], {
                                        speed: 1000,
                                        direction: 'vertical',
                                        slidesPerView: 'auto',
                                        simulateTouch: false,
                                        mousewheel: true,
                                        on: {
                                            slideChange: function() {
                                                var activeIndex = this.activeIndex;
                                                var coord = activeIndex * -55;
                                                
                                                var $allBullets = $bulletsUl.find('li');
                                                var $allSliderImages = $sliderImages.find('li');
                                                
                                                $allBullets.removeClass('focus');
                                                $allSliderImages.removeClass('focus');
                                                
                                                $($allBullets[activeIndex]).addClass('focus');
                                                $($allSliderImages[activeIndex]).addClass('focus');
                                                
                                                $bulletsUl.css('margin-top', coord + 'px');
                                            }
                                        }
                                    });
                                } catch(e) {
                                    console.error('Showcase Slider: Error initializing letter showcase', e);
                                }
                            }
                        }
                    }
                    
                    // Initialize creative thumb slider (layout-1)
                    if (layout === 'layout-1') {
                        var $creativeSlider = $wrapper.find('.creative-thumb__slider');
                        var $creativePagination = $wrapper.find('.creative-thumb__pagination');
                        var $creativeBackground = $wrapper.find('.creative-thumb__background');
                        var $showcaseTitle = $wrapper.find('.creative-thumb-title');
                        
                        if ($creativeSlider.length) {
                            try {
                                // Set initial background from first slide
                                var $firstSlide = $creativeSlider.find('.swiper-slide').first();
                                if ($firstSlide.length) {
                                    var initialBgUrl = $firstSlide.attr('data-src');
                                    var initialTitle = $firstSlide.attr('data-title');
                                    
                                    if (initialBgUrl && $creativeBackground.length) {
                                        $creativeBackground.css('background-image', 'url(' + initialBgUrl + ')');
                                    }
                                    
                                    if (initialTitle && $showcaseTitle.length) {
                                        $showcaseTitle.text(initialTitle);
                                    }
                                }
                                
                                var swiper = new Swiper($creativeSlider[0], {
                                    slidesPerView: 3,
                                    spaceBetween: 15,
                                    loop: true,
                                    mousewheel: true,
                                    grabCursor: true,
                                    speed: 1000,
                                    centeredSlides: true,
                                    pagination: {
                                        el: $creativePagination.length ? $creativePagination[0] : null,
                                        type: 'progressbar'
                                    },
                                    breakpoints: {
                                        768: { slidesPerView: 3, spaceBetween: 15 },
                                        992: { slidesPerView: 4, spaceBetween: 15 }
                                    },
                                    on: {
                                        init: function() {
                                            updateCreativeThumbBackground(this);
                                        },
                                        slideChange: function() {
                                            updateCreativeThumbBackground(this);
                                        }
                                    }
                                });
                                
                                // Function to update background and title
                                function updateCreativeThumbBackground(swiperInstance) {
                                    var activeSlide = $(swiperInstance.slides[swiperInstance.activeIndex]);
                                    if (!activeSlide.length) return;
                                    
                                    var title = activeSlide.attr('data-title');
                                    var bgUrl = activeSlide.attr('data-src');
                                    
                                    if (bgUrl && $creativeBackground.length) {
                                        $creativeBackground.css('background-image', 'url(' + bgUrl + ')');
                                    }
                                    
                                    if (title && $showcaseTitle.length && $showcaseTitle.text() !== title) {
                                        $showcaseTitle.css('opacity', '0');
                                        setTimeout(function() {
                                            $showcaseTitle.text(title);
                                            $showcaseTitle.css('opacity', '1');
                                        }, 300);
                                    }
                                }
                            } catch(e) {
                                console.error('Showcase Slider: Error initializing creative thumb slider', e);
                            }
                        }
                    }
                    
                    // Initialize vertical showcase (layout-2) - requires GSAP
                    if (layout === 'layout-2' && typeof gsap !== 'undefined' && typeof SplitText !== 'undefined') {
                        var $verticalSlider = $wrapper.find('.vertical-showcase__slider');
                        var $verticalNav = $wrapper.find('.vertical-showcase__navigation');
                        
                        if ($verticalSlider.length && $verticalNav.length) {
                            try {
                                var $titles = gsap.utils.toArray($verticalSlider.find('.title'));
                                var charsArray = $titles.map(function(title) {
                                    return new SplitText(title, { type: 'chars' }).chars;
                                });
                                
                                gsap.set(charsArray, {
                                    opacity: 0,
                                    filter: 'blur(10px)',
                                    y: 10
                                });
                                
                                new Swiper($verticalSlider[0], {
                                    slidesPerView: 1,
                                    loop: true,
                                    speed: 1000,
                                    navigation: {
                                        nextEl: $verticalNav.find('.button-next')[0],
                                        prevEl: $verticalNav.find('.button-prev')[0]
                                    },
                                    on: {
                                        init: function(swiper) {
                                            var activeChars = charsArray[swiper.realIndex];
                                            if (activeChars) {
                                                gsap.to(activeChars, {
                                                    opacity: 1,
                                                    filter: 'blur(0px)',
                                                    y: 0,
                                                    duration: 0.6,
                                                    stagger: 0.1,
                                                    ease: 'power2.out'
                                                });
                                            }
                                        },
                                        slideChange: function(swiper) {
                                            gsap.set(charsArray, {
                                                opacity: 0,
                                                filter: 'blur(10px)',
                                                y: 10
                                            });
                                            var activeChars = charsArray[swiper.realIndex];
                                            if (activeChars) {
                                                gsap.to(activeChars, {
                                                    opacity: 1,
                                                    filter: 'blur(0px)',
                                                    y: 0,
                                                    duration: 0.6,
                                                    stagger: 0.1,
                                                    ease: 'power2.out'
                                                });
                                            }
                                        }
                                    }
                                });
                            } catch(e) {
                                console.error('Showcase Slider: Error initializing vertical showcase', e);
                            }
                        }
                    }
                    
                    console.log('Showcase Slider: Initialized layout', layout, 'in editor mode');
                }
                
                // Start initialization
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', function() {
                        setTimeout(initShowcaseSlider, 300);
                    });
                } else {
                    setTimeout(initShowcaseSlider, 300);
                }
                
                // Also try after delays to ensure libraries are loaded
                setTimeout(initShowcaseSlider, 600);
                setTimeout(initShowcaseSlider, 1000);
                setTimeout(initShowcaseSlider, 2000);
            })();
            </script>
            <?php
        }
    }

    private function render_layout_1($settings, $slides)
    { 
        ?>
        <main>
            <section class="creative-thumb section">
                <div class="creative-thumb__background"></div>
                <div class="creative-thumb__wrapper pointer-events-none">
                    <div class="swiper creative-thumb__slider">
                        <div class="swiper-wrapper">
                            <?php foreach ($slides as $slide):
                                $image_url = !empty($slide['uafe_showcase_image']['url']) ? $slide['uafe_showcase_image']['url'] : Utils::get_placeholder_image_src();
                                ?>
                                <div class="swiper-slide" data-title="<?php echo esc_attr($slide['uafe_showcase_title']); ?>"
                                    data-src="<?php echo esc_url($image_url); ?>">
                                    <div class="creative-thumb__item">
                                        <?php if (!empty($slide['uafe_showcase_date'])): ?>
                                            <span
                                                class="date uafe-item-date">[<?php echo esc_html($slide['uafe_showcase_date']); ?>]</span>
                                        <?php endif; ?>
                                        <div class="slider-thumb">
                                            <img src="<?php echo esc_url($image_url); ?>"
                                                alt="<?php echo esc_attr($slide['uafe_showcase_title']); ?>" />
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="creative-thumb__footer">
                        <div class="info">
                            <?php if ('yes' === $settings['uafe_show_social']): ?>
                                                                <div class="social-share">
                                    <i class="fa fa-share-alt"></i>
                                    <?php echo esc_html($settings['uafe_showcase_social_title']); ?>
                                    <div class="social-media v2">
                                        <ul>
                                            <?php foreach ($settings['uafe_social_links'] as $social_item):
                                                $this->add_link_attributes('social_link_' . $social_item['_id'], $social_item['social_link']);
                                                ?>
                                                <li>
                                                    <a <?php echo $this->get_render_attribute_string('social_link_' . $social_item['_id']); ?>>
                                                        <i class="<?php echo esc_attr($social_item['social_icon']['value']); ?>" aria-hidden="true"></i>
                                                    </a>
                                                </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                </div>
                            <?php endif; ?>
                            <h2 class="creative-thumb-title transition-opacity duration-500"></h2>
                            <?php if ('yes' === $settings['uafe_showcase_scroll_bar']): ?>
                                <span class="scroll-more"><?php echo esc_html($settings['uafe_scroll_bar_title']); ?></span>
                            <?php endif; ?>
                        </div>
                        <?php if ('yes' === $settings['uafe_showcase_scroll_bar']): ?>
                            <div class="creative-thumb__pagination"></div>
                        <?php endif; ?>
                    </div>
                </div>
            </section>
        </main>
        <?php
    }

    private function render_layout_2($settings, $slides)
    { // Vertical Showcase
        ?>
        <main>
            <section class="vertical-showcase section">
                <div class="swiper vertical-showcase__slider">
                    <div class="swiper-wrapper">
                        <?php foreach ($slides as $slide):
                            $image_url = !empty($slide['uafe_showcase_image']['url']) ? $slide['uafe_showcase_image']['url'] : Utils::get_placeholder_image_src();
                            $this->add_link_attributes('item_link_' . $slide['_id'], $slide['uafe_item_btn_link']);
                            ?>
                            <div class="swiper-slide">
                                <div class="vertical-showcase__item">
                                    <div class="showcase-figure uafe-item-image">
                                        <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($slide['uafe_showcase_title']); ?>" />
                                    </div>
                                    <div class="showcase-content">
                                        <h2 class="title uafe-item-title"><?php echo esc_html($slide['uafe_showcase_title']); ?></h2>
                                        <div class="content-info">
                                            <?php if (!empty($slide['uafe_showcase_description'])): ?>
                                                <p class="uafe-item-desc"><?php echo wp_kses_post($slide['uafe_showcase_description']); ?></p>
                                            <?php endif; ?>
                                            <?php if (!empty($slide['uafe_showcase_button_text'])): ?>
                                                <a style="text-decoration: none;" <?php echo $this->get_render_attribute_string('item_link_' . $slide['_id']); ?>
                                                    class="see-project uafe-item-subtitle"><?php echo esc_html($slide['uafe_showcase_button_text']); ?></a>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <?php if ('yes' === $settings['uafe_slider_arrow']): ?>
                    <div class="vertical-showcase__navigation" style="cursor: pointer;">
                        <div class="button-next"><i class="fa fa-arrow-right"></i></div>
                        <div class="button-prev"><i class="fa fa-arrow-left"></i></div>
                    </div>
                <?php endif; ?>

                <span class="vertical-showcase__vertical-line"></span>
                <span class="vertical-showcase__horizontal-line"></span>

                <?php if ('yes' === $settings['uafe_show_social']): ?>
                    <div class="vertical-showcase__social">
                        <ul>
                            <?php foreach ($settings['uafe_social_links'] as $social_item):
                                $this->add_link_attributes('social_link_' . $social_item['_id'], $social_item['social_link']);
                                ?>
                                <li><a <?php echo $this->get_render_attribute_string('social_link_' . $social_item['_id']); ?>><i class="<?php echo esc_attr($social_item['social_icon']['value']); ?>"></i></a></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>
            </section>
        </main>
        <?php
    }

    private function render_layout_3($settings, $slides)
    { // Letter Showcase
        ?>
        <main>
            <section class="letter-showcase section">
                <div class="swiper letter-showcase__slider">
                    <div class="swiper-wrapper">
                        <?php foreach ($slides as $slide):
                            $this->add_link_attributes('item_link_' . $slide['_id'], $slide['uafe_item_btn_link']);
                            ?>
                            <div class="swiper-slide">
                                <div class="slide-content">
                                    <?php if (!empty($slide['uafe_showcase_subtitle'])): ?>
                                        <span
                                            class="category uafe-item-subtitle"><?php echo esc_html($slide['uafe_showcase_subtitle']); ?></span>
                                    <?php endif; ?>
                                    <h2 class="title uafe-item-title"><?php echo esc_html($slide['uafe_showcase_title']); ?></h2>
                                    <?php if (!empty($slide['uafe_showcase_description'])): ?>
                                        <p class="uafe-item-desc"><?php echo wp_kses_post($slide['uafe_showcase_description']); ?></p>
                                    <?php endif; ?>
                                </div>
                                <a <?php echo $this->get_render_attribute_string('item_link_' . $slide['_id']); ?>
                                    class="slide-arrow magnetize">
                                    <div class="circle" data-cursor-type="medium"></div>
                                    <i class="fa fa-chevron-right"></i>
                                    <div class="spine" data-cursor-type="medium"></div>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="bullets">
                        <ul></ul>
                    </div>

                    <div class="slider-images overlays">
                        <ul>
                            <?php foreach ($slides as $slide):
                                $image_url = '';
                                if ($slide['uafe_media_type'] === 'video' && !empty($slide['uafe_showcase_video_thumb']['url'])) {
                                    $image_url = $slide['uafe_showcase_video_thumb']['url'];
                                } elseif ($slide['uafe_media_type'] === 'image' && !empty($slide['uafe_showcase_image']['url'])) {
                                    $image_url = $slide['uafe_showcase_image']['url'];
                                } else {
                                    $image_url = Utils::get_placeholder_image_src();
                                }
                                ?>
                                <li data-bg-src="<?php echo esc_url($image_url); ?>">
                                    <?php if ($slide['uafe_media_type'] === 'video' && !empty($slide['uafe_showcase_video_url'])): ?>
                                        <div class="video-wrapper">
                                            <video loop muted playsinline class="video-bg">
                                                <source src="<?php echo esc_url($slide['uafe_showcase_video_url']); ?>"
                                                    type="video/mp4" />
                                            </video>
                                        </div>
                                    <?php endif; ?>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
            </section>
        </main>
        <?php
    }

    protected function render_demo_content($layout, $settings)
    {
        if ($layout == 'layout-2') {
            ?>
            <main>
                <section class="vertical-showcase section">
                    <div class="swiper vertical-showcase__slider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="vertical-showcase__item">
                                    <div class="showcase-figure">
                                        <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/vertical-showcase/showcase-1.png'); ?>"
                                            alt="showcase" />
                                    </div>
                                    <div class="showcase-content">
                                        <h2 class="title">Futuristic Glam</h2>
                                        <div class="content-info">
                                            <p>A fashion shoot showcasing a designer’s new journey collection with a futuristic,
                                                avant-garde theme.</p>
                                            <a style="text-decoration: none;" href="#" class="see-project"> SEE PROJECT </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="vertical-showcase__item">
                                    <div class="showcase-figure">
                                        <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/vertical-showcase/showcase-2.png'); ?>"
                                            alt="showcase" />
                                    </div>
                                    <div class="showcase-content">
                                        <h2 class="title">Dressed to Disrupt</h2>
                                        <div class="content-info">
                                            <p>This isn’t a lookbook. It’s a loud refusal. Every frame breaks rules, burns
                                                blueprints, and makes space for something new.</p>
                                            <a style="text-decoration: none;" href="#" class="see-project"> SEE PROJECT </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="vertical-showcase__item">
                                    <div class="showcase-figure">
                                        <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/vertical-showcase/showcase-3.png'); ?>"
                                            alt="showcase" />
                                    </div>
                                    <div class="showcase-content">
                                        <h2 class="title">Style, Grown Slow</h2>
                                        <div class="content-info">
                                            <p>Rooted in textures and tones the planet knows best. This shoot is a quiet
                                                rebellion—an ode to what’s real, raw, and responsibly worn.</p>
                                            <a style="text-decoration: none;" href="#" class="see-project"> SEE PROJECT </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php if ( $settings['uafe_slider_arrow'] == 'yes' ): ?>
                    <div class="vertical-showcase__navigation" style="cursor: pointer;">
                        <div class="button-next"><i class="fa fa-arrow-right"></i></div>
                        <div class="button-prev"><i class="fa fa-arrow-left"></i></div>
                    </div>
                    <?php  endif; ?>
                    <span class="vertical-showcase__vertical-line"></span>
                    <span class="vertical-showcase__horizontal-line"></span>
                    <?php if ('yes' === $settings['uafe_show_social']): ?>
                    <div class="vertical-showcase__social">
                        <ul>
                            <li><a href="#0"><i class="fa fa-facebook-f"></i></a></li>
                            <li><a href="#0"><i class="fa fa-instagram"></i></a></li>
                            <li><a href="#0"><i class="fa fa-twitter"></i></a></li>
                        </ul>
                    </div>
                    <?php endif; ?>
                </section>
            </main>
            <?php
        } elseif ($layout == 'layout-3') { // Letter Showcase
            ?>
            <main>
                <section class="letter-showcase section">
                    <div class="swiper letter-showcase__slider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="slide-content">
                                    <span class="category">Photography</span>
                                    <h2 class="title">Szymon Boczek</h2>
                                    <p>This is a modernistic portfolio-style theme with an emphasis on typography and attention to
                                        detail.</p>
                                </div>
                                <a href="#" class="slide-arrow magnetize">
                                    <div class="circle" data-cursor-type="medium"></div>
                                    <i class="fa fa-chevron-right"></i>
                                    <div class="spine" data-cursor-type="medium"></div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-content">
                                    <span class="category">Digital</span>
                                    <h2 class="title">Behind the Scenes</h2>
                                    <p>Improve ashamed married expense bed her comfort pursuit mrs. Four time took ye your as fail
                                        lady.</p>
                                </div>
                                <a href="#" class="slide-arrow magnetize">
                                    <div class="circle" data-cursor-type="medium"></div>
                                    <i class="fa fa-chevron-right"></i>
                                    <div class="spine" data-cursor-type="medium"></div>
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <div class="slide-content">
                                    <span class="category">Photography</span>
                                    <h2 class="title">The Lion King</h2>
                                    <p>You disposal strongly quitting his endeavor two settling him. Manners ham him hearted hundred
                                        expense.</p>
                                </div>
                                <a href="#" class="slide-arrow magnetize">
                                    <div class="circle" data-cursor-type="medium"></div>
                                    <i class="fa fa-chevron-right"></i>
                                    <div class="spine" data-cursor-type="medium"></div>
                                </a>
                            </div>
                        </div>
                        <div class="bullets">
                            <ul></ul>
                        </div>
                        <div class="slider-images overlays">
                            <ul>
                                <li
                                    data-bg-src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/work/worh-thumb-3-2.png'); ?>">
                                </li>
                                <li
                                    data-bg-src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/work/worh-thumb-3-1.png'); ?>">
                                    <div class="video-wrapper">
                                        <video loop muted playsinline class="video-bg">
                                            <source
                                                src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/videos/work-section.mp4'); ?>"
                                                type="video/mp4" />
                                        </video>
                                    </div>
                                </li>
                                <li
                                    data-bg-src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/work/worh-thumb-3-3.png'); ?>">
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
            </main>
            <?php
        } else {
            ?>
            <main>
                <section class="creative-thumb section">
                    <div class="creative-thumb__background"></div>
                    <div class="creative-thumb__wrapper pointer-events-none">
                        <div class="swiper creative-thumb__slider">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" data-title="Ballroom"
                                    data-src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/creative-thumb-slider/creative-thumb-slider-1.png'); ?>">
                                    <div class="creative-thumb__item">
                                        <span class="date">[30th AUGUST, 2025]</span>
                                        <div class="slider-thumb">
                                            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/creative-thumb-slider/creative-thumb-slider-1.png'); ?>"
                                                alt="Ballroom" />
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide" data-title="Ceremonial"
                                    data-src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/creative-thumb-slider/creative-thumb-slider-2.png'); ?>">
                                    <div class="creative-thumb__item">
                                        <span class="date">[30th AUGUST, 2025]</span>
                                        <div class="slider-thumb">
                                            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/creative-thumb-slider/creative-thumb-slider-2.png'); ?>"
                                                alt="Ceremonial" />
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide" data-title="Infraserv"
                                    data-src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/creative-thumb-slider/creative-thumb-slider-3.png'); ?>">
                                    <div class="creative-thumb__item">
                                        <span class="date">[30th AUGUST, 2025]</span>
                                        <div class="slider-thumb">
                                            <img src="<?php echo esc_url(plugin_dir_url(__FILE__) . '../../assets/front-end/images/creative-thumb-slider/creative-thumb-slider-3.png'); ?>"
                                                alt="Infraserv" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="creative-thumb__footer">
                            <div class="info">
                                <div class="social-share">
                                    <i class="fa fa-share-alt"></i><?php echo isset($settings['uafe_showcase_social_title']) ? esc_html($settings['uafe_showcase_social_title']) : esc_html__('Follow Us', 'unlock-addons-for-elementor'); ?>
                                    <?php if (!empty($settings['uafe_social_links']) && is_array($settings['uafe_social_links'])) : ?>
                                    <div class="social-media v2">
                                        <ul>
                                            <?php foreach ($settings['uafe_social_links'] as $item) : ?>
                                                <?php
                                                $target = $item['social_link']['is_external'] ? ' target="_blank"' : '';
                                                $nofollow = $item['social_link']['nofollow'] ? ' rel="nofollow"' : '';
                                                ?>
                                                <li>
                                                    <a href="<?php echo esc_url($item['social_link']['url']); ?>"<?php echo $target; ?><?php echo $nofollow; ?>>
                                                        <i class="<?php echo esc_attr($item['social_icon']['value']); ?>"></i>
                                                    </a>
                                                </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                    <?php endif; ?>
                                </div>
                                <h2 class="creative-thumb-title transition-opacity duration-500"></h2>
                                <span class="scroll-more">
                                    <?php if ('yes' === $settings['uafe_showcase_scroll_bar']) : ?>
                                        <?php echo esc_html($settings['uafe_scroll_bar_title']); ?>
                                    <?php endif; ?>
                                </span>
                            </div>
                            <div class="creative-thumb__pagination"></div>
                        </div>
                    </div>
                </section>
            </main>
            <?php
        }
    }
}
