@component('mail::layout')

    {{-- Header --}}
    <table class="header" width="100%" cellpadding="0" cellspacing="0" role="presentation"
        style="background-color:#FAFBF7; padding: 20px; text-align: center;">
        <tr>
            <td>
                <img src="{{ asset($helper->logo()) }}" alt="Harvest Hub Logo" style="height:50px; margin: 0 auto;">
            </td>
        </tr>
    </table>

    {{-- Body --}}
    <table class="body" width="100%" cellpadding="0" cellspacing="0" role="presentation"
        style="background-color:#FAFBF7; padding: 40px 20px;">
        <tr>
            <td align="center">
                <table width="600" cellpadding="0" cellspacing="0" role="presentation"
                    style="background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 0 15px rgba(0,0,0,0.1);">
                    <tr>
                        <td style="font-family: 'Futura', Arial, sans-serif; color: #333333; text-align: center;">
                            <h2 style="font-size: 24px; margin-bottom: 20px;">Hello {{ $user->first_name }}
                                {{ $user->last_name }},</h2>

                            <p style="font-size: 16px; line-height: 1.5; margin-bottom: 30px;">
                                We received a request to reset your password. Click the button below to create a new one.
                            </p>

                            {{-- Button --}}
                            @component('mail::button', ['url' => $url, 'color' => 'green'])
                                Reset Password
                            @endcomponent

                            <p style="font-size: 14px; color: #888888; margin-top: 40px;">
                                If you did not request a password reset, no further action is required.
                            </p>

                            <p style="font-size: 14px; color: #888888;">
                                Thanks,<br>Harvest Hub
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    {{-- Subcopy --}}
    @slot('subcopy')
        <table class="subcopy" width="100%" cellpadding="0" cellspacing="0" role="presentation"
            style="background-color:#FAFBF7; padding: 20px; font-size: 12px; color: #999999; text-align: center;">
            <tr>
                <td>
                    If you're having trouble clicking the "Reset Password" button, copy and paste the URL below into your web
                    browser:<br>
                    <a href="{{ $url }}" style="color:#38a169;">{{ $url }}</a>
                </td>
            </tr>
        </table>
    @endslot

@endcomponent