@extends('mails.v2.layout.v2-new-email2-layout')

@section('logo')
    <div style="text-align: center;">
        <img src="{{$imageUrl ?? asset('mail_assets/qataloog_new_logo.png')}}" alt="platform_logo" style="width: 100px;"/>
    </div>
@endsection

@section('hero-section')
    <div>
        <img src="{{$imageUrl ?? asset('mail_assets/subscription_renewal.png')}}" alt="subscription_renewal_avatar" style="width: 100%" />
    </div>
@endsection

@section('content')
    <div style="font-family: Inter, Helvetica, sans-serif; color: #333; line-height: 1.6;">
        <h2 style="text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px;">
            {{__("Subscription Renewal Reminder")}}
        </h2>

        <p style="font-size: 18px;">
            {{__("Hi")}} {{$creator->name}},
        </p>

        <p style="font-size: 16px; margin-bottom: 20px;">
            {{ __("A fee of :amount is required to keep your platform active each year.", ['amount' => request('convertedAmount') ?? '$50']) }}
            {{ __("To ensure the continuous operation of your platform, please complete your payment by") }}
            <strong>{{$platform->activation_end_date}}</strong>.
        </p>

        <p style="font-size: 16px; margin-bottom: 20px;">
            {{__("If payment is not received by this date, your platform will be suspended.")}}
        </p>

        <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">
            {{__("Payment Instructions")}}
        </h3>

        <p style="font-size: 16px; margin-bottom: 30px;">
            {{__("Please click the link below to access your platform settings and renew your subscription:")}}
        </p>

        <div style="text-align: center; margin-bottom: 40px;">
            <a href="{{ $platformSettingsUrl ?? '#' }}" style="background-color:#F1411980; color: white; text-decoration: none; padding: 12px 20px; border-radius: 5px; font-size: 16px;">
                {{__("Renew Subscription")}}
            </a>
        </div>

        <p style="font-size: 14px; color: #555;">
            {{__("If you have any questions or need further assistance, feel free to contact our support team.")}}
        </p>
    </div>
@endsection