@php
    $pillText = $mode === 'ai'
        ? "Only a select few businesses are cited in Google’s AI Overview."
        : "Top-3 Maps results capture ~70% of local clicks & calls.";

    $footText = $mode === 'ai'
        ? "No sign-in — no card required at test stage. After the proof, if you continue: <strong>{$price}</strong>."
        : "No sign-in — no card required at test stage. After the proof, if you continue: <strong>{$price}</strong>.";

    $howList = $mode === 'ai'
        ? [
            '5-min phone verification to assess viability to apply.',
            'Grant Google Profile access (or add us as Manager).',
            '7-day proof; your first report arrives in ~48 hours.',
          ]
        : [
            '5-min phone verification to confirm 12 keywords and location.',
            'Grant Google Profile access (or add us as Manager).',
            '7-day proof starts; your first report arrives in ~48 hours.',
          ];

    $w1List = $mode === 'ai'
        ? [
            '1 <strong>Answer Page</strong> (facts + references) for a real buyer question.',
            '1 <strong>Google Post</strong> + 1 <strong>Owner Q&amp;A</strong> linking back to you.',
            '<strong>Visibility snapshot</strong> for the target query.',
          ]
        : [
            '<strong>Top-3 Maps push</strong> for 12 agreed keywords.',
            '<strong>Positions &amp; traffic-value report</strong> within ~48 hours.',
          ];
@endphp

<div
    x-data="{
        open: @entangle('open').live ?? false,
        step: 1,
        c1: false,
        c2: false,
        mode: @js($mode),
        town: @js($town),
        price: @js($price),
        calendlyUrl: @js($calendlyUrl),

        reset(){ this.step = 1; this.c1 = false; this.c2 = false; },
        show(){ this.reset(); this.open = true; },
        hide(){ this.open = false; },
        proceed(){
            if(!(this.c1 && this.c2)) return;
            this.step = 2;
            this.$dispatch('ai-gate-continued', { mode: this.mode });
        },

        verifyPhone(){
            $wire.trackClick();

            const url = this.calendlyUrl || 'https://calendly.com/deskjco/new-meeting';
            const openCalendly = () => {
                try { Calendly.initPopupWidget({ url }); } catch(e) { window.open(url, '_blank'); }
            };

            if (window.Calendly && Calendly.initPopupWidget) { openCalendly(); return; }

            let tries = 0;
            const iv = setInterval(() => {
                tries++;
                if (window.Calendly && Calendly.initPopupWidget) {
                    clearInterval(iv);
                    openCalendly();
                } else if (tries > 20) {
                    clearInterval(iv);
                    const s = document.createElement('script');
                    s.src = 'https://assets.calendly.com/assets/external/widget.js';
                    s.onload = openCalendly;
                    document.head.appendChild(s);
                }
            }, 100);
        }
    }"
    x-on:open-ai-gate.window="if (!$event.detail || !$event.detail.mode || $event.detail.mode === mode) { show() }"
    x-cloak
>
    <!-- Overlay -->
    <div
        x-show="open"
        x-transition.opacity
        class="fixed inset-0 z-[9999] grid place-items-center bg-slate-900/60 p-6"
        role="dialog"
        aria-modal="true"
        aria-labelledby="aig-title"
        @keydown.escape.window="hide()"
    >
        <!-- Modal -->
        <div
            x-transition
            class="w-full max-w-3xl bg-white border border-slate-200 rounded-2xl shadow-2xl overflow-hidden"
        >
            <!-- Header -->
            <div class="relative bg-gradient-to-b from-slate-50 to-slate-100 border-b border-slate-200 px-5 py-3">
                <button
                    type="button"
                    class="absolute right-3 top-3 w-8 h-8 grid place-items-center rounded-lg border border-slate-200 bg-white hover:bg-slate-50"
                    @click="hide()"
                    aria-label="Close"
                >✕</button>

                <h2 id="aig-title" class="m-0 font-extrabold text-lg leading-tight">
                    Great news — you’re eligible to test
                </h2>
                <p class="m-0 text-slate-600">
                    No one in <strong x-text="town ?? 'your town'"></strong> is doing this yet. Exclusively one business per location.
                </p>
            </div>

            <!-- Dynamic banner -->
            <div class="mx-4 my-3 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 font-bold text-emerald-900">
                {!! $pillText !!}
            </div>

            <!-- STEP 1 -->
            <section x-show="step === 1">
                <div class="mx-4 my-3 rounded-xl border border-slate-200 p-4">
                    <p class="m-0 font-bold mb-2">Please apply only if both are true:</p>

                    <label class="flex gap-3 items-start my-2">
                        <input type="checkbox" class="mt-1 w-5 h-5 rounded border-slate-300" x-model="c1">
                        <span>I manage (or have login to) our Google Business Profile.</span>
                    </label>

                    <label class="flex gap-3 items-start my-2">
                        <input type="checkbox" class="mt-1 w-5 h-5 rounded border-slate-300" x-model="c2">
                        <span>Our profile shows a <strong>full address</strong>.</span>
                    </label>

                    <p class="text-slate-600 text-sm mt-3">
                        We’ll send you an email explaining how it works. If you progress we will require a quick phone verification.
                    </p>
                </div>

                <div class="flex justify-center gap-3 mx-4 mb-4">
                    <button
                        class="inline-flex items-center justify-center px-4 py-3 rounded-xl font-extrabold text-white bg-sky-600 hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed"
                        :disabled="!(c1 && c2)"
                        @click="proceed()"
                    >
                        Confirm &amp; Continue
                    </button>
                </div>

                <a href="#" class="block text-center text-slate-500 mb-3" @click.prevent="hide()">Not interested</a>

                <div class="border-t border-slate-200 px-4 py-2 text-center text-xs text-slate-500">
                    {!! $footText !!}
                </div>
            </section>

            <!-- STEP 2 -->
            <section x-show="step === 2" x-transition>
                <div class="mx-4 my-3 text-left rounded-xl border border-slate-200 bg-white">
                    <h3 class="font-extrabold text-base leading-tight px-4 pt-3">How it works</h3>
                    <div class="px-4 pb-4 pt-2 text-slate-800">
                        <ol class="list-decimal pl-5 space-y-1">
                            @foreach($howList as $li)
                                <li>{!! $li !!}</li>
                            @endforeach
                        </ol>
                    </div>
                </div>

                <div class="mx-4 my-3 text-left rounded-xl border border-slate-200 bg-white">
                    <h3 class="font-extrabold text-base leading-tight px-4 pt-3">Week-1 deliverables</h3>
                    <div class="px-4 pb-4 pt-2 text-slate-800">
                        <ul class="list-disc pl-5 space-y-1">
                            @foreach($w1List as $li)
                                <li>{!! $li !!}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="flex justify-center gap-3 mx-4 mb-4">
                    <button
                        type="button"
                        class="inline-flex items-center justify-center px-4 py-3 rounded-xl font-extrabold text-white bg-sky-600 hover:bg-sky-500"
                        @click="verifyPhone()"
                    >
                        Verify phone now
                    </button>
                </div>

                <div class="border-t border-slate-200 px-4 py-2 text-center text-xs text-slate-500">
                    After the proof, if you continue: <strong x-text="price"></strong>.
                </div>
            </section>
        </div>
    </div>

    @once
        <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
        <script src="https://assets.calendly.com/assets/external/widget.js" async></script>
    @endonce
</div>