@extends('layouts.email_layout')
@section('emailTitle', 'Order Delivered')
@section('content')

<!-- HEADER -->
<tr>
    <td align="center" style="background-color:#FAF7F2; padding:32px 40px 0 40px;">
        <img src="{{ asset('images/Sama_Logo.png')}}"
            width="140"
            alt="SAMA"
            style="display:block; border:0; outline:none; text-decoration:none;">

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

<!-- DELIVERED SECTION -->
<tr>
    <td class="pad-responsive"
        bgcolor="#FAF7F2"
        style="background:#FAF7F2;padding:36px 20px 28px 20px;text-align:center;">

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

            Your Thoughts

        </div>

        <div style="font-family:Georgia,'Times New Roman',serif;
            font-size:26px;
            line-height:1.3;
            color:#310F4D;
            margin-bottom:24px;">

            How Are You Loving Your Piece?

        </div>

        <div style="font-size:15px;
            color:#310F4D;
            font-weight:600;
            text-align:left;
            margin-bottom:12px;">

            Hi {{ $username }},

        </div>

        <div style="font-size:14px;
            line-height:1.7;
            color:#6F5C7A;
            text-align:left;">

            We hope your new piece has already found its place in your story. If you have a moment, we'd love to hear how it's going — your words help other couples discover SAMA with confidence.
        </div>

    </td>
</tr>

<div style="background:#FAF7F2;padding:8px 48px 8px;text-align:center;">
    <div style="font-size:26px;letter-spacing:6px;color:#C9A880;">☆ ☆ ☆ ☆ ☆</div>
</div>

<div style="background:#FAF7F2;padding:16px 48px 32px;text-align:center;">
    <a href="{{ config('services.google.review_url') }}"
        style="display:inline-block;height:48px;line-height:48px;padding:0 40px;background:#310F4D;color:#fff;font-size:13px;letter-spacing:2px;text-transform:uppercase;text-align:center;border-radius:4px;text-decoration:none;font-weight:600;">
        Leave a Google Review
    </a>

    <div style="font-size:13px;color:#6F5C7A;font-style:italic;margin-top:18px;">
        It only takes a minute, and it means the world to a small brand like ours.
    </div>
</div>



<!-- CROSS-SELL SECTION -->
<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>
@endsection