<?php

namespace Calio\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;

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

/**
 * Renders a dual-tone headline with editorial accent treatments.
 */
class AccentHeadlineWidget extends BaseWidget
{
    public function get_name(): string
    {
        return 'calio-accent-headline';
    }

    public function get_title(): string
    {
        return esc_html__('Accent Headline', 'calio-addon');
    }

    public function get_icon(): string
    {
        return 'eicon-dual-button';
    }

    public function get_style_depends(): array
    {
        return $this->resolve_widget_style_depends('calio-widget-accent-headline');
    }

    public function get_script_depends(): array
    {
        return $this->resolve_widget_script_depends('calio-widget-accent-headline');
    }

    protected function register_controls(): void
    {
        $this->start_controls_section('content', ['label' => esc_html__('Content', 'calio-addon')]);
        $this->add_control('eyebrow', ['label' => esc_html__('Eyebrow', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Calio Intro', 'calio-addon')]);
        $this->add_control('badge_text', ['label' => esc_html__('Badge', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Featured', 'calio-addon')]);
        $this->add_control('headline_lead', ['label' => esc_html__('Lead Text', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Build a', 'calio-addon'), 'label_block' => true]);
        $this->add_control('headline_accent', ['label' => esc_html__('Accent Text', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Dual-Tone', 'calio-addon'), 'label_block' => true]);
        $this->add_control('accent_mode', ['label' => esc_html__('Accent Mode', 'calio-addon'), 'type' => Controls_Manager::SELECT, 'default' => 'fill', 'options' => ['fill' => esc_html__('Fill', 'calio-addon'), 'stroke' => esc_html__('Stroke', 'calio-addon'), 'mixed' => esc_html__('Mixed', 'calio-addon')]]);
        $this->add_control('rotating_words', ['label' => esc_html__('Rotating Words', 'calio-addon'), 'type' => Controls_Manager::TEXTAREA, 'default' => '', 'description' => esc_html__('Optional comma-separated accent alternatives. First item stays visible as a no-JS fallback.', 'calio-addon')]);
        $this->add_control('rotation_speed', ['label' => esc_html__('Rotation Speed', 'calio-addon'), 'type' => Controls_Manager::NUMBER, 'default' => 2400, 'min' => 1200, 'max' => 10000, 'step' => 100, 'condition' => ['rotating_words!' => '']]);
        $this->add_control('rotation_motion', ['label' => esc_html__('Rotation Motion', 'calio-addon'), 'type' => Controls_Manager::SELECT, 'default' => 'slide', 'options' => ['soft' => esc_html__('Soft Fade', 'calio-addon'), 'slide' => esc_html__('Slide', 'calio-addon'), 'lift' => esc_html__('Lift', 'calio-addon')], 'condition' => ['rotating_words!' => '']]);
        $this->add_control('pause_rotation_on_hover', ['label' => esc_html__('Pause On Hover', 'calio-addon'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'condition' => ['rotating_words!' => '']]);
        $this->add_control('headline_trail', ['label' => esc_html__('Trail Text', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('headline that feels more premium.', 'calio-addon'), 'label_block' => true]);
        $this->add_control('description', ['label' => esc_html__('Description', 'calio-addon'), 'type' => Controls_Manager::TEXTAREA, 'default' => esc_html__('Blend two title tones, an optional badge and a support note inside one cleaner heading block.', 'calio-addon')]);
        $this->add_control('support_note', ['label' => esc_html__('Support Note', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Ideal for hero intros, features and editorial sections.', 'calio-addon')]);
        $this->add_control('primary_cta_text', ['label' => esc_html__('Primary CTA Text', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Explore More', 'calio-addon')]);
        $this->add_control('primary_cta_url', ['label' => esc_html__('Primary CTA Link', 'calio-addon'), 'type' => Controls_Manager::URL, 'default' => ['url' => '']]);
        $this->add_control('secondary_cta_text', ['label' => esc_html__('Secondary CTA Text', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('See Pricing', 'calio-addon')]);
        $this->add_control('secondary_cta_url', ['label' => esc_html__('Secondary CTA Link', 'calio-addon'), 'type' => Controls_Manager::URL, 'default' => ['url' => '']]);
        $this->add_control('media_image', ['label' => esc_html__('Media Image', 'calio-addon'), 'type' => Controls_Manager::MEDIA]);
        $this->add_control('media_label', ['label' => esc_html__('Media Label', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Editorial Cut', 'calio-addon'), 'condition' => ['media_image[url]!' => '']]);
        $this->add_control('media_note', ['label' => esc_html__('Media Note', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Hero visual', 'calio-addon'), 'condition' => ['media_image[url]!' => '']]);
        $this->add_control('media_shape', ['label' => esc_html__('Media Shape', 'calio-addon'), 'type' => Controls_Manager::SELECT, 'default' => 'soft-blob', 'options' => ['none' => esc_html__('None', 'calio-addon'), 'soft-blob' => esc_html__('Soft Blob', 'calio-addon'), 'diamond' => esc_html__('Diamond', 'calio-addon'), 'arch' => esc_html__('Arch', 'calio-addon')], 'condition' => ['media_image[url]!' => '']]);
        $this->add_control('media_motion', ['label' => esc_html__('Media Motion', 'calio-addon'), 'type' => Controls_Manager::SELECT, 'default' => 'soft-float', 'options' => ['none' => esc_html__('None', 'calio-addon'), 'soft-float' => esc_html__('Soft Float', 'calio-addon'), 'lift' => esc_html__('Lift', 'calio-addon'), 'drift' => esc_html__('Drift', 'calio-addon')], 'condition' => ['media_image[url]!' => '']]);
        $this->add_control('show_media_ring', ['label' => esc_html__('Show Media Ring', 'calio-addon'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes', 'condition' => ['media_image[url]!' => '']]);
        $this->add_control('panel_accent', ['label' => esc_html__('Panel Accent Glow', 'calio-addon'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes']);
        $this->add_control('panel_note', ['label' => esc_html__('Panel Note', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Editorial Hero', 'calio-addon')]);
        $this->add_control('background_word', ['label' => esc_html__('Background Word', 'calio-addon'), 'type' => Controls_Manager::TEXT, 'default' => esc_html__('Headline', 'calio-addon')]);
        $this->add_control('skin', ['label' => esc_html__('Skin', 'calio-addon'), 'type' => Controls_Manager::SELECT, 'default' => 'split', 'options' => ['split' => esc_html__('Split', 'calio-addon'), 'underline' => esc_html__('Underline', 'calio-addon'), 'spotlight' => esc_html__('Spotlight', 'calio-addon'), 'badge' => esc_html__('Badge Accent', 'calio-addon')]]);
        $this->add_control('layout', ['label' => esc_html__('Layout', 'calio-addon'), 'type' => Controls_Manager::SELECT, 'default' => 'stacked', 'options' => ['stacked' => esc_html__('Stacked', 'calio-addon'), 'inline' => esc_html__('Inline', 'calio-addon')]]);
        $this->add_control('show_divider', ['label' => esc_html__('Show Divider', 'calio-addon'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'default' => 'yes']);
        $this->add_control('tag', ['label' => esc_html__('HTML Tag', 'calio-addon'), 'type' => Controls_Manager::SELECT, 'default' => 'h2', 'options' => ['h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4', 'div' => 'DIV', 'p' => 'P']]);
        $this->add_control('link', ['label' => esc_html__('Link', 'calio-addon'), 'type' => Controls_Manager::URL, 'default' => ['url' => '']]);
        $this->add_control('align', [
            'label' => esc_html__('Alignment', 'calio-addon'),
            'type' => Controls_Manager::CHOOSE,
            'default' => 'left',
            'options' => [
                'left' => [
                    'title' => esc_html__('Left', 'calio-addon'),
                    'icon' => 'eicon-text-align-left',
                ],
                'center' => [
                    'title' => esc_html__('Center', 'calio-addon'),
                    'icon' => 'eicon-text-align-center',
                ],
                'right' => [
                    'title' => esc_html__('Right', 'calio-addon'),
                    'icon' => 'eicon-text-align-right',
                ],
            ],
            'selectors_dictionary' => [
                'left' => 'text-align: left; --calio-accent-item-align: start; --calio-accent-flex-align: flex-start; --calio-accent-panel-note-left: var(--calio-accent-panel-note-inset); --calio-accent-panel-note-right: auto; --calio-accent-panel-note-translate-x: 0%;',
                'center' => 'text-align: center; --calio-accent-item-align: center; --calio-accent-flex-align: center; --calio-accent-panel-note-left: 50%; --calio-accent-panel-note-right: auto; --calio-accent-panel-note-translate-x: -50%;',
                'right' => 'text-align: right; --calio-accent-item-align: end; --calio-accent-flex-align: flex-end; --calio-accent-panel-note-left: auto; --calio-accent-panel-note-right: var(--calio-accent-panel-note-inset); --calio-accent-panel-note-translate-x: 0%;',
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline' => '{{VALUE}}',
            ],
        ]);
        $this->end_controls_section();

        $this->start_controls_section('style_surface', ['label' => esc_html__('Surface', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE]);
        $this->add_style_heading('accent_headline_surface_heading', esc_html__('Surface States', 'calio-addon'));
        $this->start_controls_tabs('accent_headline_surface_tabs');
        $this->start_controls_tab('accent_headline_surface_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_background_type_control('accent_headline_surface_bg_normal', '{{WRAPPER}} .calio-accent-headline');
        $this->add_border_paint_controls('accent_headline_surface_border_normal', esc_html__('Border Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline');
        $this->end_controls_tab();
        $this->start_controls_tab('accent_headline_surface_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_background_type_control('accent_headline_surface_bg_hover', '{{WRAPPER}} .calio-accent-headline:hover');
        $this->add_border_paint_controls('accent_headline_surface_border_hover', esc_html__('Border Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline:hover');
        $this->end_controls_tab();
        $this->start_controls_tab('accent_headline_surface_active', ['label' => esc_html__('Active', 'calio-addon')]);
        $this->add_background_type_control('accent_headline_surface_bg_active', '{{WRAPPER}} .calio-accent-headline:focus-within');
        $this->add_border_paint_controls('accent_headline_surface_border_active', esc_html__('Border Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline:focus-within');
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->add_style_heading('accent_headline_outline_heading', esc_html__('Border Type & Shadow', 'calio-addon'));
        $this->add_group_control(Group_Control_Border::get_type(), ['name' => 'accent_headline_surface_border_group', 'selector' => '{{WRAPPER}} .calio-accent-headline']);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'accent_headline_surface_shadow', 'selector' => '{{WRAPPER}} .calio-accent-headline']);
        $this->add_style_heading('accent_headline_spacing_heading', esc_html__('Shape & Spacing', 'calio-addon'));
        $this->add_dimensions_control('accent_headline_radius', esc_html__('Radius', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_dimensions_control('accent_headline_padding', esc_html__('Padding', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline', 'padding');
        $this->add_dimensions_control('accent_headline_margin', esc_html__('Margin', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline', 'margin');
        $this->add_responsive_control('accent_headline_gap', [
            'label' => esc_html__('Panel Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 120]],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline' => '--calio-accent-gap: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_responsive_control('accent_headline_content_gap', [
            'label' => esc_html__('Content Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 80]],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline-content, {{WRAPPER}} .calio-accent-headline-main, {{WRAPPER}} .calio-accent-headline-body' => 'gap: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->end_controls_section();

        $this->start_controls_section('style_headline', ['label' => esc_html__('Headline', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-title']);
        $this->add_style_heading('accent_headline_title_states_heading', esc_html__('Title States', 'calio-addon'));
        $this->start_controls_tabs('accent_headline_title_tabs');
        $this->start_controls_tab('accent_headline_title_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_text_paint_controls('accent_headline_lead_normal', esc_html__('Lead Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-lead');
        $this->add_text_paint_controls(
            'accent_headline_accent_normal',
            esc_html__('Accent Fill', 'calio-addon'),
            [
                '{{WRAPPER}} .calio-accent-headline-accent',
                '{{WRAPPER}} .calio-accent-headline-rotator-word',
            ]
        );
        $this->add_text_paint_controls('accent_headline_trail_normal', esc_html__('Trail Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-trail');
        $this->end_controls_tab();
        $this->start_controls_tab('accent_headline_title_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_text_paint_controls('accent_headline_lead_hover', esc_html__('Lead Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline:hover .calio-accent-headline-lead');
        $this->add_text_paint_controls(
            'accent_headline_accent_hover',
            esc_html__('Accent Fill', 'calio-addon'),
            [
                '{{WRAPPER}} .calio-accent-headline:hover .calio-accent-headline-accent',
                '{{WRAPPER}} .calio-accent-headline:hover .calio-accent-headline-rotator-word',
            ]
        );
        $this->add_text_paint_controls('accent_headline_trail_hover', esc_html__('Trail Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline:hover .calio-accent-headline-trail');
        $this->end_controls_tab();
        $this->start_controls_tab('accent_headline_title_active', ['label' => esc_html__('Active', 'calio-addon')]);
        $this->add_text_paint_controls('accent_headline_lead_active', esc_html__('Lead Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline:focus-within .calio-accent-headline-lead');
        $this->add_text_paint_controls(
            'accent_headline_accent_active',
            esc_html__('Accent Fill', 'calio-addon'),
            [
                '{{WRAPPER}} .calio-accent-headline:focus-within .calio-accent-headline-accent',
                '{{WRAPPER}} .calio-accent-headline:focus-within .calio-accent-headline-rotator-word',
            ]
        );
        $this->add_text_paint_controls('accent_headline_trail_active', esc_html__('Trail Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline:focus-within .calio-accent-headline-trail');
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->add_style_heading('accent_headline_accent_effect_heading', esc_html__('Accent & Rotator', 'calio-addon'));
        $this->add_control('accent_headline_stroke_color', [
            'label' => esc_html__('Stroke Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'condition' => ['accent_mode' => 'stroke'],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline-accent' => '-webkit-text-stroke-color: {{VALUE}};',
            ],
        ]);
        $this->add_responsive_control('accent_headline_stroke_width', [
            'label' => esc_html__('Stroke Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['px'],
            'range' => ['px' => ['min' => 0, 'max' => 8, 'step' => 0.1]],
            'default' => ['size' => 1.6, 'unit' => 'px'],
            'condition' => ['accent_mode' => 'stroke'],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline-accent' => '-webkit-text-stroke-width: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_responsive_control('accent_headline_rotator_min_width', [
            'label' => esc_html__('Rotator Min Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['em', 'px', '%'],
            'range' => [
                'em' => ['min' => 0, 'max' => 20, 'step' => 0.1],
                'px' => ['min' => 0, 'max' => 800],
                '%' => ['min' => 0, 'max' => 100],
            ],
            'condition' => ['rotating_words!' => ''],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline-rotator' => 'min-inline-size: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_responsive_control('accent_headline_rotator_max_width', [
            'label' => esc_html__('Rotator Max Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['em', 'px', '%'],
            'range' => [
                'em' => ['min' => 1, 'max' => 40, 'step' => 0.1],
                'px' => ['min' => 40, 'max' => 1600],
                '%' => ['min' => 10, 'max' => 100],
            ],
            'condition' => ['rotating_words!' => ''],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline-rotator' => 'max-inline-size: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_style_heading('accent_headline_spacing_title_heading', esc_html__('Spacing', 'calio-addon'));
        $this->add_dimensions_control('accent_headline_title_margin', esc_html__('Margin', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-title', 'margin');
        $this->end_controls_section();

        $this->start_controls_section('style_background_word', ['label' => esc_html__('Background Word', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => ['background_word!' => '']]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_bg_word_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-bg-word']);
        $this->add_text_paint_controls('accent_headline_bg_word_text', esc_html__('Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-bg-word');
        $this->add_control('accent_headline_bg_word_position', [
            'label' => esc_html__('Position Preset', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'top-right',
            'options' => [
                'top-right' => esc_html__('Top Right', 'calio-addon'),
                'top-left' => esc_html__('Top Left', 'calio-addon'),
                'center' => esc_html__('Center', 'calio-addon'),
                'bottom-right' => esc_html__('Bottom Right', 'calio-addon'),
                'bottom-left' => esc_html__('Bottom Left', 'calio-addon'),
                'diagonal' => esc_html__('Diagonal', 'calio-addon'),
            ],
            'prefix_class' => 'calio-bg-word-pos-',
        ]);
        $this->add_control('accent_headline_bg_word_opacity', ['label' => esc_html__('Opacity', 'calio-addon'), 'type' => Controls_Manager::SLIDER, 'range' => ['px' => ['min' => 0.02, 'max' => 0.6, 'step' => 0.02]], 'default' => ['size' => 0.12], 'selectors' => ['{{WRAPPER}} .calio-accent-headline-bg-word' => 'opacity: {{SIZE}};']]);
        $this->add_control('accent_headline_bg_word_offset_x', [
            'label' => esc_html__('Offset X', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => -400, 'max' => 400]],
            'default' => ['size' => 0],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline' => '--calio-accent-bg-word-offset-x: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_control('accent_headline_bg_word_offset_y', [
            'label' => esc_html__('Offset Y', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => -400, 'max' => 400]],
            'default' => ['size' => -10],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline' => '--calio-accent-bg-word-offset-y: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_control('accent_headline_bg_word_rotate', [
            'label' => esc_html__('Rotate', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['deg'],
            'range' => ['deg' => ['min' => -180, 'max' => 180]],
            'default' => ['size' => 0, 'unit' => 'deg'],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline' => '--calio-accent-bg-word-rotate: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_control('accent_headline_bg_word_scale', [
            'label' => esc_html__('Scale', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 40, 'max' => 220]],
            'default' => ['size' => 100],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline' => '--calio-accent-bg-word-scale: calc({{SIZE}} / 100);'],
        ]);
        $this->add_responsive_control('accent_headline_bg_word_max_width', [
            'label' => esc_html__('Max Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['%', 'px'],
            'range' => [
                '%' => ['min' => 20, 'max' => 100],
                'px' => ['min' => 120, 'max' => 1800],
            ],
            'default' => ['size' => 72, 'unit' => '%'],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-bg-word' => 'max-inline-size: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_control('accent_headline_bg_word_blend_mode', [
            'label' => esc_html__('Blend Mode', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'normal',
            'options' => [
                'normal' => esc_html__('Normal', 'calio-addon'),
                'multiply' => esc_html__('Multiply', 'calio-addon'),
                'screen' => esc_html__('Screen', 'calio-addon'),
                'overlay' => esc_html__('Overlay', 'calio-addon'),
                'soft-light' => esc_html__('Soft Light', 'calio-addon'),
                'difference' => esc_html__('Difference', 'calio-addon'),
            ],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-bg-word' => 'mix-blend-mode: {{VALUE}};'],
        ]);
        $this->add_control('accent_headline_bg_word_z_index', [
            'label' => esc_html__('Z-Index', 'calio-addon'),
            'type' => Controls_Manager::NUMBER,
            'min' => -5,
            'max' => 20,
            'step' => 1,
            'default' => 0,
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-bg-word' => 'z-index: {{VALUE}};'],
        ]);
        $this->end_controls_section();

        $this->start_controls_section('style_meta', ['label' => esc_html__('Eyebrow / Badge', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_eyebrow_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-eyebrow']);
        $this->add_text_paint_controls('accent_headline_eyebrow_text', esc_html__('Eyebrow Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-eyebrow');
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_badge_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-badge']);
        $this->add_text_paint_controls('accent_headline_badge_text', esc_html__('Badge Text Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-badge');
        $this->add_background_type_control('accent_headline_badge_bg', '{{WRAPPER}} .calio-accent-headline-badge');
        $this->add_group_control(Group_Control_Border::get_type(), ['name' => 'accent_headline_badge_border', 'selector' => '{{WRAPPER}} .calio-accent-headline-badge']);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'accent_headline_badge_shadow', 'selector' => '{{WRAPPER}} .calio-accent-headline-badge']);
        $this->add_dimensions_control('accent_headline_badge_radius', esc_html__('Badge Radius', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-badge', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_dimensions_control('accent_headline_badge_padding', esc_html__('Badge Padding', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-badge', 'padding');
        $this->add_responsive_control('accent_headline_meta_gap', [
            'label' => esc_html__('Eyebrow / Badge Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 60]],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-top' => 'gap: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_style_heading('accent_headline_divider_heading', esc_html__('Divider', 'calio-addon'));
        $this->add_background_paint_controls('accent_headline_divider', esc_html__('Divider Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-divider');
        $this->add_responsive_control('accent_headline_divider_width', [
            'label' => esc_html__('Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['px', '%'],
            'range' => [
                'px' => ['min' => 0, 'max' => 800],
                '%' => ['min' => 0, 'max' => 100],
            ],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-divider' => 'width: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_responsive_control('accent_headline_divider_height', [
            'label' => esc_html__('Height', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 1, 'max' => 40]],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-divider' => 'height: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_responsive_control('accent_headline_divider_radius', [
            'label' => esc_html__('Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 100]],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-divider' => 'border-radius: {{SIZE}}{{UNIT}};'],
        ]);
        $this->end_controls_section();

        $this->start_controls_section('style_description', ['label' => esc_html__('Description', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_desc_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-description']);
        $this->add_text_paint_controls('accent_headline_desc_text', esc_html__('Description Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-description');
        $this->add_responsive_control('accent_headline_desc_max_width', [
            'label' => esc_html__('Description Max Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['ch', 'px', '%'],
            'range' => [
                'ch' => ['min' => 10, 'max' => 120],
                'px' => ['min' => 120, 'max' => 1800],
                '%' => ['min' => 10, 'max' => 100],
            ],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-description' => 'max-inline-size: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_dimensions_control('accent_headline_desc_margin', esc_html__('Description Margin', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-description', 'margin');
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_support_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-support']);
        $this->add_text_paint_controls('accent_headline_support_text', esc_html__('Support Note Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-support');
        $this->add_responsive_control('accent_headline_support_max_width', [
            'label' => esc_html__('Support Max Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['ch', 'px', '%'],
            'range' => [
                'ch' => ['min' => 10, 'max' => 120],
                'px' => ['min' => 120, 'max' => 1800],
                '%' => ['min' => 10, 'max' => 100],
            ],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-support' => 'max-inline-size: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_dimensions_control('accent_headline_support_margin', esc_html__('Support Margin', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-support', 'margin');
        $this->end_controls_section();

        $this->start_controls_section('style_cta', ['label' => esc_html__('CTA Row', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_cta_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-cta']);
        $this->add_style_heading('accent_headline_cta_primary_heading', esc_html__('Primary CTA', 'calio-addon'));
        $this->start_controls_tabs('accent_headline_cta_primary_tabs');
        $this->start_controls_tab('accent_headline_cta_primary_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_text_paint_controls('accent_headline_cta_primary_text', esc_html__('Text Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-primary');
        $this->add_background_type_control('accent_headline_cta_primary_bg', '{{WRAPPER}} .calio-accent-headline-cta-primary');
        $this->end_controls_tab();
        $this->start_controls_tab('accent_headline_cta_primary_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_text_paint_controls('accent_headline_cta_primary_text_hover', esc_html__('Text Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-primary:hover, {{WRAPPER}} .calio-accent-headline-cta-primary:focus-visible');
        $this->add_background_type_control('accent_headline_cta_primary_bg_hover', '{{WRAPPER}} .calio-accent-headline-cta-primary:hover, {{WRAPPER}} .calio-accent-headline-cta-primary:focus-visible');
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->add_group_control(Group_Control_Border::get_type(), ['name' => 'accent_headline_cta_primary_border', 'selector' => '{{WRAPPER}} .calio-accent-headline-cta-primary']);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'accent_headline_cta_primary_shadow', 'selector' => '{{WRAPPER}} .calio-accent-headline-cta-primary']);
        $this->add_dimensions_control('accent_headline_cta_primary_radius', esc_html__('Primary Radius', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-primary', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_dimensions_control('accent_headline_cta_primary_padding', esc_html__('Primary Padding', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-primary', 'padding');
        $this->add_style_heading('accent_headline_cta_secondary_heading', esc_html__('Secondary CTA', 'calio-addon'));
        $this->start_controls_tabs('accent_headline_cta_secondary_tabs');
        $this->start_controls_tab('accent_headline_cta_secondary_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_text_paint_controls('accent_headline_cta_secondary_text', esc_html__('Text Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-secondary');
        $this->add_background_type_control('accent_headline_cta_secondary_bg', '{{WRAPPER}} .calio-accent-headline-cta-secondary');
        $this->end_controls_tab();
        $this->start_controls_tab('accent_headline_cta_secondary_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_text_paint_controls('accent_headline_cta_secondary_text_hover', esc_html__('Text Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-secondary:hover, {{WRAPPER}} .calio-accent-headline-cta-secondary:focus-visible');
        $this->add_background_type_control('accent_headline_cta_secondary_bg_hover', '{{WRAPPER}} .calio-accent-headline-cta-secondary:hover, {{WRAPPER}} .calio-accent-headline-cta-secondary:focus-visible');
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->add_group_control(Group_Control_Border::get_type(), ['name' => 'accent_headline_cta_secondary_border', 'selector' => '{{WRAPPER}} .calio-accent-headline-cta-secondary']);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'accent_headline_cta_secondary_shadow', 'selector' => '{{WRAPPER}} .calio-accent-headline-cta-secondary']);
        $this->add_dimensions_control('accent_headline_cta_secondary_radius', esc_html__('Secondary Radius', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-secondary', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_dimensions_control('accent_headline_cta_secondary_padding', esc_html__('Secondary Padding', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-cta-secondary', 'padding');
        $this->add_control('accent_headline_cta_gap', ['label' => esc_html__('CTA Gap', 'calio-addon'), 'type' => Controls_Manager::SLIDER, 'range' => ['px' => ['min' => 0, 'max' => 48]], 'default' => ['size' => 12], 'selectors' => ['{{WRAPPER}} .calio-accent-headline-cta-row' => 'gap: {{SIZE}}{{UNIT}};']]);
        $this->end_controls_section();

        $this->start_controls_section('style_media', ['label' => esc_html__('Media', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => ['media_image[url]!' => '']]);
        $this->add_style_heading('accent_headline_media_surface_heading', esc_html__('Surface States', 'calio-addon'));
        $this->start_controls_tabs('accent_headline_media_surface_tabs');
        $this->start_controls_tab('accent_headline_media_surface_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_background_type_control('accent_headline_media_bg', '{{WRAPPER}} .calio-accent-headline-media');
        $this->add_border_paint_controls('accent_headline_media_border_color', esc_html__('Border Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-media');
        $this->end_controls_tab();
        $this->start_controls_tab('accent_headline_media_surface_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_background_type_control('accent_headline_media_bg_hover', '{{WRAPPER}} .calio-accent-headline:hover .calio-accent-headline-media');
        $this->add_border_paint_controls('accent_headline_media_border_color_hover', esc_html__('Border Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline:hover .calio-accent-headline-media');
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->add_style_heading('accent_headline_media_outline_heading', esc_html__('Border Type & Shadow', 'calio-addon'));
        $this->add_group_control(Group_Control_Border::get_type(), ['name' => 'accent_headline_media_border', 'selector' => '{{WRAPPER}} .calio-accent-headline-media']);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'accent_headline_media_shadow', 'selector' => '{{WRAPPER}} .calio-accent-headline-media']);
        $this->add_style_heading('accent_headline_media_shape_heading', esc_html__('Shape & Spacing', 'calio-addon'));
        $this->add_dimensions_control('accent_headline_media_radius', esc_html__('Radius', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-media, {{WRAPPER}} .calio-accent-headline-media img', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_dimensions_control('accent_headline_media_padding', esc_html__('Padding', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-media', 'padding');
        $this->add_responsive_control('accent_headline_media_min_height', [
            'label' => esc_html__('Min Height', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['px', 'vh'],
            'range' => [
                'px' => ['min' => 100, 'max' => 1200],
                'vh' => ['min' => 10, 'max' => 100],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline-media' => 'min-height: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .calio-accent-headline-media img' => 'min-height: calc({{SIZE}}{{UNIT}} - 24px);',
            ],
        ]);
        $this->add_control('accent_headline_media_object_fit', [
            'label' => esc_html__('Image Fit', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'cover',
            'options' => [
                'cover' => esc_html__('Cover', 'calio-addon'),
                'contain' => esc_html__('Contain', 'calio-addon'),
                'fill' => esc_html__('Fill', 'calio-addon'),
                'scale-down' => esc_html__('Scale Down', 'calio-addon'),
            ],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-media img' => 'object-fit: {{VALUE}};'],
        ]);
        $this->add_control('accent_headline_media_object_position', [
            'label' => esc_html__('Image Position', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'center center',
            'options' => [
                'top left' => esc_html__('Top Left', 'calio-addon'),
                'top center' => esc_html__('Top Center', 'calio-addon'),
                'top right' => esc_html__('Top Right', 'calio-addon'),
                'center left' => esc_html__('Center Left', 'calio-addon'),
                'center center' => esc_html__('Center Center', 'calio-addon'),
                'center right' => esc_html__('Center Right', 'calio-addon'),
                'bottom left' => esc_html__('Bottom Left', 'calio-addon'),
                'bottom center' => esc_html__('Bottom Center', 'calio-addon'),
                'bottom right' => esc_html__('Bottom Right', 'calio-addon'),
            ],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-media img' => 'object-position: {{VALUE}};'],
        ]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_media_label_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-media-chip']);
        $this->add_text_paint_controls('accent_headline_media_label_text', esc_html__('Label Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-media-chip');
        $this->add_background_type_control('accent_headline_media_label_bg', '{{WRAPPER}} .calio-accent-headline-media-chip');
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_media_note_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-media-note']);
        $this->add_text_paint_controls('accent_headline_media_note_text', esc_html__('Note Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-media-note');
        $this->end_controls_section();

        $this->start_controls_section('style_polish', ['label' => esc_html__('Polish', 'calio-addon'), 'tab' => Controls_Manager::TAB_STYLE]);
        $this->add_style_heading('accent_headline_panel_note_heading', esc_html__('Panel Note', 'calio-addon'));
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'accent_headline_panel_note_typography', 'selector' => '{{WRAPPER}} .calio-accent-headline-panel-note']);
        $this->add_text_paint_controls('accent_headline_panel_note_text', esc_html__('Panel Note Color', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-panel-note');
        $this->add_background_type_control('accent_headline_panel_note_bg', '{{WRAPPER}} .calio-accent-headline-panel-note');
        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'accent_headline_panel_note_border',
            'selector' => '{{WRAPPER}} .calio-accent-headline-panel-note',
        ]);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'accent_headline_panel_note_shadow',
            'selector' => '{{WRAPPER}} .calio-accent-headline-panel-note',
        ]);
        $this->add_dimensions_control('accent_headline_panel_note_radius', esc_html__('Radius', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-panel-note', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_dimensions_control('accent_headline_panel_note_padding', esc_html__('Padding', 'calio-addon'), '{{WRAPPER}} .calio-accent-headline-panel-note', 'padding');
        $this->add_responsive_control('accent_headline_panel_note_top', [
            'label' => esc_html__('Top Offset', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => -200, 'max' => 400]],
            'default' => ['size' => 18],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline' => '--calio-accent-panel-note-top: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_responsive_control('accent_headline_panel_note_inset', [
            'label' => esc_html__('Side Inset', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 400]],
            'default' => ['size' => 22],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline' => '--calio-accent-panel-note-inset: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_responsive_control('accent_headline_panel_note_blur', [
            'label' => esc_html__('Backdrop Blur', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 60]],
            'default' => ['size' => 12],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline-panel-note' => 'backdrop-filter: blur({{SIZE}}{{UNIT}});'],
        ]);
        $this->add_responsive_control('accent_headline_panel_note_clearance', [
            'label' => esc_html__('Content Clearance', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 200]],
            'default' => ['size' => 38],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline.has-panel-note .calio-accent-headline-content' => 'padding-top: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_style_heading('accent_headline_glow_heading', esc_html__('Panel Accent Glow', 'calio-addon'));
        $this->add_background_type_control('accent_headline_glow_bg', '{{WRAPPER}} .calio-accent-headline.has-panel-accent::before');
        $this->add_responsive_control('accent_headline_glow_size', [
            'label' => esc_html__('Glow Size', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['px', '%'],
            'range' => [
                'px' => ['min' => 60, 'max' => 1000],
                '%' => ['min' => 10, 'max' => 100],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-accent-headline.has-panel-accent::before' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_responsive_control('accent_headline_glow_blur', [
            'label' => esc_html__('Glow Blur', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 120]],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline.has-panel-accent::before' => 'filter: blur({{SIZE}}{{UNIT}});'],
        ]);
        $this->add_control('accent_headline_glow_opacity', [
            'label' => esc_html__('Glow Opacity', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 1, 'step' => 0.05]],
            'selectors' => ['{{WRAPPER}} .calio-accent-headline.has-panel-accent::before' => 'opacity: {{SIZE}};'],
        ]);
        $this->end_controls_section();
    }

    protected function render(): void
    {
        $settings = $this->get_settings_for_display();
        $tag = (string) ($settings['tag'] ?? 'h2');
        if (!in_array($tag, ['h1', 'h2', 'h3', 'h4', 'div', 'p'], true)) {
            $tag = 'h2';
        }

        $accent_classes = ['calio-accent-headline-accent', 'accent-mode-' . sanitize_html_class((string) ($settings['accent_mode'] ?? 'fill'))];
        $accent_words = $this->parse_rotating_words((string) ($settings['rotating_words'] ?? ''));
        $accent_text = esc_html((string) ($settings['headline_accent'] ?? ''));
        $accent_markup = '<span class="' . esc_attr(implode(' ', $accent_classes)) . '">' . $accent_text . '</span>';

        if (!empty($accent_words)) {
            $rotation_speed = max(1200, (int) ($settings['rotation_speed'] ?? 2400));
            $accent_words_json = wp_json_encode($accent_words);
            $accent_markup = sprintf(
                '<span class="%1$s calio-accent-headline-rotator motion-%5$s%6$s" data-words="%2$s" data-speed="%3$d"><span class="calio-accent-headline-rotator-word">%4$s</span></span>',
                esc_attr(implode(' ', $accent_classes)),
                esc_attr(is_string($accent_words_json) ? $accent_words_json : '[]'),
                $rotation_speed,
                esc_html($accent_words[0]),
                esc_attr(sanitize_html_class((string) ($settings['rotation_motion'] ?? 'slide'))),
                (($settings['pause_rotation_on_hover'] ?? 'yes') === 'yes') ? ' can-pause' : ''
            );
        }

        $headline = '<span class="calio-accent-headline-lead">' . esc_html((string) ($settings['headline_lead'] ?? '')) . '</span>';
        $headline .= ' ' . $accent_markup;
        $headline .= ' <span class="calio-accent-headline-trail">' . esc_html((string) ($settings['headline_trail'] ?? '')) . '</span>';

        if (!empty($settings['link']['url'])) {
            $rel = [];
            if (!empty($settings['link']['nofollow'])) {
                $rel[] = 'nofollow';
            }
            if (!empty($settings['link']['is_external'])) {
                $rel[] = 'noopener';
                $rel[] = 'noreferrer';
            }

            $linked_headline = '<a class="calio-accent-headline-link" href="' . esc_url((string) $settings['link']['url']) . '"';
            if (!empty($settings['link']['is_external'])) {
                $linked_headline .= ' target="' . esc_attr('_blank') . '"';
            }
            if (!empty($rel)) {
                $linked_headline .= ' rel="' . esc_attr(implode(' ', array_unique($rel))) . '"';
            }
            $headline = $linked_headline . '>' . $headline . '</a>';
        }

        $classes = [
            'calio-accent-headline',
            'skin-' . sanitize_html_class((string) ($settings['skin'] ?? 'split')),
            'layout-' . sanitize_html_class((string) ($settings['layout'] ?? 'stacked')),
        ];
        $bg_word_position = sanitize_html_class((string) ($settings['accent_headline_bg_word_position'] ?? 'top-right'));
        if (!in_array($bg_word_position, ['top-right', 'top-left', 'center', 'bottom-right', 'bottom-left', 'diagonal'], true)) {
            $bg_word_position = 'top-right';
        }
        $classes[] = 'calio-bg-word-pos-' . $bg_word_position;
        $media_url = isset($settings['media_image']['url']) ? (string) $settings['media_image']['url'] : '';

        if ($media_url !== '') {
            $classes[] = 'has-media';
        }
        if (($settings['panel_accent'] ?? 'yes') === 'yes') {
            $classes[] = 'has-panel-accent';
        }
        if (!empty($settings['panel_note'])) {
            $classes[] = 'has-panel-note';
        }

        $primary_cta = $this->build_cta_markup(
            (string) ($settings['primary_cta_text'] ?? ''),
            $settings['primary_cta_url'] ?? [],
            'calio-accent-headline-cta calio-accent-headline-cta-primary'
        );
        $secondary_cta = $this->build_cta_markup(
            (string) ($settings['secondary_cta_text'] ?? ''),
            $settings['secondary_cta_url'] ?? [],
            'calio-accent-headline-cta calio-accent-headline-cta-secondary'
        );

        echo '<div class="' . esc_attr(implode(' ', $classes)) . '">';
        if (!empty($settings['background_word'])) {
            echo '<div class="calio-accent-headline-bg-word" aria-hidden="true">' . esc_html((string) $settings['background_word']) . '</div>';
        }
        if (!empty($settings['panel_note'])) {
            echo '<span class="calio-accent-headline-panel-note">' . esc_html((string) $settings['panel_note']) . '</span>';
        }
        echo '<div class="calio-accent-headline-content">';
        echo '<div class="calio-accent-headline-main">';
        if (!empty($settings['eyebrow']) || !empty($settings['badge_text'])) {
            echo '<div class="calio-accent-headline-top">';
            if (!empty($settings['eyebrow'])) {
                echo '<span class="calio-accent-headline-eyebrow">' . esc_html((string) $settings['eyebrow']) . '</span>';
            }
            if (!empty($settings['badge_text'])) {
                echo '<span class="calio-accent-headline-badge">' . esc_html((string) $settings['badge_text']) . '</span>';
            }
            echo '</div>';
        }
        echo '<' . tag_escape($tag) . ' class="calio-accent-headline-title">' . wp_kses_post($headline) . '</' . tag_escape($tag) . '>';
        if (($settings['show_divider'] ?? 'yes') === 'yes') {
            echo '<span class="calio-accent-headline-divider" aria-hidden="true"></span>';
        }
        echo '</div>';
        echo '<div class="calio-accent-headline-body">';
        if (!empty($settings['description'])) {
            echo '<div class="calio-accent-headline-description">' . esc_html((string) $settings['description']) . '</div>';
        }
        if (!empty($settings['support_note'])) {
            echo '<div class="calio-accent-headline-support">' . esc_html((string) $settings['support_note']) . '</div>';
        }
        if ($primary_cta !== '' || $secondary_cta !== '') {
            echo '<div class="calio-accent-headline-cta-row">';
            echo wp_kses_post($primary_cta);
            echo wp_kses_post($secondary_cta);
            echo '</div>';
        }
        echo '</div>';
        echo '</div>';
        if ($media_url !== '') {
            $shape_class = 'shape-' . sanitize_html_class((string) ($settings['media_shape'] ?? 'soft-blob'));
            $motion_class = 'motion-' . sanitize_html_class((string) ($settings['media_motion'] ?? 'soft-float'));
            $ring_class = (($settings['show_media_ring'] ?? 'yes') === 'yes') ? ' has-ring' : '';
            echo '<div class="calio-accent-headline-media ' . esc_attr($shape_class . ' ' . $motion_class . $ring_class) . '">';
            echo '<img src="' . esc_url($media_url) . '" alt="' . esc_attr(get_post_meta((int) ($settings['media_image']['id'] ?? 0), '_wp_attachment_image_alt', true) ?: wp_basename($media_url)) . '">';
            if (!empty($settings['media_label']) || !empty($settings['media_note'])) {
                echo '<div class="calio-accent-headline-media-overlay">';
                if (!empty($settings['media_label'])) {
                    echo '<span class="calio-accent-headline-media-chip">' . esc_html((string) $settings['media_label']) . '</span>';
                }
                if (!empty($settings['media_note'])) {
                    echo '<span class="calio-accent-headline-media-note">' . esc_html((string) $settings['media_note']) . '</span>';
                }
                echo '</div>';
            }
            echo '</div>';
        }
        echo '</div>';
    }

    /**
     * Parses comma-separated rotating words into a clean unique list.
     *
     * @return string[]
     */
    private function parse_rotating_words(string $value): array
    {
        $parts = preg_split('/[\r\n,]+/', $value);
        if (!is_array($parts)) {
            return [];
        }

        $words = [];

        foreach ($parts as $part) {
            $word = trim(wp_strip_all_tags((string) $part));
            if ($word === '' || in_array($word, $words, true)) {
                continue;
            }

            $words[] = $word;
        }

        return $words;
    }

    /**
     * Builds a CTA anchor only when both text and url are available.
     *
     * @param array<string, mixed> $url
     */
    private function build_cta_markup(string $text, array $url, string $class_name): string
    {
        $text = trim($text);
        $href = isset($url['url']) ? (string) $url['url'] : '';

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

        $rel = [];

        if (!empty($url['nofollow'])) {
            $rel[] = 'nofollow';
        }

        if (!empty($url['is_external'])) {
            $rel[] = 'noopener';
            $rel[] = 'noreferrer';
        }

        $output = '<a class="' . esc_attr($class_name) . '" href="' . esc_url($href) . '"';
        if (!empty($url['is_external'])) {
            $output .= ' target="' . esc_attr('_blank') . '"';
        }
        if (!empty($rel)) {
            $output .= ' rel="' . esc_attr(implode(' ', array_unique($rel))) . '"';
        }

        return $output . '>' . esc_html($text) . '</a>';
    }
}
