<?php
/**
 * Widget Name: Animated Service Box
 * Description: An animated icon / service box with selectable, motion-rich visual
 *              styles. Each style ships a unique hover and on-scroll entrance
 *              animation ( lift-reveal, gradient sweep, 3D icon flip, slide-up
 *              overlay, neon glow ). Supports an icon or image, title, description
 *              and an optional call-to-action link. Only the selected style CSS
 *              file is loaded on the frontend.
 *
 * @package    captain-widgets-kit
 * @subpackage captain-widgets-kit/includes
 * @since      1.6.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Icons_Manager;
use Elementor\Utils;

/**
 * Class Captwiki_Animated_Box
 *
 * @since 1.6.0
 */
class Captwiki_Animated_Box extends Widget_Base {

	/**
	 * Get widget name.
	 *
	 * @since 1.6.0
	 * @return string
	 */
	public function get_name(): string {
		return 'captwiki-animated-box';
	}

	/**
	 * Get widget title.
	 *
	 * @since 1.6.0
	 * @return string
	 */
	public function get_title(): string {
		return esc_html__( 'Animated Service Box', 'captain-widgets-kit' );
	}

	/**
	 * Get widget icon.
	 *
	 * @since 1.6.0
	 * @return string
	 */
	public function get_icon(): string {
		return 'eicon-icon-box captwiki-el-logo';
	}

	/**
	 * Get widget categories.
	 *
	 * @since 1.6.0
	 * @return array
	 */
	public function get_categories(): array {
		return array( 'captwiki-essential' );
	}

	/**
	 * Get widget keywords.
	 *
	 * @since 1.6.0
	 * @return array
	 */
	public function get_keywords(): array {
		return array( 'animated', 'service', 'box', 'icon box', 'feature', 'card', 'hover', 'captain-widgets-kit' );
	}

	/**
	 * Frontend script dependency ( handles the on-scroll entrance reveal ).
	 *
	 * @since 1.6.0
	 * @return array
	 */
	public function get_script_depends(): array {
		return array( 'captwiki-animated-box' );
	}

	/**
	 * Common stylesheet dependency.
	 *
	 * @since 1.6.0
	 * @return array
	 */
	public function get_style_depends(): array {
		return array( 'captwiki_animated_box' );
	}

	/**
	 * Disable Elementor's default inner wrapper.
	 *
	 * @since 1.6.0
	 * @return bool
	 */
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Selectable visual / animation styles.
	 *
	 * @since 1.6.0
	 * @return array
	 */
	private function captwiki_style_options(): array {
		return array(
			'style-1' => esc_html__( 'Style 1 – Hover Lift Reveal', 'captain-widgets-kit' ),
			'style-2' => esc_html__( 'Style 2 – Gradient Sweep', 'captain-widgets-kit' ),
			'style-3' => esc_html__( 'Style 3 – 3D Icon Flip', 'captain-widgets-kit' ),
			'style-4' => esc_html__( 'Style 4 – Slide-Up Overlay', 'captain-widgets-kit' ),
			'style-5' => esc_html__( 'Style 5 – Neon Glow Pulse', 'captain-widgets-kit' ),
		);
	}

	/**
	 * Register widget controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	protected function register_controls(): void {
		$this->register_content_controls();
		$this->register_button_controls();
		$this->register_animation_controls();

		$this->register_general_style_controls();
		$this->register_icon_style_controls();
		$this->register_title_style_controls();
		$this->register_description_style_controls();
		$this->register_button_style_controls();
	}

	/**
	 * Content tab — media, title & description controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_content_controls(): void {

		$this->start_controls_section(
			'section_content',
			array(
				'label' => esc_html__( 'Content', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'widget_style',
			array(
				'label'   => esc_html__( 'Style', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => $this->captwiki_style_options(),
			)
		);

		$this->add_control(
			'media_type',
			array(
				'label'   => esc_html__( 'Media Type', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::CHOOSE,
				'default' => 'icon',
				'options' => array(
					'icon'  => array(
						'title' => esc_html__( 'Icon', 'captain-widgets-kit' ),
						'icon'  => 'eicon-star',
					),
					'image' => array(
						'title' => esc_html__( 'Image', 'captain-widgets-kit' ),
						'icon'  => 'eicon-image',
					),
					'none'  => array(
						'title' => esc_html__( 'None', 'captain-widgets-kit' ),
						'icon'  => 'eicon-ban',
					),
				),
				'toggle'  => false,
			)
		);

		$this->add_control(
			'box_icon',
			array(
				'label'     => esc_html__( 'Icon', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'fas fa-bolt',
					'library' => 'fa-solid',
				),
				'condition' => array( 'media_type' => 'icon' ),
			)
		);

		$this->add_control(
			'box_image',
			array(
				'label'     => esc_html__( 'Image', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => array(
					'url' => Utils::get_placeholder_image_src(),
				),
				'dynamic'   => array( 'active' => true ),
				'condition' => array( 'media_type' => 'image' ),
			)
		);

		$this->add_control(
			'box_title',
			array(
				'label'       => esc_html__( 'Title', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Fast & Reliable', 'captain-widgets-kit' ),
				'placeholder' => esc_html__( 'Enter your title', 'captain-widgets-kit' ),
				'label_block' => true,
				'dynamic'     => array( 'active' => true ),
			)
		);

		$this->add_control(
			'title_tag',
			array(
				'label'   => esc_html__( 'Title HTML Tag', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h3',
				'options' => array(
					'h1'   => 'H1',
					'h2'   => 'H2',
					'h3'   => 'H3',
					'h4'   => 'H4',
					'h5'   => 'H5',
					'h6'   => 'H6',
					'div'  => 'div',
					'span' => 'span',
				),
			)
		);

		$this->add_control(
			'box_description',
			array(
				'label'       => esc_html__( 'Description', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::TEXTAREA,
				'rows'        => 4,
				'default'     => esc_html__( 'Deliver outstanding service to your visitors with smooth, eye-catching motion that keeps them engaged.', 'captain-widgets-kit' ),
				'label_block' => true,
				'dynamic'     => array( 'active' => true ),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Content tab — call-to-action button controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_button_controls(): void {

		$this->start_controls_section(
			'section_button_content',
			array(
				'label' => esc_html__( 'Button', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'show_button',
			array(
				'label'        => esc_html__( 'Show Button', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Show', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'Hide', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->add_control(
			'button_text',
			array(
				'label'     => esc_html__( 'Button Text', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'Learn More', 'captain-widgets-kit' ),
				'dynamic'   => array( 'active' => true ),
				'condition' => array( 'show_button' => 'yes' ),
			)
		);

		$this->add_control(
			'button_link',
			array(
				'label'         => esc_html__( 'Link', 'captain-widgets-kit' ),
				'type'          => Controls_Manager::URL,
				'placeholder'   => esc_html__( 'https://your-link.com', 'captain-widgets-kit' ),
				'show_external' => true,
				'default'       => array( 'url' => '#' ),
				'dynamic'       => array( 'active' => true ),
				'condition'     => array( 'show_button' => 'yes' ),
			)
		);

		$this->add_control(
			'button_icon',
			array(
				'label'       => esc_html__( 'Button Icon', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::ICONS,
				'default'     => array(
					'value'   => 'fas fa-arrow-right',
					'library' => 'fa-solid',
				),
				'skin'        => 'inline',
				'label_block' => false,
				'condition'   => array( 'show_button' => 'yes' ),
			)
		);

		$this->add_control(
			'button_icon_position',
			array(
				'label'     => esc_html__( 'Icon Position', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'after',
				'options'   => array(
					'before' => esc_html__( 'Before', 'captain-widgets-kit' ),
					'after'  => esc_html__( 'After', 'captain-widgets-kit' ),
				),
				'condition' => array( 'show_button' => 'yes' ),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Content tab — animation behaviour controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_animation_controls(): void {

		$this->start_controls_section(
			'section_animation',
			array(
				'label' => esc_html__( 'Animation', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'entrance_animation',
			array(
				'label'        => esc_html__( 'On-Scroll Entrance', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'On', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'Off', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
				'description'  => esc_html__( 'Reveal the box with a soft motion when it scrolls into view.', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'entrance_effect',
			array(
				'label'     => esc_html__( 'Entrance Effect', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'fade-up',
				'options'   => array(
					'fade'       => esc_html__( 'Fade', 'captain-widgets-kit' ),
					'fade-up'    => esc_html__( 'Fade Up', 'captain-widgets-kit' ),
					'fade-down'  => esc_html__( 'Fade Down', 'captain-widgets-kit' ),
					'zoom-in'    => esc_html__( 'Zoom In', 'captain-widgets-kit' ),
					'flip-up'    => esc_html__( 'Flip Up', 'captain-widgets-kit' ),
				),
				'condition' => array( 'entrance_animation' => 'yes' ),
			)
		);

		$this->add_control(
			'hover_animation_speed',
			array(
				'label'      => esc_html__( 'Animation Speed', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'ms' ),
				'range'      => array(
					'ms' => array(
						'min'  => 150,
						'max'  => 1500,
						'step' => 50,
					),
				),
				'default'    => array(
					'unit' => 'ms',
					'size' => 450,
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox' => '--captwiki-ab-speed: {{SIZE}}ms;',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * General ( wrapper ) style controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_general_style_controls(): void {

		$this->start_controls_section(
			'section_general_style',
			array(
				'label' => esc_html__( 'Box', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'content_align',
			array(
				'label'     => esc_html__( 'Alignment', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::CHOOSE,
				'default'   => 'center',
				'options'   => array(
					'left'   => array(
						'title' => esc_html__( 'Left', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center' => array(
						'title' => esc_html__( 'Center', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox' => 'text-align: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'accent_color',
			array(
				'label'       => esc_html__( 'Accent Color', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'selectors'   => array(
					'{{WRAPPER}} .captwiki-anibox' => '--captwiki-ab-accent: {{VALUE}};',
				),
				'description' => esc_html__( 'Drives icon, button and animation highlights across the box.', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'accent_color_2',
			array(
				'label'       => esc_html__( 'Secondary Color', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::COLOR,
				'default'     => '',
				'selectors'   => array(
					'{{WRAPPER}} .captwiki-anibox' => '--captwiki-ab-accent-2: {{VALUE}};',
				),
				'description' => esc_html__( 'Second stop for gradient and glow effects.', 'captain-widgets-kit' ),
			)
		);

		$this->add_responsive_control(
			'box_max_width',
			array(
				'label'      => esc_html__( 'Max Width', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 220,
						'max' => 700,
					),
					'%'  => array(
						'min' => 20,
						'max' => 100,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox' => 'max-width: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'box_background',
				'label'    => esc_html__( 'Background', 'captain-widgets-kit' ),
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .captwiki-anibox',
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'box_border',
				'label'    => esc_html__( 'Border', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-anibox',
			)
		);

		$this->add_responsive_control(
			'box_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'box_shadow',
				'label'    => esc_html__( 'Box Shadow', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-anibox',
			)
		);

		$this->add_responsive_control(
			'box_padding',
			array(
				'label'      => esc_html__( 'Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em', 'rem' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Icon / image style controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_icon_style_controls(): void {

		$this->start_controls_section(
			'section_icon_style',
			array(
				'label'      => esc_html__( 'Icon / Image', 'captain-widgets-kit' ),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => array(
					'relation' => 'or',
					'terms'    => array(
						array(
							'name'     => 'media_type',
							'operator' => '===',
							'value'    => 'icon',
						),
						array(
							'name'     => 'media_type',
							'operator' => '===',
							'value'    => 'image',
						),
					),
				),
			)
		);

		$this->add_control(
			'icon_color',
			array(
				'label'     => esc_html__( 'Icon Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__icon'     => 'color: {{VALUE}};',
					'{{WRAPPER}} .captwiki-anibox__icon svg' => 'fill: {{VALUE}};',
				),
				'condition' => array( 'media_type' => 'icon' ),
			)
		);

		$this->add_control(
			'icon_bg',
			array(
				'label'     => esc_html__( 'Container Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__media' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'icon_size',
			array(
				'label'      => esc_html__( 'Icon Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 14,
						'max' => 120,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__icon' => 'font-size: {{SIZE}}{{UNIT}};',
				),
				'condition'  => array( 'media_type' => 'icon' ),
			)
		);

		$this->add_responsive_control(
			'image_width',
			array(
				'label'      => esc_html__( 'Image Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 24,
						'max' => 240,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__image' => 'width: {{SIZE}}{{UNIT}};',
				),
				'condition'  => array( 'media_type' => 'image' ),
			)
		);

		$this->add_responsive_control(
			'media_box_size',
			array(
				'label'      => esc_html__( 'Container Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 40,
						'max' => 200,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__media' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'media_radius',
			array(
				'label'      => esc_html__( 'Container Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__media' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'media_spacing',
			array(
				'label'      => esc_html__( 'Bottom Spacing', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 80,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__media-wrap' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Title style controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_title_style_controls(): void {

		$this->start_controls_section(
			'section_title_style',
			array(
				'label' => esc_html__( 'Title', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'title_color',
			array(
				'label'     => esc_html__( 'Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__title' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .captwiki-anibox__title',
			)
		);

		$this->add_responsive_control(
			'title_spacing',
			array(
				'label'      => esc_html__( 'Bottom Spacing', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Description style controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_description_style_controls(): void {

		$this->start_controls_section(
			'section_description_style',
			array(
				'label' => esc_html__( 'Description', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'description_color',
			array(
				'label'     => esc_html__( 'Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__desc' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'description_typography',
				'selector' => '{{WRAPPER}} .captwiki-anibox__desc',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Button style controls.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	private function register_button_style_controls(): void {

		$this->start_controls_section(
			'section_button_style',
			array(
				'label'     => esc_html__( 'Button', 'captain-widgets-kit' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array( 'show_button' => 'yes' ),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'button_typography',
				'selector' => '{{WRAPPER}} .captwiki-anibox__btn',
			)
		);

		$this->add_responsive_control(
			'button_padding',
			array(
				'label'      => esc_html__( 'Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'button_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'button_top_spacing',
			array(
				'label'      => esc_html__( 'Top Spacing', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-anibox__btn-wrap' => 'margin-top: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->start_controls_tabs( 'button_color_tabs' );

		$this->start_controls_tab(
			'button_normal_tab',
			array( 'label' => esc_html__( 'Normal', 'captain-widgets-kit' ) )
		);

		$this->add_control(
			'button_color',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__btn'     => 'color: {{VALUE}};',
					'{{WRAPPER}} .captwiki-anibox__btn svg' => 'fill: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'button_bg',
			array(
				'label'     => esc_html__( 'Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__btn' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'button_hover_tab',
			array( 'label' => esc_html__( 'Hover', 'captain-widgets-kit' ) )
		);

		$this->add_control(
			'button_color_hover',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__btn:hover'     => 'color: {{VALUE}};',
					'{{WRAPPER}} .captwiki-anibox__btn:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'button_bg_hover',
			array(
				'label'     => esc_html__( 'Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-anibox__btn:hover' => 'background-color: {{VALUE}};',
				),
			)
		);

		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	/**
	 * Render the media block ( icon or image ).
	 *
	 * @since 1.6.0
	 * @param array $settings Widget settings.
	 * @return void
	 */
	private function captwiki_render_media( array $settings ): void {
		$media_type = isset( $settings['media_type'] ) ? $settings['media_type'] : 'icon';

		if ( 'none' === $media_type ) {
			return;
		}

		if ( 'image' === $media_type ) {
			$has_image = ! empty( $settings['box_image']['url'] );

			if ( ! $has_image ) {
				return;
			}
		} elseif ( empty( $settings['box_icon']['value'] ) ) {
			return;
		}

		echo '<div class="captwiki-anibox__media-wrap">';
		echo '<div class="captwiki-anibox__media">';

		if ( 'image' === $media_type ) {
			$alt = trim( (string) $settings['box_title'] );
			printf(
				'<img class="captwiki-anibox__image" src="%1$s" alt="%2$s" loading="lazy" />',
				esc_url( $settings['box_image']['url'] ),
				esc_attr( $alt )
			);
		} else {
			echo '<span class="captwiki-anibox__icon" aria-hidden="true">';
			Icons_Manager::render_icon( $settings['box_icon'], array( 'aria-hidden' => 'true' ) );
			echo '</span>';
		}

		echo '</div>';
		echo '</div>';
	}

	/**
	 * Render the call-to-action button.
	 *
	 * @since 1.6.0
	 * @param array $settings Widget settings.
	 * @return void
	 */
	private function captwiki_render_button( array $settings ): void {
		if ( 'yes' !== $settings['show_button'] ) {
			return;
		}

		$text = trim( (string) $settings['button_text'] );

		if ( '' === $text ) {
			return;
		}

		$url    = ! empty( $settings['button_link']['url'] ) ? $settings['button_link']['url'] : '#';
		$target = ! empty( $settings['button_link']['is_external'] ) ? ' target="_blank"' : '';
		$rel    = ! empty( $settings['button_link']['nofollow'] ) ? ' rel="nofollow"' : '';

		$has_icon = ! empty( $settings['button_icon']['value'] );
		$icon_pos = 'before' === $settings['button_icon_position'] ? 'before' : 'after';

		echo '<div class="captwiki-anibox__btn-wrap">';
		echo '<a class="captwiki-anibox__btn" href="' . esc_url( $url ) . '"' . $target . $rel . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

		if ( $has_icon && 'before' === $icon_pos ) {
			echo '<span class="captwiki-anibox__btn-icon captwiki-anibox__btn-icon--before">';
			Icons_Manager::render_icon( $settings['button_icon'], array( 'aria-hidden' => 'true' ) );
			echo '</span>';
		}

		echo '<span class="captwiki-anibox__btn-text">' . esc_html( $text ) . '</span>';

		if ( $has_icon && 'after' === $icon_pos ) {
			echo '<span class="captwiki-anibox__btn-icon captwiki-anibox__btn-icon--after">';
			Icons_Manager::render_icon( $settings['button_icon'], array( 'aria-hidden' => 'true' ) );
			echo '</span>';
		}

		echo '</a>';
		echo '</div>';
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * @since 1.6.0
	 * @return void
	 */
	protected function render(): void {
		$settings = $this->get_settings_for_display();

		$allowed_styles = array_keys( $this->captwiki_style_options() );
		$style          = in_array( $settings['widget_style'], $allowed_styles, true ) ? $settings['widget_style'] : 'style-1';

		// Load only the active style stylesheet, depending on the common one.
		wp_enqueue_style(
			'captwiki-animated-box-' . $style,
			CAPTWIKI_URL . 'assets/css/widgets/animated-box/captwiki-animated-box-' . $style . '.css',
			array( 'captwiki_animated_box' ),
			CAPTWIKI_VERSION
		);

		$title_tag = in_array( $settings['title_tag'], array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span' ), true ) ? $settings['title_tag'] : 'h3';
		$title     = trim( (string) $settings['box_title'] );
		$desc      = trim( (string) $settings['box_description'] );

		$entrance       = 'yes' === $settings['entrance_animation'];
		$allowed_fx     = array( 'fade', 'fade-up', 'fade-down', 'zoom-in', 'flip-up' );
		$effect         = in_array( $settings['entrance_effect'], $allowed_fx, true ) ? $settings['entrance_effect'] : 'fade-up';
		$entrance_class = $entrance ? ' captwiki-anibox--animate' : '';
		$entrance_attr  = $entrance ? ' data-captwiki-fx="' . esc_attr( $effect ) . '"' : '';

		$classes = sprintf(
			'captwiki-anibox captwiki-%1$s%2$s',
			esc_attr( $style ),
			esc_attr( $entrance_class )
		);

		echo '<div class="' . esc_attr( $classes ) . '"' . $entrance_attr . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

		echo '<div class="captwiki-anibox__inner">';

		$this->captwiki_render_media( $settings );

		echo '<div class="captwiki-anibox__body">';

		if ( '' !== $title ) {
			printf(
				'<%1$s class="captwiki-anibox__title">%2$s</%1$s>',
				esc_attr( $title_tag ),
				esc_html( $title )
			);
		}

		if ( '' !== $desc ) {
			echo '<p class="captwiki-anibox__desc">' . esc_html( $desc ) . '</p>';
		}

		$this->captwiki_render_button( $settings );

		echo '</div>'; // body.
		echo '</div>'; // inner.
		echo '</div>'; // anibox.
	}
}
