<?php
/**
 * Отзывы родителей (с лоад-мором)
 * .bento .pksh-section .pksh-reviews #pksh-reviews
 *
 * @package Dekart
 */

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

$data        = Pksh_Data::instance();
$review_items = $data->get_reviews();
$total_count  = count( $review_items );
?>
<section class="bento pksh-section pksh-reviews" id="pksh-reviews" aria-label="Отзывы">
	<div class="bento__full section-header--centered">
		<span class="bento-label">Отзывы</span>
		<h2 class="bento-h2">Что говорят родители</h2>
		<p class="bento-p">Родители доверяют нам самое главное — делятся впечатлениями о подготовке к школе</p>

		<div class="pksh-swipe-hint" aria-hidden="true">
			<span class="pksh-swipe-hint__arrow">👇</span>
			<span class="pksh-swipe-hint__text">Листайте, чтобы читать ещё отзывы</span>
		</div>
	</div>

	<div class="bento__full">
		<?php if ( $total_count > 0 ) :
			$items = array_values( $review_items );
			$card_idx = 0;
		?>
		<div class="reviews-cards">
			<div class="lw-scroll-x">
				<div class="lw-grid lw-grid--3">
				<?php foreach ( $items as $item ) :
					$card_idx++;
					$author     = $item['review_author'] ?? '';
					$text       = $item['review_text'] ?? '';
					$raw_rating = $item['review_rating'] ?? '';
					$avatar_id  = ! empty( $item['review_avatar'] ) ? (int) $item['review_avatar'] : 0;
					$teacher    = $item['review_teacher'] ?? array();
					$date       = $item['review_date'] ?? '';
					$stars      = max( 1, min( 5, (int) $raw_rating ) );
					$name       = $author ?: 'Анонимно';
					$is_long    = strlen( wp_strip_all_tags( $text ) ) > 350;
					$batch      = (int) ceil( $card_idx / 12 );
					if ( empty( $text ) ) { continue; }
				?>
				<article class="lw-card reveal" data-batch="<?php echo (int) $batch; ?>">
					<div class="lw-flex lw-flex--row lw-gap-12 lw-items-start">
						<div class="lw-avatar lw-avatar--48">
							<?php if ( $avatar_id && wp_attachment_is_image( $avatar_id ) ) : ?>
								<?php echo wp_get_attachment_image( $avatar_id, array( 48, 48 ), false, array( 'class' => 'lw-avatar__img', 'loading' => 'lazy', 'alt' => esc_attr( $name ) ) ); ?>
							<?php else : ?>
								<div class="lw-avatar lw-avatar--48 lw-avatar--letter">
									<span class="lw-avatar__letter"><?php echo esc_html( $name ? mb_strtoupper( mb_substr( $name, 0, 1 ) ) : '?' ); ?></span>
								</div>
							<?php endif; ?>
						</div>
						<div class="lw-flex lw-flex--col" style="flex:1; min-width:0;">
							<div class="lw-text-dark lw-font-semibold"><?php echo esc_html( $name ); ?></div>
							<?php if ( ! empty( $teacher[0]['id'] ) ) : ?>
								<div class="lw-text-xs lw-text-gray">
									Преподаватель: <a href="<?php echo esc_url( get_permalink( $teacher[0]['id'] ) ); ?>" class="review-card__teacher-link"><?php echo esc_html( get_the_title( $teacher[0]['id'] ) ); ?></a>
								</div>
							<?php endif; ?>
							<div class="lw-badge lw-badge--verified">✓ Проверенный отзыв</div>
						</div>
					</div>
					<div class="lw-stars lw-mt-8">
						<?php for ( $i = 1; $i <= 5; $i++ ) : ?>
							<svg class="lw-star <?php echo $i <= $stars ? 'lw-star--filled' : ''; ?>" aria-hidden="true" width="16" height="16"><use href="#<?php echo $i <= $stars ? 'icon-star-filled' : 'icon-star'; ?>"/></svg>
						<?php endfor; ?>
					</div>
					<div class="lw-card__text lw-mt-8<?php echo $is_long ? ' review-card__text--clamped' : ''; ?>">
						<?php echo wp_kses_post( $text ); ?>
					</div>
					<div class="review-card__footer">
						<?php if ( $is_long ) : ?>
							<button class="review-card__btn-more" aria-label="Читать ещё">Читать ещё</button>
						<?php endif; ?>
						<?php if ( ! empty( $date ) ) : ?>
							<span class="review-card__date"><?php echo esc_html( $date ); ?></span>
						<?php endif; ?>
					</div>
				</article>
				<?php endforeach; ?>
				</div>
			</div>
		</div>
		<?php if ( $total_count > 12 ) : ?>
		<div class="reviews-loadmore" id="reviews-loadmore">
			<button type="button" class="reviews-loadmore__btn">Показать ещё</button>
		</div>
		<?php endif; ?>
		<?php endif; ?>
	</div>
</section>
