@extends('layouts.email_layout')

@section('content')
<tr>
    <td align="center" style="padding: 0; background: #faf7f2;">
        <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
            style="width:600px;max-width:600px;background:#FFFFFF;border-collapse:collapse;">

            <!-- Header -->
            <tr>
                <td align="center" style="background:#FAF7F2;padding:32px 40px 0 40px;">

                    @if(!empty($siteinfo->logo))
                    <a href="{{ $siteinfo->website_url }}">
                        <img src="{{ $siteinfo->logo }}"
                            alt="{{ $siteinfo->logo_alt }}"
                            width="140"
                            style="display:block;border:0;outline:none;text-decoration:none;">
                    </a>
                    @else
                    <div style="font-family:Georgia,'Times New Roman',serif;font-size:32px;letter-spacing:8px;color:#310F4D;">
                        SAMA
                    </div>
                    @endif

                    <div style="height:1px;line-height:1px;background:#C9A880;margin-top:24px;">&nbsp;</div>
                </td>
            </tr>

            <!-- Body -->
            <tr>
                <td style="background:#FAF7F2;padding:40px 48px;">

                    <div style="font-size:10px;line-height:14px;letter-spacing:3px;text-transform:uppercase;color:#C9A880;font-weight:700;margin-bottom:14px;text-align:center;">
                        Welcome
                    </div>

                    <div style="font-family:Georgia,'Times New Roman',serif;font-size:28px;line-height:36px;color:#310F4D;text-align:center;margin-bottom:32px;">
                        Your SAMA Account Is Ready
                    </div>

                    <div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:24px;color:#310F4D;margin-bottom:20px;">
                        Hi {{ $firstName }},
                    </div>

                    <div style="font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:24px;color:#6F5C7A;margin-bottom:28px;">
                        Welcome to SAMA — we're so glad you're here. Your account is all set up and ready to go. Here's everything you can do now that you're part of the SAMA community.
                    </div>

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

                                <!-- Email container -->
                                <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px; max-width:600px; background-color:#FAF7F2;">

                                    <!-- ================= BENEFITS SECTION ================= -->
                                  <tr>
                                        <td class="section-benefits" style="background-color:#FAF7F2; padding:8px 48px 24px 48px;">

                                            <!-- Benefits panel -->
                                            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; background-color:#EDE8F0; border-radius:6px;">
                                                <tr>
                                                    <td style="background-color:#EDE8F0; border-radius:6px; padding:24px 26px 24px 26px;">

                                                        <!-- Eyebrow -->
                                                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td style="font-family: 'Montserrat', sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#C9A880; font-weight:600; padding:0 0 16px 0;">
                                                                    Your SAMA Benefits
                                                                </td>
                                                            </tr>
                                                        </table>

                                                        <!-- Benefit row 1 -->
                                                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td width="22" valign="middle" style="width:22px; padding:8px 12px 8px 0;">
                                                                    <img src="{{ asset('images/wishlist.png') }}"
                                                                        width="18" height="18" alt=""
                                                                        style="display:block;border:0;">
                                                                </td>
                                                                <td valign="middle" style="font-family: 'Montserrat', sans-serif; font-size:13px; color:#6F5C7A; padding:8px 0;">
                                                                    Save pieces to your wishlist
                                                                </td>
                                                            </tr>
                                                        </table>

                                                        <!-- Benefit row 2 -->
                                                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td width="22" valign="middle" style="width:22px; padding:8px 12px 8px 0;">
                                                                    <img src="{{ asset('images/checkout.png') }}"
                                                                        width="18" height="18" alt=""
                                                                        style="display:block;border:0;">
                                                                </td>
                                                                <td valign="middle" style="font-family: 'Montserrat', sans-serif; font-size:13px; color:#6F5C7A; padding:8px 0;">
                                                                    Check out faster on future orders
                                                                </td>
                                                            </tr>
                                                        </table>

                                                        <!-- Benefit row 3 -->
                                                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td width="22" valign="middle" style="width:22px; padding:8px 12px 8px 0;">
                                                                    <img src="{{ asset('images/offers.png') }}"
                                                                        width="18" height="18" alt=""
                                                                        style="display:block;border:0;">
                                                                </td>
                                                                <td valign="middle" style="font-family: 'Montserrat', sans-serif; font-size:13px; color:#6F5C7A; padding:8px 0;">
                                                                    Access exclusive offers
                                                                </td>
                                                            </tr>
                                                        </table>

                                                        <!-- Benefit row 4 -->
                                                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td width="22" valign="middle" style="width:22px; padding:8px 12px 8px 0;">
                                                                    <img src="{{ asset('images/history.png') }}"
                                                                        width="18" height="18" alt=""
                                                                        style="display:block;border:0;">
                                                                </td>
                                                                <td valign="middle" style="font-family: 'Montserrat', sans-serif; font-size:13px; color:#6F5C7A; padding:8px 0;">
                                                                    Track your order history
                                                                </td>
                                                            </tr>
                                                        </table>

                                                        <!-- Benefit row 5 -->
                                                        <!-- <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td width="22" valign="middle" style="width:22px; padding:8px 12px 8px 0;">
                                                                    <img src="{{ asset('images/resize.png') }}"
                                                                        width="18" height="18" alt=""
                                                                        style="display:block;border:0;">
                                                                </td>
                                                                <td valign="middle" style="font-family: 'Montserrat', sans-serif; font-size:13px; color:#6F5C7A; padding:8px 0;">
                                                                    Request ring resizes online
                                                                </td>
                                                            </tr>
                                                        </table> -->

                                                    </td>
                                                </tr>
                                            </table>
                                            <!-- End benefits panel -->

                                        </td>
                                    </tr>

                                    <!-- ================= CTA SECTION ================= -->
                                    <tr>
                                        <td class="section-cta" align="center" style="background-color:#FAF7F2; padding:8px 48px 32px 48px; text-align:center;">
                                            <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
                                                <tr>
                                                    <td align="center" bgcolor="#310F4D" style="background-color:#310F4D; border-radius:4px;">
                                                        <a href="https://rocksama.com/accounts" target="_blank" style="display:inline-block; height:48px; line-height:48px; padding:0 40px; background-color:#310F4D; color:#ffffff; font-size:13px; font-family: 'Montserrat', sans-serif;letter-spacing:2px; text-transform:uppercase; text-align:center; border-radius:4px; text-decoration:none; font-weight:600;">
                                                            Visit Your Account
                                                        </a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>

                                    <!-- ================= GIVEBACK SECTION ================= -->
                                    <tr>
                                        <td class="section-giveback" style="background-color:#FAF7F2; padding:0 48px 8px 48px;">
                                            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; background-color:#EDE8F0; border-radius:0 6px 6px 0;">
                                                <tr>
                                                    <!-- left accent border cell -->
                                                    <td width="3" bgcolor="#C9A880" style="background-color:#C9A880; width:3px; font-size:0; line-height:0;">&nbsp;</td>
                                                    <td style="background-color:#EDE8F0; padding:20px 22px 20px 19px; border-radius:0 6px 6px 0;">
                                                        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td style="font-family: 'Montserrat', sans-serif; serif; font-size:16px; color:#310F4D; padding:0 0 8px 0;">
                                                                    Making Love Mean More
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="font-family: 'Montserrat', sans-serif; font-size:13px; line-height:1.6; color:#6F5C7A;">
                                                                    Every SAMA purchase gives back 1% to causes that champion equality, education, and well-being. When you shop with us, you're making love mean more.
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="pad-responsive"
                                            bgcolor="#FAF7F2"
                                            style="background:#FAF7F2;padding:8px 20px 40px 20px;text-align:center;">

                                            <div style="width:100%;
            height:1px;
            background:#EDE8F0;
            margin-bottom:28px;
            line-height:1px;
            font-size:1px;">
                                                &nbsp;
                                            </div>

                                            <div style="font-size:10px;
            letter-spacing:3px;
            text-transform:uppercase;
            color:#C9A880;
            font-weight:700;
            margin-bottom:20px;">

                                                Continue Exploring

                                            </div>

                                            <table role="presentation"
                                                width="100%"
                                                border="0"
                                                cellpadding="0"
                                                cellspacing="0">

                                                <tr>

                                                    <!-- Engagement Rings -->
                                                    <td class="crosssell-td stack-td"
                                                        align="center"
                                                        width="20%"
                                                        style="padding:0 6px; vertical-align: top;">

                                                        <a href="https://rocksama.com/engagement-rings"
                                                            target="_blank"
                                                            style="text-decoration:none;">

                                                            <img src="https://assets.rocksama.com/frontend/static_images/EngagementRings.webp"
                                                                width="100"
                                                                alt="Engagement Rings"
                                                                style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                                                            <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                                                                Engagement Rings

                                                            </div>

                                                        </a>

                                                    </td>

                                                    <!-- Wedding Bands -->
                                                    <td class="crosssell-td stack-td"
                                                        align="center"
                                                        width="20%"
                                                        style="padding:0 6px; vertical-align: top;">

                                                        <a href="https://rocksama.com/wedding-band"
                                                            target="_blank"
                                                            style="text-decoration:none;">

                                                            <img src="https://assets.rocksama.com/frontend/static_images/WeddingBands.webp"
                                                                width="100"
                                                                alt="Wedding Bands"
                                                                style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                                                            <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                                                                Wedding Bands

                                                            </div>

                                                        </a>

                                                    </td>

                                                    <!-- Gemstones -->
                                                    <td class="crosssell-td stack-td"
                                                        align="center"
                                                        width="20%"
                                                        style="padding:0 6px; vertical-align: top;">

                                                        <a href="https://rocksama.com/gemstone"
                                                            target="_blank"
                                                            style="text-decoration:none;">

                                                            <img src="https://assets.rocksama.com/frontend/static_images/Gemstones.webp"
                                                                width="100"
                                                                alt="Gemstones"
                                                                style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                                                            <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                                                                Gemstones

                                                            </div>

                                                        </a>

                                                    </td>

                                                    <!-- Diamonds -->
                                                    <td class="crosssell-td stack-td"
                                                        align="center"
                                                        width="20%"
                                                        style="padding:0 6px; vertical-align: top;">

                                                        <a href="https://rocksama.com/diamonds"
                                                            target="_blank"
                                                            style="text-decoration:none;">

                                                            <img src="https://assets.rocksama.com/frontend/static_images/Diamonds.webp"
                                                                width="100"
                                                                alt="Diamonds"
                                                                style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                                                            <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                                                                Diamonds

                                                            </div>

                                                        </a>

                                                    </td>

                                                    <!-- Jewelry -->
                                                    <td class="crosssell-td stack-td"
                                                        align="center"
                                                        width="20%"
                                                        style="padding:0 6px; vertical-align: top;">

                                                        <a href="https://rocksama.com/jewelry"
                                                            target="_blank"
                                                            style="text-decoration:none;">

                                                            <img src="https://assets.rocksama.com/frontend/static_images/Jewelry.webp"
                                                                width="100"
                                                                alt="Jewelry"
                                                                style="display:block;width:100px;height:auto;margin:0 auto 8px;border-radius:4px;">

                                                            <div style="font-size:11px;
                            color:#310F4D;
                            font-weight:500;">

                                                                Jewelry

                                                            </div>

                                                        </a>

                                                    </td>

                                                </tr>

                                            </table>

                                        </td>
                                    </tr>

                                </table>
                                <!-- End email container -->

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


                </td>
            </tr>

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


@endsection