@php
    $bizLabel = $selectedBusiness['name'] ?? 'Your business';
    $googleMarketplaceUrl = config('services.google.marketplace_listing_url');
    $chromeWebStoreUrl = env('EXTENSION_URL', 'https://chromewebstore.google.com/detail/ai-invite-reply-to-google/nnlapinnlakdekodfepkeiakidelgfoa');
@endphp

<style>
.gq-card{--gq-ink:#0B1526;--gq-ink-2:#22304A;--gq-muted:#5B6B84;--gq-faint:#93A2B8;--gq-line:#E5EAF2;
 --gq-line-soft:#EFF3F8;--gq-blue:#2456E6;--gq-blue-deep:#1B3FAE;--gq-blue-tint:#EEF3FE;
 --gq-green:#0E9F6E;--gq-green-deep:#0B7A55;--gq-green-tint:#EBF9F3;--gq-green-line:#BFEBD9;
 --gq-amber:#B26B00;--gq-amber-tint:#FDF4E3;--gq-amber-line:#F2DFB5}
.gq-prog{display:flex;gap:5px;margin-bottom:22px}
.gq-prog i{flex:1;height:3px;border-radius:2px;background:var(--gq-line-soft);transition:background .3s}
.gq-prog i.on{background:var(--gq-blue)}
.gq-prog.hide{visibility:hidden}
.gq-eyebrow{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gq-faint);margin:0 0 8px}
.gq-h1{font-family:'Sora',sans-serif;font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1.22;margin:0 0 8px;color:var(--gq-ink)}
.gq-h2{font-family:'Sora',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0 0 6px;color:var(--gq-ink)}
.gq-sub{font-size:14px;line-height:1.55;color:var(--gq-muted);margin:0 0 20px}
.gq-hint{font-size:12.5px;color:var(--gq-faint);margin:14px 0 0;text-align:center;line-height:1.55}
.gq-opts{display:flex;flex-direction:column;gap:8px}
.gq-opt{width:100%;text-align:left;font-family:inherit;font-size:14.5px;font-weight:600;
 color:var(--gq-ink-2);background:#fff;border:1.5px solid var(--gq-line);border-radius:12px;
 padding:14px 15px;cursor:pointer;transition:border-color .14s,background .14s,color .14s}
.gq-opt:hover{border-color:var(--gq-blue);background:var(--gq-blue-tint);color:var(--gq-blue-deep)}
.gq-opt.sel{border-color:var(--gq-blue);background:var(--gq-blue-tint);color:var(--gq-blue-deep)}
.gq-selwrap{position:relative}
.gq-selwrap::after{content:'';position:absolute;right:17px;top:50%;width:7px;height:7px;
 border:solid var(--gq-faint);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.gq-card select,.gq-card input[type=text]{width:100%;font-family:inherit;font-size:14.5px;font-weight:600;
 color:var(--gq-ink-2);background:#fff;border:1.5px solid var(--gq-line);border-radius:12px;
 padding:14px 15px;appearance:none;-webkit-appearance:none}
.gq-card select:focus,.gq-card input[type=text]:focus{outline:none;border-color:var(--gq-blue)}
.gq-card input[type=text]{cursor:text;margin-top:8px}
.gq-btn{width:100%;font-family:inherit;font-size:15px;font-weight:700;border:none;
 border-radius:12px;padding:15px;cursor:pointer;background:var(--gq-blue);color:#fff;margin-top:16px}
.gq-btn:hover{filter:brightness(1.07)}
.gq-btn:disabled{background:var(--gq-line);color:var(--gq-faint);cursor:not-allowed;filter:none}
.gq-back{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;
 color:var(--gq-muted);cursor:pointer;padding:8px 0 0;display:block;margin:6px auto 0}
.gq-verdict{border-radius:14px;padding:17px;text-align:center;margin-bottom:16px}
.gq-verdict.yes{background:var(--gq-green-tint);border:1.5px solid var(--gq-green-line)}
.gq-verdict h2{margin:0;font-family:'Sora',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--gq-green-deep)}
.gq-figure{text-align:center;border:1.5px solid var(--gq-line);border-radius:14px;padding:18px;margin-bottom:16px}
.gq-figure .lab{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gq-faint);margin-bottom:8px}
.gq-figure .big{font-family:'Sora',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--gq-ink)}
.gq-figure .big .arrow{color:var(--gq-faint);font-weight:600;margin:0 2px}
.gq-figure .cap{font-size:12px;color:var(--gq-muted);margin-top:7px;line-height:1.5}
.gq-rows{list-style:none;margin:0 0 16px;padding:0}
.gq-rows li{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;line-height:1.5;
 padding:11px 0;border-bottom:1px solid var(--gq-line-soft)}
.gq-rows li:last-child{border-bottom:none}
.gq-rows .k{color:var(--gq-muted);flex:0 0 auto}
.gq-rows .v{color:var(--gq-ink);font-weight:600;text-align:right}
.gq-rows .v small{display:block;font-weight:500;color:var(--gq-faint);font-size:11.5px;margin-top:2px}
.gq-setup{background:var(--gq-green-tint);border:1.5px solid var(--gq-green-line);border-radius:14px;padding:16px 17px;margin-bottom:16px}
.gq-setup-h{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--gq-green-deep);margin:0 0 10px;text-align:center}
.gq-setup-l{list-style:none;margin:0;padding:0}
.gq-setup-l li{position:relative;padding-left:22px;font-size:13.5px;color:var(--gq-ink-2);line-height:1.5;margin-bottom:6px}
.gq-setup-l li:last-child{margin-bottom:0}
.gq-setup-l li::before{content:'';position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:50%;background:#fff;border:1px solid var(--gq-green-line)}
.gq-setup-l li::after{content:'';position:absolute;left:4px;top:8px;width:4px;height:7px;border:solid var(--gq-green-deep);border-width:0 1.7px 1.7px 0;transform:rotate(42deg)}
.gq-ghost{display:block;width:100%;text-align:center;border:1.5px solid var(--gq-line);background:#fff;
 border-radius:12px;padding:13px 14px;margin-top:12px;cursor:pointer;font-family:inherit;
 font-size:12.5px;font-weight:700;color:var(--gq-ink-2);transition:border-color .15s,background .15s}
.gq-ghost:hover{border-color:var(--gq-blue);background:var(--gq-blue-tint);color:var(--gq-blue-deep)}
.gq-terms{font-size:11.5px;color:var(--gq-faint);text-align:center;line-height:1.6;margin:12px 0 0}
.gq-terms b{color:var(--gq-muted);font-weight:700}
.gq-foot{font-size:11px;color:var(--gq-faint);text-align:center;line-height:1.7;margin-top:18px}
.gq-foot a{font-weight:600;color:var(--gq-muted);text-decoration:underline;text-underline-offset:2px}
@media (max-width:470px){.gq-h1{font-size:22px}.gq-figure .big{font-size:28px}}
</style>

<div
    id="guestTrialModal"
    x-show="guestTrialModalOpen"
    x-cloak
    @keydown.escape.window="closeGuestTrialModal()"
    class="fixed inset-0 z-[95] flex items-end justify-center bg-[rgba(11,21,38,.5)] p-0 sm:items-center sm:p-4"
    style="display:none"
    @click.self="closeGuestTrialModal()"
>
    <div
        class="gq-card relative w-full max-w-[520px] overflow-hidden rounded-t-[18px] border border-[#E5EAF2] bg-white px-[18px] pb-[18px] pt-[21px] shadow-[0_16px_44px_rgba(11,21,38,.10)] sm:rounded-[18px] sm:px-[26px] sm:pb-[22px] sm:pt-[26px]"
        role="dialog"
        aria-modal="true"
        aria-labelledby="guestTrialModalTitle"
        @click.stop
    >
        <button
            type="button"
            @click="closeGuestTrialModal()"
            class="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-lg border-0 bg-transparent text-[22px] leading-none text-[#93A2B8] transition hover:bg-[#EFF3F8] hover:text-[#22304A]"
            aria-label="Close"
        >×</button>

        <div class="gq-prog" :class="{ hide: qualifierStep === 0 || qualifierStep === 6 }" aria-hidden="true">
            <template x-for="i in 6" :key="i">
                <i :class="{ on: i < qualifierStep }"></i>
            </template>
        </div>

        {{-- 0 — intro --}}
        <div x-show="qualifierStep === 0" x-cloak>
            <p class="gq-eyebrow">Reply.Reviews</p>
            <h1 id="guestTrialModalTitle" class="gq-h1" x-text="qualifierIntroTitle()"></h1>
            <p class="gq-sub">Not every business can be automated. Six questions and we'll tell you straight whether yours can, roughly what it would be worth &mdash; and we set the whole thing up for you.</p>
            <button type="button" class="gq-btn" @click="qualifierGo(1)">Start &rarr;</button>
            <p class="gq-hint">About a minute. No account, no card, no email address.</p>
        </div>

        {{-- 1 — category --}}
        <div x-show="qualifierStep === 1" x-cloak>
            <h2 class="gq-h2" x-text="qualifierCatHeading"></h2>
            <p class="gq-sub" x-text="qualifierCatSub"></p>
            <div class="gq-selwrap">
                <select x-model="qualifierAnswers.cat" @change="onQualifierCategoryChange()">
                    <option value="">Choose one…</option>
                    <option value="salon">Salon, barber or spa</option>
                    <option value="dental">Dental practice</option>
                    <option value="clinic">Clinic or health practice</option>
                    <option value="garage">Garage, MOT or vehicle services</option>
                    <option value="hospitality">Restaurant, bar or hotel</option>
                    <option value="property">Estate or letting agent</option>
                    <option value="trades">Trades or home services</option>
                    <option value="other">Something else</option>
                </select>
            </div>
            <button
                type="button"
                class="gq-btn"
                x-show="qualifierCatPrefill || !!qualifierAnswers.cat"
                :disabled="!qualifierAnswers.cat"
                @click="qualifierGo(2)"
                x-text="qualifierCatPrefill ? 'Yes, that\u2019s right' : 'Continue'"
            >Continue</button>
            <button type="button" class="gq-back" @click="qualifierGo(0)">Back</button>
        </div>

        {{-- 2 — software --}}
        <div x-show="qualifierStep === 2" x-cloak>
            <h2 class="gq-h2">Where do your appointments and customer emails live?</h2>
            <p class="gq-sub">We read the calendar after the appointment has happened. We don't send reminders &mdash; only the review invite afterwards.</p>
            <div class="gq-selwrap">
                <select x-model="qualifierSoftValue" @change="onQualifierSoftwareChange()">
                    <option value="">Choose one…</option>
                    <template x-for="group in qualifierSoftwareGroups" :key="group.label">
                        <optgroup :label="group.label">
                            <template x-for="item in group.items" :key="item.n">
                                <option :value="item.n" :data-connect="item.connect ? '1' : ''" x-text="item.n"></option>
                            </template>
                        </optgroup>
                    </template>
                    <optgroup label="Not listed">
                        <option value="__other">Something else</option>
                    </optgroup>
                </select>
            </div>
            <input
                type="text"
                x-show="qualifierSoftValue === '__other'"
                x-cloak
                x-model="qualifierSoftOther"
                @input="onQualifierSoftOtherInput()"
                placeholder="Which one?"
            />
            <button
                type="button"
                class="gq-btn"
                x-show="qualifierSoftValue === '__other'"
                :disabled="!qualifierAnswers.soft"
                @click="qualifierGo(3)"
            >Continue</button>
            <button type="button" class="gq-back" @click="qualifierGo(1)">Back</button>
        </div>

        {{-- 3 — volume --}}
        <div x-show="qualifierStep === 3" x-cloak>
            <h2 class="gq-h2" x-text="qualifierVolumeHeading"></h2>
            <p class="gq-sub" x-text="qualifierVolumeSub"></p>
            <div class="gq-opts">
                <template x-for="opt in qualifierVolumeOptions" :key="opt.v">
                    <button
                        type="button"
                        class="gq-opt"
                        :class="{ sel: qualifierAnswers.vol === opt.v }"
                        @click="pickQualifierOption('vol', opt.v, opt.label); qualifierGo(4)"
                        x-text="opt.label"
                    ></button>
                </template>
            </div>
            <button type="button" class="gq-back" @click="qualifierGo(2)">Back</button>
        </div>

        {{-- 4 — replying now --}}
        <div x-show="qualifierStep === 4" x-cloak>
            <h2 class="gq-h2">Do you reply to your Google reviews?</h2>
            <p class="gq-sub">Honestly — most businesses don't.</p>
            <div class="gq-opts">
                <template x-for="opt in [
                    {v:'all', label:'Yes, all of them'},
                    {v:'some', label:'Some, when there\'s time'},
                    {v:'bad', label:'Only the bad ones'},
                    {v:'none', label:'No, never'},
                ]" :key="opt.v">
                    <button
                        type="button"
                        class="gq-opt"
                        :class="{ sel: qualifierAnswers.rep === opt.v }"
                        @click="pickQualifierOption('rep', opt.v, opt.label); qualifierGo(5)"
                        x-text="opt.label"
                    ></button>
                </template>
            </div>
            <button type="button" class="gq-back" @click="qualifierGo(3)">Back</button>
        </div>

        {{-- 5 — who owns the listing --}}
        <div x-show="qualifierStep === 5" x-cloak>
            <h2 class="gq-h2">Who looks after your Google Business Profile?</h2>
            <p class="gq-sub">The listing your reviews sit on. Plenty of owners aren't sure — that's a fine answer.</p>
            <div class="gq-opts">
                <template x-for="opt in [
                    {v:'me', label:'I do'},
                    {v:'staff', label:'Someone else in the business'},
                    {v:'agency', label:'Our marketing agency'},
                    {v:'unsure', label:'Not sure'},
                ]" :key="opt.v">
                    <button
                        type="button"
                        class="gq-opt"
                        :class="{ sel: qualifierAnswers.own === opt.v }"
                        @click="onQualifierOwnPick(opt)"
                        x-text="opt.label"
                    ></button>
                </template>
            </div>
            <input
                type="text"
                x-show="qualifierAnswers.own === 'agency'"
                x-cloak
                x-model="qualifierAnswers.agency"
                placeholder="Which agency?"
            />
            <button
                type="button"
                class="gq-btn"
                x-show="qualifierAnswers.own === 'agency'"
                x-cloak
                @click="renderQualifierResult()"
            >See the result &rarr;</button>
            <button type="button" class="gq-back" @click="qualifierGo(4)">Back</button>
        </div>

        {{-- 6 — result --}}
        <div x-show="qualifierStep === 6" x-cloak>
            <div x-html="qualifierResultHtml"></div>
            <button
                type="button"
                class="gq-btn"
                @click="startGuestTrial()"
                :disabled="guestTrialStarting"
                x-text="guestTrialStarting ? 'Redirecting…' : 'Try it for a month'"
            >Try it for a month</button>
            <p class="gq-terms"><b>$79 · stops automatically</b></p>
            <button
                type="button"
                class="gq-ghost"
                @click="stopGuestDemoFreeTest()"
            >Or stop the demo — send 25 invites &amp; test 5 replies free</button>
            <p class="gq-foot">
                Available on
                <a href="{{ $googleMarketplaceUrl }}" target="_blank" rel="noopener noreferrer">Google Marketplace</a>
                &amp;
                <a href="{{ $chromeWebStoreUrl }}" target="_blank" rel="noopener noreferrer">Chrome Web Store</a>
            </p>
        </div>
    </div>
</div>