<?php

if (! defined('ABSPATH')) exit; // Exit if accessed directly

?>
<?php
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- GET parameter used for layout mode detection only
$instant_popup_builder_is_edit_mode = isset($_GET['edit_id']) && !empty(sanitize_text_field(wp_unslash($_GET['edit_id'])));
$instant_popup_builder_animation_section_classes = 'ipb-section ipb-animation-effects';
if (! $instant_popup_builder_is_edit_mode) {
    $instant_popup_builder_animation_section_classes .= ' ipb-new-popup-panel';
}
?>
<div class="<?php echo esc_attr($instant_popup_builder_animation_section_classes); ?>">
 <div class="ipb-section-header">
    <h3>Animation Effects</h3>
</div>
<div class="ipb-section-content" data-section="display">
    <!-- Animate Type Row -->
    <div class="ipb-animation-row">
        <div class="ipb-animation-label">
            <label for="animate_type">Animate type</label>
        </div>
        <div class="ipb-animation-control">
            <select name="animate_type" id="animate_type" class="regular-text">
                <option value="none" selected>None</option>
                <option value="fade-in">Fade In</option>
                <option value="slide">Slide</option>
                <option value="scale">Scale (Zoom In)</option>
                <option value="reveal">Expand From Trigger (Reveal)</option>
            </select>
            <p class="ipb-animation-helper">Choose how the popup appears.</p>
        </div>
    </div>

    <!-- Animate Speed Row -->
    <div class="ipb-animation-row">
        <div class="ipb-animation-label">
            <label for="animate_speed">Animate speed</label>
        </div>
        <div class="ipb-animation-control">
            <div style="display: flex; align-items: center; gap: 12px;">
                <input type="range" name="speed_range" id="speed_range" min="0" step="100" max="1000" value="500" style="flex: 1; min-width: 0;">
                <input type="number" name="animate_speed" id="animate_speed" min="0" max="1000" step="100" value="500" style="width: 80px; height: 40px; padding: 0 8px; border: 1px solid #8c8f94; border-radius: 2px; text-align: center;">
            </div>
            <p class="ipb-animation-helper">Lower is faster. Range: 0-1000ms. Recommended: 300-500ms for smooth effect.</p>
        </div>
    </div>

    <!-- Animate Origin Row -->
    <div class="ipb-animation-row">
        <div class="ipb-animation-label">
            <label for="animate_origin">Animate origin</label>
        </div>
        <div class="ipb-animation-control">
            <select name="animate_origin" id="animate_origin" class="regular-text">
                <option value="bottom">Bottom</option>
                <option value="left">Left</option>
                <option value="right">Right</option>
                <option value="top">Top</option>
            </select>
            <p class="ipb-animation-helper">Choose the direction from which the popup animates. For slide animations, the popup will enter from the selected direction.</p>
        </div>
    </div>
</div>
</div>