<?php
namespace AddronixAddons\Widgets;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Repeater;

class Testimonials_Columns extends Widget_Base {

	const TD = 'addronix-addons-for-elementor';

	public function get_name(): string {
		return 'aafe_testimonials_columns';
	}

	public function get_title(): string {
		return esc_html__( 'AAFE Testimonials Columns', 'addronix-addons-for-elementor' );
	}

	public function get_icon(): string {
		return 'eicon-testimonial';
	}

	public function get_description(): string {
		return 'Display customer reviews in a scrolling masonry-style columns layout.';
	}

	public function get_custom_help_url(): string {
		return 'https://uniqueelements.io/docs/' . $this->get_name();
	}

	public function get_categories(): array {
		return [ 'addronix-addons-for-elementor' ];
	}

	public function get_keywords(): array {
		return [ 'testimonials', 'reviews', 'columns', 'marquee', 'scroll', 'social proof' ];
	}

	public function get_style_depends(): array {
		return [ 'aafe-testimonials-columns-style' ];
	}

	/**
	 * @return array<string, string>
	 */
	private function heading_tag_options(): array {
		return [
			'h1'   => 'H1',
			'h2'   => 'H2',
			'h3'   => 'H3',
			'h4'   => 'H4',
			'h5'   => 'H5',
			'h6'   => 'H6',
			'div'  => 'div',
			'span' => 'span',
			'p'    => 'p',
		];
	}

	protected function register_controls(): void {

		/* ── CONTENT: Testimonials ───────────────────────────────── */

		$this->start_controls_section( 'section_testimonials', [
			'label' => esc_html__( 'Testimonials', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$repeater = new Repeater();

		$repeater->add_control( 'text', [
			'label'   => esc_html__( 'Quote', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::TEXTAREA,
			'dynamic' => [
				'active'     => true,
				'categories' => [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ],
			],
			'default' => esc_html__( 'This product revolutionized our operations and improved efficiency across the board.', 'addronix-addons-for-elementor' ),
			'rows'    => 4,
		] );

		$repeater->add_control( 'image', [
			'label'   => esc_html__( 'Avatar', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::MEDIA,
			'dynamic' => [
				'active'     => true,
				'categories' => [ \Elementor\Modules\DynamicTags\Module::IMAGE_CATEGORY ],
			],
			'default' => [
				'url' => \Elementor\Utils::get_placeholder_image_src(),
			],
		] );

		$repeater->add_control( 'name', [
			'label'   => esc_html__( 'Name', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::TEXT,
			'dynamic' => [
				'active'     => true,
				'categories' => [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ],
			],
			'default' => esc_html__( 'Briana Patton', 'addronix-addons-for-elementor' ),
		] );

		$repeater->add_control( 'role', [
			'label'   => esc_html__( 'Role', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::TEXT,
			'dynamic' => [
				'active'     => true,
				'categories' => [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ],
			],
			'default' => esc_html__( 'Operations Manager', 'addronix-addons-for-elementor' ),
		] );

		$placeholder = \Elementor\Utils::get_placeholder_image_src();
		$default_items = [
			[
				'text'  => esc_html__( 'This ERP revolutionized our operations, streamlining finance and inventory. The cloud-based platform keeps us productive, even remotely.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Briana Patton', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'Operations Manager', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( 'Implementing this ERP was smooth and quick. The customizable, user-friendly interface made team training effortless.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Bilal Ahmed', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'IT Manager', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( 'The support team is exceptional, guiding us through setup and providing ongoing assistance, ensuring our satisfaction.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Saman Malik', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'Customer Support Lead', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( "This ERP's seamless integration enhanced our business operations and efficiency. Highly recommend for its intuitive interface.", 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Omar Raza', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'CEO', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( 'Its robust features and quick support have transformed our workflow, making us significantly more efficient.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Zainab Hussain', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'Project Manager', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( 'The smooth implementation exceeded expectations. It streamlined processes, improving overall business performance.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Aliza Khan', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'Business Analyst', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( 'Our business functions improved with a user-friendly design and positive customer feedback.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Farhan Siddiqui', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'Marketing Director', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( 'They delivered a solution that exceeded expectations, understanding our needs and enhancing our operations.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Sana Sheikh', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'Sales Manager', 'addronix-addons-for-elementor' ),
			],
			[
				'text'  => esc_html__( 'Using this platform, our online presence and conversions significantly improved, boosting business performance.', 'addronix-addons-for-elementor' ),
				'image' => [ 'url' => $placeholder ],
				'name'  => esc_html__( 'Hassan Ali', 'addronix-addons-for-elementor' ),
				'role'  => esc_html__( 'E-commerce Manager', 'addronix-addons-for-elementor' ),
			],
		];

		$this->add_control( 'testimonials', [
			'label'       => esc_html__( 'Items', 'addronix-addons-for-elementor' ),
			'type'        => Controls_Manager::REPEATER,
			'fields'      => $repeater->get_controls(),
			'default'     => $default_items,
			'title_field' => '{{{ name }}}',
		] );

		$this->end_controls_section();

		/* ── CONTENT: Header ────────────────────────────────────── */

		$this->start_controls_section( 'section_header', [
			'label' => esc_html__( 'Section Header', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_control( 'show_badge', [
			'label'        => esc_html__( 'Show Badge', 'addronix-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
		] );

		$this->add_control( 'badge_text', [
			'label'     => esc_html__( 'Badge Text', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::TEXT,
			'dynamic'   => [
				'active'     => true,
				'categories' => [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ],
			],
			'default'   => esc_html__( 'Testimonials', 'addronix-addons-for-elementor' ),
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_control( 'heading', [
			'label'       => esc_html__( 'Heading', 'addronix-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'dynamic'     => [
				'active'     => true,
				'categories' => [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ],
			],
			'default'     => esc_html__( 'What our users say', 'addronix-addons-for-elementor' ),
			'label_block' => true,
		] );

		$this->add_control( 'heading_tag', [
			'label'   => esc_html__( 'HTML Tag', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'h2',
			'options' => $this->heading_tag_options(),
		] );

		$this->add_control( 'description', [
			'label'   => esc_html__( 'Description', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::TEXTAREA,
			'dynamic' => [
				'active'     => true,
				'categories' => [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ],
			],
			'default' => esc_html__( 'See what our customers have to say about us.', 'addronix-addons-for-elementor' ),
			'rows'    => 3,
		] );

		$this->end_controls_section();


		/* ── CONTENT: Layout Settings ───────────────────────────── */

		$this->start_controls_section( 'section_settings', [
			'label' => esc_html__( 'Layout Settings', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_responsive_control( 'columns', [
			'label'          => esc_html__( 'Columns', 'addronix-addons-for-elementor' ),
			'type'           => Controls_Manager::SELECT,
			'default'        => '3',
			'tablet_default' => '2',
			'mobile_default' => '1',
			'options'        => [
				'1' => '1',
				'2' => '2',
				'3' => '3',
				'4' => '4',
			],
			'prefix_class'   => 'aafe-tc-cols%s-',
			'render_type'    => 'template',
		] );
		
		$this->add_control( 'h_animation_speed', [
			'label'     => esc_html__( 'Animation Speeds', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );

		$this->add_control( 'col1_duration', [
			'label'   => esc_html__( 'Column 1 Duration (s)', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::NUMBER,
			'dynamic' => [ 'active' => true ],
			'min'     => 5, 'max' => 60, 'step' => 1,
			'default' => 15,
		] );

		$this->add_control( 'col2_duration', [
			'label'   => esc_html__( 'Column 2 Duration (s)', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::NUMBER,
			'dynamic' => [ 'active' => true ],
			'min'     => 5, 'max' => 60, 'step' => 1,
			'default' => 19,
		] );

		$this->add_control( 'col3_duration', [
			'label'   => esc_html__( 'Column 3 Duration (s)', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::NUMBER,
			'dynamic' => [ 'active' => true ],
			'min'     => 5, 'max' => 60, 'step' => 1,
			'default' => 17,
		] );

		$this->add_control( 'col4_duration', [
			'label'   => esc_html__( 'Column 4 Duration (s)', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::NUMBER,
			'dynamic' => [ 'active' => true ],
			'min'     => 5, 'max' => 60, 'step' => 1,
			'default' => 21,
		] );

		$this->add_control( 'pause_on_hover', [
			'label'        => esc_html__( 'Pause Animation on Hover', 'addronix-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
			'separator'    => 'before',
		] );

		$this->end_controls_section();


		/* ── STYLE: Layout ──────────────────────────────────────── */

		$this->start_controls_section( 'style_layout', [
			'label' => esc_html__( 'Layout', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_group_control( Group_Control_Background::get_type(), [
			'name'     => 'wrapper_bg',
			'selector' => '{{WRAPPER}} .aafe-testimonials-columns-wrapper',
		] );

		$this->add_responsive_control( 'wrapper_padding', [
			'label'      => esc_html__( 'Wrapper Padding', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [
				'top' => '80', 'right' => '20', 'bottom' => '80', 'left' => '20',
				'unit' => 'px', 'isLinked' => false,
			],
			'selectors'  => [
				'{{WRAPPER}} .aafe-testimonials-columns-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
			],
		] );

		$this->add_control( 'h_grid_gap', [
			'label'     => esc_html__( 'Grid Gaps', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );

		$this->add_responsive_control( 'columns_gap', [
			'label'      => esc_html__( 'Horizontal Gap (Between Columns)', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
			'default'    => [ 'unit' => 'px', 'size' => 24 ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-testimonials-columns__marquee' => '--aafe-tc-columns-gap: {{SIZE}}{{UNIT}};',
			],
		] );
		
		$this->add_responsive_control( 'card_gap', [
			'label'      => esc_html__( 'Vertical Gap (Between Cards)', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
			'default'    => [ 'unit' => 'px', 'size' => 24 ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-testimonials-columns__track' => '--aafe-tc-card-gap: {{SIZE}}{{UNIT}};',
			],
		] );

		$this->add_control( 'h_marquee_settings', [
			'label'     => esc_html__( 'Marquee Settings', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );

		$this->add_responsive_control( 'column_width', [
			'label'       => esc_html__( 'Column Width', 'addronix-addons-for-elementor' ),
			'type'        => Controls_Manager::SLIDER,
			'size_units'  => [ 'px', '%', 'vw' ],
			'range'       => [
				'px' => [ 'min' => 200, 'max' => 600, 'step' => 4 ],
				'%'  => [ 'min' => 10,  'max' => 100, 'step' => 1 ],
				'vw' => [ 'min' => 10,  'max' => 60,  'step' => 1 ],
			],
			'default'     => [ 'unit' => '%', 'size' => 100 ],
			'render_type' => 'template',
		] );

		$this->add_responsive_control( 'marquee_max_height', [
			'label'      => esc_html__( 'Marquee Max Height', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'range'      => [ 'px' => [ 'min' => 200, 'max' => 1200 ] ],
			'default'    => [ 'unit' => 'px', 'size' => 740 ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-testimonials-columns__marquee' => 'max-height: {{SIZE}}{{UNIT}};',
			],
		] );
		
		$this->add_responsive_control( 'marquee_margin_top', [
			'label'      => esc_html__( 'Marquee Margin Top', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [ 'unit' => 'px', 'size' => 40 ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-testimonials-columns__marquee' => 'margin-top: {{SIZE}}{{UNIT}};',
			],
		] );
		
		$this->add_control( 'mask_fade', [
			'label'        => esc_html__( 'Enable Top/Bottom Fade Mask', 'addronix-addons-for-elementor' ),
			'type'         => Controls_Manager::SWITCHER,
			'return_value' => 'yes',
			'default'      => 'yes',
		] );

		$this->end_controls_section();


		/* ── STYLE: Header ──────────────────────────────────────── */

		$this->start_controls_section( 'style_header', [
			'label' => esc_html__( 'Section Header', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_responsive_control( 'heading_align', [
			'label'     => esc_html__( 'Alignment', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::CHOOSE,
			'options'   => [
				'left'   => [ 'title' => esc_html__( 'Left', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-left' ],
				'center' => [ 'title' => esc_html__( 'Center', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-center' ],
				'right'  => [ 'title' => esc_html__( 'Right', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-right' ],
			],
			'default'   => 'center',
			'selectors' => [
				'{{WRAPPER}} .aafe-testimonials-columns__header' => 'text-align: {{VALUE}};',
			],
		] );
		
		$this->add_control( 'h_style_badge', [
			'label'     => esc_html__( 'Badge', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_control( 'badge_color', [
			'label'     => esc_html__( 'Text Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__badge' => 'color: {{VALUE}};' ],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_control( 'badge_hover_color', [
			'label'     => esc_html__( 'Hover Text Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__badge:hover' => 'color: {{VALUE}};' ],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_control( 'badge_bg', [
			'label'     => esc_html__( 'Background', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => 'transparent',
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__badge' => 'background-color: {{VALUE}};' ],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_control( 'badge_hover_bg', [
			'label'     => esc_html__( 'Hover Background', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__badge:hover' => 'background-color: {{VALUE}};' ],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'badge_border',
			'selector' => '{{WRAPPER}} .aafe-testimonials-columns__badge',
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_control( 'badge_border_hover', [
			'label'     => esc_html__( 'Hover Border Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__badge:hover' => 'border-color: {{VALUE}};' ],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_responsive_control( 'badge_radius', [
			'label'      => esc_html__( 'Border Radius', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [
				'top' => '8', 'right' => '8', 'bottom' => '8', 'left' => '8',
				'unit' => 'px', 'isLinked' => true,
			],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'           => 'badge_typography',
			'selector'       => '{{WRAPPER}} .aafe-testimonials-columns__badge',
			'fields_options' => [
				'typography'  => [ 'default' => 'custom' ],
				'font_family' => [ 'default' => 'Inter' ],
				'font_size'   => [
					'default'        => [ 'unit' => 'px', 'size' => 12 ],
					'tablet_default' => [ 'unit' => 'px', 'size' => 12 ],
					'mobile_default' => [ 'unit' => 'px', 'size' => 11 ],
				],
			],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_responsive_control( 'badge_padding', [
			'label'      => esc_html__( 'Padding', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [
				'top' => '4', 'right' => '16', 'bottom' => '4', 'left' => '16',
				'unit' => 'px', 'isLinked' => false,
			],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
			'condition' => [ 'show_badge' => 'yes' ],
		] );

		$this->add_control( 'h_style_heading', [
			'label'     => esc_html__( 'Heading', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );
		
		$this->add_control( 'heading_color', [
			'label'     => esc_html__( 'Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => '#0f172a',
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__heading' => 'color: {{VALUE}};' ],
		] );

		$this->add_control( 'heading_hover_color', [
			'label'     => esc_html__( 'Hover Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__heading:hover' => 'color: {{VALUE}};' ],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'           => 'heading_typography',
			'selector'       => '{{WRAPPER}} .aafe-testimonials-columns__heading',
			'fields_options' => [
				'typography'  => [ 'default' => 'custom' ],
				'font_family' => [ 'default' => 'Sora' ],
				'font_size'   => [
					'default'        => [ 'unit' => 'px', 'size' => 40 ],
					'tablet_default' => [ 'unit' => 'px', 'size' => 32 ],
					'mobile_default' => [ 'unit' => 'px', 'size' => 26 ],
				],
			],
		] );

		$this->add_responsive_control( 'heading_margin', [
			'label'      => esc_html__( 'Margin Top', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [ 'unit' => 'px', 'size' => 20 ],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__heading' => 'margin-top: {{SIZE}}{{UNIT}};', ],
		] );

		$this->add_control( 'h_style_desc', [
			'label'     => esc_html__( 'Description', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );
		
		$this->add_control( 'desc_color', [
			'label'     => esc_html__( 'Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => '#64748b',
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__description' => 'color: {{VALUE}};' ],
		] );

		$this->add_control( 'desc_hover_color', [
			'label'     => esc_html__( 'Hover Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__description:hover' => 'color: {{VALUE}};' ],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'           => 'desc_typography',
			'selector'       => '{{WRAPPER}} .aafe-testimonials-columns__description',
			'fields_options' => [
				'typography'  => [ 'default' => 'custom' ],
				'font_family' => [ 'default' => 'Inter' ],
				'font_size'   => [
					'default'        => [ 'unit' => 'px', 'size' => 15 ],
					'tablet_default' => [ 'unit' => 'px', 'size' => 14 ],
					'mobile_default' => [ 'unit' => 'px', 'size' => 14 ],
				],
			],
		] );

		$this->add_responsive_control( 'desc_margin', [
			'label'      => esc_html__( 'Margin Top', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [ 'unit' => 'px', 'size' => 20 ],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__description' => 'margin-top: {{SIZE}}{{UNIT}};', ],
		] );

		$this->end_controls_section();


		/* ── STYLE: Testimonial Card ────────────────────────────── */

		$this->start_controls_section( 'style_card', [
			'label' => esc_html__( 'Testimonial Card', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_responsive_control( 'card_max_width', [
			'label'      => esc_html__( 'Card Max Width', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'range'      => [ 'px' => [ 'min' => 200, 'max' => 480 ] ],
			'default'    => [ 'unit' => 'px', 'size' => 320 ],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__card' => 'max-width: {{SIZE}}{{UNIT}};', ],
		] );
		
		$this->add_control( 'card_bg', [
			'label'     => esc_html__( 'Background', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => '#ffffff',
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__card' => 'background-color: {{VALUE}};' ],
		] );

		$this->add_control( 'card_bg_hover', [
			'label'     => esc_html__( 'Hover Background', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__card:hover' => 'background-color: {{VALUE}};' ],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'card_border',
			'selector' => '{{WRAPPER}} .aafe-testimonials-columns__card',
		] );

		$this->add_control( 'card_border_hover', [
			'label'     => esc_html__( 'Hover Border Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__card:hover' => 'border-color: {{VALUE}};' ],
		] );

		$this->add_responsive_control( 'card_radius', [
			'label'      => esc_html__( 'Border Radius', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [
				'top' => '24', 'right' => '24', 'bottom' => '24', 'left' => '24',
				'unit' => 'px', 'isLinked' => true,
			],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->add_responsive_control( 'card_padding', [
			'label'      => esc_html__( 'Padding', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [
				'top' => '40', 'right' => '40', 'bottom' => '40', 'left' => '40',
				'unit' => 'px', 'isLinked' => true,
			],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'card_shadow',
			'selector' => '{{WRAPPER}} .aafe-testimonials-columns__card',
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'card_shadow_hover',
			'label'    => esc_html__( 'Box Shadow (Hover)', 'addronix-addons-for-elementor' ),
			'selector' => '{{WRAPPER}} .aafe-testimonials-columns__card:hover',
		] );

		$this->end_controls_section();


		/* ── STYLE: Card Content ────────────────────────────────── */

		$this->start_controls_section( 'style_card_content', [
			'label' => esc_html__( 'Card Content', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );
		
		$this->add_control( 'h_style_avatar', [
			'label'     => esc_html__( 'Avatar', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
		] );

		$this->add_responsive_control( 'avatar_size', [
			'label'      => esc_html__( 'Avatar Size', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [ 'unit' => 'px', 'size' => 40 ],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__avatar' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; object-fit: cover;', ],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'avatar_border',
			'selector' => '{{WRAPPER}} .aafe-testimonials-columns__avatar',
		] );

		$this->add_responsive_control( 'avatar_radius', [
			'label'      => esc_html__( 'Border Radius', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
			'default'    => [
				'top' => '50', 'right' => '50', 'bottom' => '50', 'left' => '50',
				'unit' => '%', 'isLinked' => true,
			],
			'selectors'  => [ '{{WRAPPER}} .aafe-testimonials-columns__avatar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'avatar_shadow',
			'selector' => '{{WRAPPER}} .aafe-testimonials-columns__avatar',
		] );

		$this->add_control( 'h_style_quote', [
			'label'     => esc_html__( 'Quote', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );

		$this->add_control( 'card_text_color', [
			'label'     => esc_html__( 'Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => '#1e293b',
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__quote' => 'color: {{VALUE}};' ],
		] );

		$this->add_control( 'card_text_hover_color', [
			'label'     => esc_html__( 'Hover Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__card:hover .aafe-testimonials-columns__quote' => 'color: {{VALUE}};' ],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'           => 'card_text_typography',
			'selector'       => '{{WRAPPER}} .aafe-testimonials-columns__quote',
			'fields_options' => [
				'typography'  => [ 'default' => 'custom' ],
				'font_family' => [ 'default' => 'Inter' ],
			],
		] );

		$this->add_control( 'h_style_name', [
			'label'     => esc_html__( 'Name', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );

		$this->add_control( 'card_name_color', [
			'label'     => esc_html__( 'Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => '#0f172a',
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__name' => 'color: {{VALUE}};' ],
		] );

		$this->add_control( 'card_name_hover_color', [
			'label'     => esc_html__( 'Hover Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__card:hover .aafe-testimonials-columns__name' => 'color: {{VALUE}};' ],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'           => 'card_name_typography',
			'selector'       => '{{WRAPPER}} .aafe-testimonials-columns__name',
			'fields_options' => [
				'typography'  => [ 'default' => 'custom' ],
				'font_family' => [ 'default' => 'Sora' ],
			],
		] );

		$this->add_control( 'h_style_role', [
			'label'     => esc_html__( 'Role', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::HEADING,
			'separator' => 'before',
		] );

		$this->add_control( 'card_role_color', [
			'label'     => esc_html__( 'Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => '#64748b',
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__role' => 'color: {{VALUE}};' ],
		] );

		$this->add_control( 'card_role_hover_color', [
			'label'     => esc_html__( 'Hover Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns__card:hover .aafe-testimonials-columns__role' => 'color: {{VALUE}};' ],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'           => 'card_role_typography',
			'selector'       => '{{WRAPPER}} .aafe-testimonials-columns__role',
			'fields_options' => [
				'typography'  => [ 'default' => 'custom' ],
				'font_family' => [ 'default' => 'Inter' ],
				'font_size'   => [
					'default'        => [ 'unit' => 'px', 'size' => 12 ],
					'tablet_default' => [ 'unit' => 'px', 'size' => 12 ],
					'mobile_default' => [ 'unit' => 'px', 'size' => 11 ],
				],
			],
		] );

		$this->end_controls_section();


		/* ── STYLE: Hover Effects ───────────────────────────────── */

		$this->start_controls_section( 'style_hover_effects', [
			'label' => esc_html__( 'Hover Effects', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_control( 'hover_effect_type', [
			'label'   => esc_html__( 'Hover Effect Type', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'default' => 'none',
			'options' => [
				'none'       => esc_html__( 'None', 'addronix-addons-for-elementor' ),
				'lift'       => esc_html__( 'Lift', 'addronix-addons-for-elementor' ),
				'glow'       => esc_html__( 'Glow', 'addronix-addons-for-elementor' ),
				'scale'      => esc_html__( 'Scale', 'addronix-addons-for-elementor' ),
				'border-pop' => esc_html__( 'Border Pop', 'addronix-addons-for-elementor' ),
				'overlay'    => esc_html__( 'Overlay', 'addronix-addons-for-elementor' ),
				'shine'      => esc_html__( 'Shine', 'addronix-addons-for-elementor' ),
				'flip'       => esc_html__( 'Flip', 'addronix-addons-for-elementor' ),
			],
		] );

		$this->add_control( 'hover_duration', [
			'label'     => esc_html__( 'Transition Duration (ms)', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 100, 'max' => 800 ] ],
			'default'   => [ 'size' => 300 ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns-wrapper *' => 'transition-duration: {{SIZE}}ms;', ],
		] );

		$this->add_control( 'hover_easing', [
			'label'     => esc_html__( 'Transition Easing', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SELECT,
			'default'   => 'ease',
			'options'   => [
				'ease'        => 'ease',
				'ease-in'     => 'ease-in',
				'ease-out'    => 'ease-out',
				'ease-in-out' => 'ease-in-out',
				'linear'      => 'linear',
			],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns-wrapper *' => 'transition-timing-function: {{VALUE}};', ],
		] );

		$this->add_control( 'hover_overlay_color', [
			'label'     => esc_html__( 'Overlay Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'dynamic'   => [ 'active' => true ],
			'default'   => 'rgba(0,0,0,0.5)',
			'condition' => [ 'hover_effect_type' => 'overlay' ],
			'selectors' => [ '{{WRAPPER}} .aafe-testimonials-columns-wrapper' => '--aafe-hover-overlay: {{VALUE}};', ],
		] );

		$this->add_control( 'hover_scale', [
			'label'     => esc_html__( 'Scale Amount', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 1.00, 'max' => 1.20, 'step' => 0.01 ] ],
			'default'   => [ 'size' => 1.03 ],
			'condition' => [ 'hover_effect_type' => [ 'scale', 'lift', 'border-pop' ], ],
		] );

		$this->end_controls_section();


		/* ── STYLE: Entrance Animation ──────────────────────────── */

		$this->start_controls_section( 'section_entrance_animation', [
			'label' => esc_html__( 'Entrance Animation', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_control( 'animation_type', [
			'label'   => esc_html__( 'Animation Type', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'options' => [
				'none'        => esc_html__( 'None', 'addronix-addons-for-elementor' ),
				'fadeIn'      => esc_html__( 'Fade In', 'addronix-addons-for-elementor' ),
				'fadeInUp'    => esc_html__( 'Fade In Up', 'addronix-addons-for-elementor' ),
				'fadeInDown'  => esc_html__( 'Fade In Down', 'addronix-addons-for-elementor' ),
				'fadeInLeft'  => esc_html__( 'Fade In Left', 'addronix-addons-for-elementor' ),
				'fadeInRight' => esc_html__( 'Fade In Right', 'addronix-addons-for-elementor' ),
				'zoomIn'      => esc_html__( 'Zoom In', 'addronix-addons-for-elementor' ),
			],
			'default' => 'none',
		] );

		$this->add_control( 'animation_duration', [
			'label'     => esc_html__( 'Animation Duration (ms)', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::NUMBER,
			'default'   => 600,
			'condition' => [ 'animation_type!' => 'none' ],
		] );

		$this->add_control( 'animation_delay', [
			'label'     => esc_html__( 'Animation Delay (ms)', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::NUMBER,
			'default'   => 0,
			'condition' => [ 'animation_type!' => 'none' ],
		] );

		$this->end_controls_section();

	}



	/**
	 * @param array<string, mixed> $item Testimonial item.
	 */
	private function render_card( array $item ): void {
		?>
		<article class="aafe-testimonials-columns__card" tabindex="0">
			<?php if ( ! empty( $item['text'] ) ) : ?>
				<div class="aafe-testimonials-columns__quote"><?php echo wp_kses_post( $item['text'] ); ?></div>
			<?php endif; ?>
			<div class="aafe-testimonials-columns__author">
				<?php
				$img_id  = absint( $item['image']['id'] ?? 0 );
				$img_url = ! empty( $item['image']['url'] ) ? $item['image']['url'] : '';
				$alt     = ! empty( $item['name'] ) ? $item['name'] : '';
				if ( $img_id ) {
					echo wp_get_attachment_image(
						$img_id,
						'thumbnail',
						false,
						[
							'class'   => 'aafe-testimonials-columns__avatar',
							'loading' => 'lazy',
							'alt'     => esc_attr( $alt ),
						]
					);
				} elseif ( $img_url ) {
					printf(
						'<img class="aafe-testimonials-columns__avatar" src="%1$s" alt="%2$s" width="40" height="40" loading="lazy">',
						esc_url( $img_url ),
						esc_attr( $alt )
					);
				}
				?>
				<div class="aafe-testimonials-columns__meta">
					<?php if ( ! empty( $item['name'] ) ) : ?>
						<div class="aafe-testimonials-columns__name"><?php echo esc_html( $item['name'] ); ?></div>
					<?php endif; ?>
					<?php if ( ! empty( $item['role'] ) ) : ?>
						<div class="aafe-testimonials-columns__role"><?php echo esc_html( $item['role'] ); ?></div>
					<?php endif; ?>
				</div>
			</div>
		</article>
		<?php
	}

	/**
	 * @param array<int, array<string, mixed>> $items Column items.
	 */
	private function render_column( array $items, float $duration, string $modifier = '' ): void {
		if ( empty( $items ) ) {
			return;
		}

		$duration = max( 5, min( 60, $duration ) );
		?>
		<div class="aafe-testimonials-columns__column<?php echo esc_attr( $modifier ); ?>"
			style="--aafe-col-duration: <?php echo esc_attr( $duration ); ?>s;">
			<div class="aafe-testimonials-columns__track">
				<div class="aafe-testimonials-columns__loop" aria-hidden="false">
					<?php foreach ( $items as $item ) :
						$this->render_card( $item );
					endforeach; ?>
				</div>
				<div class="aafe-testimonials-columns__loop" aria-hidden="true">
					<?php foreach ( $items as $item ) :
						$this->render_card( $item );
					endforeach; ?>
				</div>
			</div>
		</div>
		<?php
	}

	protected function render(): void {
		$s = $this->get_settings_for_display();

		$items = ! empty( $s['testimonials'] ) && is_array( $s['testimonials'] ) ? $s['testimonials'] : [];

		$hover_type     = $s['hover_effect_type'] ?? 'none';
		$hover_scale    = isset( $s['hover_scale']['size'] ) ? (float) $s['hover_scale']['size'] : 1.03;
		$hover_duration = isset( $s['hover_duration']['size'] ) ? (float) $s['hover_duration']['size'] : 300;

		$allowed_tags = array_keys( $this->heading_tag_options() );
		$heading_tag  = in_array( $s['heading_tag'] ?? '', $allowed_tags, true ) ? $s['heading_tag'] : 'h2';

		$pause_class = 'yes' === ( $s['pause_on_hover'] ?? 'yes' ) ? ' aafe-testimonials-columns-wrapper--pause-hover' : '';
		$mask_class  = 'yes' === ( $s['mask_fade'] ?? 'yes' ) ? ' aafe-testimonials-columns__marquee--masked' : '';

		// Column width (for CSS variable on marquee)
		$col_width_val  = isset( $s['column_width']['size'] ) ? (float) $s['column_width']['size'] : 100;
		$col_width_unit = $s['column_width']['unit'] ?? '%';
		
		if ( '%' === $col_width_unit ) {
			// Mathematical perfection for CSS Grid:
			// column_width = (Total% - TotalGap) / NumCols
			$col_width_css = 'calc( ( ' . $col_width_val . '% - (var(--aafe-tc-columns-gap, 24px) * (var(--aafe-tc-num-cols, 3) - 1)) ) / var(--aafe-tc-num-cols, 3) )';
		} else {
			$col_width_css = $col_width_val . $col_width_unit;
		}

		// Entrance Animation
		$anim_attrs = '';
		if ( ! empty( $s['animation_type'] ) && 'none' !== $s['animation_type'] ) {
			$anim_attrs .= ' data-aafe-animation="' . esc_attr( $s['animation_type'] ) . '"';
			$anim_attrs .= ' data-aafe-duration="' . esc_attr( $s['animation_duration'] ?? 600 ) . '"';
			$anim_attrs .= ' data-aafe-delay="' . esc_attr( $s['animation_delay'] ?? 0 ) . '"';
		}
		?>
		<section class="aafe-testimonials-columns-wrapper<?php echo esc_attr( $pause_class ); ?>"
			data-hover="<?php echo esc_attr( $hover_type ); ?>"
			style="--aafe-hover-scale: <?php echo esc_attr( $hover_scale ); ?>; --aafe-transition: <?php echo esc_attr( $hover_duration ); ?>ms;"
			<?php echo $anim_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>

			<div class="aafe-testimonials-columns__header">
				<?php if ( 'yes' === ( $s['show_badge'] ?? '' ) && ! empty( $s['badge_text'] ) ) : ?>
					<div class="aafe-testimonials-columns__badge-wrap">
						<span class="aafe-testimonials-columns__badge"><?php echo esc_html( $s['badge_text'] ); ?></span>
					</div>
				<?php endif; ?>

				<?php if ( ! empty( $s['heading'] ) ) : ?>
					<?php
					printf(
						'<%1$s class="aafe-testimonials-columns__heading">%2$s</%1$s>',
						esc_attr( $heading_tag ),
						esc_html( $s['heading'] )
					);
					?>
				<?php endif; ?>

				<?php if ( ! empty( $s['description'] ) ) : ?>
					<p class="aafe-testimonials-columns__description"><?php echo wp_kses_post( $s['description'] ); ?></p>
				<?php endif; ?>
			</div>

			<?php if ( ! empty( $items ) ) : ?>
				<div class="aafe-testimonials-columns__marquee<?php echo esc_attr( $mask_class ); ?>"
					style="--aafe-tc-column-width: <?php echo esc_attr( $col_width_css ); ?>;">
					<?php
					// Render all 4 possible columns. The responsive CSS rules will use display:none
					// to hide the extra ones on tablet and mobile based on the Elementor settings.
					for ( $i = 0; $i < 4; $i++ ) {
						$dur_key  = 'col' . ( $i + 1 ) . '_duration';
						$dur      = (float) ( $s[ $dur_key ] ?? ( 15 + ( $i * 2 ) ) );
						$modifier = ' aafe-tc-col-' . ( $i + 1 );
						// Pass ALL items to every column so no testimonials are lost when hiding columns
						$this->render_column( $items, $dur, $modifier );
					}
					?>
				</div>
			<?php endif; ?>
		</section>
		<?php
	}

	protected function content_template(): void {
		?>
		<#
		var items = settings.testimonials || [];
		var count = items.length;
		var numCols = parseInt(settings.columns) || 3;
		if (numCols < 1) numCols = 1;
		if (numCols > 4) numCols = 4;

		var hoverType = settings.hover_effect_type || 'none';
		var hoverScale = settings.hover_scale && settings.hover_scale.size ? settings.hover_scale.size : 1.03;
		var hoverDuration = settings.hover_duration && settings.hover_duration.size ? settings.hover_duration.size : 300;
		var headingTag = settings.heading_tag || 'h2';
		var pauseClass = settings.pause_on_hover === 'yes' ? ' aafe-testimonials-columns-wrapper--pause-hover' : '';
		var maskClass = settings.mask_fade === 'yes' ? ' aafe-testimonials-columns__marquee--masked' : '';

		var colWidth = (settings.column_width && settings.column_width.size) ? settings.column_width.size : 100;
		var colUnit  = (settings.column_width && settings.column_width.unit) ? settings.column_width.unit : '%';
		var colWidthCss;
		
		if (colUnit === '%') {
			colWidthCss = 'calc( ( ' + colWidth + '% - (var(--aafe-tc-columns-gap, 24px) * (var(--aafe-tc-num-cols, 3) - 1)) ) / var(--aafe-tc-num-cols, 3) )';
		} else {
			colWidthCss = colWidth + colUnit;
		}

		function renderCards(list) {
			var html = '';
			_.each(list, function(item) {
				html += '<article class="aafe-testimonials-columns__card" tabindex="0">';
				if (item.text) {
					html += '<div class="aafe-testimonials-columns__quote">' + item.text + '</div>';
				}
				html += '<div class="aafe-testimonials-columns__author">';
				if (item.image && item.image.url) {
					html += '<img class="aafe-testimonials-columns__avatar" src="' + item.image.url + '" alt="" width="40" height="40" loading="lazy">';
				}
				html += '<div class="aafe-testimonials-columns__meta">';
				if (item.name) { html += '<div class="aafe-testimonials-columns__name">' + item.name + '</div>'; }
				if (item.role) { html += '<div class="aafe-testimonials-columns__role">' + item.role + '</div>'; }
				html += '</div></div></article>';
			});
			return html;
		}

		/* Each column shows ALL items — CSS column visibility controls how many columns appear */
		function renderCol(list, dur, mod) {
			if (!list || !list.length) return '';
			var cards = renderCards(list);
			var out = '<div class="aafe-testimonials-columns__column' + mod + '" style="--aafe-col-duration:' + dur + 's;">';
			out += '<div class="aafe-testimonials-columns__track">';
			out += '<div class="aafe-testimonials-columns__loop" aria-hidden="false">' + cards + '</div>';
			out += '<div class="aafe-testimonials-columns__loop" aria-hidden="true">' + cards + '</div>';
			out += '</div></div>';
			return out;
		}

		var wrapperAttrs = 'class="aafe-testimonials-columns-wrapper' + pauseClass + '"';
		wrapperAttrs += ' data-hover="' + hoverType + '"';
		wrapperAttrs += ' style="--aafe-hover-scale:' + hoverScale + '; --aafe-transition:' + hoverDuration + 'ms;"';

		if ( settings.animation_type && settings.animation_type !== 'none' ) {
			wrapperAttrs += ' data-aafe-animation="' + settings.animation_type + '"';
			wrapperAttrs += ' data-aafe-duration="' + (settings.animation_duration || 600) + '"';
			wrapperAttrs += ' data-aafe-delay="' + (settings.animation_delay || 0) + '"';
		}

		var marqueeStyle = '--aafe-tc-column-width:' + colWidthCss + ';';
		#>
		<section {{{ wrapperAttrs }}}>
			<div class="aafe-testimonials-columns__header">
				<# if ( settings.show_badge === 'yes' && settings.badge_text ) { #>
					<div class="aafe-testimonials-columns__badge-wrap">
						<span class="aafe-testimonials-columns__badge">{{{ settings.badge_text }}}</span>
					</div>
				<# } #>
				<# if ( settings.heading ) { #>
					<{{{ headingTag }}} class="aafe-testimonials-columns__heading">{{{ settings.heading }}}</{{{ headingTag }}}>
				<# } #>
				<# if ( settings.description ) { #>
					<p class="aafe-testimonials-columns__description">{{{ settings.description }}}</p>
				<# } #>
			</div>
			<# if ( count ) { #>
				<div class="aafe-testimonials-columns__marquee{{ maskClass }}" style="{{ marqueeStyle }}">
					<# for (var i = 0; i < 4; i++) {
						var durKey = 'col' + (i + 1) + '_duration';
						var dur = settings[durKey] || (15 + (i * 2));
						var mod = ' aafe-tc-col-' + (i + 1);
					#>
						{{{ renderCol(items, dur, mod) }}}
					<# } #>
				</div>
			<# } #>
		</section>
		<?php
	}
}