@php
    /**
     * Bespoke "Checkout abandonment" hero. Lifecycle email — different shape
     * from dunning (selling, not collecting). 3-bullet "what's ready when you finish"
     * with primary purple checkmarks.
     *
     * @var string $userName
     * @var string $appName
     * @var string $checkoutUrl
     * @var string $planName
     */
    $displayPlan = $planName !== '' ? $planName : $appName;

    // Pre-resolve the heading so we don't have to play HTML-entity tricks
    // inside the hero-layout :heading attribute.
    $heading = 'You started upgrading to <span style="color: #7C3AED;">'
        .e($displayPlan)
        .'</span> &mdash; let&rsquo;s finish.';

    $lede = 'Hi '.e($userName).', you got most of the way through but didn&rsquo;t close it out. Your upgrade is still here whenever you&rsquo;re ready.';
@endphp
<x-mail::hero-layout
    eyebrow="Your upgrade is waiting"
    :heading="$heading"
    :lede="$lede">

<h2 style="color: #0f172a; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; margin-top: 24px; margin-right: 0; margin-bottom: 12px; margin-left: 0; text-transform: uppercase;">What's ready when you finish</h2>

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse: collapse;">
<tr>
<td valign="top" style="border-bottom-color: #f4f4f5; border-bottom-style: solid; border-bottom-width: 1px; color: #7C3AED; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; font-weight: 600; padding-top: 14px; padding-right: 14px; padding-bottom: 14px; padding-left: 0; vertical-align: top; width: 24px;">&check;</td>
<td valign="top" style="border-bottom-color: #f4f4f5; border-bottom-style: solid; border-bottom-width: 1px; padding-top: 14px; padding-right: 0; padding-bottom: 14px; padding-left: 0; vertical-align: top;">
<p style="color: #0f172a; font-size: 15px; font-weight: 600; line-height: 1.4; margin-top: 0; margin-right: 0; margin-bottom: 4px; margin-left: 0;">Unlimited AI drafts</p>
<p style="color: #3f3f46; font-size: 14px; line-height: 1.55; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;">Generate SEO content rewrites powered by GPT-4o-mini, with no per-month cap.</p>
</td>
</tr>
<tr>
<td valign="top" style="border-bottom-color: #f4f4f5; border-bottom-style: solid; border-bottom-width: 1px; color: #7C3AED; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; font-weight: 600; padding-top: 14px; padding-right: 14px; padding-bottom: 14px; padding-left: 0; vertical-align: top; width: 24px;">&check;</td>
<td valign="top" style="border-bottom-color: #f4f4f5; border-bottom-style: solid; border-bottom-width: 1px; padding-top: 14px; padding-right: 0; padding-bottom: 14px; padding-left: 0; vertical-align: top;">
<p style="color: #0f172a; font-size: 15px; font-weight: 600; line-height: 1.4; margin-top: 0; margin-right: 0; margin-bottom: 4px; margin-left: 0;">Advanced content intelligence</p>
<p style="color: #3f3f46; font-size: 14px; line-height: 1.55; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;">Cannibalization detection, topic clustering, and freshness analysis &mdash; the work you'd otherwise do manually.</p>
</td>
</tr>
<tr>
<td valign="top" style="color: #7C3AED; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; font-weight: 600; padding-top: 14px; padding-right: 14px; padding-bottom: 14px; padding-left: 0; vertical-align: top; width: 24px;">&check;</td>
<td valign="top" style="padding-top: 14px; padding-right: 0; padding-bottom: 14px; padding-left: 0; vertical-align: top;">
<p style="color: #0f172a; font-size: 15px; font-weight: 600; line-height: 1.4; margin-top: 0; margin-right: 0; margin-bottom: 4px; margin-left: 0;">Traffic anomaly alerts</p>
<p style="color: #3f3f46; font-size: 14px; line-height: 1.55; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;">Get notified when pages gain or lose significant traffic &mdash; before it shows up in your dashboards.</p>
</td>
</tr>
</table>

<x-slot:cta>
<x-mail::button :url="$checkoutUrl" color="primary" align="left">Complete your upgrade</x-mail::button>
</x-slot:cta>

<x-slot:subcopy>
<p style="color: #71717a; font-size: 13px; line-height: 1.55; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;">If you have questions, just reply &mdash; I'll sort it out.</p>
</x-slot:subcopy>

</x-mail::hero-layout>