<?php
namespace AddronixAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Icons_Manager;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

class Bubble_Button extends Widget_Base {

	const TD = 'addronix-addons-for-elementor';

	public function get_name() {
		return 'aafe_bubble_button';
	}

	public function get_title() {
		return esc_html__( 'AAFE Bubble Button', 'addronix-addons-for-elementor' );
	}

	public function get_icon() {
		return 'eicon-button';
	}

	// AAFE IMPROVEMENT: get_description() for all widgets
	public function get_description(): string {
		return 'A creative button featuring playful hover animations with staggered bubble effects.';
	}

	// AAFE IMPROVEMENT: get_custom_help_url() for all widgets
	public function get_custom_help_url(): string {
		return 'https://uniqueelements.io/docs/' . $this->get_name();
	}

	public function get_categories() {
		return [ 'addronix-addons-for-elementor' ];
	}

	public function get_keywords() {
		return [ 'button', 'bubble', 'hover', 'animation', 'stagger', 'creative' ];
	}

	public function get_style_depends() {
		return [ 'aafe-bubble-button-style' ];
	}

	protected function register_controls() {

		/* ══════════════════════════════════════════════════
		 * CONTENT TAB
		 * ══════════════════════════════════════════════════ */
		$this->start_controls_section( 'section_button_content', [
			'label' => esc_html__( 'Button Content', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_CONTENT,
		] );

		$this->add_control( 'button_text', [
			'label'       => esc_html__( 'Text', 'addronix-addons-for-elementor' ),
			'type'        => Controls_Manager::TEXT,
			'default'     => esc_html__( 'Submit', 'addronix-addons-for-elementor' ),
			'dynamic'     => [ 'active' => true ],
			'placeholder' => esc_html__( 'Submit', 'addronix-addons-for-elementor' ),
		] );

		$this->add_control( 'button_link', [
			'label'       => esc_html__( 'Link', 'addronix-addons-for-elementor' ),
			'type'        => Controls_Manager::URL,
			'placeholder' => esc_html__( 'https://your-link.com', 'addronix-addons-for-elementor' ),
			'default'     => [
				'url'         => '#',
				'is_external' => false,
				'nofollow'    => false,
			],
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_control( 'button_icon', [
			'label'       => esc_html__( 'Icon', 'addronix-addons-for-elementor' ),
			'type'        => Controls_Manager::ICONS,
			'default'     => [],
		] );

		$this->add_control( 'icon_position', [
			'label'     => esc_html__( 'Icon Position', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SELECT,
			'options'   => [
				'before' => esc_html__( 'Before Text', 'addronix-addons-for-elementor' ),
				'after'  => esc_html__( 'After Text', 'addronix-addons-for-elementor' ),
			],
			'default'   => 'before',
			'condition' => [
				'button_icon[value]!' => '',
			],
		] );

		$this->add_responsive_control( 'icon_gap', [
			'label'      => esc_html__( 'Icon Gap', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', 'em', 'rem' ],
			'range'      => [ 'px' => [ 'min' => 0, 'max' => 50 ] ],
			'default'    => [ 'unit' => 'px', 'size' => 8 ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-bubble-button__icon--before' => 'margin-inline-end: {{SIZE}}{{UNIT}};',
				'{{WRAPPER}} .aafe-bubble-button__icon--after'  => 'margin-inline-start: {{SIZE}}{{UNIT}};',
			],
			'condition'  => [
				'button_icon[value]!' => '',
			],
		] );

		$this->end_controls_section();

		/* ══════════════════════════════════════════════════
		 * STYLE TAB: BUTTON
		 * ══════════════════════════════════════════════════ */
		$this->start_controls_section( 'section_button_style', [
			'label' => esc_html__( 'Button Style', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_responsive_control( 'button_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' ],
				'justify' => [ 'title' => esc_html__( 'Justify', 'addronix-addons-for-elementor' ), 'icon' => 'eicon-text-align-justify' ],
			],
			'default' => 'center',
			'prefix_class' => 'aafe-bubble-button-align%s-',
		] );

		$this->add_responsive_control( 'button_width', [
			'label'      => esc_html__( 'Width', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'vw', 'rem' ],
			'range'      => [
				'px' => [ 'min' => 50, 'max' => 1000 ],
				'%'  => [ 'min' => 10, 'max' => 100 ],
			],
			'selectors'  => [
				'{{WRAPPER}} .aafe-bubble-button' => 'width: {{SIZE}}{{UNIT}};',
			],
		] );

		$this->add_responsive_control( 'button_height', [
			'label'      => esc_html__( 'Height', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', 'rem' ],
			'range'      => [ 'px' => [ 'min' => 20, 'max' => 200 ] ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-bubble-button' => 'height: {{SIZE}}{{UNIT}}; display: inline-flex; align-items: center; justify-content: center;',
			],
		] );

		$this->add_group_control( Group_Control_Typography::get_type(), [
			'name'           => 'button_typography',
			'label'          => esc_html__( 'Typography', 'addronix-addons-for-elementor' ),
			'selector'       => '{{WRAPPER}} .aafe-bubble-button .aafe-bubble-button__text',
			'fields_options' => [
				'font_family' => [ 'default' => 'Inter' ],
				'font_weight' => [ 'default' => '700' ],
			],
		] );

		$this->start_controls_tabs( 'tabs_button_colors' );

		// Normal State
		$this->start_controls_tab( 'tab_button_normal', [
			'label' => esc_html__( 'Normal', 'addronix-addons-for-elementor' ),
		] );

		$this->add_control( 'button_color', [
			'label'     => esc_html__( 'Text Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#ffffff',
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button' => 'color: {{VALUE}};',
			],
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_control( 'button_bg_color', [
			'label'     => esc_html__( 'Background Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#171717',
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button' => 'background-color: {{VALUE}};',
			],
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_responsive_control( 'button_border_radius', [
			'label'      => esc_html__( 'Border Radius', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem' ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-bubble-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
			],
		] );

		$this->add_group_control( Group_Control_Border::get_type(), [
			'name'     => 'button_border',
			'label'    => esc_html__( 'Border', 'addronix-addons-for-elementor' ),
			'selector' => '{{WRAPPER}} .aafe-bubble-button',
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'button_box_shadow',
			'label'    => esc_html__( 'Box Shadow', 'addronix-addons-for-elementor' ),
			'selector' => '{{WRAPPER}} .aafe-bubble-button',
		] );

		$this->end_controls_tab();

		// Hover State
		$this->start_controls_tab( 'tab_button_hover', [
			'label' => esc_html__( 'Hover', 'addronix-addons-for-elementor' ),
		] );

		$this->add_control( 'button_color_hover', [
			'label'     => esc_html__( 'Text Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#ffffff',
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button:hover' => 'color: {{VALUE}};',
			],
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_control( 'button_bg_color_hover', [
			'label'     => esc_html__( 'Background Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#171717',
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button:hover' => 'background-color: {{VALUE}};',
			],
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_control( 'button_border_color_hover', [
			'label'     => esc_html__( 'Border Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button:hover' => 'border-color: {{VALUE}};',
			],
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [
			'name'     => 'button_box_shadow_hover',
			'label'    => esc_html__( 'Box Shadow', 'addronix-addons-for-elementor' ),
			'selector' => '{{WRAPPER}} .aafe-bubble-button:hover',
		] );

		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_responsive_control( 'button_padding', [
			'label'      => esc_html__( 'Padding', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem' ],
			'default'    => [
				'top'      => '1',
				'bottom'   => '1',
				'left'     => '2',
				'right'    => '2',
				'unit'     => 'em',
				'isLinked' => false,
			],
			'selectors'  => [
				'{{WRAPPER}} .aafe-bubble-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
			],
		] );

		$this->add_responsive_control( 'button_margin', [
			'label'      => esc_html__( 'Margin', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::DIMENSIONS,
			'size_units' => [ 'px', '%', 'em', 'rem' ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-bubble-button-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
			],
		] );

		$this->end_controls_section();

		/* ══════════════════════════════════════════════════
		 * STYLE TAB: BUBBLE CIRCLES
		 * ══════════════════════════════════════════════════ */
		$this->start_controls_section( 'section_bubble_style', [
			'label' => esc_html__( 'Bubble Circles', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_control( 'bubble_color', [
			'label'     => esc_html__( 'Bubble Color', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::COLOR,
			'default'   => '#0c66ed',
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button .aafe-bubble-button__circle' => 'background-color: {{VALUE}};',
			],
			'dynamic'     => [ 'active' => true ],
		] );

		$this->add_responsive_control( 'bubble_size', [
			'label'      => esc_html__( 'Bubble Size', 'addronix-addons-for-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px', 'em', 'rem' ],
			'range'      => [ 'px' => [ 'min' => 10, 'max' => 150 ] ],
			'default'    => [ 'unit' => 'px', 'size' => 30 ],
			'selectors'  => [
				'{{WRAPPER}} .aafe-bubble-button .aafe-bubble-button__circle' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
			],
		] );

		$this->add_control( 'bubble_scale', [
			'label'     => esc_html__( 'Hover Scale', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 1, 'max' => 12, 'step' => 0.1 ] ],
			'default'   => [ 'size' => 4 ],
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button:hover .aafe-bubble-button__circle' => 'transform: translate(-50%, -50%) scale({{SIZE}});',
			],
		] );

		$this->add_control( 'bubble_duration', [
			'label'     => esc_html__( 'Transition Duration (ms)', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 100, 'max' => 2000, 'step' => 50 ] ],
			'default'   => [ 'size' => 600 ],
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button .aafe-bubble-button__circle' => 'transition-duration: {{SIZE}}ms;',
			],
		] );

		$this->add_control( 'bubble_hover_duration', [
			'label'     => esc_html__( 'Hover Out Duration (ms)', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 100, 'max' => 3000, 'step' => 50 ] ],
			'default'   => [ 'size' => 1500 ],
			'selectors' => [
				'{{WRAPPER}} .aafe-bubble-button:hover .aafe-bubble-button__circle' => 'transition-duration: {{SIZE}}ms;',
			],
		] );

		$this->end_controls_section();

		/* ══════════════════════════════════════════════════
		 * STYLE TAB: HOVER EFFECTS
		 * ══════════════════════════════════════════════════ */
		$this->start_controls_section( 'style_hover_effects', [
			'label' => esc_html__( 'Hover Effects (Global)', 'addronix-addons-for-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_control( 'hover_effect_type', [
			'label'   => esc_html__( 'Type', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'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' ),
				'shine'      => esc_html__( 'Shine', 'addronix-addons-for-elementor' ),
			],
			'default' => 'none',
		] );

		$this->add_control( 'hover_scale', [
			'label'     => esc_html__( 'Scale Amount', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 1.0, 'max' => 1.2, 'step' => 0.01 ] ],
			'default'   => [ 'size' => 1.03 ],
			'condition' => [ 'hover_effect_type' => [ 'scale', 'lift' ] ],
		] );

		$this->add_control( 'hover_duration', [
			'label'     => esc_html__( 'Duration (ms)', 'addronix-addons-for-elementor' ),
			'type'      => Controls_Manager::SLIDER,
			'range'     => [ 'px' => [ 'min' => 100, 'max' => 800, 'step' => 50 ] ],
			'default'   => [ 'size' => 300 ],
		] );

		$this->add_control( 'hover_easing', [
			'label'   => esc_html__( 'Easing', 'addronix-addons-for-elementor' ),
			'type'    => Controls_Manager::SELECT,
			'options' => [
				'ease'        => esc_html__( 'Ease', 'addronix-addons-for-elementor' ),
				'ease-in'     => esc_html__( 'Ease-in', 'addronix-addons-for-elementor' ),
				'ease-out'    => esc_html__( 'Ease-out', 'addronix-addons-for-elementor' ),
				'ease-in-out' => esc_html__( 'Ease-in-out', 'addronix-addons-for-elementor' ),
				'linear'      => esc_html__( 'Linear', 'addronix-addons-for-elementor' ),
			],
			'default' => 'ease',
		] );

		$this->end_controls_section();

		// AAFE IMPROVEMENT: Entrance Animation section
		$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();

	}

	protected function render() {
		$settings = $this->get_settings_for_display();

		if ( empty( $settings['button_text'] ) && empty( $settings['button_icon']['value'] ) ) {
			return;
		}

		$this->add_render_attribute( 'wrapper', 'class', 'aafe-bubble-button-wrapper' );
		
		$hover_type = $settings['hover_effect_type'] ?? 'none';
		if ( 'none' !== $hover_type ) {
			$this->add_render_attribute( 'wrapper', 'data-hover', $hover_type );
			
			$hover_scale = isset( $settings['hover_scale']['size'] ) ? $settings['hover_scale']['size'] : 1.03;
			$hover_duration = isset( $settings['hover_duration']['size'] ) ? $settings['hover_duration']['size'] : 300;
			$hover_easing = $settings['hover_easing'] ?? 'ease';
			
			$this->add_render_attribute( 'wrapper', 'style', "--aafe-hover-scale: {$hover_scale}; --aafe-transition: {$hover_duration}ms; --aafe-easing: {$hover_easing};" );
		}

		// AAFE IMPROVEMENT: Entrance Animation section
		if ( ! empty( $settings['animation_type'] ) && 'none' !== $settings['animation_type'] ) {
			$this->add_render_attribute( 'wrapper', [
				'data-aafe-animation' => $settings['animation_type'],
				'data-aafe-duration'  => $settings['animation_duration'] ?? 600,
				'data-aafe-delay'     => $settings['animation_delay'] ?? 0,
			] );
		}

		// Button attributes
		$this->add_render_attribute( 'button', 'class', 'aafe-bubble-button' );
		
		if ( ! empty( $settings['button_link']['url'] ) ) {
			$this->add_link_attributes( 'button', $settings['button_link'] );
			$tag = 'a';
		} else {
			$tag = 'button';
		}

		?>
		<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
			<div class="aafe-bubble-button-container">
				<<?php echo esc_attr( $tag ); ?> <?php $this->print_render_attribute_string( 'button' ); ?>>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--1"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--2"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--3"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--4"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--5"></span>
					
					<span class="aafe-bubble-button__text-wrap">
						<?php if ( ! empty( $settings['button_icon']['value'] ) && 'before' === $settings['icon_position'] ) : ?>
							<span class="aafe-bubble-button__icon aafe-bubble-button__icon--before">
								<?php Icons_Manager::render_icon( $settings['button_icon'], [ 'aria-hidden' => 'true' ] ); ?>
							</span>
						<?php endif; ?>

						<span class="aafe-bubble-button__text"><?php echo esc_html( $settings['button_text'] ); ?></span>

						<?php if ( ! empty( $settings['button_icon']['value'] ) && 'after' === $settings['icon_position'] ) : ?>
							<span class="aafe-bubble-button__icon aafe-bubble-button__icon--after">
								<?php Icons_Manager::render_icon( $settings['button_icon'], [ 'aria-hidden' => 'true' ] ); ?>
							</span>
						<?php endif; ?>
					</span>
				</<?php echo esc_attr( $tag ); ?>>
			</div>
		</div>
		<?php
	}

	protected function content_template() {
		?>
		<#
		if ( ! settings.button_text && ! ( settings.button_icon && settings.button_icon.value ) ) return;

		var hoverType = settings.hover_effect_type || 'none';
		var hoverAttrs = '';
		if ( hoverType !== 'none' ) {
			var hoverScale = settings.hover_scale && settings.hover_scale.size ? settings.hover_scale.size : 1.03;
			var hoverDur = settings.hover_duration && settings.hover_duration.size ? settings.hover_duration.size : 300;
			var hoverEasing = settings.hover_easing || 'ease';
			hoverAttrs = ' data-hover="' + hoverType + '" style="--aafe-hover-scale:' + hoverScale + '; --aafe-transition:' + hoverDur + 'ms; --aafe-easing:' + hoverEasing + ';"';
		}

		// AAFE IMPROVEMENT: Entrance Animation section
		if ( settings.animation_type && settings.animation_type !== 'none' ) {
			hoverAttrs += ' data-aafe-animation="' + settings.animation_type + '"';
			hoverAttrs += ' data-aafe-duration="' + (settings.animation_duration || 600) + '"';
			hoverAttrs += ' data-aafe-delay="' + (settings.animation_delay || 0) + '"';
		}

		var tag = 'button';
		var linkAttrs = '';
		if ( settings.button_link && settings.button_link.url ) {
			tag = 'a';
			linkAttrs = ' href="' + settings.button_link.url + '"';
		}
		#>
		<div class="aafe-bubble-button-wrapper" {{{ hoverAttrs }}}>
			<div class="aafe-bubble-button-container">
				<{{{ tag }}}{{{ linkAttrs }}} class="aafe-bubble-button">
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--1"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--2"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--3"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--4"></span>
					<span class="aafe-bubble-button__circle aafe-bubble-button__circle--5"></span>
					
					<span class="aafe-bubble-button__text-wrap">
						<# if ( settings.button_icon && settings.button_icon.value && settings.icon_position === 'before' ) { #>
							<span class="aafe-bubble-button__icon aafe-bubble-button__icon--before">
								<# var iconHTML = elementor.helpers.renderIcon( view, settings.button_icon, { 'aria-hidden': true }, 'i', 'object' ); #>
								{{{ iconHTML.value }}}
							</span>
						<# } #>

						<span class="aafe-bubble-button__text">{{{ settings.button_text }}}</span>

						<# if ( settings.button_icon && settings.button_icon.value && settings.icon_position === 'after' ) { #>
							<span class="aafe-bubble-button__icon aafe-bubble-button__icon--after">
								<# var iconHTML = elementor.helpers.renderIcon( view, settings.button_icon, { 'aria-hidden': true }, 'i', 'object' ); #>
								{{{ iconHTML.value }}}
							</span>
						<# } #>
					</span>
				</{{{ tag }}}>
			</div>
		</div>
		<?php
	}
}