@component('yas_theme::emails.layout')
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #1e293b; line-height: 1.6; max-width: 600px; margin: 0 auto;">
    
    <!-- Header Greeting -->
    <div style="margin-bottom: 24px;">
        <h2 style="font-size: 20px; font-weight: 600; color: #0f172a; margin: 0 0 12px 0;">
            @lang('yas_theme::app.emails.dear', ['customer_name' => $comment->order->customer_full_name]), 👋
        </h2>

        <!-- <p> test </p> -->

        <p style="font-size: 15px; color: #475569; margin: 0; line-height: 1.6;">
            @lang('yas_theme::app.emails.orders.commented.title', [
                'order_id'   => '<a href="' . route('yas_theme.customers.account.orders.view', $comment->order_id) . '" style="color: #2969FF; text-decoration: underline;">#' . $comment->order->increment_id . '</a>',
                'created_at' => core()->formatDate($comment->order->created_at, 'Y-m-d H:i:s')
            ])
        </p>
    </div>

    <!-- Description Card -->
    <div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 32px;">
        <p style="font-size: 15px; color: #334155; margin: 0; line-height: 1.6;">
            {{ $comment->comment }}
        </p>
    </div>

</div>
@endcomponent