@extends('layouts.app2')

@section('content')
    <style>
        body {
            background: linear-gradient(to bottom, #f8faff, #eef2ff);
            font-family: "Tajawal", sans-serif;
        }

        .success-container {
            max-width: 420px;
            margin: 80px auto;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            padding: 40px;
            text-align: center;
            animation: fadeIn 0.6s ease-in-out;
        }

        .success-container h2 {
            font-size: 22px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 12px;
        }

        .success-container p {
            color: #6b7280;
            margin-bottom: 24px;
        }

        .domain-box {
            background: #f3f4f6;
            padding: 14px 18px;
            border-radius: 12px;
            font-family: monospace;
            color: #374151;
            margin-bottom: 30px;
            direction: ltr;
            word-break: break-all;
        }

        .domain-box a {
            text-decoration: none;
            color: #1563ff;
        }

        .domain-box a:hover {
            text-decoration: underline;
        }

        .btn-primary {
            display: inline-block;
            background: #1563ff;
            color: #fff;
            padding: 12px 28px;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(21, 99, 255, 0.3);
            transition: background 0.25s ease, transform 0.25s ease;
        }

        .btn-primary:hover {
            background: #0e4cd4;
            transform: translateY(-2px);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    <div class="success-container">
        <div style="font-size: 42px; margin-bottom: 8px;">🎉</div>
        <h2>@lang('lang_v1.business_created_successfully')</h2>
        <p>@lang('lang_v1.access_subdomain')</p>
        <div class="domain-box">
            <a href="https://{{ $fullDomain }}" target="_blank">{{ $fullDomain }}</a>
        </div>

        <a href="https://{{ $fullDomain }}" target="_blank" class="btn-primary">
            @lang('lang_v1.go_to_system_now')
        </a>
    </div>
@endsection