@extends('mail.layout')

@section('styles')
<style>
    .banner {
        background-color: #015431;
        color: #ffffff;
        padding: 20px;
        text-align: center;
    }

    .otp-code {
        display: inline-block;
        font-size: 36px;
        font-weight: bold;
        color: #015431;
        letter-spacing: 8px;
        padding: 15px 30px;
        background-color: #f0f7f3;
        border: 2px dashed #015431;
        border-radius: 8px;
        margin: 20px 0;
        user-select: all;
    }

    .copy-btn {
        display: inline-block;
        background-color: #015431;
        color: #ffffff !important;
        padding: 14px 40px;
        text-decoration: none;
        border-radius: 50px;
        font-weight: bold;
        margin-top: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .otp-footer {
        padding: 20px;
        background-color: #fcfcfc;
        text-align: center;
        font-size: 12px;
        color: #888888;
        border-top: 1px solid #eeeeee;
    }
</style>
@endsection

@section('content')
<div class="banner">
    <h3 style="margin:0;">Your Verification Code</h3>
</div>

<div style="padding: 40px 30px; text-align: center; color: #333333;">
    <p style="font-size: 16px;">Hello, use the code below to verify your identity:</p>

    <div class="otp-code">{{ $data['code'] }}</div>

    <p style="font-size: 14px; color: #666; margin-bottom: 25px;">
        Copy the code above and click the button to return to the app.
    </p>

    <a href="suqna://verify?code={{ $data['code'] }}" class="copy-btn">Go to App</a>
</div>

<div class="otp-footer">
    <p>The code expires in 5 minutes.</p>
    <p>© {{ date('Y') }} Suqna App. All rights reserved.</p>
</div>
@endsection