<?php
/**
 * Sifency Distortion Widget
 *
 * Universal visual distortion engine for Elementor.
 * Supports image, background, and object modes with
 * pixel, RGB, liquid, and slice effects driven by
 * scroll (GSAP ScrollTrigger) and/or hover.
 *
 * @package    Sifency_Addons
 * @subpackage Widgets
 * @since      1.0.0
 */

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

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Utils;
use Sifency\Classes\Sifency_Addons_Widget_Base;
use Sifency\Traits\Sifency_Addons_Help_Controls;

/**
 * Class Sifency_Addons_Widget_Distortion
 */
class Sifency_Addons_Widget_Distortion extends Sifency_Addons_Widget_Base {
	use Sifency_Addons_Help_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-distortion',
			'title'          => 'Sifency Distortion',
			'icon'           => 'eicon-image-rollover',
			'category'       => array( 'sifency-creative' ),
			'script_depends' => array( 'gsap', 'gsap-scrolltrigger', 'sifency-distortion-script' ),
			'style_depends'  => array( 'sifency-distortion-style' ),
			'keywords'       => array( 'distortion', 'pixel', 'glitch', 'rgb', 'liquid', 'slice', 'animation', 'hover', 'scroll' ),
		);
	}

	/**
	 * Register widget controls.
	 */
	protected function register_controls() {

		// =========================================================
		// TAB: CONTENT
		// =========================================================

		// ---------------------------------------------------------
		// Section: Element
		// ---------------------------------------------------------
		$this->start_controls_section(
			'section_element',
			array(
				'label' => esc_html__( 'Element', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'element_mode',
			array(
				'label'   => esc_html__( 'Element Mode', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'image',
				'options' => array(
					'image'      => esc_html__( 'Image', 'sifency-addons' ),
					'background' => esc_html__( 'Background', 'sifency-addons' ),
					'object'     => esc_html__( 'Object / HTML', 'sifency-addons' ),
				),
			)
		);

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

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'      => 'image',
				'default'   => 'large',
				'condition' => array(
					'element_mode' => 'image',
				),
			)
		);

		$this->add_control(
			'displacement_image',
			array(
				'label'       => esc_html__( 'Displacement Map (Liquid)', 'sifency-addons' ),
				'type'        => Controls_Manager::MEDIA,
				'description' => esc_html__( 'A black-and-white texture used for the liquid warp effect.', 'sifency-addons' ),
				'condition'   => array(
					'effect_type' => 'liquid',
				),
			)
		);

		$this->add_control(
			'object_mode_notice',
			array(
				'type'            => Controls_Manager::RAW_HTML,
				'raw'             => esc_html__( 'In Object mode, add any widget inside this container. The distortion canvas will overlay it automatically.', 'sifency-addons' ),
				'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
				'condition'       => array(
					'element_mode' => 'object',
				),
			)
		);

		$this->end_controls_section();

		// ---------------------------------------------------------
		// Section: Effect
		// ---------------------------------------------------------
		$this->start_controls_section(
			'section_effect',
			array(
				'label' => esc_html__( 'Effect', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'effect_type',
			array(
				'label'   => esc_html__( 'Effect Type', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'pixel',
				'options' => array(
					'pixel'  => esc_html__( 'Pixel Block Distortion', 'sifency-addons' ),
					'rgb'    => esc_html__( 'RGB / Chromatic Split', 'sifency-addons' ),
					'liquid' => esc_html__( 'Liquid Wave Warp', 'sifency-addons' ),
					'slice'  => esc_html__( 'Slice Strip Reveal', 'sifency-addons' ),
				),
			)
		);

		$this->add_control(
			'trigger',
			array(
				'label'   => esc_html__( 'Trigger', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'both',
				'options' => array(
					'scroll' => esc_html__( 'Scroll Only', 'sifency-addons' ),
					'hover'  => esc_html__( 'Hover Only', 'sifency-addons' ),
					'both'   => esc_html__( 'Scroll + Hover', 'sifency-addons' ),
				),
			)
		);

		$this->add_control(
			'intensity',
			array(
				'label'      => esc_html__( 'Intensity', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 50,
				),
			)
		);

		$this->add_control(
			'block_size',
			array(
				'label'      => esc_html__( 'Block Size (px)', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 2,
						'max'  => 64,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 16,
				),
				'condition'  => array(
					'effect_type' => 'pixel',
				),
			)
		);

		$this->add_control(
			'rgb_offset',
			array(
				'label'      => esc_html__( 'Channel Offset (px)', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 80,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'condition'  => array(
					'effect_type' => 'rgb',
				),
			)
		);

		$this->add_control(
			'liquid_scale',
			array(
				'label'      => esc_html__( 'Warp Scale', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 1,
						'max'  => 10,
						'step' => 0.1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 3,
				),
				'condition'  => array(
					'effect_type' => 'liquid',
				),
			)
		);

		$this->add_control(
			'slice_count',
			array(
				'label'      => esc_html__( 'Number of Slices', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 3,
						'max'  => 40,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 12,
				),
				'condition'  => array(
					'effect_type' => 'slice',
				),
			)
		);

		$this->add_control(
			'slice_direction',
			array(
				'label'     => esc_html__( 'Slice Direction', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'horizontal',
				'options'   => array(
					'horizontal' => esc_html__( 'Horizontal', 'sifency-addons' ),
					'vertical'   => esc_html__( 'Vertical', 'sifency-addons' ),
				),
				'condition' => array(
					'effect_type' => 'slice',
				),
			)
		);

		$this->end_controls_section();

		// ---------------------------------------------------------
		// Section: Animation
		// ---------------------------------------------------------
		$this->start_controls_section(
			'section_animation',
			array(
				'label' => esc_html__( 'Animation', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'scroll_start',
			array(
				'label'     => esc_html__( 'Scroll Start', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'top 85%',
				'options'   => array(
					'top top'       => esc_html__( 'Top → Top', 'sifency-addons' ),
					'top 85%'       => esc_html__( 'Top → 85% (Default)', 'sifency-addons' ),
					'top center'    => esc_html__( 'Top → Center', 'sifency-addons' ),
					'center center' => esc_html__( 'Center → Center', 'sifency-addons' ),
				),
				'condition' => array(
					'trigger' => array( 'scroll', 'both' ),
				),
			)
		);

		$this->add_control(
			'scroll_end',
			array(
				'label'     => esc_html__( 'Scroll End', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'bottom 20%',
				'options'   => array(
					'bottom top'    => esc_html__( 'Bottom → Top', 'sifency-addons' ),
					'bottom 20%'    => esc_html__( 'Bottom → 20% (Default)', 'sifency-addons' ),
					'bottom center' => esc_html__( 'Bottom → Center', 'sifency-addons' ),
					'bottom bottom' => esc_html__( 'Bottom → Bottom', 'sifency-addons' ),
				),
				'condition' => array(
					'trigger' => array( 'scroll', 'both' ),
				),
			)
		);

		$this->add_control(
			'hover_ease',
			array(
				'label'     => esc_html__( 'Hover Ease', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'power2.out',
				'options'   => array(
					'none'                => esc_html__( 'Linear', 'sifency-addons' ),
					'power1.out'          => esc_html__( 'Power 1', 'sifency-addons' ),
					'power2.out'          => esc_html__( 'Power 2 (Default)', 'sifency-addons' ),
					'power3.out'          => esc_html__( 'Power 3', 'sifency-addons' ),
					'elastic.out(1, 0.5)' => esc_html__( 'Elastic', 'sifency-addons' ),
					'back.out(1.7)'       => esc_html__( 'Back', 'sifency-addons' ),
				),
				'condition' => array(
					'trigger' => array( 'hover', 'both' ),
				),
			)
		);

		$this->add_control(
			'hover_duration',
			array(
				'label'      => esc_html__( 'Hover Duration (s)', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0.1,
						'max'  => 2,
						'step' => 0.05,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 0.6,
				),
				'condition'  => array(
					'trigger' => array( 'hover', 'both' ),
				),
			)
		);

		$this->add_control(
			'reverse_on_leave',
			array(
				'label'        => esc_html__( 'Reverse on Mouse Leave', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'sifency-addons' ),
				'label_off'    => esc_html__( 'No', 'sifency-addons' ),
				'return_value' => 'yes',
				'default'      => 'yes',
				'condition'    => array(
					'trigger' => array( 'hover', 'both' ),
				),
			)
		);

		$this->end_controls_section();

		// =========================================================
		// TAB: STYLE
		// =========================================================

		// ---------------------------------------------------------
		// Section: Layout
		// ---------------------------------------------------------
		$this->start_controls_section(
			'section_style_layout',
			array(
				'label' => esc_html__( 'Layout', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'widget_width',
			array(
				'label'      => esc_html__( 'Width', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%', 'vw' ),
				'range'      => array(
					'px' => array(
						'min' => 50,
						'max' => 2000,
					),
					'%'  => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .sifency-distortion-wrap' => 'width: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'widget_height',
			array(
				'label'      => esc_html__( 'Height', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vh', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 50,
						'max' => 1200,
					),
					'vh' => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .sifency-distortion-wrap' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'widget_align',
			array(
				'label'     => esc_html__( 'Alignment', 'sifency-addons' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'sifency-addons' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'sifency-addons' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'sifency-addons' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .sifency-distortion' => 'justify-content: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'sifency-addons' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .sifency-distortion-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'widget_box_shadow',
				'label'    => esc_html__( 'Box Shadow', 'sifency-addons' ),
				'selector' => '{{WRAPPER}} .sifency-distortion-wrap',
			)
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'widget_border',
				'label'    => esc_html__( 'Border', 'sifency-addons' ),
				'selector' => '{{WRAPPER}} .sifency-distortion-wrap',
			)
		);

		$this->end_controls_section();

		// ---------------------------------------------------------
		// Section: Canvas Overlay
		// ---------------------------------------------------------
		$this->start_controls_section(
			'section_style_overlay',
			array(
				'label' => esc_html__( 'Canvas Overlay', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'canvas_blend_mode',
			array(
				'label'     => esc_html__( 'Canvas Blend Mode', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'normal',
				'options'   => array(
					'normal'      => esc_html__( 'Normal', 'sifency-addons' ),
					'multiply'    => esc_html__( 'Multiply', 'sifency-addons' ),
					'screen'      => esc_html__( 'Screen', 'sifency-addons' ),
					'overlay'     => esc_html__( 'Overlay', 'sifency-addons' ),
					'color-dodge' => esc_html__( 'Color Dodge', 'sifency-addons' ),
					'color-burn'  => esc_html__( 'Color Burn', 'sifency-addons' ),
					'hard-light'  => esc_html__( 'Hard Light', 'sifency-addons' ),
					'soft-light'  => esc_html__( 'Soft Light', 'sifency-addons' ),
					'difference'  => esc_html__( 'Difference', 'sifency-addons' ),
					'exclusion'   => esc_html__( 'Exclusion', 'sifency-addons' ),
					'hue'         => esc_html__( 'Hue', 'sifency-addons' ),
					'saturation'  => esc_html__( 'Saturation', 'sifency-addons' ),
					'color'       => esc_html__( 'Color', 'sifency-addons' ),
					'luminosity'  => esc_html__( 'Luminosity', 'sifency-addons' ),
				),
				'selectors' => array(
					'{{WRAPPER}} .sifency-distortion-canvas' => 'mix-blend-mode: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'canvas_opacity',
			array(
				'label'      => esc_html__( 'Canvas Opacity', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min'  => 0,
						'max'  => 1,
						'step' => 0.01,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 1,
				),
				'selectors'  => array(
					'{{WRAPPER}} .sifency-distortion-canvas' => 'opacity: {{SIZE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'image_css_filter',
				'label'    => esc_html__( 'Image CSS Filters', 'sifency-addons' ),
				'selector' => '{{WRAPPER}} .sifency-distortion-image, {{WRAPPER}} .sifency-distortion-bg',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Build the data attributes array for the JS engine.
	 *
	 * @return array
	 */
	private function get_distortion_data() {
		$settings = $this->get_settings_for_display();

		return array(
			'mode'            => isset( $settings['element_mode'] ) ? sanitize_key( $settings['element_mode'] ) : 'image',
			'effect'          => isset( $settings['effect_type'] ) ? sanitize_key( $settings['effect_type'] ) : 'pixel',
			'trigger'         => isset( $settings['trigger'] ) ? sanitize_key( $settings['trigger'] ) : 'both',
			'intensity'       => isset( $settings['intensity']['size'] ) ? floatval( $settings['intensity']['size'] ) : 50,
			'blockSize'       => isset( $settings['block_size']['size'] ) ? absint( $settings['block_size']['size'] ) : 16,
			'rgbOffset'       => isset( $settings['rgb_offset']['size'] ) ? floatval( $settings['rgb_offset']['size'] ) : 20,
			'liquidScale'     => isset( $settings['liquid_scale']['size'] ) ? floatval( $settings['liquid_scale']['size'] ) : 3,
			'sliceCount'      => isset( $settings['slice_count']['size'] ) ? absint( $settings['slice_count']['size'] ) : 12,
			'sliceDirection'  => isset( $settings['slice_direction'] ) ? sanitize_key( $settings['slice_direction'] ) : 'horizontal',
			'scrollStart'     => isset( $settings['scroll_start'] ) ? sanitize_text_field( $settings['scroll_start'] ) : 'top 85%',
			'scrollEnd'       => isset( $settings['scroll_end'] ) ? sanitize_text_field( $settings['scroll_end'] ) : 'bottom 20%',
			'hoverEase'       => isset( $settings['hover_ease'] ) ? sanitize_text_field( $settings['hover_ease'] ) : 'power2.out',
			'hoverDuration'   => isset( $settings['hover_duration']['size'] ) ? floatval( $settings['hover_duration']['size'] ) : 0.6,
			'reverseOnLeave'  => ( isset( $settings['reverse_on_leave'] ) && 'yes' === $settings['reverse_on_leave'] ) ? true : false,
			'displacementUrl' => isset( $settings['displacement_image']['url'] ) ? esc_url( $settings['displacement_image']['url'] ) : '',
		);
	}

	/**
	 * Render widget output on the frontend.
	 */
	protected function render_dom( array $context ) {
		$wrapper_id = esc_attr( $context['dom_id'] );
		$settings   = $this->get_settings_for_display();
		$data       = $this->get_distortion_data();
		$mode       = $data['mode'];

		$data_attr = esc_attr( wp_json_encode( $data ) );

		$this->add_render_attribute(
			'wrapper',
			array(
				'class'           => 'sifency-distortion',
				'data-distortion' => $data_attr,
			)
		);

		$this->add_render_attribute(
			'inner',
			array(
				'class' => array(
					'sifency-distortion-wrap',
					'sifency-distortion-mode--' . esc_attr( $mode ),
					'sifency-distortion-effect--' . esc_attr( $data['effect'] ),
				),
			)
		);

		?>
		<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
			<div <?php $this->print_render_attribute_string( 'inner' ); ?>>

				<?php if ( 'image' === $mode ) : ?>
					<?php
					$image_src = isset( $settings['image']['url'] ) ? esc_url( $settings['image']['url'] ) : '';
					$image_alt = isset( $settings['image']['id'] )
						? esc_attr( get_post_meta( absint( $settings['image']['id'] ), '_wp_attachment_image_alt', true ) )
						: '';

					if ( $image_src ) {
						echo '<img class="sifency-distortion-image" src="' . esc_url( $image_src ) . '" alt="' . esc_attr( $image_alt ) . '" crossorigin="anonymous" />';
					}
					?>

				<?php elseif ( 'background' === $mode ) : ?>
					<?php
					$bg_url   = isset( $settings['image']['url'] ) ? esc_url( $settings['image']['url'] ) : '';
					$bg_style = $bg_url ? 'background-image: url(' . esc_url( $bg_url ) . ');' : '';
					?>
					<div class="sifency-distortion-bg" style="<?php echo esc_attr( $bg_style ); ?>" data-bg-url="<?php echo esc_url( $bg_url ); ?>"></div>

				<?php elseif ( 'object' === $mode ) : ?>
					<div class="sifency-distortion-object">
						<?php
						if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
							echo '<div class="sifency-distortion-object-placeholder">';
							esc_html_e( '[ Object / Inner Content ]', 'sifency-addons' );
							echo '</div>';
						}
						?>
					</div>

				<?php endif; ?>

				<?php
				echo '<canvas class="sifency-distortion-canvas" aria-hidden="true"></canvas>';
				?>

			</div><!-- .sifency-distortion-wrap -->
		</div><!-- .sifency-distortion -->
		<?php
	}

	/**
	 * Render widget output in the editor (preview).
	 */
	protected function content_template() {
		?>
		<#
		var mode   = settings.element_mode || 'image';
		var effect = settings.effect_type  || 'pixel';
		var data   = {
			mode:           mode,
			effect:         effect,
			trigger:        settings.trigger        || 'both',
			intensity:      settings.intensity.size || 50,
			blockSize:      settings.block_size.size || 16,
			rgbOffset:      settings.rgb_offset.size || 20,
			liquidScale:    settings.liquid_scale.size || 3,
			sliceCount:     settings.slice_count.size || 12,
			sliceDirection: settings.slice_direction || 'horizontal',
			scrollStart:    settings.scroll_start    || 'top 85%',
			scrollEnd:      settings.scroll_end      || 'bottom 20%',
			hoverEase:      settings.hover_ease      || 'power2.out',
			hoverDuration:  settings.hover_duration.size || 0.6,
			reverseOnLeave: settings.reverse_on_leave === 'yes',
			displacementUrl: settings.displacement_image.url || '',
		};
		#>
		<div class="sifency-distortion" data-distortion="{{ JSON.stringify(data) }}">
			<div class="sifency-distortion-wrap sifency-distortion-mode--{{{ mode }}} sifency-distortion-effect--{{{ effect }}}">

				<# if ( mode === 'image' ) { #>
					<# if ( settings.image.url ) { #>
						<img class="sifency-distortion-image"
							 src="{{ settings.image.url }}"
							 alt=""
							 crossorigin="anonymous" />
					<# } #>

				<# } else if ( mode === 'background' ) { #>
					<div class="sifency-distortion-bg"
						 style="background-image: url({{ settings.image.url }});"
						 data-bg-url="{{ settings.image.url }}">
					</div>

				<# } else if ( mode === 'object' ) { #>
					<div class="sifency-distortion-object">
						<div class="sifency-distortion-object-placeholder">
							[ Object / Inner Content ]
						</div>
					</div>
				<# } #>

				<canvas class="sifency-distortion-canvas" aria-hidden="true"></canvas>
			</div>
		</div>
		<?php
	}
}
