{{--
    resources/views/partials/remvo-deposit-hero.blade.php — v1.1

    Changes from v1.0:
      • Nigerian flag rendered as inline SVG (was emoji — many browsers
        render 🇳🇬 as literal "NG" text fallback). Official colors:
        #008751 green / #FFFFFF white.
      • Relaxed visibility rule — catches KYC-verified Nigerians who
        registered without a phone in profile. Still excludes anyone
        with a clearly foreign phone (US/UK/SA/GH/KE/IN/CN/FR/DE/AU/JP/KR).
      • CTA mark redesigned to three stacked rectangles (suggests
        "stacked digital value cards"), reads cleanly at 16px on the
        orange button.

    Coverage of the new rule:
      • All 25,989 NG-phone users (high confidence — show)
      • KYC-verified users with empty mobile (give benefit of doubt — show)
      • Anyone with foreign phone prefix (definitely not NG — hide)
      • Other edge cases (no phone + no KYC — hide; profile probably not ready)
--}}

@php
    /** @var \App\Models\User|null $remvoUser */
    $remvoUser   = auth()->user();
    $remvoMobile = $remvoUser ? trim((string) ($remvoUser->mobile ?? '')) : '';
    $remvoKyc    = $remvoUser ? ((int) ($remvoUser->kyc_status ?? 0)) === 1 : false;

    // High-confidence Nigerian phone patterns
    $remvoHasNgPhone = $remvoMobile !== '' && (
        str_starts_with($remvoMobile, '+234')
        || str_starts_with($remvoMobile, '234')
        || (str_starts_with($remvoMobile, '0') && strlen($remvoMobile) === 11)
    );

    // Clearly foreign phone — these are definitely NOT Nigerian users
    $remvoHasForeignPhone = $remvoMobile !== '' && ! $remvoHasNgPhone && (
        str_starts_with($remvoMobile, '+1')      // US / Canada
        || str_starts_with($remvoMobile, '+44')  // UK
        || str_starts_with($remvoMobile, '+27')  // South Africa
        || str_starts_with($remvoMobile, '+233') // Ghana
        || str_starts_with($remvoMobile, '+254') // Kenya
        || str_starts_with($remvoMobile, '+91')  // India
        || str_starts_with($remvoMobile, '+86')  // China
        || str_starts_with($remvoMobile, '+33')  // France
        || str_starts_with($remvoMobile, '+49')  // Germany
        || str_starts_with($remvoMobile, '+61')  // Australia
        || str_starts_with($remvoMobile, '+81')  // Japan
        || str_starts_with($remvoMobile, '+82')  // South Korea
    );

    // Beta allowlist — only show to explicit testers when
    // REMVO_TEST_EMAILS env is set (comma-separated). Empty/unset = open to all.
    $remvoTestEmails = array_filter(array_map(
        'trim',
        explode(',', (string) config('services.remvo.test_emails', ''))
    ));
    $remvoInBetaList = empty($remvoTestEmails) || in_array(
        strtolower((string) ($remvoUser->email ?? '')),
        array_map('strtolower', $remvoTestEmails),
        true
    );

    // Cloudflare country signal (replaces KYC+empty-mobile fallback)
    $remvoCfCountry    = strtoupper((string) request()->header('CF-IPCountry', ''));
    $remvoHasNgIp      = $remvoCfCountry === 'NG';
    $remvoHasForeignIp = $remvoCfCountry !== ''
        && $remvoCfCountry !== 'NG'
        && $remvoCfCountry !== 'XX'
        && $remvoCfCountry !== 'T1';

    // Final render rule
    $remvoShouldRender = $remvoInBetaList
                         && ! $remvoHasForeignPhone
                         && ($remvoHasNgPhone || $remvoHasNgIp);
@endphp

@if ($remvoUser && $remvoShouldRender)
<style>
    /* All selectors scoped under .remvo-hero — zero host collision risk. */
    .remvo-hero {
        position: relative;
        overflow: hidden;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 1.5rem;
        margin-bottom: 1.25rem;
        transition: box-shadow .25s var(--ease);
    }
    .remvo-hero:hover {
        box-shadow: var(--shadow-lg);
    }
    /* Subtle Nigerian-flag accent on the top edge */
    .remvo-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(
            90deg,
            #008751 0%, #008751 33%,
            #ffffff 33%, #ffffff 66%,
            #008751 66%, #008751 100%
        );
        opacity: .55;
    }

    .remvo-hero-head {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.15rem;
    }

    /* Nigerian flag — SVG, not emoji. Renders identically on every browser. */
    .remvo-hero-flag {
        width: 36px;
        height: 24px;
        flex-shrink: 0;
        border-radius: 3px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
        overflow: hidden;
        display: block;
    }

    .remvo-hero-text {
        flex: 1;
        min-width: 0;
    }
    .remvo-hero-title {
        font-size: 1.05rem;
        font-weight: 800;
        margin: 0 0 .3rem 0;
        letter-spacing: -.012em;
        color: #0f172a;
        line-height: 1.25;
    }
    .dark .remvo-hero-title { color: #f8fafc; }
    .remvo-hero-sub {
        font-size: .8rem;
        color: var(--muted);
        margin: 0;
        line-height: 1.5;
    }
    .remvo-hero-badge {
        background: var(--orange-dim);
        color: var(--orange);
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .14em;
        padding: .3rem .6rem;
        border-radius: 99px;
        text-transform: uppercase;
        flex-shrink: 0;
        line-height: 1;
    }

    .remvo-hero-cta {
        width: 100%;
        appearance: none;
        background: linear-gradient(135deg, var(--orange) 0%, #ea580c 100%);
        border: 0;
        color: #fff;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        font-size: .9rem;
        font-weight: 800;
        letter-spacing: .01em;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        box-shadow: 0 4px 14px var(--orange-glow);
        transition: transform .15s var(--ease), box-shadow .2s var(--ease);
        font-family: inherit;
    }
    .remvo-hero-cta:hover,
    .remvo-hero-cta:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 7px 20px var(--orange-glow);
        outline: none;
    }
    .remvo-hero-cta:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px var(--orange-glow);
    }
    .remvo-hero-cta-mark {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    .remvo-hero-cta-label {
        flex-shrink: 0;
    }
    .remvo-hero-cta-arrow {
        font-size: 1.1rem;
        line-height: 1;
        transition: transform .15s var(--ease);
    }
    .remvo-hero-cta:hover .remvo-hero-cta-arrow {
        transform: translateX(3px);
    }

    .remvo-hero-foot {
        font-size: .7rem;
        color: var(--muted);
        margin: .85rem 0 0 0;
        text-align: center;
        line-height: 1.45;
    }
    .remvo-hero-foot strong {
        color: #334155;
        font-weight: 700;
    }
    .dark .remvo-hero-foot strong { color: #e2e8f0; }

    /* ───── Modal scrollbar polish ─────
       Hides the chunky browser-default scrollbar inside the Remvo modal
       and replaces with a thin gold-tinted one that only shows on
       interaction. Functional behaviour unchanged. */
    .remvo-modal {
        scrollbar-width: thin;
        scrollbar-color: rgba(201, 168, 76, 0.18) transparent;
    }
    .remvo-modal::-webkit-scrollbar {
        width: 6px;
    }
    .remvo-modal::-webkit-scrollbar-track {
        background: transparent;
    }
    .remvo-modal::-webkit-scrollbar-thumb {
        background-color: rgba(201, 168, 76, 0.18);
        border-radius: 999px;
        border: 1px solid transparent;
        background-clip: content-box;
    }
    .remvo-modal::-webkit-scrollbar-thumb:hover {
        background-color: rgba(201, 168, 76, 0.42);
    }

    /* Mobile — phones under ~480px */
    @media (max-width: 480px) {
        .remvo-hero {
            padding: 1.25rem;
        }
        .remvo-hero-head {
            gap: .75rem;
            margin-bottom: 1rem;
        }
        .remvo-hero-flag {
            width: 32px;
            height: 22px;
        }
        .remvo-hero-title {
            font-size: .98rem;
        }
        .remvo-hero-sub {
            font-size: .75rem;
        }
        .remvo-hero-cta {
            padding: .9rem 1.25rem;
            font-size: .85rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .remvo-hero,
        .remvo-hero-cta,
        .remvo-hero-cta-arrow {
            transition: none;
        }
        .remvo-hero-cta:hover {
            transform: none;
        }
    }
</style>

<div class="remvo-hero" role="region" aria-label="Pay with Naira via Remvo">

    <div class="remvo-hero-head">

        {{-- Nigerian flag — inline SVG, official colors, no emoji fallback risk --}}
        <svg class="remvo-hero-flag" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Nigerian flag">
            <rect width="12" height="24" fill="#008751"/>
            <rect x="12" width="12" height="24" fill="#ffffff"/>
            <rect x="24" width="12" height="24" fill="#008751"/>
        </svg>

        <div class="remvo-hero-text">
            <h3 class="remvo-hero-title">Pay with Naira, credited in minutes</h3>
            <p class="remvo-hero-sub">Bank transfer · best market rate · no crypto wallet needed</p>
        </div>

        <span class="remvo-hero-badge" aria-hidden="true">New</span>

    </div>

    <button
        type="button"
        class="remvo-hero-cta"
        data-remvo-deposit
        data-remvo-country-code="NG"
        data-remvo-callback-url="{{ url('/deposit-funds') }}"
        data-remvo-denominations="20,50,100,250,500,1000"
        data-remvo-default="50"
        data-remvo-quote-url="{{ url('/deposit/remvo/quote') }}"
        data-remvo-initialize-url="{{ url('/deposit/remvo/initialize') }}"
        aria-label="Open Remvo Naira deposit"
    >
        {{-- Stacked-cards mark — three rectangles with progressive opacity.
             Reads cleanly at 18px against the orange CTA. Suggests the
             "digital value card" concept without literally copying any logo. --}}
        <svg class="remvo-hero-cta-mark" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true">
            <path d="M8 32l16-8 16 8-16 8z" fill="currentColor" opacity="0.35" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
            <path d="M8 26l16-8 16 8-16 8z" fill="currentColor" opacity="0.60" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
            <path d="M8 20l16-8 16 8-16 8z" fill="currentColor"                stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
        </svg>

        <span class="remvo-hero-cta-label">Deposit with Remvo Card</span>
        <span class="remvo-hero-cta-arrow" aria-hidden="true">→</span>
    </button>

    <p class="remvo-hero-foot">
        Powered by <strong>Remvo</strong> · credited automatically · no extra steps after payment
    </p>

</div>
@endif