<?php
/**
 * EPP Team Member Widget
 *
 * Features: 4 card styles (classic/modern/overlay/minimal), social links
 * repeater, photo shape controls, fully responsive, smooth hover effects.
 *
 * @package AdMoreWidgetsSuite
 * @since   1.0.0
 */

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

class EPPRO_Team_Member_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro_team_member'; }
    public function get_title(): string { return __( 'Team Member', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-person'; }
    public function get_keywords(): array { return [ 'team', 'member', 'staff', 'person', 'card', 'eppro' ]; }

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

    public function get_script_depends(): array {
        return [ 'eppro-team-member-script' ];
    }

    // =========================================================================
    // Controls
    // =========================================================================

    protected function register_controls(): void {
        $this->register_content_controls();
        $this->register_style_controls();
        $this->eppro_register_entrance_animation_controls();
    }

    // ── Content ──────────────────────────────────────────────────────────────

    private function register_content_controls(): void {

        /* ── Profile ─────────────────────────────────────────────────────── */
        $this->start_controls_section( 'section_profile', [
            'label' => __( 'Profile', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ] );

        $this->add_control( 'photo', [
            'label'   => __( 'Photo', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::MEDIA,
            'default' => [ 'url' => '' ],
            'dynamic' => [ 'active' => true ],
        ] );

        $this->add_control( 'name', [
            'label'       => __( 'Name', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'Alex Johnson', 'admore-widgets-suite' ),
            'placeholder' => __( 'Full Name', 'admore-widgets-suite' ),
            'dynamic'     => [ 'active' => true ],
        ] );

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

        $this->add_control( 'designation', [
            'label'       => __( 'Designation', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'Senior UX Designer', 'admore-widgets-suite' ),
            'placeholder' => __( 'Job title or role', 'admore-widgets-suite' ),
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'bio', [
            'label'       => __( 'Bio', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXTAREA,
            'rows'        => 4,
            'default'     => __( 'Passionate designer with 8+ years of experience crafting intuitive digital products that users love.', 'admore-widgets-suite' ),
            'placeholder' => __( 'Short description…', 'admore-widgets-suite' ),
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'bio_truncate', [
            'label'        => __( 'Truncate Bio', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => '',
            'return_value' => 'yes',
            'description'  => __( 'Limit bio to a set number of words with a Read More toggle.', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'bio_words', [
            'label'     => __( 'Words to Show', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::NUMBER,
            'default'   => 20,
            'min'       => 5,
            'max'       => 200,
            'condition' => [ 'bio_truncate' => 'yes' ],
        ] );

        $this->add_control( 'bio_read_more_text', [
            'label'     => __( 'Read More Text', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::TEXT,
            'default'   => __( 'Read More', 'admore-widgets-suite' ),
            'condition' => [ 'bio_truncate' => 'yes' ],
        ] );

        $this->add_control( 'bio_read_less_text', [
            'label'     => __( 'Read Less Text', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::TEXT,
            'default'   => __( 'Read Less', 'admore-widgets-suite' ),
            'condition' => [ 'bio_truncate' => 'yes' ],
        ] );

        $this->add_control( 'department', [
            'label'       => __( 'Department / Team', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => '',
            'placeholder' => __( 'e.g. Engineering, Marketing', 'admore-widgets-suite' ),
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'email', [
            'label'       => __( 'Email', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'placeholder' => __( 'hello@example.com', 'admore-widgets-suite' ),
            'input_type'  => 'email',
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'phone', [
            'label'       => __( 'Phone', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'placeholder' => '+1 (555) 000-0000',
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'profile_link', [
            'label'         => __( 'Profile Link', 'admore-widgets-suite' ),
            'type'          => \Elementor\Controls_Manager::URL,
            'placeholder'   => 'https://',
            'default'       => [ 'url' => '' ],
            'dynamic'       => [ 'active' => true ],
        ] );

        $this->end_controls_section();

        /* ── Social Links ────────────────────────────────────────────────── */
        $this->start_controls_section( 'section_social', [
            'label' => __( 'Social Links', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ] );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control( 'social_icon', [
            'label'            => __( 'Icon', 'admore-widgets-suite' ),
            'type'             => \Elementor\Controls_Manager::ICONS,
            'default'          => [ 'value' => 'fab fa-linkedin', 'library' => 'fa-brands' ],
            'recommended'      => [
                'fa-brands' => [ 'facebook', 'twitter', 'x-twitter', 'linkedin', 'instagram', 'youtube', 'github', 'dribbble', 'behance', 'pinterest', 'tiktok' ],
            ],
        ] );

        $repeater->add_control( 'social_url', [
            'label'       => __( 'URL', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::URL,
            'placeholder' => 'https://',
            'dynamic'     => [ 'active' => true ],
        ] );

        $repeater->add_control( 'social_label', [
            'label'       => __( 'Label (aria)', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'placeholder' => __( 'LinkedIn', 'admore-widgets-suite' ),
        ] );

        $repeater->add_control( 'social_color', [
            'label'       => __( 'Icon Color', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::COLOR,
            'default'     => '',
            'selectors'   => [ '{{WRAPPER}} {{CURRENT_ITEM}} .eppro-tm-social-link' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'social_links', [
            'label'       => __( 'Social Profiles', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::REPEATER,
            'fields'      => $repeater->get_controls(),
            'default'     => [
                [
                    'social_icon'  => [ 'value' => 'fab fa-linkedin',  'library' => 'fa-brands' ],
                    'social_label' => 'LinkedIn',
                    'social_url'   => [ 'url' => 'https://linkedin.com', 'is_external' => true ],
                ],
                [
                    'social_icon'  => [ 'value' => 'fab fa-x-twitter', 'library' => 'fa-brands' ],
                    'social_label' => 'X (Twitter)',
                    'social_url'   => [ 'url' => 'https://x.com', 'is_external' => true ],
                ],
                [
                    'social_icon'  => [ 'value' => 'fab fa-instagram', 'library' => 'fa-brands' ],
                    'social_label' => 'Instagram',
                    'social_url'   => [ 'url' => 'https://instagram.com', 'is_external' => true ],
                ],
            ],
            'title_field' => '{{{ social_label || "Social Link" }}}',
        ] );

        $this->end_controls_section();

        /* ── Settings ────────────────────────────────────────────────────── */
        $this->start_controls_section( 'section_settings', [
            'label' => __( 'Settings', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ] );

        $this->add_control( 'popup_on_click', [
            'label'        => __( 'Open Full Bio on Click', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => '',
            'return_value' => 'yes',
            'description'  => __( 'Opens a modal popup with full name, bio, and contact info on card click.', 'admore-widgets-suite' ),
            'separator'    => 'before',
        ] );

        $this->add_control( 'card_style', [
            'label'   => __( 'Card Style', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'classic',
            'options' => [
                'classic' => __( 'Classic',  'admore-widgets-suite' ),
                'modern'  => __( 'Modern (Horizontal)', 'admore-widgets-suite' ),
                'overlay' => __( 'Overlay (Hover)', 'admore-widgets-suite' ),
                'minimal' => __( 'Minimal',  'admore-widgets-suite' ),
            ],
        ] );

        $this->add_control( 'image_shape', [
            'label'   => __( 'Photo Shape', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'circle',
            'options' => [
                'circle'  => __( 'Circle',   'admore-widgets-suite' ),
                'rounded' => __( 'Rounded',  'admore-widgets-suite' ),
                'square'  => __( 'Square',   'admore-widgets-suite' ),
            ],
        ] );

        $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-tm-wrap' => 'text-align: {{VALUE}};' ],
            'condition' => [ 'card_style!' => 'modern' ],
        ] );

        $this->end_controls_section();

        /* ── Skills ──────────────────────────────────────────────────────── */
        $this->start_controls_section( 'section_skills', [
            'label' => __( 'Skills', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ] );

        $this->add_control( 'show_skills', [
            'label'        => __( 'Show Skills', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => '',
            'return_value' => 'yes',
        ] );

        $skills_repeater = new \Elementor\Repeater();

        $skills_repeater->add_control( 'skill_name', [
            'label'       => __( 'Skill Name', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'Design', 'admore-widgets-suite' ),
            'label_block' => true,
            'dynamic'     => [ 'active' => true ],
        ] );

        $skills_repeater->add_control( 'skill_level', [
            'label'   => __( 'Level (%)', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SLIDER,
            'range'   => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],
            'default' => [ 'size' => 80 ],
        ] );

        $skills_repeater->add_control( 'skill_color', [
            'label'     => __( 'Bar Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '',
            'selectors' => [ '{{WRAPPER}} {{CURRENT_ITEM}} .eppro-tm-skill-fill' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_control( 'skills', [
            'label'       => __( 'Skills', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::REPEATER,
            'fields'      => $skills_repeater->get_controls(),
            'default'     => [
                [ 'skill_name' => __( 'Design',      'admore-widgets-suite' ), 'skill_level' => [ 'size' => 90 ] ],
                [ 'skill_name' => __( 'Development', 'admore-widgets-suite' ), 'skill_level' => [ 'size' => 75 ] ],
                [ 'skill_name' => __( 'Marketing',   'admore-widgets-suite' ), 'skill_level' => [ 'size' => 60 ] ],
            ],
            'title_field' => '{{{ skill_name }}} — {{{ skill_level.size }}}%',
            'condition'   => [ 'show_skills' => 'yes' ],
        ] );

        $this->end_controls_section();
    }

    // ── Style ─────────────────────────────────────────────────────────────────

    private function register_style_controls(): void {

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

        $this->add_control( 'card_bg', [
            'label'     => __( 'Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-wrap' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'card_padding', [
            'label'      => __( 'Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em', '%' ],
            'default'    => [ 'top' => '32', 'right' => '24', 'bottom' => '32', 'left' => '24', 'unit' => 'px', 'isLinked' => false ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_control( 'card_border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', '%' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
            'default'    => [ 'size' => 12, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-wrap' => 'border-radius: {{SIZE}}{{UNIT}};' ],
        ] );

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

        $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [
            'name'     => 'card_shadow',
            'selector' => '{{WRAPPER}} .eppro-tm-wrap',
            'fields_options' => [
                'box_shadow_type' => [ 'default' => 'yes' ],
                'box_shadow'      => [
                    'default' => [ 'horizontal' => 0, 'vertical' => 8, 'blur' => 30, 'spread' => 0, 'color' => 'rgba(0,0,0,0.08)' ],
                ],
            ],
        ] );

        $this->end_controls_section();

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

        $this->add_responsive_control( 'photo_size', [
            'label'      => __( 'Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 40, 'max' => 250 ] ],
            'default'    => [ 'size' => 110, 'unit' => 'px' ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-tm-photo'     => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-tm-photo img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
            ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
            'name'     => 'photo_border',
            'selector' => '{{WRAPPER}} .eppro-tm-photo img',
        ] );

        $this->add_control( 'photo_border_color_hover', [
            'label'     => __( 'Border Color (Hover)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-tm-wrap:hover .eppro-tm-photo img' => 'border-color: {{VALUE}};' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Css_Filter::get_type(), [
            'name'     => 'photo_css_filter',
            'selector' => '{{WRAPPER}} .eppro-tm-photo img',
        ] );

        $this->add_control( 'photo_spacing', [
            'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
            'default'    => [ 'size' => 20 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-photo' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
            'condition'  => [ 'card_style!' => 'modern' ],
        ] );

        $this->end_controls_section();

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

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

        $this->add_control( 'name_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#111827',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-name' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'name_color_hover', [
            'label'     => __( 'Color (Hover)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-tm-wrap:hover .eppro-tm-name' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'name_spacing', [
            'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 30 ] ],
            'default'    => [ 'size' => 4 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-name' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

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

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

        $this->add_control( 'designation_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#7c3aed',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-designation' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'designation_spacing', [
            'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 30 ] ],
            'default'    => [ 'size' => 14 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-designation' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

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

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

        $this->add_control( 'bio_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#6b7280',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-bio' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'bio_spacing', [
            'label'      => __( 'Bottom Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
            'default'    => [ 'size' => 20 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-bio' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

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

        $this->add_control( 'skill_bar_height', [
            'label'      => __( 'Bar Height', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 2, 'max' => 20 ] ],
            'default'    => [ 'size' => 6 ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-tm-skill-track' => 'height: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-tm-skill-fill'  => 'height: {{SIZE}}{{UNIT}};',
            ],
        ] );

        $this->add_control( 'skill_bar_radius', [
            'label'      => __( 'Bar Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 20 ] ],
            'default'    => [ 'size' => 6 ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-tm-skill-track' => 'border-radius: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-tm-skill-fill'  => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
        ] );

        $this->add_control( 'skill_track_color', [
            'label'     => __( 'Track Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#e5e7eb',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-skill-track' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_control( 'skill_fill_color', [
            'label'     => __( 'Fill Color (Default)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#7c3aed',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-skill-fill' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'skill_label_typography',
            'selector' => '{{WRAPPER}} .eppro-tm-skill-label',
        ] );

        $this->add_control( 'skill_label_color', [
            'label'     => __( 'Label Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#374151',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-skill-label' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'skill_percent_color', [
            'label'     => __( 'Percentage Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#6b7280',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-skill-percent' => 'color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'skill_spacing', [
            'label'      => __( 'Spacing Between Skills', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 4, 'max' => 40 ] ],
            'default'    => [ 'size' => 14 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-skill-item + .eppro-tm-skill-item' => 'margin-top: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->add_control( 'skills_top_spacing', [
            'label'      => __( 'Skills Section Top Spacing', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
            'default'    => [ 'size' => 20 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-skills' => 'margin-top: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

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

        $this->add_control( 'social_icon_size', [
            'label'      => __( 'Icon Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 10, 'max' => 40 ] ],
            'default'    => [ 'size' => 15 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-social-link' => 'font-size: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->add_control( 'social_btn_size', [
            'label'      => __( 'Button Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 24, 'max' => 64 ] ],
            'default'    => [ 'size' => 36 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-social-link' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->add_control( 'social_btn_radius', [
            'label'      => __( 'Button Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', '%' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 50 ], '%' => [ 'min' => 0, 'max' => 50 ] ],
            'default'    => [ 'size' => 50, 'unit' => '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-social-link' => 'border-radius: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->start_controls_tabs( 'social_tabs' );

        $this->start_controls_tab( 'social_tab_normal', [ 'label' => __( 'Normal', 'admore-widgets-suite' ) ] );
        $this->add_control( 'social_icon_color', [
            'label'     => __( 'Icon Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#6b7280',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-social-link' => 'color: {{VALUE}};' ],
        ] );
        $this->add_control( 'social_bg_color', [
            'label'     => __( 'Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#f3f4f6',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-social-link' => 'background-color: {{VALUE}};' ],
        ] );
        $this->end_controls_tab();

        $this->start_controls_tab( 'social_tab_hover', [ 'label' => __( 'Hover', 'admore-widgets-suite' ) ] );
        $this->add_control( 'social_icon_color_hover', [
            'label'     => __( 'Icon Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-social-link:hover' => 'color: {{VALUE}};' ],
        ] );
        $this->add_control( 'social_bg_color_hover', [
            'label'     => __( 'Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#7c3aed',
            'selectors' => [ '{{WRAPPER}} .eppro-tm-social-link:hover' => 'background-color: {{VALUE}};' ],
        ] );
        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->add_control( 'social_gap', [
            'label'      => __( 'Gap Between Icons', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 2, 'max' => 24 ] ],
            'default'    => [ 'size' => 8 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-tm-social-list' => 'gap: {{SIZE}}{{UNIT}};' ],
            'separator'  => 'before',
        ] );

        $this->end_controls_section();
    }

    // =========================================================================
    // Render
    // =========================================================================

    protected function render(): void {
        $s           = $this->get_settings_for_display();
        $card_style  = $s['card_style']  ?? 'classic';
        $image_shape = $s['image_shape'] ?? 'circle';
        $name_tag    = \Elementor\Utils::validate_html_tag( $s['name_tag'] ?? 'h3' );
        $photo_url   = $s['photo']['url'] ?? '';
        $photo_id    = $s['photo']['id']  ?? 0;

        $popup_on_click = ! empty( $s['popup_on_click'] ) && 'yes' === $s['popup_on_click'];

        $card_classes = implode( ' ', array_filter( [
            'eppro-tm-wrap',
            'eppro-tm-style-' . esc_attr( $card_style ),
            'eppro-tm-shape-' . esc_attr( $image_shape ),
            $popup_on_click ? 'eppro-tm-clickable' : '',
        ] ) );

        $profile_url = $s['profile_link']['url'] ?? '';
        $has_link    = ! empty( $profile_url ) && ! $popup_on_click;

        $this->add_render_attribute( 'wrap', 'class', $card_classes );
        if ( $popup_on_click ) {
            $this->add_render_attribute( 'wrap', 'data-eppro-tm-popup', '1' );
        }
        ?>
        <div <?php $this->print_render_attribute_string( 'wrap' ); ?>>

            <?php if ( $card_style === 'overlay' && $photo_url ) : ?>
            <div class="eppro-tm-overlay-image">
                <?php echo wp_get_attachment_image( (int) $photo_id, 'large', false, [ 'class' => 'eppro-tm-bg-img', 'alt' => esc_attr( $s['name'] ?? '' ), 'loading' => 'lazy' ] ) ?: '<img src="' . esc_url( $photo_url ) . '" alt="' . esc_attr( $s['name'] ?? '' ) . '" loading="lazy">'; ?>
                <div class="eppro-tm-overlay-mask"></div>
                <div class="eppro-tm-overlay-content">
                    <?php $this->render_name_designation( $s, $name_tag, $has_link, $profile_url ); ?>
                    <?php $this->render_social( $s ); ?>
                </div>
            </div>
            <?php else : ?>

            <?php if ( $photo_url ) : ?>
            <div class="eppro-tm-photo">
                <?php if ( $has_link ) : ?>
                <a href="<?php echo esc_url( $profile_url ); ?>" <?php echo $s['profile_link']['is_external'] ? 'target="_blank" rel="noopener noreferrer"' : ''; ?> aria-label="<?php echo esc_attr( $s['name'] ?? '' ); ?>">
                <?php endif; ?>
                    <?php echo wp_get_attachment_image( (int) $photo_id, 'thumbnail', false, [ 'alt' => esc_attr( $s['name'] ?? '' ), 'loading' => 'lazy' ] ) ?: '<img src="' . esc_url( $photo_url ) . '" alt="' . esc_attr( $s['name'] ?? '' ) . '" loading="lazy">'; ?>
                <?php if ( $has_link ) : ?>
                </a>
                <?php endif; ?>
            </div>
            <?php endif; ?>

            <div class="eppro-tm-body">
                <?php $this->render_name_designation( $s, $name_tag, $has_link, $profile_url ); ?>

                <?php if ( ! empty( $s['bio'] ) ) :
                    $bio_truncate = 'yes' === ( $s['bio_truncate'] ?? '' );
                    $bio_words    = absint( $s['bio_words'] ?? 20 );
                    $full_bio     = wp_kses_post( $s['bio'] );
                    if ( $bio_truncate && $bio_words > 0 ) :
                        $short_bio      = wp_trim_words( $s['bio'], $bio_words, '' );
                        $read_more_text = $s['bio_read_more_text'] ?? __( 'Read More', 'admore-widgets-suite' );
                        $read_less_text = $s['bio_read_less_text'] ?? __( 'Read Less', 'admore-widgets-suite' );
                        $needs_toggle   = str_word_count( wp_strip_all_tags( $s['bio'] ) ) > $bio_words;
                    ?>
                    <div class="eppro-tm-bio-wrap<?php echo $needs_toggle ? ' eppro-tm-bio-truncated' : ''; ?>"
                         <?php if ( $needs_toggle ) : ?>
                         data-read-more="<?php echo esc_attr( $read_more_text ); ?>"
                         data-read-less="<?php echo esc_attr( $read_less_text ); ?>"
                         <?php endif; ?>>
                        <p class="eppro-tm-bio eppro-tm-bio-short"><?php echo wp_kses_post( $short_bio ); ?><?php echo $needs_toggle ? '&hellip;' : ''; ?></p>
                        <?php if ( $needs_toggle ) : ?>
                        <p class="eppro-tm-bio eppro-tm-bio-full" hidden><?php echo wp_kses_post( $full_bio ); ?></p>
                        <button class="eppro-tm-bio-toggle" type="button"><?php echo esc_html( $read_more_text ); ?></button>
                        <?php endif; ?>
                    </div>
                    <?php else : ?>
                    <p class="eppro-tm-bio"><?php echo wp_kses_post( $full_bio ); ?></p>
                    <?php endif; ?>
                <?php endif; ?>

                <?php if ( ! empty( $s['email'] ) || ! empty( $s['phone'] ) ) : ?>
                <div class="eppro-tm-contact">
                    <?php if ( ! empty( $s['email'] ) ) : ?>
                    <a href="mailto:<?php echo esc_attr( sanitize_email( $s['email'] ) ); ?>">
                        <i class="fas fa-envelope" aria-hidden="true"></i>
                        <?php echo esc_html( $s['email'] ); ?>
                    </a>
                    <?php endif; ?>
                    <?php if ( ! empty( $s['phone'] ) ) : ?>
                    <a href="tel:<?php echo esc_attr( preg_replace( '/[^0-9+]/', '', $s['phone'] ) ); ?>">
                        <i class="fas fa-phone" aria-hidden="true"></i>
                        <?php echo esc_html( $s['phone'] ); ?>
                    </a>
                    <?php endif; ?>
                </div>
                <?php endif; ?>

                <?php $this->render_skills( $s ); ?>

                <?php $this->render_social( $s ); ?>
            </div>

            <?php endif; ?>

        </div>

        <?php if ( $popup_on_click ) : ?>
        <div class="eppro-tm-modal-overlay" role="dialog" aria-modal="true" aria-label="<?php echo esc_attr( $s['name'] ?? '' ); ?>">
            <div class="eppro-tm-modal">
                <button class="eppro-tm-modal-close" aria-label="<?php esc_attr_e( 'Close', 'admore-widgets-suite' ); ?>">&times;</button>
                <?php if ( $photo_url ) : ?>
                <?php echo wp_get_attachment_image( (int) $photo_id, 'medium', false, [ 'class' => 'eppro-tm-modal-photo', 'alt' => esc_attr( $s['name'] ?? '' ) ] ) ?: '<img src="' . esc_url( $photo_url ) . '" class="eppro-tm-modal-photo" alt="' . esc_attr( $s['name'] ?? '' ) . '">'; ?>
                <?php endif; ?>
                <?php if ( ! empty( $s['name'] ) ) : ?>
                <p class="eppro-tm-modal-name"><?php echo esc_html( $s['name'] ); ?></p>
                <?php endif; ?>
                <?php if ( ! empty( $s['department'] ) ) : ?>
                <p class="eppro-tm-modal-dept"><?php echo esc_html( $s['department'] ); ?></p>
                <?php endif; ?>
                <?php if ( ! empty( $s['designation'] ) ) : ?>
                <p class="eppro-tm-modal-designation"><?php echo esc_html( $s['designation'] ); ?></p>
                <?php endif; ?>
                <?php if ( ! empty( $s['bio'] ) ) : ?>
                <p class="eppro-tm-modal-bio"><?php echo wp_kses_post( $s['bio'] ); ?></p>
                <?php endif; ?>
                <?php if ( ! empty( $s['email'] ) || ! empty( $s['phone'] ) ) : ?>
                <div class="eppro-tm-contact eppro-tm-contact--center">
                    <?php if ( ! empty( $s['email'] ) ) : ?>
                    <a href="mailto:<?php echo esc_attr( sanitize_email( $s['email'] ) ); ?>">
                        <i class="fas fa-envelope" aria-hidden="true"></i>
                        <?php echo esc_html( $s['email'] ); ?>
                    </a>
                    <?php endif; ?>
                    <?php if ( ! empty( $s['phone'] ) ) : ?>
                    <a href="tel:<?php echo esc_attr( preg_replace( '/[^0-9+]/', '', $s['phone'] ) ); ?>">
                        <i class="fas fa-phone" aria-hidden="true"></i>
                        <?php echo esc_html( $s['phone'] ); ?>
                    </a>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
                <?php $this->render_social( $s ); ?>
            </div>
        </div>
        <?php endif; ?>
        <?php
    }

    private function render_name_designation( array $s, string $name_tag, bool $has_link, string $profile_url ): void {
        if ( empty( $s['name'] ) && empty( $s['designation'] ) && empty( $s['department'] ) ) return;
        ?>
        <div class="eppro-tm-info">
            <?php if ( ! empty( $s['department'] ) ) : ?>
            <span class="eppro-tm-department"><?php echo esc_html( $s['department'] ); ?></span>
            <?php endif; ?>
            <?php if ( ! empty( $s['name'] ) ) : ?>
            <<?php echo esc_html( $name_tag ); ?> class="eppro-tm-name">
                <?php if ( $has_link ) : ?>
                <a href="<?php echo esc_url( $profile_url ); ?>" <?php echo ( $s['profile_link']['is_external'] ?? false ) ? 'target="_blank" rel="noopener noreferrer"' : ''; ?>><?php echo esc_html( $s['name'] ); ?></a>
                <?php else : ?>
                <?php echo esc_html( $s['name'] ); ?>
                <?php endif; ?>
            </<?php echo esc_html( $name_tag ); ?>>
            <?php endif; ?>

            <?php if ( ! empty( $s['designation'] ) ) : ?>
            <span class="eppro-tm-designation"><?php echo esc_html( $s['designation'] ); ?></span>
            <?php endif; ?>
        </div>
        <?php
    }

    private function render_skills( array $s ): void {
        if ( 'yes' !== ( $s['show_skills'] ?? '' ) || empty( $s['skills'] ) ) return;
        ?>
        <div class="eppro-tm-skills">
            <?php foreach ( $s['skills'] as $skill ) :
                $level = absint( $skill['skill_level']['size'] ?? 0 );
            ?>
            <div class="eppro-tm-skill-item elementor-repeater-item-<?php echo esc_attr( $skill['_id'] ); ?>">
                <div class="eppro-tm-skill-header">
                    <span class="eppro-tm-skill-label"><?php echo esc_html( $skill['skill_name'] ?? '' ); ?></span>
                    <span class="eppro-tm-skill-percent"><?php echo esc_html( $level ); ?>%</span>
                </div>
                <div class="eppro-tm-skill-track">
                    <div class="eppro-tm-skill-fill" style="width:<?php echo esc_attr( $level ); ?>%;"></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php
    }

    private function render_social( array $s ): void {
        if ( empty( $s['social_links'] ) ) return;
        ?>
        <ul class="eppro-tm-social-list" role="list">
            <?php foreach ( $s['social_links'] as $item ) :
                $url   = $item['social_url']['url'] ?? '';
                $label = $item['social_label'] ?? '';
                if ( empty( $url ) && empty( $item['social_icon']['value'] ) ) continue;
            ?>
            <li class="eppro-tm-social-item elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
                <a class="eppro-tm-social-link"
                   <?php echo $url ? 'href="' . esc_url( $url ) . '"' : ''; ?>
                   <?php echo ! empty( $item['social_url']['is_external'] ) ? 'target="_blank" rel="noopener noreferrer"' : ''; ?>
                   <?php echo $label ? 'aria-label="' . esc_attr( $label ) . '"' : ''; ?>>
                    <?php \Elementor\Icons_Manager::render_icon( $item['social_icon'], [ 'aria-hidden' => 'true' ] ); ?>
                </a>
            </li>
            <?php endforeach; ?>
        </ul>
        <?php
    }
}