<?php
defined( 'ABSPATH' ) || exit;

class Jalpi_Element_Team_Member extends Jalpi_Element {
    public static function type(): string { return 'team-member'; }

    public function render( array $node, Jalpi_Renderer $renderer ): string {
        $id       = sanitize_html_class( $node['id'] ?? '' );
        $content  = $node['content'] ?? [];
        $styles   = $node['styles']  ?? [];
        $photo    = esc_url(  $content['photoUrl']  ?? '' );
        $name     = esc_html( $content['name']      ?? '' );
        $role     = esc_html( $content['role']      ?? '' );
        $bio      = esc_html( $content['bio']       ?? '' );
        $linkedin = esc_url(  $content['linkedin']  ?? '' );
        $twitter  = esc_url(  $content['twitter']   ?? '' );
        $a        = $renderer->get_css_attrs( $node );

        $lazy = Jalpi_Settings::get( 'performance', 'enable_lazy_loading', '1' ) ? ' loading="lazy"' : '';
        $photo_html = $photo
            ? '<img class="jalpi-team__photo" src="' . $photo . '" alt="' . esc_attr( $name ) . '"' . $lazy . '>'
            : '<div class="jalpi-team__photo jalpi-team__photo--placeholder" aria-hidden="true"></div>';

        $social = '';
        if ( $linkedin ) {
            $social .= '<a class="jalpi-team__social-link" href="' . $linkedin . '" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">'
                    . '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>'
                    . '</a>';
        }
        if ( $twitter ) {
            $social .= '<a class="jalpi-team__social-link" href="' . $twitter . '" target="_blank" rel="noopener noreferrer" aria-label="Twitter/X">'
                    . '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>'
                    . '</a>';
        }

        $renderer->add_css( '.jalpi-el.jalpi-' . $id . '{display:block;' . $renderer->styles_to_css( $styles ) . '}' );

        return '<div class="jalpi-el jalpi-team jalpi-' . esc_attr( $id ) . $a['extra_cls'] . '"' . $a['id_attr'] . '>'
             . $photo_html
             . '<div class="jalpi-team__info">'
             .   '<h3 class="jalpi-team__name">' . $name . '</h3>'
             .   ( $role ? '<p class="jalpi-team__role">' . $role . '</p>' : '' )
             .   ( $bio  ? '<p class="jalpi-team__bio">'  . $bio  . '</p>' : '' )
             .   ( $social ? '<div class="jalpi-team__social">' . $social . '</div>' : '' )
             . '</div>'
             . '</div>';
    }
}
