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

/**
 * Fancy Heading Widget
 *
 * @since   1.0.0
 */
class EPPRO_Fancy_Heading_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-fancy-heading'; }
    public function get_title(): string { return __( 'Fancy Heading', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-heading'; }
    public function get_keywords(): array { return [ 'heading', 'gradient', 'fancy', 'text', 'title', 'eppro' ]; }

    public function get_style_depends(): array { return [ 'eppro-fancy-heading' ]; }

    protected function register_controls(): void {

        $this->start_controls_section( 'section_content', [
            'label' => __( 'Heading', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'before_text', [
            'label'       => __( 'Before Text', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'We build', 'admore-widgets-suite' ),
            'label_block' => true,
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'fancy_text', [
            'label'       => __( 'Fancy / Highlighted Text', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'beautiful', 'admore-widgets-suite' ),
            'label_block' => true,
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'after_text', [
            'label'       => __( 'After Text', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'websites', 'admore-widgets-suite' ),
            'label_block' => true,
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'title_tag', [
            'label'   => __( 'HTML Tag', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'h2',
            'options' => [ 'h1'=>'H1','h2'=>'H2','h3'=>'H3','h4'=>'H4','h5'=>'H5','h6'=>'H6','p'=>'P','div'=>'div','span'=>'span' ],
        ] );

        $this->add_control( 'fancy_style', [
            'label'   => __( 'Fancy Style', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'gradient',
            'options' => [
                'gradient'   => __( 'Gradient Fill', 'admore-widgets-suite' ),
                'outline'    => __( 'Outline / Stroke', 'admore-widgets-suite' ),
                'highlight'  => __( 'Background Highlight', 'admore-widgets-suite' ),
                'underline'  => __( 'Animated Underline', 'admore-widgets-suite' ),
                'shadow'     => __( 'Text Shadow', 'admore-widgets-suite' ),
            ],
        ] );

        $this->add_control( 'heading_link', [
            'label'       => __( 'Heading Link', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::URL,
            'placeholder' => 'https://example.com',
            'dynamic'     => [ 'active' => true ],
            'separator'   => 'before',
        ] );

        $this->add_control( 'sub_heading', [
            'label'       => __( 'Sub Heading', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXTAREA,
            'default'     => '',
            'rows'        => 2,
            'placeholder' => __( 'Optional subtitle below the heading', 'admore-widgets-suite' ),
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'show_separator', [
            'label'     => __( 'Separator', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SWITCHER,
            'label_on'  => __( 'Show', 'admore-widgets-suite' ),
            'label_off' => __( 'Hide', 'admore-widgets-suite' ),
            'default'   => '',
            'separator' => 'before',
        ] );

        $this->add_responsive_control( 'alignment', [
            'label'     => __( 'Alignment', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'left'   => [ 'title' => __( 'Left', 'admore-widgets-suite' ),   'icon' => 'eicon-text-align-left' ],
                'center' => [ 'title' => __( 'Center', 'admore-widgets-suite' ), 'icon' => 'eicon-text-align-center' ],
                'right'  => [ 'title' => __( 'Right', 'admore-widgets-suite' ),  'icon' => 'eicon-text-align-right' ],
            ],
            'default'   => 'center',
            'selectors' => [ '{{WRAPPER}} .eppro-fh-wrap' => 'text-align: {{VALUE}};' ],
        ] );

        $this->end_controls_section();

        /* ── Style: Heading ── */
        $this->start_controls_section( 'section_style_heading', [
            'label' => __( 'Heading', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'heading_typography',
            'selector' => '{{WRAPPER}} .eppro-fh-wrap',
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'      => 'fancy_typography',
            'label'     => __( 'Fancy Text Typography', 'admore-widgets-suite' ),
            'selector'  => '{{WRAPPER}} .eppro-fh-fancy',
            'separator' => 'before',
        ] );

        $this->add_control( 'normal_color', [
            'label'     => __( 'Normal Text Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#1e293b',
            'selectors' => [ '{{WRAPPER}} .eppro-fh-normal' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'spacing_between', [
            'label'      => __( 'Word Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
            'default'    => [ 'size' => 8 ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-fh-normal + .eppro-fh-fancy' => 'margin-left: {{SIZE}}px;',
                '{{WRAPPER}} .eppro-fh-fancy + .eppro-fh-normal' => 'margin-left: {{SIZE}}px;',
            ],
        ] );

        $this->add_responsive_control( 'heading_max_width', [
            'label'      => __( 'Max Width', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 100, 'max' => 1400, 'step' => 10 ], '%' => [ 'min' => 10, 'max' => 100 ] ],
            'size_units' => [ 'px', '%' ],
            'separator'  => 'before',
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-heading' => 'max-width: {{SIZE}}{{UNIT}}; margin-left: auto; margin-right: auto;' ],
        ] );

        $this->end_controls_section();

        /* ── Style: Fancy Text ── */
        $this->start_controls_section( 'section_style_fancy', [
            'label' => __( 'Fancy Text', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
        ] );

        $this->add_control( 'gradient_color_1', [
            'label'     => __( 'Gradient Color 1', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => EPPRO_Elementor_Helper::brand_color(),
            'condition' => [ 'fancy_style' => 'gradient' ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-fancy' => '--eppro-fh-c1: {{VALUE}};' ],
        ] );

        $this->add_control( 'gradient_color_2', [
            'label'     => __( 'Gradient Color 2', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ec4899',
            'condition' => [ 'fancy_style' => 'gradient' ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-fancy' => '--eppro-fh-c2: {{VALUE}};' ],
        ] );

        $this->add_control( 'gradient_angle', [
            'label'      => __( 'Gradient Angle', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'deg' => [ 'min' => 0, 'max' => 360 ] ],
            'default'    => [ 'size' => 135, 'unit' => 'deg' ],
            'size_units' => [ 'deg' ],
            'condition'  => [ 'fancy_style' => 'gradient' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy' => '--eppro-fh-angle: {{SIZE}}deg;' ],
        ] );

        $this->add_control( 'fancy_color', [
            'label'     => __( 'Text Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => EPPRO_Elementor_Helper::brand_color(),
            'conditions' => [ 'terms' => [ [ 'name' => 'fancy_style', 'operator' => '!in', 'value' => [ 'gradient', 'outline' ] ] ] ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'outline_width', [
            'label'      => __( 'Stroke Width', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 1, 'max' => 6 ] ],
            'default'    => [ 'size' => 2 ],
            'condition'  => [ 'fancy_style' => 'outline' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--outline' => '-webkit-text-stroke-width: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'highlight_color', [
            'label'     => __( 'Highlight BG Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#fde68a',
            'condition' => [ 'fancy_style' => 'highlight' ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-fancy--highlight' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_control( 'underline_color', [
            'label'     => __( 'Underline Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => EPPRO_Elementor_Helper::brand_color(),
            'condition' => [ 'fancy_style' => 'underline' ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-fancy--underline::after' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_control( 'underline_height', [
            'label'      => __( 'Underline Height', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 1, 'max' => 12 ] ],
            'default'    => [ 'size' => 3 ],
            'condition'  => [ 'fancy_style' => 'underline' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--underline::after' => 'height: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'underline_offset', [
            'label'      => __( 'Underline Offset', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 20 ] ],
            'default'    => [ 'size' => 0 ],
            'condition'  => [ 'fancy_style' => 'underline' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--underline::after' => 'bottom: -{{SIZE}}px;' ],
        ] );

        $this->add_control( 'highlight_padding', [
            'label'      => __( 'Highlight Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em' ],
            'default'    => [ 'top' => '2', 'right' => '8', 'bottom' => '2', 'left' => '8', 'unit' => 'px' ],
            'condition'  => [ 'fancy_style' => 'highlight' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--highlight' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_control( 'highlight_radius', [
            'label'      => __( 'Highlight Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 50 ] ],
            'default'    => [ 'size' => 4 ],
            'condition'  => [ 'fancy_style' => 'highlight' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--highlight' => 'border-radius: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'shadow_x', [
            'label'      => __( 'Horizontal Offset', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => -30, 'max' => 30 ] ],
            'default'    => [ 'size' => 3 ],
            'condition'  => [ 'fancy_style' => 'shadow' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--shadow' => '--eppro-fh-sx: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'shadow_y', [
            'label'      => __( 'Vertical Offset', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => -30, 'max' => 30 ] ],
            'default'    => [ 'size' => 3 ],
            'condition'  => [ 'fancy_style' => 'shadow' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--shadow' => '--eppro-fh-sy: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'shadow_blur', [
            'label'      => __( 'Blur', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
            'default'    => [ 'size' => 12 ],
            'condition'  => [ 'fancy_style' => 'shadow' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-fancy--shadow' => '--eppro-fh-sblur: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'shadow_color', [
            'label'     => __( 'Shadow Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => EPPRO_Elementor_Helper::brand_color( 'primary', 0.4 ),
            'condition' => [ 'fancy_style' => 'shadow' ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-fancy--shadow' => '--eppro-fh-sc: {{VALUE}};' ],
        ] );

        $this->end_controls_section();

        /* ── Style: Sub Heading ── */
        $this->start_controls_section( 'section_style_sub', [
            'label'     => __( 'Sub Heading', 'admore-widgets-suite' ),
            'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
            'condition' => [ 'sub_heading!' => '' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'sub_typography',
            'selector' => '{{WRAPPER}} .eppro-fh-sub',
        ] );

        $this->add_control( 'sub_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#64748b',
            'selectors' => [ '{{WRAPPER}} .eppro-fh-sub' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'sub_bg_color', [
            'label'     => __( 'Background Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-fh-sub' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'sub_alignment', [
            'label'     => __( 'Alignment', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'left'   => [ 'title' => __( 'Left', 'admore-widgets-suite' ),   'icon' => 'eicon-text-align-left' ],
                'center' => [ 'title' => __( 'Center', 'admore-widgets-suite' ), 'icon' => 'eicon-text-align-center' ],
                'right'  => [ 'title' => __( 'Right', 'admore-widgets-suite' ),  'icon' => 'eicon-text-align-right' ],
            ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-sub' => 'text-align: {{VALUE}};' ],
            'separator' => 'before',
        ] );

        $this->add_responsive_control( 'sub_max_width', [
            'label'      => __( 'Max Width', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 100, 'max' => 1200, 'step' => 10 ], '%' => [ 'min' => 10, 'max' => 100 ] ],
            'size_units' => [ 'px', '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-sub' => 'max-width: {{SIZE}}{{UNIT}}; margin-left: auto; margin-right: auto;' ],
        ] );

        $this->add_responsive_control( 'sub_padding', [
            'label'      => __( 'Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em', '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-sub' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
            'separator'  => 'before',
        ] );

        $this->add_control( 'sub_border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 50 ] ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-sub' => 'border-radius: {{SIZE}}px;' ],
        ] );

        $this->add_responsive_control( 'sub_spacing', [
            'label'      => __( 'Top Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
            'default'    => [ 'size' => 12 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-sub' => 'margin-top: {{SIZE}}px;' ],
            'separator'  => 'before',
        ] );

        $this->end_controls_section();

        /* ── Style: Separator ── */
        $this->start_controls_section( 'section_style_separator', [
            'label'     => __( 'Separator', 'admore-widgets-suite' ),
            'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
            'condition' => [ 'show_separator' => 'yes' ],
        ] );

        $this->add_control( 'sep_style', [
            'label'     => __( 'Style', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SELECT,
            'default'   => 'solid',
            'options'   => [ 'solid' => __( 'Solid', 'admore-widgets-suite' ), 'dashed' => __( 'Dashed', 'admore-widgets-suite' ), 'dotted' => __( 'Dotted', 'admore-widgets-suite' ), 'double' => __( 'Double', 'admore-widgets-suite' ) ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-separator' => 'border-top-style: {{VALUE}};' ],
        ] );

        $this->add_control( 'sep_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#e2e8f0',
            'selectors' => [ '{{WRAPPER}} .eppro-fh-separator' => 'border-top-color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'sep_width', [
            'label'      => __( 'Width', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 10, 'max' => 600 ], '%' => [ 'min' => 5, 'max' => 100 ] ],
            'size_units' => [ 'px', '%' ],
            'default'    => [ 'size' => 60, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-separator' => 'width: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->add_control( 'sep_thickness', [
            'label'     => __( 'Thickness', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 1, 'max' => 10 ] ],
            'default'   => [ 'size' => 2 ],
            'selectors' => [ '{{WRAPPER}} .eppro-fh-separator' => 'border-top-width: {{SIZE}}px;' ],
        ] );

        $this->add_responsive_control( 'sep_margin', [
            'label'      => __( 'Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
            'default'    => [ 'size' => 12 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-fh-separator' => 'margin-top: {{SIZE}}px; margin-bottom: {{SIZE}}px;' ],
        ] );

        $this->end_controls_section();

        $this->eppro_register_entrance_animation_controls();
    }

    protected function render(): void {
        $s     = $this->get_settings_for_display();
        $tag   = in_array( $s['title_tag'] ?? 'h2', ['h1','h2','h3','h4','h5','h6','p','div','span'], true )
                 ? $s['title_tag'] : 'h2';
        $style = $s['fancy_style'] ?? 'gradient';

        $link_url = $s['heading_link']['url'] ?? '';
        $link_ext = ! empty( $s['heading_link']['is_external'] );
        $link_nof = ! empty( $s['heading_link']['nofollow'] );

        $rel_parts = [];
        if ( $link_ext ) { $rel_parts[] = 'noopener'; $rel_parts[] = 'noreferrer'; }
        if ( $link_nof ) { $rel_parts[] = 'nofollow'; }
        $rel_attr = ! empty( $rel_parts ) ? ' rel="' . esc_attr( implode( ' ', $rel_parts ) ) . '"' : '';
        $tgt_attr = $link_ext ? ' target="_blank"' : '';

        $fancy_classes = 'eppro-fh-fancy eppro-fh-fancy--' . esc_attr( $style );
        ?>
        <div class="eppro-fh-wrap">
            <?php if ( $link_url ) : ?>
            <a href="<?php echo esc_url( $link_url ); ?>"<?php echo wp_kses_post( $tgt_attr . $rel_attr ); ?> class="eppro-fh-link">
            <?php endif; ?>
            <<?php echo esc_html( $tag ); ?> class="eppro-fh-heading">
                <?php if ( ! empty( $s['before_text'] ) ) : ?>
                <span class="eppro-fh-normal"><?php echo esc_html( $s['before_text'] ); ?></span>
                <?php endif; ?>
                <?php if ( ! empty( $s['fancy_text'] ) ) : ?>
                <span class="<?php echo esc_attr( $fancy_classes ); ?>"><?php echo esc_html( $s['fancy_text'] ); ?></span>
                <?php endif; ?>
                <?php if ( ! empty( $s['after_text'] ) ) : ?>
                <span class="eppro-fh-normal"><?php echo esc_html( $s['after_text'] ); ?></span>
                <?php endif; ?>
            </<?php echo esc_html( $tag ); ?>>
            <?php if ( $link_url ) : ?></a><?php endif; ?>
            <?php if ( 'yes' === ( $s['show_separator'] ?? '' ) ) : ?>
            <div class="eppro-fh-separator" aria-hidden="true"></div>
            <?php endif; ?>
            <?php if ( ! empty( $s['sub_heading'] ) ) : ?>
            <p class="eppro-fh-sub"><?php echo wp_kses_post( $s['sub_heading'] ); ?></p>
            <?php endif; ?>
        </div>
        <?php
    }

    protected function content_template(): void { ?>
    <# var tag     = settings.title_tag  || 'h2';
       var style   = settings.fancy_style || 'gradient';
       var linkUrl = ( settings.heading_link && settings.heading_link.url ) ? settings.heading_link.url : ''; #>
    <div class="eppro-fh-wrap">
        <# if ( linkUrl ) { #><a href="{{ linkUrl }}" class="eppro-fh-link"><# } #>
        <{{{tag}}} class="eppro-fh-heading">
            <# if ( settings.before_text ) { #><span class="eppro-fh-normal">{{{ settings.before_text }}}</span><# } #>
            <# if ( settings.fancy_text  ) { #><span class="eppro-fh-fancy eppro-fh-fancy--{{{style}}}">{{{ settings.fancy_text }}}</span><# } #>
            <# if ( settings.after_text  ) { #><span class="eppro-fh-normal">{{{ settings.after_text }}}</span><# } #>
        </{{{tag}}}>
        <# if ( linkUrl ) { #></a><# } #>
        <# if ( settings.show_separator === 'yes' ) { #><div class="eppro-fh-separator" aria-hidden="true"></div><# } #>
        <# if ( settings.sub_heading ) { #><p class="eppro-fh-sub">{{{ settings.sub_heading }}}</p><# } #>
    </div>
<?php }
}