<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{ $locale ?? config('app.locale') }}" lang="{{ $locale ?? config('app.locale') }}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="x-apple-disable-message-reformatting" />
    <title>{{ $subject ?? config('app.name') }}</title>
    <!--[if mso]>
    <style type="text/css">
        body, table, td, p, a, li {
            font-family: Arial, sans-serif !important;
        }
    </style>
    <![endif]-->
    <style type="text/css">
        /* Progressive Enhancement for Mobile */
        @media only screen and (max-width: 600px) {
            .email-container {
                width: 100% !important;
            }
            .email-content {
                padding: 20px 15px !important;
            }
            .mobile-padding {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }
            .mobile-button {
                width: 100% !important;
                max-width: 280px !important;
                min-width: 200px !important;
            }
            .mobile-button a {
                width: 100% !important;
                max-width: 280px !important;
                min-width: 200px !important;
                display: block !important;
            }
            .mobile-text {
                font-size: 14px !important;
            }
            .mobile-text-small {
                font-size: 13px !important;
            }
            .mobile-title {
                font-size: 18px !important;
            }
            /* Reduce padding for outer wrapper */
            .outer-padding {
                padding: 20px 10px 0 10px !important;
            }
            /* Make tables responsive */
            table[role="presentation"] {
                width: 100% !important;
            }
            /* Adjust logo padding */
            .logo-cell {
                padding: 0 0 10px 0 !important;
            }
        }

        /* Extra small screens (300px) */
        @media only screen and (max-width: 360px) {
            .email-content {
                padding: 15px 10px !important;
            }
            .mobile-padding {
                padding-left: 5px !important;
                padding-right: 5px !important;
            }
            .mobile-button {
                width: 60% !important;
                max-width: 180px !important;
                min-width: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .mobile-button a {
                width: 100% !important;
                max-width: 100% !important;
                min-width: auto !important;
                padding-left: 5px !important;
                padding-right: 5px !important;
                font-size: 13px !important;
            }
            .outer-padding {
                padding: 10px 5px 0 5px !important;
            }
        }
    </style>
    <!--[if !mso]><!-->
    <style type="text/css">
        /* Client-specific Styles - These won't be inlined */
        body {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
    </style>
    <!--<![endif]-->
</head>
<body style="margin: 0; padding: 0; width: 100%; background-color: #f4f4f4; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif;">
    <table role="presentation" class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <tr>
            <td align="center" class="outer-padding" style="padding: 40px 20px 0 20px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                <!-- Header -->
                <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                    <tr>
                        <td align="center" class="logo-cell" style="padding: 0 0 15px 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                            <img src="{{ asset('storage/app-images/app_mail_logo.png') }}" alt="{{ config('app.name') }}" width="120" style="width: 120px; max-width: 120px; height: auto; display: block; margin: 0 auto; border: 0; -ms-interpolation-mode: bicubic;" />
                        </td>
                    </tr>
                </table>

                <!-- Content Container -->
                <table role="presentation" class="email-container" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                    <tr>
                        <td class="email-content" style="padding: 40px 30px; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                            {{ $slot }}
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #f9fafb; padding: 20px; text-align: center; border-top: 1px solid #e5e7eb; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                            <p style="margin: 5px 0; padding: 0; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5; text-align: center;">
                                {{ __('Need help, or having issues?') }} <a href="mailto:{{ timebank_config('mail.support.email') }}" style="color: #6b7280; border-bottom: 1px solid #6b7280; text-decoration: none;">{{ __('Email our team') }}</a>
                            </p>
                            <p style="margin: 5px 0; padding: 0; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5; text-align: center;">
                                <a href="{{ config('app.url') }}" style="color: #6b7280; border-bottom: 1px solid #6b7280; text-decoration: none;">
                                    {{ __('Visit our website') }}
                                </a>
                            </p>
                            <p style="margin: 15px 0 5px 0; padding: 0; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5; text-align: center;">
                                © {{ date('Y') }} {{ config('app.name') }}. {{ __('All rights reserved.') }}
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
