@extends('layouts.mail')

@section('badge', '🎁 Refer & Earn')
@section('heading', "You've been invited!")

@section('content')
    <p style="color: #8ca5c7; font-size: 14px; line-height: 1.5; margin: 0 0 20px 0;">
        Hi <strong>{{ $data['email'] }}</strong>, <strong>{{ $data['referrer_name'] }}</strong> invited you to
        join <strong>{{ config('app.name') }}</strong>.
        <br><br>
        Sign up to get your referral bonus after <strong>Card Activation!</strong>
    </p>

    <div style="background-color: #1b3257; border: 1px dashed rgba(255,255,255,0.2); border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 24px;">
        <span style="color: #8ca5c7; font-size: 10px; display: block; letter-spacing: 1px; text-transform: uppercase;">
            Your Code
        </span>
        <strong style="color: #ffffff; font-size: 20px; letter-spacing: 2px;">{{ $data['referral_code'] }}</strong>
    </div>

    <a href="{{ config('app.frontend_url') }}/register?referral_code={{ $data['referral_code'] }}"
        style="background-color: #d99b00; color: #ffffff; display: block; padding: 14px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 15px; text-align: center;">
        Claim Reward & Sign Up
    </a>
@endsection