@php
    $channel = $testimonial['channel'] ?? 'email';
    $messageSubject = $testimonial['message_subject']
        ?? 'Re: Our experience with Uzapoint';
    $messageTime = $testimonial['message_time'] ?? '10:24 AM';
@endphp

<div class="testimonials-message testimonials-message--{{ $channel }}" aria-label="{{ ucfirst($channel) }} message from {{ $testimonial['name'] }}">
    @if ($channel === 'email')
        <div class="testimonials-message-frame testimonials-message-frame--email">
            <div class="testimonials-message-toolbar" aria-hidden="true">
                <span class="testimonials-message-window-dot testimonials-message-window-dot--close"></span>
                <span class="testimonials-message-window-dot testimonials-message-window-dot--min"></span>
                <span class="testimonials-message-window-dot testimonials-message-window-dot--max"></span>
                <span class="testimonials-message-toolbar-title">
                    <x-icon name="mail" />
                    Mail
                </span>
            </div>

            <div class="testimonials-message-meta testimonials-message-meta--email">
                <p><span>To</span> success@uzapoint.com</p>
                <p><span>From</span> {{ $testimonial['name'] }} &lt;{{ \Illuminate\Support\Str::slug($testimonial['company'], '.') }}@business.co.ke&gt;</p>
                <p><span>Subject</span> {{ $messageSubject }}</p>
            </div>

            <div class="testimonials-message-body testimonials-message-body--email">
                <p>Hi Uzapoint team,</p>
                <p>{{ $testimonial['quote'] }}</p>
                <p class="testimonials-message-signoff">
                    Best regards,<br>
                    <strong>{{ $testimonial['name'] }}</strong><br>
                    {{ $testimonial['role'] }}, {{ $testimonial['company'] }}
                </p>
            </div>
        </div>
    @elseif ($channel === 'whatsapp')
        <div class="testimonials-message-frame testimonials-message-frame--whatsapp">
            <div class="testimonials-message-toolbar testimonials-message-toolbar--whatsapp">
                <span class="testimonials-message-avatar" aria-hidden="true">{{ mb_substr($testimonial['name'], 0, 1) }}</span>
                <div class="testimonials-message-contact">
                    <span class="testimonials-message-contact-name">{{ $testimonial['name'] }}</span>
                    <span class="testimonials-message-contact-meta">{{ $testimonial['role'] }} · {{ $testimonial['company'] }}</span>
                </div>
                <span class="testimonials-message-channel-icon" aria-hidden="true">
                    <x-icon name="whatsapp" />
                </span>
            </div>

            <div class="testimonials-message-body testimonials-message-body--whatsapp">
                <div class="testimonials-message-bubble testimonials-message-bubble--whatsapp">
                    <p>{{ $testimonial['quote'] }}</p>
                    <span class="testimonials-message-time">
                        {{ $messageTime }}
                        <span class="testimonials-message-ticks" aria-hidden="true">
                            <svg viewBox="0 0 16 11" width="16" height="11" aria-hidden="true"><path fill="currentColor" d="M11.071.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-6.19 7.636-2.405-2.272a.463.463 0 0 0-.336-.146.47.47 0 0 0-.343.15.447.447 0 0 0-.14.333c0 .124.05.24.14.333l2.746 2.593a.464.464 0 0 0 .336.146.48.48 0 0 0 .368-.164l6.503-8.026a.447.447 0 0 0 .096-.464.43.43 0 0 0-.09-.158ZM15.557.653a.457.457 0 0 0-.304-.102.493.493 0 0 0-.381.178l-9.18 11.35-1.05-1.003a.463.463 0 0 0-.336-.146.47.47 0 0 0-.343.15.447.447 0 0 0-.14.333c0 .124.05.24.14.333l1.39 1.327a.464.464 0 0 0 .336.146.48.48 0 0 0 .368-.164l9.493-11.74a.447.447 0 0 0 .096-.464.43.43 0 0 0-.09-.158Z"/></svg>
                        </span>
                    </span>
                </div>
            </div>
        </div>
    @else
        <div class="testimonials-message-frame testimonials-message-frame--sms">
            <div class="testimonials-message-toolbar testimonials-message-toolbar--sms">
                <span class="testimonials-message-back" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
                </span>
                <div class="testimonials-message-contact">
                    <span class="testimonials-message-contact-name">{{ $testimonial['name'] }}</span>
                    <span class="testimonials-message-contact-meta">{{ $testimonial['company'] }}</span>
                </div>
                <span class="testimonials-message-channel-icon" aria-hidden="true">
                    <x-icon name="phone" />
                </span>
            </div>

            <div class="testimonials-message-body testimonials-message-body--sms">
                <span class="testimonials-message-day" aria-hidden="true">{{ $testimonial['message_day'] ?? 'Today' }}</span>
                <div class="testimonials-message-bubble testimonials-message-bubble--sms">
                    <p>{{ $testimonial['quote'] }}</p>
                    <span class="testimonials-message-time">{{ $messageTime }}</span>
                </div>
                <p class="testimonials-message-sms-role">{{ $testimonial['role'] }}</p>
            </div>
        </div>
    @endif
</div>