@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;">
            @lang('yas_theme::app.emails.dear', ['customer_name' => $customerNote->customer->name]), 👋
        </h2>
    </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;">
            @lang('yas_theme::app.emails.customers.commented.description', ['note' => $customerNote->note])
        </p>
    </div>

</div>
@endcomponent