<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; }

use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Image_Size;
use Elementor\Repeater;
use Elementor\Utils;
use Elementor\Icons_Manager;

use Sifency\Traits\Sifency_Addons_Master_Typography;
use Sifency\Traits\Sifency_Addons_Button_Style_Controls;
use Sifency\Traits\Sifency_Addons_Query_Arg_Controls;
use Sifency\Traits\Sifency_Addons_Image_Style_Controls;
use Sifency\Traits\Sifency_Addons_Help_Controls;
use Sifency\Traits\Sifency_Addons_Custom_CSS_Controls;
use Sifency\Traits\Sifency_Addons_Item_Style_Controls;

/**
 * Sifency 3D Arc Carousel Widget
 *
 * Responsive breakpoints supported (all Elementor devices):
 *   widescreen | desktop | laptop | tablet_extra | tablet | mobile_extra | mobile
 *
 * @since 1.0.0
 */
class Sifency_Addons_3D_Arc_Carousel extends Sifency_Addons_Widget_Base {
	use Sifency_Addons_Master_Typography;
	use Sifency_Addons_Button_Style_Controls;
	use Sifency_Addons_Query_Arg_Controls;
	use Sifency_Addons_Image_Style_Controls;
	use Sifency_Addons_Item_Style_Controls;
	use Sifency_Addons_Help_Controls;
	use Sifency_Addons_Custom_CSS_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-3d-arc-carousel',
			'title'          => 'Sifency 3D Arc Carousel',
			'icon'           => 'eicon-carousel-loop',
			'category'       => array( 'sifency-creative-widgets' ),
			'script_depends' => array( 'swiper', 'gsap', 'sifency-3d-arc-carousel-script' ),
			'style_depends'  => array( 'swiper', 'sifency-3d-arc-carousel-style' ),
		);
	}

	protected function register_controls() {

		// ─── Content Source ──────────────────────────────────────────
		$this->start_controls_section(
			'section_source',
			array(
				'label' => esc_html__( 'Content Source', 'sifency-addons' ),
			)
		);

		$this->add_control(
			'data_source',
			array(
				'label'   => esc_html__( 'Source', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'manual'  => esc_html__( 'Manual Cards', 'sifency-addons' ),
					'dynamic' => esc_html__( 'Posts / CPT', 'sifency-addons' ),
				),
				'default' => 'manual',
			)
		);

		$this->end_controls_section();

		// ─── Layout / Carousel Mode ──────────────────────────────────
		$this->start_controls_section(
			'section_layout',
			array(
				'label' => esc_html__( 'Carousel Settings', 'sifency-addons' ),
			)
		);

		$this->add_control(
			'carousel_layout',
			array(
				'label'   => esc_html__( 'Layout Mode', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'3d-arc'     => esc_html__( '3D Arc / Arch', 'sifency-addons' ),
					'clip-path'  => esc_html__( 'Clip-Path Morph', 'sifency-addons' ),
					'3d-circle'  => esc_html__( '3D Circle Loop', 'sifency-addons' ),
					'circle-top' => esc_html__( 'Circle Top Slide', 'sifency-addons' ),
				),
				'default' => '3d-arc',
			)
		);

		$this->add_control(
			'loop',
			array(
				'label'        => esc_html__( 'Loop', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->add_control(
			'autoplay',
			array(
				'label'        => esc_html__( 'Autoplay', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->add_control(
			'autoplay_delay',
			array(
				'label'     => esc_html__( 'Autoplay Delay (ms)', 'sifency-addons' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 3000,
				'min'       => 500,
				'max'       => 10000,
				'step'      => 100,
				'condition' => array( 'autoplay' => 'yes' ),
			)
		);

		$this->add_control(
			'speed',
			array(
				'label'   => esc_html__( 'Transition Speed (ms)', 'sifency-addons' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => 700,
				'min'     => 100,
				'max'     => 3000,
				'step'    => 50,
			)
		);

		// ── Slides Per View — full responsive breakpoints ─────────────
		$this->add_control(
			'spv_heading',
			array(
				'label'     => esc_html__( 'Slides Per View', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => array( 'carousel_layout!' => array( '3d-circle', 'circle-top' ) ),
			)
		);

		$this->add_responsive_control(
			'slides_per_view',
			array(
				'label'                => esc_html__( 'Slides Per View', 'sifency-addons' ),
				'type'                 => Controls_Manager::NUMBER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => 3,
				'widescreen_default'   => 4,
				'laptop_default'       => 3,
				'tablet_extra_default' => 2,
				'tablet_default'       => 2,
				'mobile_extra_default' => 2,
				'mobile_default'       => 1,
				'min'                  => 1,
				'max'                  => 8,
				'condition'            => array( 'carousel_layout!' => array( '3d-circle', 'circle-top' ) ),
			)
		);

		// ── Space Between — full responsive breakpoints ───────────────
		$this->add_control(
			'sb_heading',
			array(
				'label'     => esc_html__( 'Space Between', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);

		$this->add_responsive_control(
			'space_between',
			array(
				'label'                => esc_html__( 'Space Between (px)', 'sifency-addons' ),
				'type'                 => Controls_Manager::NUMBER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => 24,
				'widescreen_default'   => 32,
				'laptop_default'       => 24,
				'tablet_extra_default' => 20,
				'tablet_default'       => 16,
				'mobile_extra_default' => 12,
				'mobile_default'       => 10,
				'min'                  => 0,
				'max'                  => 200,
			)
		);

		// ── 3D Arc Settings — responsive ─────────────────────────────
		$this->add_control( 'hr_arc', array( 'type' => Controls_Manager::DIVIDER ) );

		$this->add_control(
			'arc_heading',
			array(
				'label'     => esc_html__( '3D Arc Settings', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'condition' => array( 'carousel_layout' => '3d-arc' ),
			)
		);

		$this->add_responsive_control(
			'arc_rotate',
			array(
				'label'                => esc_html__( 'Y-Axis Rotation (deg)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 40 ),
				'widescreen_default'   => array( 'size' => 40 ),
				'laptop_default'       => array( 'size' => 35 ),
				'tablet_extra_default' => array( 'size' => 30 ),
				'tablet_default'       => array( 'size' => 30 ),
				'mobile_extra_default' => array( 'size' => 25 ),
				'mobile_default'       => array( 'size' => 20 ),
				'range'                => array(
					'deg' => array(
						'min' => 0,
						'max' => 90,
					),
				),
				'condition'            => array( 'carousel_layout' => '3d-arc' ),
			)
		);

		$this->add_responsive_control(
			'arc_depth',
			array(
				'label'                => esc_html__( 'Depth (px)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 200 ),
				'widescreen_default'   => array( 'size' => 240 ),
				'laptop_default'       => array( 'size' => 180 ),
				'tablet_extra_default' => array( 'size' => 160 ),
				'tablet_default'       => array( 'size' => 140 ),
				'mobile_extra_default' => array( 'size' => 120 ),
				'mobile_default'       => array( 'size' => 100 ),
				'range'                => array(
					'px' => array(
						'min' => 0,
						'max' => 800,
					),
				),
				'condition'            => array( 'carousel_layout' => '3d-arc' ),
			)
		);

		$this->add_responsive_control(
			'arc_height_offset',
			array(
				'label'                => esc_html__( 'Arch Height Offset (px)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 80 ),
				'widescreen_default'   => array( 'size' => 90 ),
				'laptop_default'       => array( 'size' => 70 ),
				'tablet_extra_default' => array( 'size' => 60 ),
				'tablet_default'       => array( 'size' => 50 ),
				'mobile_extra_default' => array( 'size' => 40 ),
				'mobile_default'       => array( 'size' => 30 ),
				'range'                => array(
					'px' => array(
						'min' => 0,
						'max' => 400,
					),
				),
				'condition'            => array( 'carousel_layout' => '3d-arc' ),
			)
		);

		// ── 3D Circle Settings — responsive ──────────────────────────
		$this->add_control(
			'circle_heading',
			array(
				'label'     => esc_html__( '3D Circle Settings', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'condition' => array( 'carousel_layout' => '3d-circle' ),
			)
		);

		$this->add_responsive_control(
			'circle_radius',
			array(
				'label'                => esc_html__( 'Circle Radius (px)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 400 ),
				'widescreen_default'   => array( 'size' => 480 ),
				'laptop_default'       => array( 'size' => 360 ),
				'tablet_extra_default' => array( 'size' => 320 ),
				'tablet_default'       => array( 'size' => 280 ),
				'mobile_extra_default' => array( 'size' => 240 ),
				'mobile_default'       => array( 'size' => 200 ),
				'range'                => array(
					'px' => array(
						'min' => 100,
						'max' => 1200,
					),
				),
				'condition'            => array( 'carousel_layout' => '3d-circle' ),
			)
		);

		$this->add_responsive_control(
			'circle_tilt',
			array(
				'label'                => esc_html__( 'X-Axis Tilt (deg)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 15 ),
				'widescreen_default'   => array( 'size' => 15 ),
				'laptop_default'       => array( 'size' => 15 ),
				'tablet_extra_default' => array( 'size' => 12 ),
				'tablet_default'       => array( 'size' => 10 ),
				'mobile_extra_default' => array( 'size' => 8 ),
				'mobile_default'       => array( 'size' => 8 ),
				'range'                => array(
					'deg' => array(
						'min' => 0,
						'max' => 85,
					),
				),
				'condition'            => array( 'carousel_layout' => '3d-circle' ),
			)
		);

		// ── Circle Top Slide Settings — responsive ────────────────────
		$this->add_control(
			'circle_top_heading',
			array(
				'label'     => esc_html__( 'Circle Top Slide Settings', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => array( 'carousel_layout' => 'circle-top' ),
			)
		);

		$this->add_responsive_control(
			'circle_top_rotate',
			array(
				'label'                => esc_html__( 'Y-Axis Rotation (deg)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 55 ),
				'widescreen_default'   => array( 'size' => 55 ),
				'laptop_default'       => array( 'size' => 50 ),
				'tablet_extra_default' => array( 'size' => 45 ),
				'tablet_default'       => array( 'size' => 45 ),
				'mobile_extra_default' => array( 'size' => 40 ),
				'mobile_default'       => array( 'size' => 35 ),
				'range'                => array(
					'deg' => array(
						'min' => 10,
						'max' => 90,
					),
				),
				'condition'            => array( 'carousel_layout' => 'circle-top' ),
			)
		);

		$this->add_responsive_control(
			'circle_top_depth',
			array(
				'label'                => esc_html__( 'Depth (px)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 120 ),
				'widescreen_default'   => array( 'size' => 140 ),
				'laptop_default'       => array( 'size' => 110 ),
				'tablet_extra_default' => array( 'size' => 100 ),
				'tablet_default'       => array( 'size' => 90 ),
				'mobile_extra_default' => array( 'size' => 80 ),
				'mobile_default'       => array( 'size' => 70 ),
				'range'                => array(
					'px' => array(
						'min' => 0,
						'max' => 600,
					),
				),
				'condition'            => array( 'carousel_layout' => 'circle-top' ),
			)
		);

		$this->add_responsive_control(
			'circle_top_scale',
			array(
				'label'                => esc_html__( 'Scale Step', 'sifency-addons' ),
				'description'          => esc_html__( 'How much each side card shrinks per position step (0.02 – 0.30).', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 0.12 ),
				'widescreen_default'   => array( 'size' => 0.10 ),
				'laptop_default'       => array( 'size' => 0.12 ),
				'tablet_extra_default' => array( 'size' => 0.14 ),
				'tablet_default'       => array( 'size' => 0.15 ),
				'mobile_extra_default' => array( 'size' => 0.16 ),
				'mobile_default'       => array( 'size' => 0.18 ),
				'range'                => array(
					'px' => array(
						'min'  => 0.02,
						'max'  => 0.30,
						'step' => 0.01,
					),
				),
				'condition'            => array( 'carousel_layout' => 'circle-top' ),
			)
		);

		$this->add_responsive_control(
			'circle_top_width',
			array(
				'label'                => esc_html__( 'Slide Width (px)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 300 ),
				'widescreen_default'   => array( 'size' => 360 ),
				'laptop_default'       => array( 'size' => 280 ),
				'tablet_extra_default' => array( 'size' => 260 ),
				'tablet_default'       => array( 'size' => 240 ),
				'mobile_extra_default' => array( 'size' => 220 ),
				'mobile_default'       => array( 'size' => 200 ),
				'range'                => array(
					'px' => array(
						'min' => 100,
						'max' => 700,
					),
				),
				'selectors'            => array( '{{WRAPPER}} .sarc-layout-circle-top .sarc-slide' => 'width: {{SIZE}}{{UNIT}};' ),
				'condition'            => array( 'carousel_layout' => 'circle-top' ),
			)
		);

		$this->add_responsive_control(
			'circle_top_height',
			array(
				'label'                => esc_html__( 'Slide Height (px)', 'sifency-addons' ),
				'type'                 => Controls_Manager::SLIDER,
				'devices'              => array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' ),
				'default'              => array( 'size' => 420 ),
				'widescreen_default'   => array( 'size' => 500 ),
				'laptop_default'       => array( 'size' => 400 ),
				'tablet_extra_default' => array( 'size' => 380 ),
				'tablet_default'       => array( 'size' => 350 ),
				'mobile_extra_default' => array( 'size' => 320 ),
				'mobile_default'       => array( 'size' => 280 ),
				'range'                => array(
					'px' => array(
						'min' => 100,
						'max' => 900,
					),
				),
				'selectors'            => array( '{{WRAPPER}} .sarc-layout-circle-top .sarc-slide' => 'height: {{SIZE}}{{UNIT}};' ),
				'condition'            => array( 'carousel_layout' => 'circle-top' ),
			)
		);

		// ── Clip-Path preset / direction controls ─────────────────────
		$this->add_control(
			'clip_heading',
			array(
				'label'     => esc_html__( 'Clip-Path Preset', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => array( 'carousel_layout' => 'clip-path' ),
			)
		);

		$this->add_control(
			'clip_path_preset',
			array(
				'label'     => esc_html__( 'Shape Preset', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'options'   => array(
					'parallelogram' => esc_html__( 'Parallelogram (Default)', 'sifency-addons' ),
					'diamond'       => esc_html__( 'Diamond', 'sifency-addons' ),
					'arch-top'      => esc_html__( 'Arch Top', 'sifency-addons' ),
					'hexagon'       => esc_html__( 'Hexagon', 'sifency-addons' ),
					'circle-clip'   => esc_html__( 'Oval / Circle', 'sifency-addons' ),
					'wave'          => esc_html__( 'Wave Cut', 'sifency-addons' ),
				),
				'default'   => 'parallelogram',
				'condition' => array( 'carousel_layout' => 'clip-path' ),
			)
		);

		$this->add_control(
			'clip_path_direction',
			array(
				'label'     => esc_html__( 'Skew Direction', 'sifency-addons' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'ltr' => array(
						'title' => esc_html__( 'Left → Right', 'sifency-addons' ),
						'icon'  => 'eicon-arrow-right',
					),
					'rtl' => array(
						'title' => esc_html__( 'Right → Left', 'sifency-addons' ),
						'icon'  => 'eicon-arrow-left',
					),
				),
				'default'   => 'ltr',
				'condition' => array(
					'carousel_layout'  => 'clip-path',
					'clip_path_preset' => 'parallelogram',
				),
			)
		);

		$this->add_control(
			'clip_path_intensity',
			array(
				'label'     => esc_html__( 'Shape Intensity (%)', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => array( 'size' => 8 ),
				'range'     => array(
					'px' => array(
						'min' => 2,
						'max' => 40,
					),
				),
				'condition' => array( 'carousel_layout' => 'clip-path' ),
			)
		);

		// Navigation
		$this->add_control( 'hr_nav', array( 'type' => Controls_Manager::DIVIDER ) );

		$this->add_control(
			'show_navigation',
			array(
				'label'        => esc_html__( 'Show Navigation Arrows', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->add_control(
			'nav_prev_icon',
			array(
				'label'     => esc_html__( 'Prev Icon', 'sifency-addons' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'eicon-chevron-left',
					'library' => 'eicons',
				),
				'condition' => array( 'show_navigation' => 'yes' ),
			)
		);

		$this->add_control(
			'nav_next_icon',
			array(
				'label'     => esc_html__( 'Next Icon', 'sifency-addons' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'eicon-chevron-right',
					'library' => 'eicons',
				),
				'condition' => array( 'show_navigation' => 'yes' ),
			)
		);

		$this->add_control(
			'show_pagination',
			array(
				'label'        => esc_html__( 'Show Pagination Dots', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->end_controls_section();

		// ─── Card Display Options ─────────────────────────────────────
		$this->start_controls_section(
			'section_display',
			array(
				'label' => esc_html__( 'Card Display', 'sifency-addons' ),
			)
		);

		$this->add_control(
			'show_category',
			array(
				'label'        => esc_html__( 'Show Category/Tag', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->add_control(
			'show_title',
			array(
				'label'        => esc_html__( 'Show Title', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->add_control(
			'show_excerpt',
			array(
				'label'        => esc_html__( 'Show Excerpt', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->add_control(
			'excerpt_length',
			array(
				'label'     => esc_html__( 'Excerpt Words', 'sifency-addons' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 15,
				'min'       => 5,
				'max'       => 100,
				'condition' => array( 'show_excerpt' => 'yes' ),
			)
		);

		$this->add_control(
			'show_button',
			array(
				'label'        => esc_html__( 'Show Button', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			)
		);

		$this->add_control(
			'button_text',
			array(
				'label'     => esc_html__( 'Button Text', 'sifency-addons' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'Explore', 'sifency-addons' ),
				'condition' => array( 'show_button' => 'yes' ),
			)
		);

		$this->add_control(
			'image_size',
			array(
				'label'   => esc_html__( 'Image Size', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'options' => array(
					'thumbnail' => esc_html__( 'Thumbnail', 'sifency-addons' ),
					'medium'    => esc_html__( 'Medium', 'sifency-addons' ),
					'large'     => esc_html__( 'Large', 'sifency-addons' ),
					'full'      => esc_html__( 'Full', 'sifency-addons' ),
				),
				'default' => 'large',
			)
		);

		$this->end_controls_section();

		// ─── Manual Cards Repeater ────────────────────────────────────
		$this->start_controls_section(
			'section_cards',
			array(
				'label'     => esc_html__( 'Manual Cards', 'sifency-addons' ),
				'condition' => array( 'data_source' => 'manual' ),
			)
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'image',
			array(
				'label'   => esc_html__( 'Image', 'sifency-addons' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => array( 'url' => Utils::get_placeholder_image_src() ),
			)
		);

		$repeater->add_control(
			'tag_label',
			array(
				'label'   => esc_html__( 'Tag / Category', 'sifency-addons' ),
				'type'    => Controls_Manager::TEXT,
				'default' => 'Design',
			)
		);

		$repeater->add_control(
			'title',
			array(
				'label'   => esc_html__( 'Title', 'sifency-addons' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'Creative Project', 'sifency-addons' ),
			)
		);

		$repeater->add_control(
			'excerpt',
			array(
				'label'   => esc_html__( 'Excerpt', 'sifency-addons' ),
				'type'    => Controls_Manager::TEXTAREA,
				'default' => esc_html__( 'A brief description of the project or card content.', 'sifency-addons' ),
				'rows'    => 3,
			)
		);

		$repeater->add_control(
			'link',
			array(
				'label'       => esc_html__( 'Link', 'sifency-addons' ),
				'type'        => Controls_Manager::URL,
				'placeholder' => 'https://your-link.com',
				'default'     => array( 'url' => '#' ),
			)
		);

		$repeater->add_control(
			'clip_shape',
			array(
				'label'       => esc_html__( 'Custom Clip-Path Shape', 'sifency-addons' ),
				'description' => esc_html__( 'Optional. Overrides the default shape for this slide in Clip-Path mode. E.g: polygon(0 0, 80% 0, 100% 100%, 0 100%)', 'sifency-addons' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'placeholder' => 'polygon(0 0, 80% 0, 100% 100%, 0 100%)',
			)
		);

		$this->add_control(
			'cards_list',
			array(
				'label'       => esc_html__( 'Cards', 'sifency-addons' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'title'     => 'Arc Slide One',
						'tag_label' => 'Motion',
						'image'     => array( 'url' => Utils::get_placeholder_image_src() ),
					),
					array(
						'title'     => 'Arc Slide Two',
						'tag_label' => 'Design',
						'image'     => array( 'url' => Utils::get_placeholder_image_src() ),
					),
					array(
						'title'     => 'Arc Slide Three',
						'tag_label' => 'Creative',
						'image'     => array( 'url' => Utils::get_placeholder_image_src() ),
					),
					array(
						'title'     => 'Arc Slide Four',
						'tag_label' => 'Dev',
						'image'     => array( 'url' => Utils::get_placeholder_image_src() ),
					),
					array(
						'title'     => 'Arc Slide Five',
						'tag_label' => 'Agency',
						'image'     => array( 'url' => Utils::get_placeholder_image_src() ),
					),
				),
				'title_field' => '{{{ title }}}',
			)
		);

		$this->end_controls_section();

		// ─── Dynamic Query ────────────────────────────────────────────
		$this->add_sifency_arg_controls(
			array(
				'condition'    => array( 'data_source' => 'dynamic' ),
				'default_post' => 'portfolio',
			)
		);

		// ─── Help ─────────────────────────────────────────────────────
		$this->add_sifency_addons_help_controls();

		// ─── Style Controls ───────────────────────────────────────────

		// Card wrapper
		$this->add_sifency_addons_item_style_controls(
			array(
				'prefix'   => 'card_',
				'label'    => esc_html__( 'Card', 'sifency-addons' ),
				'selector' => '.sarc-card',
				'exclude'  => array( 'transition' ),
			)
		);

		// Image
		$this->add_sifency_addons_image_style_controls(
			array(
				'prefix'   => 'img_',
				'label'    => esc_html__( 'Image', 'sifency-addons' ),
				'selector' => '.sarc-card-image img',
			)
		);

		// Tag
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'    => 'tag_',
				'label'     => esc_html__( 'Tag / Category', 'sifency-addons' ),
				'selector'  => '.sarc-card-tag',
				'exclude'   => array( 'tabs', 'transition', 'bg', 'radius', 'shadow', 'stroke' ),
				'condition' => array( 'show_category' => 'yes' ),
			)
		);

		// Title
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'    => 'title_',
				'label'     => esc_html__( 'Title', 'sifency-addons' ),
				'selector'  => '.sarc-card-title',
				'exclude'   => array( 'tabs', 'transition', 'bg', 'radius', 'shadow', 'stroke' ),
				'condition' => array( 'show_title' => 'yes' ),
			)
		);

		// Excerpt
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'    => 'excerpt_',
				'label'     => esc_html__( 'Excerpt', 'sifency-addons' ),
				'selector'  => '.sarc-card-excerpt',
				'exclude'   => array( 'tabs', 'transition', 'bg', 'radius', 'shadow', 'stroke' ),
				'condition' => array( 'show_excerpt' => 'yes' ),
			)
		);

		// Button
		$this->add_Sifency_Addons_Button_Style_Controls(
			array(
				'selector'      => '.sarc-card-btn',
				'section_label' => esc_html__( 'Button', 'sifency-addons' ),
				'condition'     => array( 'show_button' => 'yes' ),
			)
		);

		// Navigation style
		$this->start_controls_section(
			'section_style_nav',
			array(
				'label'     => esc_html__( 'Navigation', 'sifency-addons' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_navigation' => 'yes' ),
			)
		);

		$this->add_responsive_control(
			'nav_icon_size',
			array(
				'label'     => esc_html__( 'Icon Size', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 10,
						'max' => 80,
					),
				),
				'default'   => array( 'size' => 20 ),
				'selectors' => array( '{{WRAPPER}} .sarc-nav-btn' => 'font-size: {{SIZE}}{{UNIT}};' ),
			)
		);

		$this->add_responsive_control(
			'nav_btn_size',
			array(
				'label'     => esc_html__( 'Button Size', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 30,
						'max' => 120,
					),
				),
				'default'   => array( 'size' => 52 ),
				'selectors' => array(
					'{{WRAPPER}} .sarc-nav-btn' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'nav_color',
			array(
				'label'     => esc_html__( 'Icon Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sarc-nav-btn' => 'color: {{VALUE}};' ),
			)
		);

		$this->add_control(
			'nav_bg',
			array(
				'label'     => esc_html__( 'Background', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sarc-nav-btn' => 'background: {{VALUE}};' ),
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'nav_border',
				'selector' => '{{WRAPPER}} .sarc-nav-btn',
			)
		);

		$this->add_responsive_control(
			'nav_radius',
			array(
				'label'     => esc_html__( 'Border Radius', 'sifency-addons' ),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => array( '{{WRAPPER}} .sarc-nav-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);

		$this->end_controls_section();

		// Pagination dots style
		$this->start_controls_section(
			'section_style_pagination',
			array(
				'label'     => esc_html__( 'Pagination', 'sifency-addons' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_pagination' => 'yes' ),
			)
		);

		$this->add_control(
			'dot_color',
			array(
				'label'     => esc_html__( 'Dot Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};' ),
			)
		);

		$this->add_control(
			'dot_active_color',
			array(
				'label'     => esc_html__( 'Active Dot Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .swiper-pagination-bullet-active' => 'background: {{VALUE}};' ),
			)
		);

		$this->add_responsive_control(
			'dot_size',
			array(
				'label'     => esc_html__( 'Dot Size', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 4,
						'max' => 24,
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();

		// Custom CSS
		$this->add_Sifency_Addons_Custom_CSS_Controls();
	}

	protected function render_dom( array $context ) {
		$this->sifency_addons_render_custom_css();
		$settings = $this->get_settings_for_display();

		$layout = esc_attr( $settings['carousel_layout'] ?? '3d-arc' );

		/**
		 * Build the full responsive breakpoints map so the JS can pick
		 * the right value at any viewport without PHP re-rendering.
		 *
		 * Elementor breakpoints (device slug → suffix used in settings keys):
		 *   widescreen, desktop (no suffix), laptop, tablet_extra,
		 *   tablet, mobile_extra, mobile
		 *
		 * For each responsive control we emit all device values as:
		 *   { desktop: N, widescreen: N, laptop: N, ... }
		 */
		$devices = array( 'desktop', 'widescreen', 'laptop', 'tablet_extra', 'tablet', 'mobile_extra', 'mobile' );

		/**
		 * Helper: collect a NUMBER responsive control across all devices.
		 * Returns an assoc array [ device => int_value ].
		 *
		 * @param string $base        Base control key (desktop value).
		 * @param int    $fallback    Fallback when device key is absent.
		 */
		$collect_num = function( string $base, int $fallback ) use ( $settings, $devices ): array {
			$map = array();
			foreach ( $devices as $device ) {
				$key            = ( 'desktop' === $device ) ? $base : $base . '_' . $device;
				$value          = isset( $settings[ $key ] ) ? (int) $settings[ $key ] : null;
				$map[ $device ] = ( null !== $value ) ? $value : $fallback;
			}
			return $map;
		};

		/**
		 * Helper: collect a SLIDER responsive control across all devices.
		 * Returns an assoc array [ device => float_value ].
		 *
		 * @param string $base     Base control key (desktop value).
		 * @param float  $fallback Fallback when device key is absent.
		 */
		$collect_slider = function( string $base, float $fallback ) use ( $settings, $devices ): array {
			$map = array();
			foreach ( $devices as $device ) {
				$key            = ( 'desktop' === $device ) ? $base : $base . '_' . $device;
				$value          = isset( $settings[ $key ]['size'] ) ? (float) $settings[ $key ]['size'] : null;
				$map[ $device ] = ( null !== $value ) ? $value : $fallback;
			}
			return $map;
		};

		$config = wp_json_encode(
			array(
				'layout'          => $layout,
				'loop'            => ( 'yes' === ( $settings['loop'] ?? 'yes' ) ),
				'autoplay'        => ( 'yes' === ( $settings['autoplay'] ?? 'yes' ) ),
				'autoplayDelay'   => (int) ( $settings['autoplay_delay'] ?? 3000 ),
				'speed'           => (int) ( $settings['speed'] ?? 700 ),

				// ── Responsive breakpoint maps ───────────────────────────
				// JS reads these via sarcGetResponsiveValue(config.slidesPerView)
				'slidesPerView'   => $collect_num( 'slides_per_view', 3 ),
				'spaceBetween'    => $collect_num( 'space_between', 24 ),

				// 3D Arc
				'arcRotate'       => $collect_slider( 'arc_rotate', 40.0 ),
				'arcDepth'        => $collect_slider( 'arc_depth', 200.0 ),
				'arcOffset'       => $collect_slider( 'arc_height_offset', 80.0 ),

				// 3D Circle
				'circleRadius'    => $collect_slider( 'circle_radius', 400.0 ),
				'circleTilt'      => $collect_slider( 'circle_tilt', 15.0 ),

				// Circle Top
				'circleTopRotate' => $collect_slider( 'circle_top_rotate', 55.0 ),
				'circleTopDepth'  => $collect_slider( 'circle_top_depth', 120.0 ),
				'circleTopScale'  => $collect_slider( 'circle_top_scale', 0.12 ),

				// Clip-Path (non-responsive — shape logic doesn't change per breakpoint)
				'clipPathPreset'  => esc_attr( $settings['clip_path_preset'] ?? 'parallelogram' ),
				'clipDirection'   => esc_attr( $settings['clip_path_direction'] ?? 'ltr' ),
				'clipIntensity'   => (float) ( $settings['clip_path_intensity']['size'] ?? 8 ),

				// UI
				'showNav'         => ( 'yes' === ( $settings['show_navigation'] ?? 'yes' ) ),
				'showPagination'  => ( 'yes' === ( $settings['show_pagination'] ?? 'yes' ) ),
			)
		);

		?>
		<div class="sarc-wrapper sarc-layout-<?php echo esc_attr( $layout ); ?>">
			<div class="sarc-swiper swiper" data-config='<?php echo esc_attr( $config ); ?>'>
				<div class="swiper-wrapper">
					<?php
					if ( 'dynamic' === ( $settings['data_source'] ?? 'manual' ) ) {
						$query_args = $this->get_sifency_addons_query_args();
						$query      = new \WP_Query( $query_args );
						if ( $query->have_posts() ) {
							while ( $query->have_posts() ) {
								$query->the_post();
								$thumb_url   = get_the_post_thumbnail_url( get_the_ID(), $settings['image_size'] ?? 'large' );
								$terms       = get_the_terms( get_the_ID(), 'category' );
								$tag         = ( $terms && ! is_wp_error( $terms ) ) ? $terms[0]->name : '';
								$excerpt_len = (int) ( $settings['excerpt_length'] ?? 15 );
								$excerpt     = has_excerpt()
									? wp_trim_words( get_the_excerpt(), $excerpt_len )
									: wp_trim_words( strip_shortcodes( get_the_content() ), $excerpt_len );

								$card = array(
									'_id'        => get_the_ID(),
									'image'      => array( 'url' => $thumb_url ),
									'tag_label'  => $tag,
									'title'      => get_the_title(),
									'excerpt'    => $excerpt,
									'link'       => array( 'url' => get_permalink() ),
									'clip_shape' => '',
								);
								$this->render_slide( $card, $settings );
							}
							wp_reset_postdata();
						}
					} else {
						foreach ( ( $settings['cards_list'] ?? array() ) as $card ) {
							$this->render_slide( $card, $settings );
						}
					}
					?>
				</div>

				<?php if ( 'yes' === ( $settings['show_pagination'] ?? 'yes' ) ) : ?>
					<div class="swiper-pagination sarc-pagination"></div>
				<?php endif; ?>
			</div>

			<?php if ( 'yes' === ( $settings['show_navigation'] ?? 'yes' ) ) : ?>
				<button class="sarc-nav-btn sarc-prev" aria-label="<?php esc_attr_e( 'Previous', 'sifency-addons' ); ?>">
					<?php
					Icons_Manager::render_icon(
						$settings['nav_prev_icon'] ?? array(
							'value'   => 'eicon-chevron-left',
							'library' => 'eicons',
						),
						array( 'aria-hidden' => 'true' )
					);
					?>
				</button>
				<button class="sarc-nav-btn sarc-next" aria-label="<?php esc_attr_e( 'Next', 'sifency-addons' ); ?>">
					<?php
					Icons_Manager::render_icon(
						$settings['nav_next_icon'] ?? array(
							'value'   => 'eicon-chevron-right',
							'library' => 'eicons',
						),
						array( 'aria-hidden' => 'true' )
					);
					?>
				</button>
			<?php endif; ?>
		</div>
		<?php
	}

	private function render_slide( array $card, array $settings ) {
		$repeater_class = ! empty( $card['_id'] ) ? ' elementor-repeater-item-' . esc_attr( $card['_id'] ) : '';
		$clip_attr      = ! empty( $card['clip_shape'] ) ? ' data-clip="' . esc_attr( $card['clip_shape'] ) . '"' : '';
		$img_url        = $card['image']['url'] ?? '';
		$link_url       = $card['link']['url'] ?? '#';
		$link_target    = ! empty( $card['link']['is_external'] ) ? ' target="_blank"' : '';
		$link_nofollow  = ! empty( $card['link']['nofollow'] ) ? ' rel="nofollow"' : '';
		?>
		<div class="swiper-slide sarc-slide<?php echo esc_attr( $repeater_class ); ?>"
		<?php
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Pre-escaped slide clip attributes
		echo wp_kses_post( $clip_attr );
		?>
		>
			<div class="sarc-card">

				<?php if ( ! empty( $img_url ) ) : ?>
					<div class="sarc-card-image">
						<img src="<?php echo esc_url( $img_url ); ?>"
							 alt="<?php echo esc_attr( $card['title'] ?? '' ); ?>"
							 loading="lazy">
						<?php if ( ! empty( $link_url ) && '#' !== $link_url ) : ?>
							<a href="<?php echo esc_url( $link_url ); ?>"
							   class="sarc-card-link-mask"
							   <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Pre-escaped HTML attributes
								echo wp_kses_post( $link_target . $link_nofollow );
								?>
							   tabindex="-1" aria-hidden="true"></a>
						<?php endif; ?>
					</div>
				<?php endif; ?>

				<div class="sarc-card-content">
					<?php if ( 'yes' === ( $settings['show_category'] ?? 'yes' ) && ! empty( $card['tag_label'] ) ) : ?>
						<span class="sarc-card-tag"><?php echo esc_html( $card['tag_label'] ); ?></span>
					<?php endif; ?>

					<?php if ( 'yes' === ( $settings['show_title'] ?? 'yes' ) && ! empty( $card['title'] ) ) : ?>
						<h3 class="sarc-card-title">
							<?php if ( ! empty( $link_url ) ) : ?>
								<a href="<?php echo esc_url( $link_url ); ?>"
								<?php
                                // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Pre-escaped HTML attributes
								echo wp_kses_post( $link_target . $link_nofollow );
								?>
								>
									<?php echo esc_html( $card['title'] ); ?>
								</a>
							<?php else : ?>
								<?php echo esc_html( $card['title'] ); ?>
							<?php endif; ?>
						</h3>
					<?php endif; ?>

					<?php if ( 'yes' === ( $settings['show_excerpt'] ?? 'yes' ) && ! empty( $card['excerpt'] ) ) : ?>
						<p class="sarc-card-excerpt"><?php echo esc_html( $card['excerpt'] ); ?></p>
					<?php endif; ?>

					<?php
					if ( 'yes' === ( $settings['show_button'] ?? 'yes' ) ) :
						$btn_text = ! empty( $settings['button_text'] ) ? $settings['button_text'] : esc_html__( 'Explore', 'sifency-addons' );
						?>
						<a href="<?php echo esc_url( $link_url ); ?>"
						   class="sarc-card-btn"
						   <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Pre-escaped HTML attributes
							echo wp_kses_post( $link_target . $link_nofollow );
							?>
							>
							<?php echo esc_html( $btn_text ); ?>
						</a>
					<?php endif; ?>
				</div>

			</div>
		</div>
		<?php
	}
}
