@component('shop::emails.layout')
    <div class="section-content">
        <!-- Header Section -->
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center; border-radius: 12px 12px 0 0;">
            <div style="background: rgba(255,255,255,0.1); width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);">
                <svg width="40" height="40" fill="white" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                </svg>
            </div>
            <h1 style="color: white; font-size: 28px; font-weight: bold; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                Subscription Expiration Notice
            </h1>
            <p style="color: rgba(255,255,255,0.9); font-size: 16px; margin: 10px 0 0; text-shadow: 0 1px 2px rgba(0,0,0,0.1);">
                Your subscription plan is about to expire
            </p>
        </div>

        <!-- Main Content -->
        <div style="background: white; padding: 40px 30px; border-radius: 0 0 12px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
            <div style="text-align: center; margin-bottom: 30px;">
                <h2 style="color: #333; font-size: 24px; margin: 0 0 10px;">
                    Hello {{ $vendorName }}!
                </h2>
                <p style="color: #666; font-size: 16px; line-height: 1.6; margin: 0;">
                    We wanted to remind you that your subscription plan is approaching its expiration date.
                </p>
            </div>

            <!-- Subscription Details Card -->
            <div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 2px solid #e2e8f0; border-radius: 12px; padding: 30px; margin: 30px 0; text-align: center;">
                <div style="display: inline-block; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: white; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold; text-transform: uppercase; margin-bottom: 15px;">
                    Current Plan
                </div>
                
                <h3 style="color: #1e293b; font-size: 22px; font-weight: bold; margin: 0 0 10px;">
                    {{ $planName }}
                </h3>
                
                <div style="display: flex; justify-content: center; gap: 40px; margin: 20px 0; flex-wrap: wrap;">
                    <div style="text-align: center;">
                        <div style="color: #ef4444; font-size: 28px; font-weight: bold;">
                            {{ $daysRemaining }}
                        </div>
                        <div style="color: #64748b; font-size: 14px; text-transform: uppercase; font-weight: 500;">
                            Days Remaining
                        </div>
                    </div>
                    <div style="text-align: center;">
                        <div style="color: #64748b; font-size: 18px; font-weight: 600;">
                            {{ \Carbon\Carbon::parse($expiryDate)->format('M d, Y') }}
                        </div>
                        <div style="color: #64748b; font-size: 14px; text-transform: uppercase; font-weight: 500;">
                            Expiry Date
                        </div>
                    </div>
                </div>
            </div>

            <!-- Warning Message -->
            <div style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #f59e0b; padding: 20px; border-radius: 8px; margin: 30px 0;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    <div style="background: #f59e0b; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold;">
                        !
                    </div>
                    <div>
                        <h4 style="color: #92400e; margin: 0 0 5px; font-size: 16px; font-weight: bold;">
                            Action Required
                        </h4>
                        <p style="color: #92400e; margin: 0; font-size: 14px; line-height: 1.5;">
                            To continue accessing your catalog features and maintain uninterrupted service, please renew your subscription before it expires.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Renewal Button -->
            <div style="text-align: center; margin: 40px 0;">
                <a href="{{ $renewalUrl }}" 
                   style="display: inline-block; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; text-decoration: none; padding: 16px 32px; border-radius: 8px; font-weight: bold; font-size: 16px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.3s ease;">
                    <span style="margin-right: 8px;">🔄</span>
                    Renew Subscription Now
                </a>
            </div>

            <!-- Benefits Reminder -->
            <div style="background: #f8fafc; border-radius: 8px; padding: 25px; margin: 30px 0;">
                <h4 style="color: #1e293b; font-size: 18px; font-weight: bold; margin: 0 0 15px; text-align: center;">
                    What You'll Continue to Enjoy:
                </h4>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="color: #10b981; font-size: 18px;">✓</span>
                        <span style="color: #475569; font-size: 14px;">Full Catalog Access</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="color: #10b981; font-size: 18px;">✓</span>
                        <span style="color: #475569; font-size: 14px;">Product Management</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="color: #10b981; font-size: 18px;">✓</span>
                        <span style="color: #475569; font-size: 14px;">Order Processing</span>
                    </div>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="color: #10b981; font-size: 18px;">✓</span>
                        <span style="color: #475569; font-size: 14px;">Analytics & Reports</span>
                    </div>
                </div>
            </div>

            <!-- Support Section -->
            <div style="text-align: center; padding: 20px 0; border-top: 1px solid #e2e8f0; margin-top: 30px;">
                <p style="color: #64748b; font-size: 14px; margin: 0 0 10px;">
                    Need help with your subscription? We're here to assist you.
                </p>
                <a href="mailto:{{ $supportEmail }}" 
                   style="color: #3b82f6; text-decoration: none; font-weight: 500; font-size: 14px;">
                    Contact Support: {{ $supportEmail }}
                </a>
            </div>
        </div>
    </div>
@endcomponent