<?php
/** Hero Elementor widget. */
defined( 'ABSPATH' ) || exit;

class Shabnam_Elementor_Hero extends Shabnam_Elementor_Widget_Base {
	public function get_name() { return 'shabnam-muchwow-hero'; }
	public function get_title() { return __( 'قهرمان / شروع صفحه', 'shabnam-muchwow' ); }
	public function get_icon() { return 'eicon-banner'; }

	protected function register_controls() {
		$this->start_controls_section( 'content', array( 'label' => __( 'متن و دکمه‌ها', 'shabnam-muchwow' ) ) );
		$this->add_control( 'title_before', array( 'label' => __( 'ابتدای عنوان', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'به ' ) );
		$this->add_control( 'title_highlight', array( 'label' => __( 'بخش رنگی عنوان', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'انقلاب' ) );
		$this->add_control( 'title_after', array( 'label' => __( 'ادامه عنوان', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => ' ارزهای دیجیتال جامعه‌محور بپیوندید' ) );
		$this->add_control( 'subtitle', array( 'label' => __( 'زیرعنوان', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXTAREA, 'default' => 'نسل بعدی میم‌کوین‌ها.' ) );
		$this->add_control( 'primary_text', array( 'label' => __( 'متن دکمه اول', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'همین حالا بخرید!' ) );
		$this->shabnam_add_url_control( 'primary_url', __( 'لینک دکمه اول', 'shabnam-muchwow' ), shabnam_shop_url() );
		$this->add_control( 'primary_icon', array( 'label' => __( 'آیکن/ایموجی دکمه اول', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => '🚀' ) );
		$this->add_control( 'secondary_text', array( 'label' => __( 'متن دکمه دوم', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => 'به ما بپیوندید!' ) );
		$this->shabnam_add_url_control( 'secondary_url', __( 'لینک دکمه دوم', 'shabnam-muchwow' ), shabnam_contact_url() );
		$this->add_control( 'secondary_icon', array( 'label' => __( 'آیکن/ایموجی دکمه دوم', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => '💪' ) );
		$this->end_controls_section();

		$this->start_controls_section( 'images', array( 'label' => __( 'تصاویر Hero', 'shabnam-muchwow' ) ) );
		$this->add_control( 'desktop_image', array( 'label' => __( 'تصویر دسکتاپ', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'default' => array( 'url' => shabnam_asset_uri( 'images/home-one/hero.svg' ) ) ) );
		$this->add_control( 'mobile_top_image', array( 'label' => __( 'تصویر موبایل بالا', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'default' => array( 'url' => shabnam_asset_uri( 'images/home-one/hero-mobile-01.svg' ) ) ) );
		$this->add_control( 'mobile_bottom_image', array( 'label' => __( 'تصویر موبایل پایین', 'shabnam-muchwow' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'default' => array( 'url' => shabnam_asset_uri( 'images/home-one/hero-mobile-02.svg' ) ) ) );
		$this->end_controls_section();
		$this->shabnam_register_common_style_controls();
	}

	protected function render() {
		$s = $this->get_settings_for_display();
		foreach ( array( 'title_before', 'title_highlight', 'title_after', 'subtitle', 'primary_text', 'secondary_text' ) as $key ) {
			$this->add_inline_editing_attributes( $key, 'none' );
		}
		$this->add_link_attributes( 'primary_url', $s['primary_url'] );
		$this->add_link_attributes( 'secondary_url', $s['secondary_url'] );
		?>
		<div class="hero-header section panel overflow-hidden shabnam-elementor-section" id="hero_header">
		<div class="section-outer py-9 lg:py-10 min-h-650px sm:min-h-600px lg:min-h-750px xl:min-h-1170px">
		<img alt="تصویر" class="position-absolute start-0 top-0 w-100 d-none sm:d-block" src="<?php echo esc_url( $this->shabnam_media_url( $s['desktop_image'], shabnam_asset_uri( 'images/home-one/hero.svg' ) ) ); ?>"/>
		<img alt="تصویر" class="position-absolute start-0 top-0 w-100 mt-8 sm:d-none" src="<?php echo esc_url( $this->shabnam_media_url( $s['mobile_top_image'], shabnam_asset_uri( 'images/home-one/hero-mobile-01.svg' ) ) ); ?>"/>
		<img alt="تصویر" class="position-absolute start-0 bottom-0 w-100 sm:d-none" src="<?php echo esc_url( $this->shabnam_media_url( $s['mobile_bottom_image'], shabnam_asset_uri( 'images/home-one/hero-mobile-02.svg' ) ) ); ?>"/>
		<div class="container"><div class="section-inner panel">
		<div class="panel vstack items-center gap-2 lg:gap-3 xl:gap-4 sm:max-w-650px lg:max-w-800px xl:max-w-1000px mx-auto text-center px-2 lg:px-0 mt-7 sm:mt-9 xl:mt-10" data-anime="targets: &gt;*; translateY: [24, 0]; opacity: [0, 1]; delay: anime.stagger(100, {start: 200});">
		<h1 class="h5 sm:h2 lg:h1 xl:display-6 mb-0 ls-0 text-white text-uppercase ls-0 xl:mt-4"><span class="text-tertiary" <?php echo $this->get_render_attribute_string( 'title_before' ); ?>><?php echo esc_html( $s['title_before'] ); ?></span><span class="text-gradient bg-gradient-45n from-secondary to-tertiary" <?php echo $this->get_render_attribute_string( 'title_highlight' ); ?>><?php echo esc_html( $s['title_highlight'] ); ?></span><span <?php echo $this->get_render_attribute_string( 'title_after' ); ?>><?php echo esc_html( $s['title_after'] ); ?></span></h1>
		<p class="fs-4 xl:fs-3" <?php echo $this->get_render_attribute_string( 'subtitle' ); ?>><?php echo esc_html( $s['subtitle'] ); ?></p>
		<div class="vstack sm:hstack justify-center gap-3 mt-1 sm:mt-2">
		<a class="btn btn-md sm:btn-xl xl:btn-2xl px-4 xl:px-6 border border-3 border-black bg-gradient-45n from-secondary to-tertiary contrast-shadow -rotate-2 hover:rotate-0" <?php echo $this->get_render_attribute_string( 'primary_url' ); ?> style="--shadowColor: var(--color-secondary)"><span class="text-black" <?php echo $this->get_render_attribute_string( 'primary_text' ); ?>><?php echo esc_html( $s['primary_text'] ); ?></span><span class="fs-4 mb-narrow"><?php echo esc_html( $s['primary_icon'] ); ?></span></a>
		<a class="btn btn-md sm:btn-xl xl:btn-2xl px-4 xl:px-6 border border-3 border-black bg-gradient-45n from-fifth to-quaternary contrast-shadow rotate-2 hover:rotate-0" <?php echo $this->get_render_attribute_string( 'secondary_url' ); ?> style="--shadowColor: var(--color-secondary)"><span class="text-black" <?php echo $this->get_render_attribute_string( 'secondary_text' ); ?>><?php echo esc_html( $s['secondary_text'] ); ?></span><span class="fs-4 mb-narrow"><?php echo esc_html( $s['secondary_icon'] ); ?></span></a>
		</div></div></div></div></div></div>
		<?php
	}
}
