<?php
/**
 * Hero Animated Widget
 *
 * Dynamic hero section with engaging animations, particles, and feature cards
 *
 * @package AI_Theme
 */

namespace AITheme\Elementor\Widgets;

use Elementor\Controls_Manager;
use Elementor\Repeater;

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

class Hero_Animated extends AI_Widget_Base {

    public function get_name() {
        return 'ai_hero_animated';
    }

    public function get_title() {
        return __('Hero Animated', 'ai-theme');
    }

    public function get_icon() {
        return 'eicon-banner';
    }

    public function get_categories() {
        return array('ai-theme-hero');
    }

    public function get_keywords() {
        return array('hero', 'banner', 'animated', 'particles', 'ai');
    }

    protected function register_controls() {
        $this->start_controls_section(
            'content_section',
            array(
                'label' => __('Content', 'ai-theme'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            )
        );

        $this->add_control(
            'badge_text',
            array(
                'label'   => __('Badge Text', 'ai-theme'),
                'type'    => Controls_Manager::TEXT,
                'default' => __('Now Live', 'ai-theme'),
            )
        );

        $this->add_control(
            'heading',
            array(
                'label'   => __('Heading', 'ai-theme'),
                'type'    => Controls_Manager::TEXT,
                'default' => __('Animated Hero Section', 'ai-theme'),
            )
        );

        $this->add_control(
            'subheading',
            array(
                'label'   => __('Subheading', 'ai-theme'),
                'type'    => Controls_Manager::TEXTAREA,
                'default' => __('Engage your visitors with stunning animations and dynamic content', 'ai-theme'),
            )
        );

        $this->add_control(
            'cta_text',
            array(
                'label'   => __('CTA Text', 'ai-theme'),
                'type'    => Controls_Manager::TEXT,
                'default' => __('Explore Now', 'ai-theme'),
            )
        );

        $this->add_control(
            'cta_link',
            array(
                'label' => __('CTA Link', 'ai-theme'),
                'type'  => Controls_Manager::URL,
            )
        );

        $this->add_control(
            'background_image',
            array(
                'label' => __('Background Image', 'ai-theme'),
                'type'  => Controls_Manager::MEDIA,
            )
        );

        $this->end_controls_section();

        // Feature Cards Section
        $this->start_controls_section(
            'features_section',
            array(
                'label' => __('Feature Cards', 'ai-theme'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            )
        );

        $this->add_control(
            'show_features',
            array(
                'label'        => __('Show Feature Cards', 'ai-theme'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'ai-theme'),
                'label_off'    => __('No', 'ai-theme'),
                'return_value' => 'yes',
                'default'      => 'yes',
            )
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'icon',
            array(
                'label'   => __('Icon/Emoji', 'ai-theme'),
                'type'    => Controls_Manager::TEXT,
                'default' => '⚡',
            )
        );

        $repeater->add_control(
            'title',
            array(
                'label'   => __('Title', 'ai-theme'),
                'type'    => Controls_Manager::TEXT,
                'default' => __('Feature', 'ai-theme'),
            )
        );

        $this->add_control(
            'features',
            array(
                'label'     => __('Feature Cards', 'ai-theme'),
                'type'      => Controls_Manager::REPEATER,
                'fields'    => $repeater->get_controls(),
                'default'   => array(
                    array('icon' => '⚡', 'title' => __('Lightning Fast', 'ai-theme')),
                    array('icon' => '🔒', 'title' => __('Secure & Safe', 'ai-theme')),
                    array('icon' => '🚀', 'title' => __('Easy to Use', 'ai-theme')),
                ),
                'condition' => array('show_features' => 'yes'),
            )
        );

        $this->end_controls_section();

        // Animation Settings
        $this->start_controls_section(
            'animation_section',
            array(
                'label' => __('Animations', 'ai-theme'),
                'tab'   => Controls_Manager::TAB_CONTENT,
            )
        );

        $this->add_control(
            'show_particles',
            array(
                'label'        => __('Show Particles', 'ai-theme'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'ai-theme'),
                'label_off'    => __('No', 'ai-theme'),
                'return_value' => 'yes',
                'default'      => 'yes',
            )
        );

        $this->add_control(
            'show_scroll_indicator',
            array(
                'label'        => __('Show Scroll Indicator', 'ai-theme'),
                'type'         => Controls_Manager::SWITCHER,
                'label_on'     => __('Yes', 'ai-theme'),
                'label_off'    => __('No', 'ai-theme'),
                'return_value' => 'yes',
                'default'      => 'yes',
            )
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $unique_id = 'hero-animated-' . $this->get_id();
        $bg_style = '';
        if (!empty($settings['background_image']['url'])) {
            $bg_url = esc_url($settings['background_image']['url']);
            $bg_style = "background-image: url({$bg_url}); background-size: cover; background-position: center;";
        }
        ?>
        <section
            id="<?php echo esc_attr($unique_id); ?>"
            class="ai-hero ai-hero-animated relative min-h-screen flex items-center justify-center overflow-hidden"
            data-block-type="hero"
            data-block-variant="hero-animated"
        >
            <!-- Animated background -->
            <div class="absolute inset-0">
                <?php if (!empty($settings['background_image']['url'])) : ?>
                    <div class="absolute inset-0 bg-cover bg-center ai-ken-burns" style="<?php echo esc_attr($bg_style); ?>"></div>
                    <div class="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-black/60"></div>
                <?php else : ?>
                    <div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"></div>
                <?php endif; ?>

                <!-- Animated grid pattern -->
                <div class="absolute inset-0 opacity-20 ai-grid-flow" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 50px 50px;"></div>
            </div>

            <?php if ($settings['show_particles'] === 'yes') : ?>
                <!-- Floating particles -->
                <div class="absolute inset-0 overflow-hidden pointer-events-none">
                    <?php for ($i = 0; $i < 15; $i++) : ?>
                        <div
                            class="absolute w-2 h-2 bg-white/30 rounded-full ai-particle"
                            style="left: <?php echo rand(0, 100); ?>%; top: <?php echo rand(0, 100); ?>%; animation-delay: <?php echo $i * 0.5; ?>s; animation-duration: <?php echo 15 + rand(0, 10); ?>s;"
                        ></div>
                    <?php endfor; ?>
                </div>
            <?php endif; ?>

            <!-- Rotating accent circles -->
            <div class="absolute inset-0 pointer-events-none hidden md:block">
                <div class="absolute top-1/4 left-1/4 w-96 h-96 border-2 border-purple-500/20 rounded-full ai-spin-slow"></div>
                <div class="absolute bottom-1/4 right-1/4 w-80 h-80 border-2 border-pink-500/20 rounded-full ai-spin-reverse"></div>
            </div>

            <!-- Main content with staggered animations -->
            <div class="relative max-w-5xl mx-auto px-6 md:px-8 text-center z-10">

                <?php if (!empty($settings['badge_text'])) : ?>
                    <div class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-gradient-to-r from-purple-500/20 to-pink-500/20 backdrop-blur-sm border border-white/10 mb-8 ai-fade-in">
                        <span class="relative flex h-3 w-3">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-500"></span>
                        </span>
                        <span class="text-white text-sm font-semibold"><?php echo esc_html($settings['badge_text']); ?></span>
                    </div>
                <?php endif; ?>

                <?php if (!empty($settings['heading'])) : ?>
                    <h1 class="ai-hero-heading text-5xl md:text-6xl lg:text-7xl font-extrabold leading-tight text-white mb-6 ai-slide-up" style="animation-delay: 0.1s;">
                        <?php echo esc_html($settings['heading']); ?>
                    </h1>
                <?php endif; ?>

                <!-- Animated accent line -->
                <div class="flex justify-center mb-8">
                    <div class="h-1 bg-gradient-to-r from-transparent via-purple-500 to-transparent ai-expand-width"></div>
                </div>

                <?php if (!empty($settings['subheading'])) : ?>
                    <p class="ai-hero-subheading text-lg md:text-xl lg:text-2xl text-white/90 max-w-2xl mx-auto mb-10 ai-slide-up" style="animation-delay: 0.3s;">
                        <?php echo esc_html($settings['subheading']); ?>
                    </p>
                <?php endif; ?>

                <?php if (!empty($settings['cta_text'])) : ?>
                    <div class="mb-12 ai-slide-up" style="animation-delay: 0.5s;">
                        <a
                            href="<?php echo esc_url($settings['cta_link']['url'] ?? '#'); ?>"
                            class="inline-flex items-center justify-center gap-2 px-8 py-4 md:px-10 md:py-5 rounded-full font-bold shadow-xl hover:shadow-2xl transition-all duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 hover:scale-105"
                        >
                            <?php echo esc_html($settings['cta_text']); ?>
                            <svg class="w-5 h-5 ai-bounce-x" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if ($settings['show_features'] === 'yes' && !empty($settings['features'])) : ?>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto ai-slide-up" style="animation-delay: 0.7s;">
                        <?php foreach ($settings['features'] as $idx => $feature) : ?>
                            <div class="backdrop-blur-md bg-white/5 rounded-2xl p-6 border border-white/10 hover:bg-white/10 hover:scale-105 transition-all duration-300 group">
                                <div class="text-4xl mb-3 group-hover:scale-110 transition-transform duration-300">
                                    <?php echo esc_html($feature['icon']); ?>
                                </div>
                                <div class="text-white font-semibold text-lg"><?php echo esc_html($feature['title']); ?></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>

            <?php if ($settings['show_scroll_indicator'] === 'yes') : ?>
                <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 text-white/60 animate-bounce">
                    <div class="flex flex-col items-center gap-2">
                        <span class="text-xs uppercase tracking-wider">Scroll</span>
                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                        </svg>
                    </div>
                </div>
            <?php endif; ?>
        </section>

        <style>
            @keyframes ai-ken-burns {
                0% { transform: scale(1); }
                100% { transform: scale(1.1); }
            }
            .ai-ken-burns {
                animation: ai-ken-burns 20s ease-in-out infinite alternate;
            }

            @keyframes ai-grid-flow {
                0% { transform: translateY(0); }
                100% { transform: translateY(50px); }
            }
            .ai-grid-flow {
                animation: ai-grid-flow 20s linear infinite;
            }

            @keyframes ai-particle {
                0% { transform: translateY(0) translateX(0); opacity: 0; }
                10% { opacity: 1; }
                90% { opacity: 1; }
                100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
            }
            .ai-particle {
                animation: ai-particle linear infinite;
            }

            @keyframes ai-spin-slow {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            .ai-spin-slow {
                animation: ai-spin-slow 30s linear infinite;
            }

            @keyframes ai-spin-reverse {
                from { transform: rotate(360deg); }
                to { transform: rotate(0deg); }
            }
            .ai-spin-reverse {
                animation: ai-spin-reverse 25s linear infinite;
            }

            @keyframes ai-bounce-x {
                0%, 100% { transform: translateX(0); }
                50% { transform: translateX(5px); }
            }
            .ai-bounce-x {
                animation: ai-bounce-x 1s ease-in-out infinite;
            }

            @keyframes ai-fade-in {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .ai-fade-in {
                animation: ai-fade-in 0.7s ease-out forwards;
            }

            @keyframes ai-slide-up {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .ai-slide-up {
                opacity: 0;
                animation: ai-slide-up 0.8s ease-out forwards;
            }

            @keyframes ai-expand-width {
                from { width: 0; opacity: 0; }
                to { width: 8rem; opacity: 1; }
            }
            .ai-expand-width {
                animation: ai-expand-width 0.8s ease-out 0.3s forwards;
                width: 0;
            }
        </style>
        <?php
    }
}
