{{--
    resources/views/partials/remvo-deposit-hero.blade.php — v2.0

    Changes from v1.1:
      • Naira-specific framing replaced with generic fiat. Remvo has one
        live corridor (NG) but the majority of GE-AS users are not in it,
        and a Naira-only page is the wrong thing to show them.
      • Phone-prefix and CF-IPCountry heuristics DELETED. Corridor is now
        the user's explicit choice, stored on users.deposit_country, and
        resolved server-side by RemvoDepositComposer into $remvoState.
      • Flag and top-edge accent are corridor-driven, not hardcoded NG.
      • Beta allowlist RETAINED. Removing it is a separate deploy once the
        picker and waitlist flows are verified end to end.

    $remvoState comes from App\View\Composers\RemvoDepositComposer and is
    one of:
      guest       no authenticated user
      picker      no corridor chosen yet
      active      corridor is live, go straight to the amount modal
      coming_soon corridor listed, not yet live
      paused      corridor was live and is currently stopped
      unlisted    user said their country is not on the list

    All non-active states are handled by remvo-country.js, which renders
    the picker and waitlist screens and hands off to remvo-modal.js only
    when the resolved corridor is active.
--}}

@php
    /** @var \App\Models\User|null $remvoUser */
    /** @var array $remvoState */
    $remvoUser  = $remvoUser  ?? auth()->user();
    $remvoState = $remvoState ?? ['state' => 'guest', 'country' => null];

    $remvoStateName = (string) ($remvoState['state'] ?? 'guest');
    $remvoCountry   = $remvoState['country'] ?? null;

    // Resume state, bound by RemvoDepositComposer.
    $remvoPending      = $remvoPending      ?? false;
    $remvoResumeUrl    = $remvoResumeUrl    ?? null;
    $remvoExpiresAt    = $remvoExpiresAt    ?? null;
    $remvoResumeAmount = $remvoResumeAmount ?? null;
    $remvoIsResume     = $remvoPending && $remvoResumeUrl;

    // Beta allowlist. Empty or unset env = open to all, which is what the
    // gate-lift deploy will do by clearing REMVO_TEST_EMAILS.
    $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
    );

    $remvoShouldRender = $remvoUser
        && $remvoStateName !== 'guest'
        && $remvoInBetaList;

    // Copy per state. The CTA always opens something; what it opens is
    // decided client-side from data-remvo-state.
    $remvoCountryName = $remvoCountry ? $remvoCountry->name : null;

    switch ($remvoStateName) {
        case 'active':
            $remvoTitle = 'Pay with FIAT, credited in minutes';
            $remvoSub   = 'Bank transfer · live rate · no crypto wallet needed';
            $remvoCta   = 'Deposit with Fiat';
            break;
        case 'coming_soon':
            $remvoTitle = 'Fiat deposits are coming to ' . $remvoCountryName;
            $remvoSub   = 'Not live yet · get notified the day it opens';
            $remvoCta   = 'Join the waitlist';
            break;
        case 'paused':
            $remvoTitle = 'Fiat deposits are paused in ' . $remvoCountryName;
            $remvoSub   = 'Temporarily unavailable · we will let you know when it resumes';
            $remvoCta   = 'Notify me when it resumes';
            break;
        case 'not_supported':
            // Deliberately different from coming_soon. "Coming to X" implies
            // a commitment Remvo has made; this is a country with no corridor
            // planned, so it promises nothing and still captures the signal.
            $remvoTitle = 'Fiat deposits are not available in ' . $remvoCountryName;
            $remvoSub   = 'No corridor here yet · register your interest and we will let you know';
            $remvoCta   = 'Register your interest';
            break;
        case 'unlisted':
            // Legacy state. Retained so any session mid-flight during the
            // deploy renders rather than falling through to picker copy.
            $remvoTitle = 'Fiat deposits are not in your country yet';
            $remvoSub   = 'Tell us where you are and we will let you know when it opens';
            $remvoCta   = 'Register your interest';
            break;
        default: // picker
            $remvoTitle = 'Pay with FIAT, credited in minutes';
            $remvoSub   = 'Bank transfer · live rate · no crypto wallet needed';
            $remvoCta   = 'Deposit with Fiat';
            break;
    }

    // Resume overrides every corridor state. A user with an unfinished
    // session gets exactly one action: go back and finish it. Remvo issues
    // a separate virtual account per session, so offering "start a new
    // deposit" alongside this would hand them two account numbers.
    $remvoBaseState = $remvoStateName;
    $remvoBaseCta   = $remvoCta;

    if ($remvoIsResume) {
        $remvoStateName = 'resume';
        $remvoTitle = 'You have a payment waiting';
        $remvoSub   = 'Finish the transfer before the session closes';
        $remvoCta   = 'Continue payment';
    }
@endphp

@if ($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);
    }

    /* Top-edge accent. Corridor flag colours when we have art for the
       country, brand orange otherwise. */
    .remvo-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--orange) 0%, #ea580c 100%);
        opacity: .55;
    }
    .remvo-hero[data-remvo-accent="NG"]::before {
        background: linear-gradient(
            90deg,
            #008751 0%, #008751 33%,
            #ffffff 33%, #ffffff 66%,
            #008751 66%, #008751 100%
        );
    }

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

    .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;
    }

    /* Neutral mark for corridors with no flag art. Same footprint as the
       flag so the header does not reflow between states. */
    .remvo-hero-glyph {
        width: 36px;
        height: 24px;
        flex-shrink: 0;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--orange-dim);
        color: var(--orange);
    }
    .remvo-hero-glyph svg { width: 15px; height: 15px; 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;
    }
    /* Muted badge for corridors that are not live. */
    .remvo-hero-badge[data-remvo-badge="soon"] {
        background: rgba(100,116,139,.12);
        color: #64748b;
    }
    .dark .remvo-hero-badge[data-remvo-badge="soon"] {
        background: rgba(148,163,184,.15);
        color: #94a3b8;
    }

    .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: .5rem;
        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);
    }

    /* Secondary treatment for waitlist states — this is not a payment
       action and should not look like one. */
    .remvo-hero-cta[data-remvo-tone="quiet"] {
        background: transparent;
        color: var(--orange);
        border: 1px solid var(--orange);
        box-shadow: none;
    }
    .remvo-hero-cta[data-remvo-tone="quiet"]:hover,
    .remvo-hero-cta[data-remvo-tone="quiet"]:focus-visible {
        background: var(--orange-dim);
        box-shadow: none;
        transform: none;
    }

    .remvo-hero-cta-mark { width: 26px; height: 26px; 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; }

    /* Confirmation line shown when the user is already on the waitlist
       for their chosen corridor. */
    .remvo-hero-note {
        display: flex;
        align-items: center;
        gap: .45rem;
        justify-content: center;
        font-size: .72rem;
        font-weight: 600;
        color: #16a34a;
        margin: 0 0 .85rem 0;
    }
    .remvo-hero-note svg { width: 13px; height: 13px; flex-shrink: 0; }

    @media (max-width: 480px) {
        .remvo-hero { padding: 1.25rem; }
        .remvo-hero-head { gap: .75rem; margin-bottom: 1rem; }
        .remvo-hero-flag, .remvo-hero-glyph { 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; }
        .remvo-hero-cta-mark { width: 22px; height: 22px; }
    }

    @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="Deposit with fiat via Remvo"
     data-remvo-accent="{{ $remvoCountry ? $remvoCountry->iso2 : '' }}">

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

        @if ($remvoCountry && $remvoCountry->iso2 === 'NG')
            {{-- Only corridor we hold flag art for. Others use the neutral
                 glyph rather than pulling eight SVGs or a flag CDN onto a
                 payment page. --}}
            <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>
        @else
            <span class="remvo-hero-glyph" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                    <circle cx="12" cy="12" r="9"/>
                    <path d="M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18"/>
                </svg>
            </span>
        @endif

        <div class="remvo-hero-text">
            <h3 class="remvo-hero-title">{{ $remvoTitle }}</h3>
            <p class="remvo-hero-sub">{{ $remvoSub }}</p>
        </div>

        @if ($remvoStateName === 'resume')
            <span class="remvo-hero-badge" aria-hidden="true">Open</span>
        @elseif ($remvoStateName === 'active' || $remvoStateName === 'picker')
            <span class="remvo-hero-badge" aria-hidden="true">New</span>
        @else
            <span class="remvo-hero-badge" data-remvo-badge="soon" aria-hidden="true">Soon</span>
        @endif

    </div>

    @if (!empty($remvoState['on_waitlist']))
        <p class="remvo-hero-note">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
            You are on the list. We will email you when it opens.
        </p>
    @endif

    <button
        type="button"
        class="remvo-hero-cta"
        data-remvo-start
        @if ($remvoStateName !== 'active' && $remvoStateName !== 'picker' && $remvoStateName !== 'resume') data-remvo-tone="quiet" @endif
        data-remvo-state="{{ $remvoStateName }}"
        data-remvo-country-code="{{ $remvoCountry->iso2 ?? '' }}"
        data-remvo-country-name="{{ $remvoCountry->name ?? '' }}"
        data-remvo-currency="{{ $remvoCountry->currency_code ?? '' }}"
        data-remvo-on-waitlist="{{ !empty($remvoState['on_waitlist']) ? '1' : '0' }}"
        data-remvo-email="{{ $remvoUser->email }}"
        data-remvo-countries-url="{{ url('/deposit/remvo/countries') }}"
        data-remvo-set-country-url="{{ url('/deposit/remvo/country') }}"
        data-remvo-waitlist-url="{{ url('/deposit/remvo/waitlist') }}"
        data-remvo-callback-url="{{ url('/deposit-funds') }}"
        data-remvo-denominations="20,50,100,250,500,1000"
        data-remvo-default="50"
        @if ($remvoCountry && $remvoCountry->min_amount_usd !== null)
            data-remvo-min="{{ (int) max($remvoCountry->min_amount_usd, config('services.remvo.min_amount', 20)) }}"
        @endif
        @if ($remvoCountry && $remvoCountry->max_amount_usd !== null)
            data-remvo-max="{{ (int) min($remvoCountry->max_amount_usd, config('services.remvo.max_amount', 1000)) }}"
        @endif
        @if ($remvoIsResume)
            data-remvo-resume-url="{{ $remvoResumeUrl }}"
            data-remvo-expires-at="{{ $remvoExpiresAt }}"
            data-remvo-base-state="{{ $remvoBaseState }}"
            data-remvo-base-cta="{{ $remvoBaseCta }}"
            data-remvo-resume-amount="{{ $remvoResumeAmount !== null ? (int) $remvoResumeAmount : '' }}"
        @endif
        data-remvo-quote-url="{{ url('/deposit/remvo/quote') }}"
        data-remvo-initialize-url="{{ url('/deposit/remvo/initialize') }}"
        aria-label="{{ $remvoCta }}"
    >
        {{-- Stacked-cards mark — three planes with progressive opacity. --}}
        <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.3"  stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
            <path d="M8 26l16-8 16 8-16 8z" fill="currentColor" opacity="0.55" 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">{{ $remvoCta }}</span>
        <span class="remvo-hero-cta-arrow" aria-hidden="true">&rarr;</span>
    </button>

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

</div>
@endif