{{-- Inline loading patti (same page) - shown inside hero when user clicks "Check My Address" --}}
<div id="fullAddressCheckLoader" class="gc-loading-patti" aria-hidden="true" style="display: none;">
    <div class="gc-patti-top-bar"></div>
    <div class="gc-patti-body">
        <div class="d-flex align-items-center gap-3 mb-2">
            <div id="gcAlSpinner" class="gc-patti-spinner"></div>
            <div id="gcAlDone" class="gc-patti-done" style="display:none;"><i class="bi bi-check-lg"></i></div>
            <div class="flex-grow-1">
                <div class="gc-patti-status" id="gcAlStatusMsg">Checking your address…</div>
                <div class="gc-patti-sub" id="gcAlStatusSub">Verifying NBN availability in Greater Sydney</div>
            </div>
        </div>
        <div class="d-flex justify-content-between align-items-center mb-1">
            <div class="d-flex gap-1" id="gcAlStepDots"></div>
            <div class="gc-patti-pct" id="gcAlPctBadge">0%</div>
        </div>
        <div class="gc-patti-track mb-2">
            <div class="gc-patti-fill" id="gcAlProgFill"></div>
        </div>
        <div class="gc-patti-eta mb-2" id="gcAlEtaTxt">Connecting to Sydney NBN network…</div>
        <div class="gc-patti-engage">
            <div class="gc-patti-etag" id="gcAlEtag">📡 Checking coverage</div>
            <div class="gc-patti-eslide" id="gcAlEslide">
                <div class="d-flex align-items-start gap-2">
                    <div class="gc-patti-eicon" id="gcAlEicon">🗺️</div>
                    <div style="flex:1">
                        <div class="gc-patti-etitle" id="gcAlEtitle">Scanning your area…</div>
                        <div class="gc-patti-ebody" id="gcAlEbody">Looking up NBN availability at your address.</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gc-patti-footer">
            <div class="d-flex gap-2 align-items-center">
                <span class="gc-patti-dot"></span>
                <span class="gc-patti-dot"></span>
                <span class="gc-patti-dot"></span>
                <span class="gc-patti-live">Live NBN Check</span>
            </div>
        </div>
    </div>
</div>

@push('css')
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;500&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
<style>
/* Inline loading patti - same box as hero search (no extra card, same colors) */
.hero-card .gc-loading-patti {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    margin: 0;
    max-width: none;
}
.gc-patti-top-bar {
    height: 4px;
    background: linear-gradient(90deg, #c0121f, #e8192c, #ff6b6b, #e8192c);
    background-size: 300% 100%;
    animation: gcPattiBar 2.5s linear infinite;
}
@keyframes gcPattiBar {
    0%   { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}
.gc-patti-body { padding: 1.25rem 1.5rem; font-family: 'Inter', 'Open Sans', sans-serif; }
.gc-patti-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2.5px solid rgba(232, 25, 44, .25);
    border-top-color: #e8192c;
    animation: gcPattiSpin 1s linear infinite;
    flex-shrink: 0;
}
@keyframes gcPattiSpin { to { transform: rotate(360deg); } }
.gc-patti-done {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(34, 197, 94, .15);
    border: 2px solid #22c55e;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gc-patti-done i { color: #22c55e; font-size: 1.1rem; }
.gc-patti-status {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.95rem; font-weight: 700;
    color: #333;
    transition: opacity .25s ease;
}
.gc-patti-status.gc-al-fade { opacity: 0; }
.gc-patti-sub {
    font-size: 0.78rem; color: #555;
    transition: opacity .25s ease;
}
.gc-patti-sub.gc-al-fade { opacity: 0; }
.gc-patti-pct {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.8rem; font-weight: 700; color: #e8192c;
}
.gc-patti-track {
    height: 6px; border-radius: 99px;
    background: #eee;
    overflow: hidden;
}
.gc-patti-fill {
    height: 100%; width: 0%; border-radius: 99px;
    background: linear-gradient(90deg, #c0121f, #e8192c);
    transition: width .5s ease;
}
.gc-patti-eta { font-size: 0.7rem; color: #666; }
.gc-patti-engage {
    background: #f9f9fb;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
}
.gc-patti-etag {
    font-size: 0.6rem; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 700; color: #e8192c; margin-bottom: 0.25rem;
}
.gc-patti-eicon { font-size: 1.1rem; flex-shrink: 0; }
.gc-patti-etitle {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.82rem; font-weight: 700; color: #333;
}
.gc-patti-ebody { font-size: 0.72rem; color: #555; line-height: 1.4; }
.gc-patti-eslide { transition: opacity .3s ease, transform .3s ease; }
.gc-patti-eslide.gc-al-out { opacity: 0; transform: translateX(8px); }
.gc-patti-footer { padding-top: 0.5rem; border-top: 1px solid #eee; }
.gc-patti-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #e8192c;
    animation: gcPattiDot 1.2s ease-in-out infinite;
}
.gc-patti-dot:nth-child(2) { animation-delay: .15s; }
.gc-patti-dot:nth-child(3) { animation-delay: .3s; }
@keyframes gcPattiDot {
    0%, 80%, 100% { opacity: .3; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.3); }
}
.gc-patti-live { font-size: 0.68rem; color: #666; margin-left: 0.15rem; }
.gc-al-sdot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ddd;
    transition: background .3s, transform .3s;
}
.gc-al-sdot.gc-al-done { background: rgba(232, 25, 44, .5); }
.gc-al-sdot.gc-al-active { background: #e8192c; transform: scale(1.4); }
</style>
@endpush

@push('scripts')
<script>
(function () {
    var MIN_MS = 4000;
    var apiDone = false;
    var redirectUrl = null;
    var stepIntervalId = null;
    var smoothIntervalId = null;
    var checkDoneTimeoutId = null;
    var engageIntervalId = null;
    var etaIntervalId = null;

    var STEPS = [
        { msg: 'Checking your address…',           sub: 'Verifying NBN availability in Greater Sydney',  pct: 5  },
        { msg: 'Scanning network infrastructure…', sub: 'Locating the nearest NBN node to your location', pct: 20 },
        { msg: 'Loading your plan options…',        sub: 'Finding the best NBN speeds for your area',      pct: 36 },
        { msg: 'Verifying service eligibility…',   sub: 'Checking NBN HFC, FTTP & FTTN coverage',         pct: 54 },
        { msg: 'Preparing your results…',          sub: 'Fetching latest plans & pricing for your area',  pct: 74 },
        { msg: 'Almost there…',                    sub: 'Finalising your personalised NBN results',       pct: 90 },
        { msg: 'Your connection is ready! 🎉',     sub: 'Fast Internet. Real Impact. Right in Sydney.',   pct: 100 },
    ];
    var ENGAGE = [
        { tag: '📡 Coverage Update', icon: '🗺️', title: 'We cover all of Greater Sydney', body: 'From Sydney CBD to Northern Beaches — our NBN network has you covered.' },
        { tag: '💡 Did You Know?', icon: '🌱', title: 'Internet that gives back', body: 'For every customer who joins, we donate to local Sydney charities.' },
        { tag: '💡 Did You Know?', icon: '🔒', title: 'No contracts. Ever.', body: 'Month-to-month plans with no exit fees, no setup costs. Cancel anytime.' },
        { tag: '⚡ Speed Guide', icon: '📺', title: 'Which speed do you need?', body: '100 Mbps: streamers. 500 Mbps: work + gaming. 1000 Mbps: whole family, 4K.' },
        { tag: '💡 Did You Know?', icon: '🤝', title: '15,000+ Sydney households', body: 'Local team, local support — Mon–Fri from our Sydney office.' },
    ];

    function getEl(id) { return document.getElementById(id); }
    var loaderEl = null;
    var statusMsg = null, statusSub = null, progFill = null, pctBadge = null, etaTxt = null, stepDots = null;
    var etag = null, eslide = null, eicon = null, etitle = null, ebody = null;
    var spinnerEl = null, doneEl = null;
    var currentStep = 0, finished = false, startTime = 0, engageIdx = -1;

    function clearAllIntervals() {
        if (stepIntervalId) { clearTimeout(stepIntervalId); stepIntervalId = null; }
        if (smoothIntervalId) { clearInterval(smoothIntervalId); smoothIntervalId = null; }
        if (checkDoneTimeoutId) { clearTimeout(checkDoneTimeoutId); checkDoneTimeoutId = null; }
        if (engageIntervalId) { clearInterval(engageIntervalId); engageIntervalId = null; }
        if (etaIntervalId) { clearInterval(etaIntervalId); etaIntervalId = null; }
    }

    function setStep(idx) {
        if (!statusMsg || !statusSub || !progFill || !pctBadge || !stepDots) return;
        var s = STEPS[Math.min(idx, STEPS.length - 1)];
        statusMsg.classList.add('gc-al-fade');
        statusSub.classList.add('gc-al-fade');
        setTimeout(function () {
            statusMsg.textContent = s.msg;
            statusSub.textContent = s.sub;
            statusMsg.classList.remove('gc-al-fade');
            statusSub.classList.remove('gc-al-fade');
        }, 250);
        progFill.style.width = s.pct + '%';
        pctBadge.textContent = s.pct + '%';
        var dots = stepDots.querySelectorAll('.gc-al-sdot');
        dots.forEach(function (d, i) {
            d.className = 'gc-al-sdot' + (i < idx ? ' gc-al-done' : i === idx ? ' gc-al-active' : '');
        });
    }

    function showEngage() {
        if (!etag || !eicon || !etitle || !ebody || !eslide) return;
        engageIdx = (engageIdx + 1) % ENGAGE.length;
        var e = ENGAGE[engageIdx];
        eslide.classList.add('gc-al-out');
        setTimeout(function () {
            etag.textContent = e.tag;
            eicon.textContent = e.icon;
            etitle.textContent = e.title;
            ebody.textContent = e.body;
            eslide.classList.remove('gc-al-out');
        }, 350);
    }

    function updateEta() {
        if (!etaTxt) return;
        var elapsed = Date.now() - startTime;
        var remaining = Math.max(0, MIN_MS - elapsed);
        if (remaining <= 0 && apiDone) {
            etaTxt.textContent = 'Finalising your results…';
            return;
        }
        var secs = Math.ceil(remaining / 1000);
        etaTxt.textContent = remaining > 0
            ? 'Estimated wait: ~' + secs + ' second' + (secs !== 1 ? 's' : '') + ' — checking NBN in your area'
            : 'Waiting for network response…';
    }

    function checkDone() {
        if (!loaderEl || !spinnerEl || !doneEl || !progFill || !pctBadge || !etaTxt) return;
        var elapsed = Date.now() - startTime;
        if (apiDone && elapsed >= MIN_MS) {
            finished = true;
            clearAllIntervals();
            spinnerEl.style.display = 'none';
            doneEl.style.display = 'flex';
            setStep(STEPS.length - 1);
            progFill.style.width = '100%';
            pctBadge.textContent = '100%';
            etaTxt.textContent = 'NBN check complete — your results are ready!';
            if (redirectUrl) {
                window.location.href = redirectUrl;
            }
        } else {
            checkDoneTimeoutId = setTimeout(checkDone, 300);
        }
    }

    window.__startAddressCheckLoader = function () {
        loaderEl = document.getElementById('fullAddressCheckLoader');
        var formWrap = document.getElementById('heroFormWrap');
        if (!loaderEl) return;
        if (formWrap) formWrap.style.display = 'none';
        statusMsg = getEl('gcAlStatusMsg');
        statusSub = getEl('gcAlStatusSub');
        progFill = getEl('gcAlProgFill');
        pctBadge = getEl('gcAlPctBadge');
        etaTxt = getEl('gcAlEtaTxt');
        stepDots = getEl('gcAlStepDots');
        etag = getEl('gcAlEtag');
        eslide = getEl('gcAlEslide');
        eicon = getEl('gcAlEicon');
        etitle = getEl('gcAlEtitle');
        ebody = getEl('gcAlEbody');
        spinnerEl = getEl('gcAlSpinner');
        doneEl = getEl('gcAlDone');
        apiDone = false;
        redirectUrl = null;
        finished = false;
        currentStep = 0;
        startTime = Date.now();
        engageIdx = -1;
        clearAllIntervals();
        loaderEl.style.display = 'block';
        loaderEl.setAttribute('aria-hidden', 'false');
        if (spinnerEl) spinnerEl.style.display = '';
        if (doneEl) doneEl.style.display = 'none';
        if (progFill) progFill.style.width = '0%';
        if (pctBadge) pctBadge.textContent = '0%';
        setStep(0);
        var dots = stepDots;
        if (dots) {
            dots.innerHTML = '';
            for (var i = 0; i < STEPS.length - 1; i++) {
                var d = document.createElement('div');
                d.className = 'gc-al-sdot' + (i === 0 ? ' gc-al-active' : '');
                dots.appendChild(d);
            }
        }
        showEngage();
        engageIntervalId = setInterval(showEngage, 6500);
        etaIntervalId = setInterval(updateEta, 1000);
        updateEta();
        var stepMs = MIN_MS / (STEPS.length - 1);
        function advanceStep() {
            if (finished) return;
            currentStep++;
            setStep(Math.min(currentStep, STEPS.length - 2));
            if (currentStep < STEPS.length - 2) {
                stepIntervalId = setTimeout(advanceStep, stepMs);
            }
        }
        stepIntervalId = setTimeout(advanceStep, stepMs);
        var smoothPct = 0;
        smoothIntervalId = setInterval(function () {
            var target = STEPS[Math.min(currentStep, STEPS.length - 2)].pct;
            if (smoothPct < target - 1) {
                smoothPct += 0.32;
                if (progFill) progFill.style.width = smoothPct + '%';
                if (pctBadge) pctBadge.textContent = Math.round(smoothPct) + '%';
            }
        }, 80);
        checkDoneTimeoutId = setTimeout(checkDone, 300);
    };

    window.__addressCheckApiReady = function (url) {
        apiDone = true;
        redirectUrl = url || null;
    };

    window.__addressCheckApiFailed = function (msg) {
        clearAllIntervals();
        finished = true;
        var loaderEl = document.getElementById('fullAddressCheckLoader');
        var formWrap = document.getElementById('heroFormWrap');
        if (loaderEl) {
            loaderEl.style.display = 'none';
            loaderEl.setAttribute('aria-hidden', 'true');
        }
        if (formWrap) formWrap.style.display = '';
        if (typeof msg === 'string' && msg) {
            alert(msg);
        } else {
            alert('Could not check availability. Please try again.');
        }
    };
})();
</script>
@endpush