<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom 360 Screenshot Received</title>
</head>
<body style="margin:0; padding:0; background-color:#f4f1ea; font-family:Arial, Helvetica, sans-serif; color:#2f2f2f;">

    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f1ea; margin:0; padding:0;">
    <tr>
        <td align="center" style="padding:30px 15px;">

            <!-- Main Container -->
            <table role="presentation"
                   width="840"
                   align="center"
                   cellpadding="0"
                   cellspacing="0"
                   border="0"
                   style="width:840px; max-width:840px; background-color:#ffffff; border-radius:14px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,0.06);">

                <!-- Top Brand Bar -->
                <tr>
                    <td style="background-color:#d8d1c4; height:18px; line-height:18px; font-size:0;">&nbsp;</td>
                </tr>

                <!-- Header -->
                <tr>
                    <td align="center" style="padding:28px 30px 18px 30px; border-bottom:1px solid #eee7db;">
                        <div style="font-size:16px; letter-spacing:4px; color:#111111; font-weight:bold;">
                            <img src="https://brillianttouchllc.com/cdn/shop/files/Brilliant_touch_Black_Green_f399733d-cf9b-4d53-84d9-61dc1a368a53_300x.png?v=1775905853"
                                 alt="Brilliant Touch"
                                 style="display:block; margin:0 auto; border:0;">
                        </div>
                    </td>
                </tr>

                <!-- Hero / Title -->
                <tr>
                    <td align="center" style="padding:34px 35px 12px 35px;">
                        <div style="font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#c79a2b; font-weight:bold; margin-bottom:10px;">
                            Custom 360
                        </div>

                        <h1 style="margin:0; font-size:30px; line-height:38px; color:#3f3a34; font-weight:normal;">
                            Screenshot Received
                        </h1>
                    </td>
                </tr>

                <!-- Content -->
                <tr>
                    <td style="padding:10px 35px 35px 35px;">

                        <p style="margin:0 0 16px 0; font-size:16px; line-height:26px; color:#4c4741;">
                            Hello,
                        </p>

                        <p style="margin:0 0 16px 0; font-size:16px; line-height:26px; color:#4c4741;">
                            Your <strong>Custom 360</strong> screenshot has been successfully captured and sent.
                        </p>

                        <p style="margin:0 0 22px 0; font-size:15px; line-height:24px; color:#6b655d;">
                            A preview is included below, and the screenshot is also attached with this email for your convenience.
                        </p>

                        <!-- Preview Card -->
                        <table role="presentation"
                               width="100%"
                               align="center"
                               cellpadding="0"
                               cellspacing="0"
                               border="0"
                               style="width:100%; border:1px solid #e7dfd2; border-radius:12px; overflow:hidden; background-color:#fcfbf8;">

                            <tr>
                                <td style="padding:14px 18px; background-color:#f7f3ec; border-bottom:1px solid #e7dfd2; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#8a7e6a; font-weight:bold;">
                                    Preview
                                </td>
                            </tr>

                            <tr>
                                <td align="center" style="padding:20px;">

                                    <img src="{{ $message->embed($imagePath) }}"
                                         alt="Screenshot Preview"
                                         width="760"
                                         style="display:block; margin:0 auto; width:100%; max-width:760px; height:auto; border:1px solid #ddd6c9; border-radius:10px;">

                                </td>
                            </tr>

                        </table>

                        <p style="margin:22px 0 0 0; font-size:15px; line-height:24px; color:#6b655d;">
                            Thank you for using the Brilliant Touch Custom 360 experience.
                        </p>

                    </td>
                </tr>

                <!-- Footer -->
                <tr>
                    <td align="center" style="padding:22px 25px; background-color:#faf7f1; border-top:1px solid #eee7db;">
                        <div style="font-size:12px; line-height:20px; color:#8a847b;">
                            © {{ date('Y') }} Brilliant Touch. All rights reserved.
                        </div>
                    </td>
                </tr>

            </table>

        </td>
    </tr>
</table>

</body>
</html>