{{-- Calendly invite-reply marketing popup overlay (backdrop is dashboard-v2 guest shell) --}}
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
        [x-cloak] { display: none !important; }
        @keyframes rrFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        .rr-fade-up { animation: rrFadeUp 0.3s ease; }
        @keyframes rrSpin { to { transform: rotate(360deg); } }
        .rr-spin { animation: rrSpin 0.7s linear infinite; }

        .rr-calendly-page { font-family: 'DM Sans', -apple-system, sans-serif; }
        .popup {
            position: relative;
            background: #fff;
            border-radius: 20px;
            width: 100%;
            max-width: 900px;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
            overflow: hidden;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
            font-family: 'DM Sans', -apple-system, sans-serif;
        }

        .t-eyebrow { font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
        .t-h1 { font-size: 30px; font-weight: 800; color: #0f172a; line-height: 1.25; }
        .t-h2 { font-size: 20px; font-weight: 700; color: #475569; line-height: 1.35; }
        .t-body { font-size: 16px; font-weight: 500; color: #334155; line-height: 1.55; }
        .t-caption { font-size: 14px; font-weight: 500; color: #64748b; line-height: 1.5; }
        .t-stat { font-size: 39px; font-weight: 800; color: #0f172a; line-height: 1; }
        .t-stat-alert { font-size: 39px; font-weight: 800; color: #dc2626; line-height: 1; }

        .load-wrap { padding: 52px 52px 44px; text-align: center; width: 100%; }
        .load-ring { width: 58px; height: 58px; background: #f0fdf4; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
        .load-title { font-size: 21px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
        .load-label { font-size: 16px; color: #64748b; margin-bottom: 28px; }
        .load-bar { height: 7px; background: #f0fdf4; border-radius: 99px; overflow: hidden; margin-bottom: 8px; width: 100%; }
        .load-bar-fill { height: 100%; background: #22c55e; border-radius: 99px; transition: width 0.7s ease; }
        .load-pct { font-size: 14px; color: #94a3b8; }

        .main { padding: 28px 42px 32px; width: 100%; }
        .brand-top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
        .brand-top span { font-size: 17px; font-weight: 700; color: #0f172a; }

        .sent-bar { background: #0f172a; color: #fff; font-size: 15px; font-weight: 600; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; width: 100%; flex-shrink: 0; }
        .sent-bar .tick { color: #4ade80; }
        .sent-spin { width: 16px; height: 16px; border: 2px solid #4ade80; border-top-color: transparent; border-radius: 50%; animation: rrSpin 0.7s linear infinite; }

        .hero-title { margin: 4px 0 4px; font-size: 31px; }
        .hero-sub { margin-bottom: 20px; }

        .cmp-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; width: 100%; margin-bottom: 28px; align-items: stretch; }
        .cmp-card { border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
        .cmp-now { background: #fff; border: 1px solid #e2e8f0; }
        .cmp-future { background: #f0fdf4; border: 2px solid #16a34a; padding: 22px 18px; }
        .cmp-future-eyebrow { color: #16a34a; }
        .cmp-biz-name { font-size: 15px; font-weight: 700; color: #0f172a; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cmp-biz-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
        .cmp-biz-rating .stars { color: #f59e0b; font-size: 18px; letter-spacing: 1.5px; }
        .cmp-future .cmp-biz-rating .stars { font-size: 30px; letter-spacing: 2px; }
        .cmp-future .cmp-biz-rating { margin-bottom: 11px; }
        .cmp-biz-rating .num { font-size: 13px; color: #64748b; font-weight: 600; }
        .cmp-num { font-size: 28px; font-weight: 800; color: #0f172a; line-height: 1; }
        .cmp-num-future { font-size: 39px; color: #15803d; }
        .cmp-num-row { display: flex; align-items: baseline; gap: 7px; }
        .cmp-lbl { margin-top: 2px; }
        .cmp-assumption { font-size: 12px; color: #94a3b8; margin-top: 6px; }

        .cta-lead { margin-bottom: 18px; }
        .cta-headline { font-size: 22px; font-weight: 800; color: #0f172a; margin-bottom: 5px; }
        .cta-sub { font-size: 15px; color: #64748b; }
        .cta-sub-long { font-size: 14px; color: #64748b; line-height: 1.6; max-width: 340px; margin: 0 auto; }
        .btn-extension { width: 100%; background: #1a73e8; color: #fff; border: none; border-radius: 9999px; padding: 14px 20px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; text-decoration: none; box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35); transition: background 0.15s; }
        .btn-extension:hover { background: #1557b0; }
        .btn-extension .chrome-btn-icon { width: 20px; height: 20px; flex-shrink: 0; display: block; }
        .cta-store-line { font-size: 12px; color: #9ca3af; text-align: center; margin-bottom: 14px; }
        .cta-trust { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: #9ca3af; margin-bottom: 11px; }
        .cta-trust span { display: flex; align-items: center; gap: 5px; }
        .cta-note { font-size: 12px; color: #94a3b8; line-height: 1.5; margin-bottom: 11px; }

        .btn-connect { width: 100%; background: #2563eb; color: #fff; border: none; border-radius: 10px; padding: 18px; font-size: 18px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 11px; transition: background 0.15s, transform 0.08s; }
        .btn-connect:hover:not(:disabled) { background: #1d4ed8; }
        .btn-connect:active:not(:disabled) { transform: scale(0.99); }
        .btn-connect:disabled { opacity: 0.7; cursor: not-allowed; }
        .free-tag { background: rgba(255,255,255,0.18); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 99px; margin-left: 2px; }

        .scroll-cue { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 24px; animation: cueBounce 1.8s ease-in-out infinite; }
        @keyframes cueBounce { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(3px); opacity: 1; } }

        .reply-section { width: 100%; border-top: 1px solid #e2e8f0; padding-top: 26px; }
        .reply-heading { margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
        .reply-heading .t-h1 { font-size: 24px; }
        .reply-stat { text-align: center; flex-shrink: 0; }
        .reply-stat .t-stat-alert { font-size: 25px; }
        .reply-stat .t-eyebrow { font-size: 11px; }
        .reply-question { max-width: 600px; margin: 0 auto 14px; }

        .proj-pill { background: #16a34a; color: #fff; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 99px; }

        .rev-card { border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 20px; text-align: left; margin-bottom: 16px; }
        .rev-head { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
        .rev-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; }
        .rev-name { font-size: 16px; font-weight: 700; color: #0f172a; }
        .rev-when { font-size: 14px; color: #94a3b8; margin-left: auto; white-space: nowrap; }
        .rev-stars { color: #f59e0b; font-size: 15px; margin: 2px 0 11px 48px; }
        .rev-text { font-size: 15px; color: #64748b; line-height: 1.55; margin-bottom: 16px; }

        .ai-reply-connector { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; padding-left: 2px; }
        .ai-reply-connector svg { color: #2563eb; flex-shrink: 0; }
        .ai-reply { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1.5px solid #93c5fd; border-left: 4px solid #2563eb; border-radius: 10px; padding: 16px 18px 14px; box-shadow: 0 2px 8px rgba(37,99,235,0.08); }
        .ai-reply-tags { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; row-gap: 7px; }
        .ai-tag { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 99px; }
        .ai-tag.blue { background: #2563eb; color: #fff; }
        .ai-tag.grey { background: #dbeafe; color: #1d4ed8; }
        .ai-live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #16a34a; margin-left: auto; }
        .ai-live-dot .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
        .ai-reply-text { font-size: 16px; font-weight: 600; color: #1e3a8a; line-height: 1.6; margin-bottom: 9px; white-space: pre-wrap; word-break: break-word; }
        .ai-reply-sig { font-size: 14px; color: #64748b; font-weight: 600; }
        .ai-reply-generating { display: flex; align-items: center; gap: 11px; font-size: 15px; color: #64748b; min-height: 1.6em; }

        .reviews-loader { border: 2px dashed #dbeafe; border-radius: 14px; padding: 40px 22px; display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; margin-bottom: 16px; }
        .reviews-loader .rl-text { font-size: 16px; font-weight: 600; color: #475569; }
        .reviews-loader .rl-sub { font-size: 14px; color: #94a3b8; }
        .no-reviews { border: 2px dashed #dbeafe; border-radius: 14px; padding: 40px 22px; text-align: center; margin-bottom: 16px; }
        .no-reviews .nr-title { font-size: 17px; font-weight: 700; color: #475569; margin-bottom: 9px; }
        .no-reviews .nr-sub { font-size: 14px; color: #94a3b8; line-height: 1.5; }

        .carousel-nav { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: 24px; }
        .car-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #bfdbfe; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #2563eb; transition: background 0.15s; }
        .car-arrow:hover:not(:disabled) { background: #eff6ff; }
        .car-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
        .car-dots { display: flex; gap: 7px; }
        .car-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; cursor: pointer; transition: all 0.2s; border: none; padding: 0; }
        .car-dot.on { background: #16a34a; width: 22px; border-radius: 99px; }
        .car-dot.ready { background: #86efac; }
        .car-dot.on.ready { background: #16a34a; }

        .c-reassure { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 11px; flex-wrap: wrap; }
        .c-reassure span { font-size: 14px; color: #94a3b8; display: flex; align-items: center; gap: 5px; }
        .c-offer-line { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 2px; }
        .c-offer-line::before, .c-offer-line::after { content: ''; width: 120px; max-width: 22vw; height: 1px; background: #d1d5db; flex-shrink: 1; }
        .c-offer-line span { font-size: 14px; color: #6b7280; font-weight: 600; white-space: nowrap; }
        .c-inbox { display: flex; align-items: center; gap: 9px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 11px 15px; margin-bottom: 16px; font-size: 14px; color: #1e40af; line-height: 1.4; text-align: left; }
        .stay-control { text-align: left; margin: 20px 0 0; }
        .stay-control strong { font-weight: 700; }

        .trust-row { border-top: 1px solid #e2e8f0; padding-top: 20px; display: flex; align-items: center; justify-content: center; gap: 38px; flex-wrap: wrap; }
        .trust-item { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; }
        .trust-item span { font-size: 15px; color: #475569; font-weight: 600; }

        /* Post-auth screens */
        .c-screen { overflow-y: auto; max-height: 92vh; flex: 1; min-height: 0; }
        .c-head { background: #0f172a; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; width: 100%; flex-shrink: 0; }
        .c-head.sticky { position: sticky; top: 0; z-index: 10; }
        .c-brand { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
        .c-back { background: transparent; border: 1px solid #334155; border-radius: 8px; color: #64748b; font-size: 14px; padding: 7px 12px; cursor: pointer; font-family: inherit; }
        .c-back-icon { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; }
        .c-back-icon:hover { color: #fff; border-color: #64748b; }
        .c-body { padding: 22px; width: 100%; text-align: left; }
        .c-body-center { padding: 36px 22px 32px; width: 100%; text-align: center; }
        .c-badge { display: flex; align-items: flex-start; gap: 11px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 11px 16px; margin-bottom: 20px; }
        .c-badge-inner { flex: 1; min-width: 0; }
        .c-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
        .c-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; flex-shrink: 0; margin-top: 4px; animation: cPulse 1.8s infinite; }
        @keyframes cPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
        .c-badge-text { font-size: 15px; font-weight: 600; color: #15803d; }
        .c-pill { font-size: 14px; font-weight: 700; color: #166534; background: #dcfce7; border-radius: 99px; padding: 2px 10px; }
        .c-badge-sub { font-size: 14px; color: #15803d; margin-top: 4px; }
        .c-hl { font-size: 31px; font-weight: 800; color: #0f172a; margin-bottom: 6px; line-height: 1.15; }
        .c-sub { font-size: 16px; color: #64748b; line-height: 1.55; }
        .c-sub.mb { margin-bottom: 18px; }
        .c-prime-eyebrow { font-size: 13px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 9px; }
        .c-prime-title { font-size: 21px; font-weight: 700; color: #0f172a; margin-bottom: 7px; line-height: 1.35; }
        .c-stats { border: 1.5px solid #e2e8f0; border-radius: 14px; overflow: hidden; margin: 18px 0; }
        .c-stats-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 14px; border-bottom: 1px solid #e2e8f0; }
        .c-big { font-size: 46px; font-weight: 800; color: #0f172a; line-height: 1; }
        .c-big-lbl { font-size: 14px; color: #64748b; margin-top: 5px; }
        .c-qd { font-size: 18px; font-weight: 700; color: #16a34a; text-align: right; }
        .c-qd-sub { font-size: 14px; color: #64748b; margin-top: 4px; text-align: right; }
        .c-appt-head { background: #f8fafc; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
        .c-appt-title { font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
        .c-cov { font-size: 14px; font-weight: 700; color: #16a34a; }
        .c-cov.grey { color: #94a3b8; }
        .c-list { max-height: 180px; overflow-y: auto; }
        .c-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #f1f5f9; }
        .c-row:last-child { border-bottom: none; }
        .c-ic { width: 34px; height: 34px; background: #f0fdf4; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .c-ic.grey { background: #f8fafc; }
        .c-row-info { flex: 1; min-width: 0; }
        .c-nm { font-size: 15px; font-weight: 600; color: #0f172a; }
        .c-nm.muted { color: #94a3b8; }
        .c-nm.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .c-tm { font-size: 14px; color: #94a3b8; margin-top: 2px; }
        .c-bdg { font-size: 13px; font-weight: 700; color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 99px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; margin-left: auto; }
        .c-bdg.grey { color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; }
        .c-note { border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; font-size: 13px; line-height: 1.6; }
        .c-note.info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
        .c-note.muted { background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; }
        .c-google { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; background: #fff; border: 1.5px solid #dadce0; border-radius: 12px; padding: 17px; font-size: 17px; font-weight: 700; color: #3c4043; cursor: pointer; font-family: inherit; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: background 0.15s; margin-bottom: 11px; }
        .c-google:hover:not(:disabled) { background: #f8f9fa; }
        .c-google:disabled { opacity: 0.7; cursor: not-allowed; }
        .c-primary { display: block; width: 100%; background: #1D4ED8; color: #fff; border: none; border-radius: 12px; padding: 18px; font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; font-family: inherit; margin-bottom: 9px; }
        .c-primary:hover:not(:disabled) { background: #1e40af; }
        .c-primary:disabled { opacity: 0.7; cursor: not-allowed; }
        .c-primary.green { background: #16a34a; }
        .c-primary.green:hover:not(:disabled) { background: #15803d; }
        .c-secondary { display: block; width: 100%; background: transparent; border: 1.5px solid #e2e8f0; color: #374151; border-radius: 12px; padding: 17px; font-size: 17px; font-weight: 700; text-align: center; cursor: pointer; font-family: inherit; }
        .c-secondary:hover:not(:disabled) { border-color: #94a3b8; }
        .c-secondary:disabled { opacity: 0.7; cursor: not-allowed; }
        .c-cta-meta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 11px; flex-wrap: wrap; }
        .c-cta-meta span { font-size: 14px; color: #94a3b8; display: flex; align-items: center; gap: 5px; }
        .c-support { display: block; text-align: center; font-size: 14px; color: #94a3b8; text-decoration: underline; margin-top: 9px; cursor: pointer; }
        .c-support:hover { color: #64748b; }
        .c-skip-wrap { text-align: center; }
        .c-skip { display: block; text-align: center; font-size: 14px; color: #94a3b8; text-decoration: underline; }
        .c-skip:hover { color: #64748b; }
        .c-checklist { border: 1.5px solid #e2e8f0; border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
        .c-check-item { display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; transition: background 0.15s; }
        .c-check-item:hover { background: #f8fafc; }
        .c-check-item:last-child { border-bottom: none; }
        .c-check-tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: transparent; }
        .c-check-tick.done { border-color: #bbf7d0; background: #f0fdf4; color: #16a34a; }
        .c-check-tick.always { border-color: #bbf7d0; background: #f0fdf4; color: #16a34a; }
        .c-check-title { font-size: 16px; font-weight: 600; color: #0f172a; }
        .c-check-title.muted { color: #64748b; }
        .c-check-sub { font-size: 14px; color: #94a3b8; margin-top: 2px; }
        .c-check-chevron { font-size: 16px; color: #cbd5e1; flex-shrink: 0; }

        @media (max-width: 560px) {
            .popup { max-width: 100%; }
            .main { padding: 26px 22px 24px; }
            .t-h1 { font-size: 24px; }
            .t-stat, .t-stat-alert { font-size: 30px; }
            .cmp-grid { gap: 8px; }
            .cmp-card { padding: 12px 8px; }
            .cmp-future { padding: 14px 10px; }
            .cmp-num { font-size: 22px; }
            .cmp-num-future { font-size: 30px; }
            .trust-row { gap: 22px; }
            .reply-stat { text-align: center; }
        }
</style>

@php
    $biz = $previewBusiness ?? 'Your Business';
    $customer = $previewCustomer ?? 'Guest';
    $email = $previewEmail ?? '';
    $phone = $previewPhone ?? '';
    $leadId = $leadId ?? null;
    $leadStatus = $leadStatus ?? 'reply_land';
    $pid = $previewPlaceId ?? '';
    $postCalendly = request()->boolean('post_calendly');
    $startTrial = request()->boolean('start_trial');
    $connectCalendly = request()->boolean('connect_calendly');
    $postGoogle = $postGoogle ?? request()->boolean('post_google');
    $postStripe = $postStripe ?? request()->boolean('post_stripe');
    $postStripeCancel = $postStripeCancel ?? request()->boolean('post_stripe_cancel');
    $openRegister = $openRegister ?? request()->boolean('open_register');
    $oauthError = $oauthError ?? request()->boolean('oauth_error');
    $oauthErrorMessage = $oauthErrorMessage ?? (string) (session('error') ?? '');
    $brandedTestSent = $brandedTestSent ?? false;
    $initialEmailSchedule = $initialEmailSchedule ?? [];
    $initialPrepare = $initialPrepare ?? null;
    $exploreDashboardUrl = route('dashboard', array_filter([
        'lead_id' => ! empty($leadId) ? (int) $leadId : null,
        'explore' => 1,
        'lander_key' => 'invite-reply-calendly',
        'pid' => trim((string) $pid) !== '' ? $pid : null,
        'e' => trim((string) $email) !== '' ? $email : null,
        'n' => trim((string) $customer) !== '' ? $customer : null,
        'b' => trim((string) $biz) !== '' && $biz !== 'Your Business' ? $biz : null,
        'c' => trim((string) $biz) !== '' && $biz !== 'Your Business' ? $biz : null,
        'p' => trim((string) $phone) !== '' ? $phone : null,
    ]));
    $marketplaceInstallUrl = (trim((string) $pid) !== '' && trim((string) $email) !== '')
        ? route('marketplace.install', array_filter([
            'placeId' => $pid,
            'email' => $email,
            'name' => trim((string) $customer) !== '' ? $customer : null,
        ]))
        : \App\Support\MarketplaceLead::listingUrl();
@endphp

<div id="calendlyInviteReplyOverlay" class="rr-calendly-page fixed inset-0 z-[90]">
    <div class="absolute inset-0 bg-slate-900/55"></div>
    <div class="absolute inset-0 flex items-center justify-center p-5">
<div
    x-on:google-login-success.window="handleGoogleSuccess()"
    x-data="calendlyInviteReplyPopup({
        pid: @js($pid),
        leadId: @js($leadId),
        leadStatus: @js($leadStatus),
        postCalendly: @js($postCalendly),
        startTrial: @js($startTrial),
        connectCalendly: @js($connectCalendly),
        postGoogle: @js($postGoogle),
        postStripe: @js($postStripe),
        postStripeCancel: @js($postStripeCancel),
        openRegister: @js($openRegister),
        oauthError: @js($oauthError),
        oauthErrorMessage: @js($oauthErrorMessage),
        brandedTestSent: @js($brandedTestSent),
        initialEmailSchedule: @js($initialEmailSchedule),
        initialPrepare: @js($initialPrepare),
        prefill: {
            b: @js($biz),
            n: @js($customer),
            e: @js($email),
            p: @js($phone),
        },
        urls: {
            stats: @js(route('calendly.invite-reply.stats')),
            lead: @js(route('calendly.invite-reply.lead')),
            prepare: @js(route('calendly.invite-reply.prepare')),
            generateReply: @js(route('calendly.invite-reply.generate-reply')),
            calendlyAuth: @js(route('integration.authenticate', ['app' => 'calendly'])),
            googleCalendarAuth: @js(route('integration.authenticate', ['app' => 'google-calendar'])),
            testInviteEmail: @js(route('calendly.invite-reply.test-invite-email')),
            cancelDemoEmails: @js(route('calendly.invite-reply.cancel-demo-emails')),
            postCalendlyPreview: @js(route('calendly.invite-reply.post-calendly-preview')),
            enableAutoInvites: @js(route('calendly.invite-reply.enable-auto-invites')),
            prepareStripeCheckout: @js(route('calendly.invite-reply.prepare-stripe-checkout')),
            googleLogin: @js(route('social.login', ['provider' => 'google'])),
            upgradeUrl: @js(\App\Services\SubscriptionPlanService::getCalendarAuthInviteReplyTrialPaymentUrl()),
            dashboardUrl: @js(route('dashboard')),
            exploreDashboardUrl: @js($exploreDashboardUrl),
            marketplaceInstallUrl: @js($marketplaceInstallUrl),
        }
    })"
    class="popup"
>
    {{-- Screen 0: Loader --}}
    <div x-show="step === 0" x-cloak x-transition.opacity class="load-wrap overflow-y-auto">
        <div class="load-ring">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#22c55e"/>
            </svg>
        </div>
        <div class="load-title">Reply.Reviews</div>
        <div class="load-label" x-text="loaderLabel"></div>
        <div class="load-bar">
            <div class="load-bar-fill" :style="`width:${loaderPct}%`"></div>
        </div>
        <div class="load-pct" x-text="`${loaderPct}%`"></div>
    </div>

    {{-- Screen 1: Main (v18 design) --}}
    <div x-show="step === 1" x-cloak class="flex flex-col rr-fade-up overflow-y-auto overscroll-contain min-h-0 flex-1 text-center">
        <div class="sent-bar">
            <template x-if="demoBarMode === 'sending'">
                <span class="inline-flex items-center gap-2">
                    <span class="sent-spin"></span>
                    <span x-text="demoBarText"></span>
                </span>
            </template>
            <template x-if="demoBarMode !== 'sending'">
                <span class="inline-flex items-center gap-2">
                    <span class="tick">✓</span>
                    <span x-text="demoBarText"></span>
                </span>
            </template>
        </div>

        <div class="main">
            <div class="brand-top">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#22c55e"/>
                </svg>
                <span>Reply.Reviews</span>
            </div>

            <div class="hero-title t-h1">We have analysed your reviews</div>
            <div class="hero-sub t-caption">Who would you choose?</div>

            <div class="cmp-grid">
                <div class="cmp-card cmp-now">
                    <div class="t-eyebrow">You Now</div>
                    <div class="cmp-biz-name" :title="fullBizName" x-text="cardBizName"></div>
                    <div class="cmp-biz-rating">
                        <span class="stars" x-text="starStr(biz.rating)"></span>
                        <span class="num" x-text="formatRating(biz.rating)"></span>
                    </div>
                    <div class="cmp-num" x-text="fmtInt(projection.current)"></div>
                    <div class="t-eyebrow cmp-lbl">Reviews</div>
                </div>
                <div class="cmp-card cmp-future">
                    <div class="t-eyebrow cmp-future-eyebrow">You after automating</div>
                    <div class="cmp-biz-rating">
                        <span class="stars" x-text="starStr(biz.rating)"></span>
                        <span class="num" x-text="formatRating(biz.rating)"></span>
                    </div>
                    <div class="cmp-num-row">
                        <span class="cmp-num cmp-num-future" x-text="fmtInt(projection.projected)"></span>
                        <span class="proj-pill" x-text="'+' + fmtInt(projection.gain)"></span>
                    </div>
                    <div class="t-eyebrow cmp-lbl">Reviews</div>
                    <div class="cmp-assumption">Top 3 maps -AI overview</div>
                </div>
            </div>

            <div id="cta-block">
                <div class="cta-lead">
                    <div class="cta-headline">See Automated reviews and replies</div>
                    <div class="cta-sub-long">Takes 30 seconds — Watch the magic happen</div>
                </div>

                <a
                    href="{{ $exploreDashboardUrl }}"
                    class="btn-connect"
                    @click.prevent="onExploreDashboardClick()"
                >
                    See how it works on your reviews
                </a>
                <div class="cta-note">Nothing to install · no sign-in</div>
            </div>

            <div class="trust-row">
                <a class="trust-item" href="https://calendly.com" target="_blank" rel="noopener">
                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" fill="#006BFF"/><path d="M12 6a6 6 0 100 12 6 6 0 000-12zm0 9.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" fill="#fff"/></svg>
                    <span>Calendly</span>
                </a>
                <a class="trust-item" href="https://calendar.google.com" target="_blank" rel="noopener">
                    <svg width="30" height="30" viewBox="0 0 48 48" aria-hidden="true"><rect x="9" y="9" width="30" height="30" rx="3" fill="#fff" stroke="#e0e0e0"/><path d="M9 14h30v3H9z" fill="#1a73e8"/><text x="24" y="32" font-family="DM Sans, sans-serif" font-size="15" font-weight="700" fill="#1a73e8" text-anchor="middle">31</text></svg>
                    <span>Calendar</span>
                </a>
                <a class="trust-item" href="https://chrome.google.com/webstore/" target="_blank" rel="noopener">
                    <svg width="30" height="30" viewBox="0 0 256 256" aria-hidden="true"><circle cx="128" cy="128" r="128" fill="#fff"/><circle cx="128" cy="128" r="52" fill="#1a73e8"/><path d="M128 76h108.6A128 128 0 0 0 19.4 76z" fill="#ea4335"/><path d="M20 180.6A128 128 0 0 0 236 180.6L182 128a52 52 0 0 1-54 52z" fill="#34a853"/><path d="M74 128a52 52 0 0 1 54-52H19.4A128 128 0 0 0 20 180.6z" fill="#fbbc05"/><circle cx="128" cy="128" r="40" fill="#fff"/><circle cx="128" cy="128" r="32" fill="#1a73e8"/></svg>
                    <span>Chrome Web Store</span>
                </a>
            </div>
        </div>
    </div>

    {{-- Screen 2: Post-calendar unified result --}}
    <div x-show="step === 2" x-cloak class="c-screen">
        <div class="c-head sticky">
            <div class="c-brand">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#22c55e"/></svg>
                <span>Reply.Reviews</span>
            </div>
            <button type="button" @click="onClosePostAuth()" class="c-back c-back-icon" aria-label="Close">✕</button>
        </div>
        <div class="c-body">
            <div class="c-badge">
                <span class="c-dot"></span>
                <div class="c-badge-inner">
                    <div class="c-badge-row">
                        <span class="c-badge-text" x-text="post.connectedProviderLabel || 'Google Calendar connected'"></span>
                        <span class="c-pill" x-text="post.total + ' appointments'"></span>
                    </div>
                    <div class="c-badge-sub" x-text="post.badgeSub"></div>
                </div>
            </div>

            <div x-show="stripeSuccessMessage" x-cloak class="mb-4 rounded-[10px] border border-green-200 bg-green-50 px-4 py-3 text-[13px] font-semibold text-green-800" x-text="stripeSuccessMessage"></div>

            <div class="c-hl">You're all set.</div>
            <div class="c-sub mb" x-text="post.subline"></div>

            <template x-if="post.total === 0">
                <div>
                    <div class="c-note info">
                        <strong>We haven't found any appointments on your connected calendar yet.</strong>
                    </div>
                    <div class="c-note muted">
                        Make sure your Google Calendar is connected to your booking software, and that it's actively syncing. Most booking tools have a calendar sync setting that can disconnect over time. Try re-syncing it there first.
                    </div>
                </div>
            </template>

            <template x-if="post.total > 0 && post.appointmentsWithEmails === 0">
                <div>
                    <div class="c-note info">
                        <strong x-text="'We found ' + post.total + ' appointments this month, but none included a customer email yet.'"></strong>
                    </div>
                    <div class="c-note muted">
                        Make sure your booking software is syncing attendee email addresses into Google Calendar. Once those emails appear, review invites can be queued automatically.
                    </div>
                </div>
            </template>

            <div class="c-stats">
                <div class="c-stats-row">
                    <div>
                        <div class="c-big" x-text="post.total"></div>
                        <div class="c-big-lbl">appointments this month</div>
                    </div>
                    <div>
                        <div class="c-qd" x-text="post.queuedLabel"></div>
                        <div class="c-qd-sub" x-text="post.queuedSub"></div>
                    </div>
                </div>
                <div class="c-appt-head">
                    <span class="c-appt-title">This month's appointments</span>
                    <span class="c-cov" :class="post.total === 0 ? 'grey' : ''" x-text="post.covered + ' / ' + post.total + ' covered'"></span>
                </div>
                <div class="c-list">
                    <template x-for="row in post.rows" :key="row.name + row.fires_label">
                        <div class="c-row">
                            <div class="c-ic" :class="row.queued ? '' : 'grey'">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                    <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" :stroke="row.queued ? '#16a34a' : '#94a3b8'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="c-row-info">
                                <div class="c-nm truncate" :class="row.queued ? '' : 'muted'" x-text="row.name"></div>
                                <div class="c-tm" x-text="row.fires_label"></div>
                            </div>
                            <span class="c-bdg" :class="row.queued ? '' : 'grey'" x-text="row.queued ? 'Queued' : 'Free limit'"></span>
                        </div>
                    </template>
                </div>
            </div>

            <button type="button" @click="onUpgrade()" :disabled="upgrading" class="c-primary" x-text="upgrading ? 'Redirecting to checkout…' : 'Start 7-day unlimited trial'"></button>
            <div class="c-cta-meta">
                <span>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 13l4 4L19 7" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    Cancel any time
                </span>
                <span>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 15a2 2 0 100-4 2 2 0 000 4zm6-6V7a6 6 0 00-12 0v2a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2z" stroke="#94a3b8" stroke-width="1.6" stroke-linejoin="round"/></svg>
                    No Card required ·  $79/month
                </span>
            </div>
            <button type="button" @click="onContinueFree()" :disabled="enablingInvites" class="c-secondary" x-text="enablingInvites ? 'Setting up…' : ('Continue free — ' + post.inviteLimit + ' invites, ' + post.replyLimit + ' replies')"></button>
            <a href="/support" class="c-support">Need help? Contact support</a>
        </div>
    </div>
</div>
    </div>
</div>

<script>
    window.__rrOAuthSource = 'google-calendly-invite-reply';
</script>

<script>
    function openHomepageRegisterPopup() {
        if (window.Livewire?.dispatch) {
            window.Livewire.dispatch('open-popup');
            return;
        }
        document.addEventListener('livewire:init', function () {
            window.Livewire.dispatch('open-popup');
        }, { once: true });
        window.dispatchEvent(new CustomEvent('open-popup', { bubbles: true }));
    }

    function calendlyInviteReplyPopup({ pid, leadId, leadStatus, postCalendly, startTrial, connectCalendly, postGoogle, postStripe, postStripeCancel, openRegister, oauthError, oauthErrorMessage, brandedTestSent, initialEmailSchedule, initialPrepare, prefill, urls }) {
        const POLL_DELAY_MS = 700;
        const MAX_POLL_ATTEMPTS = 90;
        const MAX_POLL_MS = 120000;
        const CALENDLY_LEAD_STORAGE_KEY = 'rr_calendly_lead_id';
        const CALENDLY_FROM_STORAGE_KEY = 'rr_calendly_from';

        function persistCalendlyLeadStorage(nextLeadId) {
            try {
                const id = Number(nextLeadId || 0);
                if (id > 0) {
                    localStorage.setItem(CALENDLY_LEAD_STORAGE_KEY, String(id));
                    localStorage.setItem(CALENDLY_FROM_STORAGE_KEY, '1');
                }
            } catch (e) { /* ignore */ }
        }

        function buildExploreDashboardUrl(nextLeadId) {
            const base = urls.dashboardUrl || '/dashboard';
            try {
                const u = new URL(base, window.location.origin);
                u.searchParams.set('explore', '1');
                u.searchParams.set('lander_key', 'invite-reply-calendly');
                const id = Number(nextLeadId || 0);
                if (id > 0) {
                    u.searchParams.set('lead_id', String(id));
                }
                const placeId = String(pid || '').trim();
                if (placeId) {
                    u.searchParams.set('pid', placeId);
                }
                const email = String(prefill.e || '').trim();
                if (email) {
                    u.searchParams.set('e', email);
                }
                const name = String(prefill.n || '').trim();
                if (name) {
                    u.searchParams.set('n', name);
                }
                const business = String(prefill.b || '').trim();
                if (business && business !== 'Your Business') {
                    u.searchParams.set('b', business);
                    u.searchParams.set('c', business);
                }
                const phone = String(prefill.p || '').trim();
                if (phone) {
                    u.searchParams.set('p', phone);
                }
                return u.pathname + u.search;
            } catch (e) {
                const id = Number(nextLeadId || 0);
                const landerParam = 'lander_key=invite-reply-calendly';
                const parts = ['explore=1', landerParam];
                if (id > 0) {
                    parts.unshift('lead_id=' + id);
                }
                const placeId = String(pid || '').trim();
                if (placeId) {
                    parts.push('pid=' + encodeURIComponent(placeId));
                }
                const email = String(prefill.e || '').trim();
                if (email) {
                    parts.push('e=' + encodeURIComponent(email));
                }
                const name = String(prefill.n || '').trim();
                if (name) {
                    parts.push('n=' + encodeURIComponent(name));
                }
                const business = String(prefill.b || '').trim();
                if (business && business !== 'Your Business') {
                    parts.push('b=' + encodeURIComponent(business));
                    parts.push('c=' + encodeURIComponent(business));
                }
                const phone = String(prefill.p || '').trim();
                if (phone) {
                    parts.push('p=' + encodeURIComponent(phone));
                }
                return base + (base.includes('?') ? '&' : '?') + parts.join('&');
            }
        }

        function buildMarketplaceInstallUrl() {
            if (urls.marketplaceInstallUrl) {
                return urls.marketplaceInstallUrl;
            }
            const placeId = String(pid || '').trim();
            const email = String(prefill.e || '').trim();
            const name = String(prefill.n || '').trim();
            if (!placeId || !email) {
                return '';
            }
            let path = '/google/' + encodeURIComponent(placeId) + '/' + encodeURIComponent(email);
            if (name) {
                path += '/' + encodeURIComponent(name);
            }
            return path;
        }

        return {
            step: 0,
            loaderLabel: 'Searching your business...',
            loaderPct: 0,
            loaderDone: false,
            statsDone: false,

            connectingCalendly: false,
            connectingGoogleCalendar: false,
            autoSendingTest: false,
            brandedTestSent: Boolean(brandedTestSent),
            connectingGoogle: false,
            enablingInvites: false,
            upgrading: false,
            _googleSuccessHandled: false,
            googleConnectedLocal: false,
            stripeSuccessMessage: '',
            primingMode: 'free',
            oauthErrorMessage: oauthErrorMessage || '',

            projection: { current: 0, projected: 1000, gain: 1000, invitesPerMonth: 2500 },
            demoBarMode: 'sending',
            demoBarText: 'Sending your branded test…',

            reviews: [],
            revIndex: 0,
            reviewsLoaded: false,
            reviewsLoading: false,
            prepareReady: false,
            generatingReply: false,
            pollAttempts: 0,
            pollInFlight: false,
            pollStartedAt: Date.now(),

            ticked: { logo: false, msg: false },

            post: {
                businessName: '',
                periodLabel: '',
                ownershipMode: 'owned_business',
                appointmentsDetected: 0,
                appointmentsWithEmails: 0,
                invitesQueuedOrSent: 0,
                invitesAttempted: 0,
                total: 0,
                covered: 0,
                rows: [],
                badgeSub: 'Review invites will fire after every appointment',
                subline: 'Every new review gets an AI reply posted automatically.',
                queuedLabel: '0 invites queued',
                queuedSub: 'free plan',
                showUpgrade: false,
                hasPaidInviteReply: false,
                invitesNeededEstimate: 0,
                inviteLimit: 25,
                freeInviteLimit: 25,
                replyLimit: 5,
                proInviteLimit: 2500,
                estimatedReviewsFree: 1,
                estimatedReviewsPro: 1,
                connectedProviderLabel: 'Google Calendar connected',
                settingsUrl: urls.dashboardUrl || '/dashboard',
                upgradeUrl: urls.upgradeUrl || '#',
                dashboardUrl: urls.dashboardUrl || '/dashboard',
            },

            get googleConnected() {
                return this.googleConnectedLocal || ['signed_in', 'upgraded', 'business_connected', 'clicked_connect_google'].includes(leadStatus);
            },

            get checklistReady() {
                return this.ticked.logo && this.ticked.msg;
            },

            get currentReview() {
                if (!Array.isArray(this.reviews) || this.reviews.length === 0) return null;
                return this.reviews[this.revIndex] || null;
            },

            get fullBizName() {
                const placesName = (this.biz.name || '').trim();
                const urlBusiness = (new URLSearchParams(window.location.search).get('b') || '').trim();
                if ((pid || '').trim() && placesName && placesName !== 'Your Business') {
                    return placesName;
                }
                if (placesName) return placesName;
                if (urlBusiness) return urlBusiness;
                return (prefill.b || 'Your Business').trim();
            },

            syncPrefillBusinessName(name) {
                const resolved = String(name || '').trim();
                if (resolved && resolved !== 'Your Business') {
                    prefill.b = resolved;
                }
            },

            cleanBizName(raw) {
                if (!raw) return 'your business';
                let n = String(raw);
                n = n.split(/[（(]/)[0];
                n = n.split(',')[0];
                n = n.trim();
                if (n.length > 32) n = n.slice(0, 32).trim() + '…';
                return n || 'your business';
            },

            get cardBizName() {
                return this.cleanBizName(this.fullBizName);
            },

            get customerFirstName() {
                const raw = (prefill.n || '').trim();
                if (!raw || raw === 'Guest') return 'there';
                return raw.split(/\s+/)[0] || 'there';
            },

            biz: { name: prefill.b || 'Your Business', rating: null, reviewCount: null, category: '' },

            setupDemoBar() {
                const name = this.cardBizName;
                if (this.brandedTestSent) {
                    this.demoBarMode = 'sent';
                    this.demoBarText = `Branded test sent to ${name} — check your inbox`;
                    return;
                }
                this.demoBarMode = 'sending';
                this.demoBarText = 'Sending your branded test…';
            },

            starStr(rating) {
                const n = Math.max(0, Math.min(5, Math.round(Number(rating) || 0)));
                return '★★★★★'.slice(0, n) + '☆☆☆☆☆'.slice(0, 5 - n);
            },

            formatRating(rating) {
                if (rating === null || rating === undefined || rating === '') return '—';
                return Number(rating).toFixed(1);
            },

            initials(name) {
                return String(name || '')
                    .split(' ')
                    .map((p) => p[0])
                    .join('')
                    .slice(0, 2)
                    .toUpperCase() || '?';
            },

            decodeHtmlEntities(value) {
                const text = String(value || '');
                if (!text || !text.includes('&')) return text;
                const el = document.createElement('textarea');
                el.innerHTML = text;
                return el.value;
            },

            normalizeReview(review) {
                if (!review || typeof review !== 'object') return review;
                return {
                    ...review,
                    name: this.decodeHtmlEntities(review.name),
                    text: this.decodeHtmlEntities(review.text),
                    aiReply: this.decodeHtmlEntities(review.aiReply),
                    signOff: this.decodeHtmlEntities(review.signOff),
                };
            },

            isFirstReplyReady(payload) {
                if (!payload) return false;
                if (payload.firstReplyReady) return true;
                const reviews = payload.reviews || [];
                return reviews.length > 0 && String(reviews[0].aiReply || '').trim() !== '';
            },

            applyPreparePayload(data, isFirstLoad = false) {
                if (!data) return;

                const biz = data.business || {};
                if (biz.name) {
                    this.biz.name = biz.name;
                    this.syncPrefillBusinessName(biz.name);
                }
                if (biz.rating !== null && biz.rating !== undefined) {
                    this.biz.rating = biz.rating;
                }
                if (biz.reviewCount !== null && biz.reviewCount !== undefined) {
                    this.biz.reviewCount = biz.reviewCount;
                    this.applyProjectionFromCount(biz.reviewCount);
                }
                if (biz.category) {
                    this.biz.category = biz.category;
                }
                this.setupDemoBar();

                const incoming = Array.isArray(data.reviews)
                    ? data.reviews.map((review) => this.normalizeReview(review))
                    : [];
                if (incoming.length) {
                    this.reviews = incoming;
                    this.reviewsLoaded = true;
                    this.reviewsLoading = false;
                    if (isFirstLoad) {
                        this.revIndex = 0;
                    }
                    if (this.isFirstReplyReady(data)) {
                        this.prepareReady = true;
                        if (!this.brandedTestSent) {
                            this.autoSendBrandedTest();
                        }
                    } else if (this.revIndex === 0 && !String(this.reviews[0]?.aiReply || '').trim()) {
                        this.ensureReplyForCurrentIndex();
                    }
                } else if (data.noReviews || data.status === 'ready') {
                    this.reviews = [];
                    this.reviewsLoaded = true;
                    this.reviewsLoading = false;
                    this.prepareReady = true;
                } else {
                    this.reviewsLoading = true;
                }

                if (data.lead_id) {
                    leadId = data.lead_id;
                    persistCalendlyLeadStorage(leadId);
                }
            },

            schedulePollPrepare(delay) {
                setTimeout(() => this.pollPrepare(), delay);
            },

            hasPollTimedOut() {
                return Date.now() - this.pollStartedAt > MAX_POLL_MS;
            },

            async pollPrepare() {
                if (!pid || this.prepareReady || this.pollInFlight) return;

                this.pollAttempts++;
                if (this.pollAttempts > MAX_POLL_ATTEMPTS || this.hasPollTimedOut()) {
                    this.reviewsLoading = false;
                    if (!this.reviewsLoaded) {
                        this.reviewsLoaded = true;
                        this.reviews = [];
                    }
                    return;
                }

                if (!leadId) {
                    this.schedulePollPrepare(POLL_DELAY_MS);
                    return;
                }

                this.pollInFlight = true;
                const q = new URLSearchParams({
                    pid: pid || '',
                    lead_id: String(leadId),
                    b: prefill.b || '',
                    n: prefill.n || '',
                    e: prefill.e || '',
                    p: prefill.p || '',
                });

                try {
                    const resp = await fetch(urls.prepare + '?' + q.toString(), { headers: { Accept: 'application/json' } });
                    const json = await resp.json().catch(() => null);

                    if (!json || json.ok === false) {
                        this.reviewsLoading = false;
                        this.reviewsLoaded = true;
                        return;
                    }

                    if (!json.data?.reviews?.length && (json.status === 'processing' || json.status === 'pending' || (!this.reviewsLoaded && !json.data?.noReviews))) {
                        this.reviewsLoading = true;
                    } else if (json.data) {
                        this.applyPreparePayload(json.data, !this.reviewsLoaded);
                    }

                    if (json.status === 'failed') {
                        this.reviewsLoading = false;
                        this.reviewsLoaded = true;
                        return;
                    }

                    if (this.prepareReady || this.isFirstReplyReady(json.data)) {
                        this.prepareReady = true;
                        this.reviewsLoading = false;
                        return;
                    }

                    if (json.data?.noReviews || (json.status === 'ready' && !json.data?.reviews?.length)) {
                        this.prepareReady = true;
                        this.reviewsLoading = false;
                        return;
                    }

                    this.schedulePollPrepare(POLL_DELAY_MS);
                } catch (e) {
                    if (this.hasPollTimedOut()) {
                        this.reviewsLoading = false;
                        this.reviewsLoaded = true;
                        return;
                    }
                    this.schedulePollPrepare(Math.max(POLL_DELAY_MS, 2000));
                } finally {
                    this.pollInFlight = false;
                }
            },

            async ensureReplyForCurrentIndex() {
                if (!this.reviews.length || !pid || !leadId) return;
                const r = this.reviews[this.revIndex];
                if (!r || String(r.aiReply || '').trim()) return;
                if (this.generatingReply) return;

                this.generatingReply = true;
                try {
                    const resp = await fetch(urls.generateReply, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        },
                        body: JSON.stringify({ lead_id: leadId, pid, review_index: this.revIndex }),
                    });
                    const json = await resp.json().catch(() => null);
                    if (json && json.ok && json.aiReply) {
                        this.reviews[this.revIndex].aiReply = this.decodeHtmlEntities(json.aiReply);
                    }
                } catch (e) {
                    // best-effort
                } finally {
                    this.generatingReply = false;
                }
            },

            async nextReview() {
                if (!this.reviews.length || this.generatingReply) return;
                this.revIndex = (this.revIndex + 1) % this.reviews.length;
                await this.ensureReplyForCurrentIndex();
            },

            async prevReview() {
                if (!this.reviews.length || this.generatingReply) return;
                this.revIndex = (this.revIndex - 1 + this.reviews.length) % this.reviews.length;
                await this.ensureReplyForCurrentIndex();
            },

            async goToReview(i) {
                if (this.generatingReply || !this.reviews.length) return;
                this.revIndex = i;
                await this.ensureReplyForCurrentIndex();
            },

            startPreparePolling() {
                if (initialPrepare && (initialPrepare.noReviews || (Array.isArray(initialPrepare.reviews) && initialPrepare.reviews.length))) {
                    this.applyPreparePayload(initialPrepare, true);
                    if (initialPrepare.status === 'ready' || this.isFirstReplyReady(initialPrepare)) {
                        this.prepareReady = true;
                    }
                } else if (initialPrepare && initialPrepare.business) {
                    this.applyPreparePayload(initialPrepare, true);
                }

                if (pid && leadId) {
                    this.reviewsLoading = !this.reviewsLoaded;
                    this.pollPrepare();
                } else if (pid) {
                    this.reviewsLoading = true;
                    const waitForLead = setInterval(() => {
                        if (leadId) {
                            clearInterval(waitForLead);
                            this.pollPrepare();
                        }
                    }, 500);
                    setTimeout(() => clearInterval(waitForLead), 30000);
                }
            },

            async init() {
                persistCalendlyLeadStorage(leadId);

                if (initialPrepare && (initialPrepare.business || initialPrepare.reviews?.length)) {
                    this.applyPreparePayload(initialPrepare, true);
                }

                if (openRegister) {
                    this.stripPostAuthParam('open_register');
                    openHomepageRegisterPopup();
                }

                if (postStripe) {
                    this.stripeSuccessMessage = 'Your 7-day free trial has started.';
                    this.step = 2;
                    await this.fetchPostCalendlyPreview();
                    await this.enableAutoInvites();
                    await this.track('stripe_checkout_complete');
                    this.stripPostAuthParam('post_stripe');
                    return;
                }

                if (postStripeCancel) {
                    this.step = 2;
                    await this.fetchPostCalendlyPreview();
                    await this.track('stripe_checkout_cancelled');
                    await this.track('view_plan_choice');
                    this.stripPostAuthParam('post_stripe_cancel');
                    return;
                }

                if (postGoogle) {
                    this.stripPostAuthParam('post_google');
                    if (openRegister || !(pid || '').trim()) {
                        openHomepageRegisterPopup();
                        return;
                    }
                    window.location.href = this.post.dashboardUrl || urls.dashboardUrl;
                    return;
                }

                if (postCalendly) {
                    this.step = 2;
                    await this.fetchPostCalendlyPreview();
                    await this.track('google_connected');
                    await this.track('view_post_connect_result');
                    if (startTrial) {
                        await this.onUpgrade();
                    }
                    this.stripPostAuthParam('post_calendly');
                    return;
                }

                if (connectCalendly) {
                    await this.onConnectCalendly();
                    return;
                }

                if (oauthError) {
                    this.stripPostAuthParam('oauth_error');
                }

                const startAt = Date.now();
                const minTotalMs = 3200;
                const loaderPromise = this.runLoader();
                const statsPromise = this.fetchStats();

                await Promise.allSettled([loaderPromise, statsPromise]);

                const elapsed = Date.now() - startAt;
                const remaining = Math.max(0, minTotalMs - elapsed);
                setTimeout(async () => {
                    this.step = 1;
                    await this.track('popup_opened');
                    this.setupDemoBar();
                    this.startPreparePolling();
                    if (!this.brandedTestSent) {
                        await this.autoSendBrandedTest();
                    }
                }, remaining);
            },

            applyPostPreviewData(data) {
                const appointmentsDetected = Number(data.appointmentsDetected ?? data.totalAppointments ?? 0);
                const invitesQueuedOrSent = Number(data.invitesQueuedOrSent ?? data.coveredAppointments ?? 0);
                const inviteLimit = Number(data.freeInviteLimit ?? data.inviteLimit ?? 25);

                this.post.businessName = data.businessName || this.fullBizName;
                this.post.periodLabel = data.periodLabel || ('Setup update · ' + new Date().toLocaleString('en-GB', { month: 'long', year: 'numeric' }));
                this.post.ownershipMode = data.ownershipMode || 'owned_business';
                this.post.appointmentsDetected = appointmentsDetected;
                this.post.appointmentsWithEmails = Number(data.appointmentsWithEmails || 0);
                this.post.invitesQueuedOrSent = invitesQueuedOrSent;
                this.post.invitesAttempted = Number(data.invitesAttempted || 0);
                this.post.total = appointmentsDetected;
                this.post.covered = invitesQueuedOrSent;
                this.post.rows = Array.isArray(data.appointmentRows) ? data.appointmentRows : [];
                this.post.showUpgrade = Boolean(data.showUpgrade);
                this.post.hasPaidInviteReply = Boolean(data.hasPaidInviteReply);
                this.post.invitesNeededEstimate = Number(data.invitesNeededEstimate || 0);
                this.post.inviteLimit = inviteLimit;
                this.post.freeInviteLimit = inviteLimit;
                this.post.replyLimit = Number(data.replyLimit || 5);
                this.post.proInviteLimit = Number(data.proInviteLimit || 2500);
                this.post.estimatedReviewsFree = Number(data.estimatedReviewsFree || 1);
                this.post.estimatedReviewsPro = Number(data.estimatedReviewsPro || 1);
                if (data.settingsUrl) this.post.settingsUrl = data.settingsUrl;
                if (data.upgradeUrl) this.post.upgradeUrl = data.upgradeUrl;
                if (data.dashboardUrl) this.post.dashboardUrl = data.dashboardUrl;
                if (data.connectedProviderLabel) this.post.connectedProviderLabel = data.connectedProviderLabel;

                const queued = invitesQueuedOrSent;
                this.post.queuedLabel = queued + ' invites queued';
                this.post.queuedSub = appointmentsDetected <= inviteLimit
                    ? 'all appointments covered — free plan'
                    : 'free plan · upgrade to cover all ' + appointmentsDetected;
                this.post.subline = appointmentsDetected <= inviteLimit
                    ? 'Every new review gets an AI reply posted automatically.'
                    : 'Every new review gets an AI reply for your approval before posting.';
                this.post.badgeSub = 'Review invites will fire after every appointment';

                if (data.hasLogo) this.ticked.logo = true;
                if (data.hasCustomInviteMessage) this.ticked.msg = true;
            },

            async fetchPostCalendlyPreview() {
                try {
                    const params = {
                        pid: pid || '',
                        b: prefill.b || '',
                        full_rows: '1',
                    };
                    if (leadId) params.lead_id = String(leadId);
                    const url = urls.postCalendlyPreview + '?' + new URLSearchParams(params);
                    const resp = await fetch(url, { headers: { 'Accept': 'application/json' } });
                    const json = await resp.json();
                    if (!json || !json.ok || !json.data) return false;
                    this.applyPostPreviewData(json.data);
                    return true;
                } catch (e) {
                    return false;
                }
            },

            stripPostAuthParam(key) {
                try {
                    const u = new URL(window.location.href);
                    u.searchParams.delete(key);
                    window.history.replaceState({}, '', u.pathname + u.search + u.hash);
                } catch (e) {}
            },

            async showChecklistAfterGoogleAuth() {
                this.googleConnectedLocal = true;
                await this.fetchPostCalendlyPreview();
                this.step = 4;
                await this.track('google_connected');
                await this.track('view_setup_checklist');
                try { Livewire?.dispatch?.('googleLoginSuccess'); } catch (e) {}
                this.stripPostAuthParam('post_google');
            },

            async handleGoogleSuccess() {
                if (this._googleSuccessHandled) return;
                this._googleSuccessHandled = true;

                this.connectingGoogle = false;
                await this.showChecklistAfterGoogleAuth();
            },

            runLoader() {
                const steps = [
                    { label: 'Searching your business...', pct: 33 },
                    { label: 'Calculating your review potential...', pct: 66 },
                    { label: '✓ Sending your free demo now', pct: 100 },
                ];
                this.loaderDone = false;
                let i = 0;

                return new Promise((resolve) => {
                    const tick = () => {
                        if (i >= steps.length) {
                            this.loaderDone = true;
                            resolve(true);
                            return;
                        }
                        this.loaderLabel = steps[i].label;
                        this.loaderPct = steps[i].pct;
                        i++;
                        setTimeout(tick, 900);
                    };
                    setTimeout(tick, 300);
                });
            },

            fmtInt(n) {
                try { return Number(n).toLocaleString('en-GB'); } catch (e) { return String(n); }
            },

            applyProjectionFromCount(count) {
                const current = Math.max(0, Number(count || 0));
                const invitesPerMonth = 2500;
                const gain = 1000;
                this.projection = {
                    current,
                    projected: current + gain,
                    gain,
                    invitesPerMonth,
                };
            },

            async autoSendBrandedTest() {
                if (this.brandedTestSent || this.autoSendingTest) return;
                this.autoSendingTest = true;

                const email = (prefill.e || '').trim();
                if (!email || !pid) {
                    this.autoSendingTest = false;
                    return;
                }

                try {
                    const resp = await fetch(urls.testInviteEmail, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            pid,
                            b: prefill.b || '',
                            n: prefill.n || '',
                            e: email,
                            lead_id: leadId,
                            page_url: window.location.href,
                        }),
                    });
                    const json = await resp.json();
                    if (json && json.lead_id) {
                        leadId = json.lead_id;
                        if (!this.prepareReady && !this.reviewsLoaded) {
                            this.pollPrepare();
                        }
                    }
                    if (json && json.projection) {
                        this.projection = json.projection;
                    } else {
                        this.applyProjectionFromCount(this.biz.reviewCount);
                    }
                    if (json && (json.sent || json.already_sent)) {
                        this.brandedTestSent = true;
                        this.setupDemoBar();
                    } else if (json && json.reviews_pending) {
                        this.brandedTestSent = false;
                    }
                } catch (e) {
                    this.applyProjectionFromCount(this.biz.reviewCount);
                } finally {
                    this.autoSendingTest = false;
                }
            },

            async fetchStats() {
                this.statsDone = false;
                if (!pid) return;
                try {
                    const url = urls.stats + '?' + new URLSearchParams({
                        pid,
                        b: prefill.b || '',
                        t: (new URLSearchParams(window.location.search).get('t') || ''),
                    });
                    const resp = await fetch(url, { headers: { 'Accept': 'application/json' } });
                    const json = await resp.json();
                    if (!json || !json.ok || !json.data) return;

                    const b = json.data.business || {};

                    this.biz = {
                        name: b.name || this.biz.name,
                        rating: b.rating ?? this.biz.rating,
                        reviewCount: b.reviewCount ?? this.biz.reviewCount,
                        category: (b.category || '') ?? this.biz.category,
                    };
                    if (b.name) {
                        this.syncPrefillBusinessName(b.name);
                    }
                    this.setupDemoBar();

                    this.applyProjectionFromCount(b.reviewCount ?? this.biz.reviewCount);
                } catch (e) {
                    // best-effort only
                } finally {
                    this.statsDone = true;
                }
            },

            async track(event, status = null) {
                try {
                    const body = {
                        lead_id: leadId,
                        pid,
                        b: prefill.b || '',
                        n: prefill.n || '',
                        e: prefill.e || '',
                        p: prefill.p || '',
                        event,
                        status: status || undefined,
                        page_url: window.location.href,
                    };
                    await fetch(urls.lead, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify(body),
                    }).then(r => r.json()).then(j => {
                        if (j && j.lead_id) {
                            leadId = j.lead_id;
                            persistCalendlyLeadStorage(leadId);
                        }
                    });
                } catch (e) {}
            },

            async onConnectCalendly() {
                if (this.connectingCalendly) return;
                if (!(pid || '').trim()) {
                    openHomepageRegisterPopup();
                    return;
                }
                this.connectingCalendly = true;
                await this.track('click_connect_calendly');

                const params = new URLSearchParams({
                    app: 'calendly',
                    return_to: 'calendly_invite_reply',
                    pid: pid || '',
                    lead_id: leadId || '',
                    b: prefill.b || '',
                    e: prefill.e || '',
                    n: prefill.n || '',
                    p: prefill.p || '',
                });
                window.location.href = urls.calendlyAuth + '?' + params.toString();
            },

            async onConnectGoogleCalendar() {
                if (this.connectingGoogleCalendar) return;
                if (!(pid || '').trim()) {
                    openHomepageRegisterPopup();
                    return;
                }
                this.connectingGoogleCalendar = true;
                this.oauthErrorMessage = '';
                await this.track('click_connect_google_calendar');

                const params = new URLSearchParams({
                    app: 'google-calendar',
                    return_to: 'calendly_invite_reply',
                    pid: pid || '',
                    lead_id: leadId || '',
                    b: prefill.b || '',
                    e: prefill.e || '',
                    n: prefill.n || '',
                    p: prefill.p || '',
                });
                window.location.href = urls.googleCalendarAuth + '?' + params.toString();
            },

            async onExploreDashboardClick() {
                persistCalendlyLeadStorage(leadId);
                await this.track('clicked_explore_dashboard');
                persistCalendlyLeadStorage(leadId);
                window.location.href = buildExploreDashboardUrl(leadId)
                    || urls.exploreDashboardUrl
                    || urls.dashboardUrl
                    || '/dashboard';
            },

            async onSeeHowItWorksClick() {
                return this.onExploreDashboardClick();
            },

            async onConnectGoogleReviews() {
                if (this.connectingGoogle) return;
                if (!(pid || '').trim()) {
                    openHomepageRegisterPopup();
                    return;
                }
                this.connectingGoogle = true;
                await this.track('click_connect_google');

                try {
                    await fetch(urls.lead, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            lead_id: leadId,
                            pid,
                            b: prefill.b || '',
                            n: prefill.n || '',
                            e: prefill.e || '',
                            p: prefill.p || '',
                            event: 'prepare_google_auth',
                            page_url: window.location.href,
                        }),
                    });
                } catch (e) {}

                this.openGoogleLoginPopup();
            },

            openGoogleLoginPopup() {
                const width = 500;
                const height = 600;
                const left = (window.innerWidth - width) / 2;
                const top = (window.innerHeight - height) / 2;
                const oauthSource = (typeof window.__rrOAuthSource === 'string' && window.__rrOAuthSource)
                    ? window.__rrOAuthSource
                    : 'google-calendly-invite-reply';
                const url = urls.googleLogin
                    + '?from_popup=true'
                    + '&source=' + encodeURIComponent(oauthSource)
                    + '&consent=1'
                    + '&redirect=calendly_invite_reply';

                const popup = window.open(
                    url,
                    'GoogleAuthPopup',
                    `width=${width},height=${height},left=${left},top=${top}`
                );

                const checkPopup = setInterval(() => {
                    if (popup && popup.closed) {
                        clearInterval(checkPopup);
                        this.connectingGoogle = false;
                    }
                }, 500);
            },

            async enableAutoInvites() {
                try {
                    await fetch(urls.enableAutoInvites, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({ pid: pid || '', b: prefill.b || '', lead_id: leadId || null }),
                    });
                } catch (e) {}
            },

            async onContinueFree() {
                if (this.enablingInvites) return;
                this.enablingInvites = true;
                await this.track('click_continue_free');
                await this.enableAutoInvites();
                this.enablingInvites = false;
                window.location.href = this.post.dashboardUrl || urls.dashboardUrl;
            },

            async onUpgrade() {
                if (this.upgrading) return;
                await this.track('click_upgrade');

                if (this.post.hasPaidInviteReply) {
                    await this.enableAutoInvites();
                    window.location.href = this.post.dashboardUrl || urls.dashboardUrl;
                    return;
                }

                this.upgrading = true;
                try {
                    const resp = await fetch(urls.prepareStripeCheckout, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            pid: pid || '',
                            lead_id: leadId,
                            b: prefill.b || '',
                            n: prefill.n || '',
                            e: prefill.e || '',
                            p: prefill.p || '',
                        }),
                    });
                    const json = await resp.json();
                    if (json && json.ok && json.checkoutUrl) {
                        window.location.href = json.checkoutUrl;
                        return;
                    }
                } catch (e) {}

                this.upgrading = false;
                window.location.href = this.post.upgradeUrl || urls.upgradeUrl;
            },

            async onChecklistPrimary() {
                await this.track('click_checklist_primary');
                window.location.href = this.post.settingsUrl || this.post.dashboardUrl || urls.dashboardUrl;
            },

            onClosePostAuth() {
                window.location.href = this.post.dashboardUrl || urls.dashboardUrl;
            },
        }
    }
</script>