Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Go Chiro Mobile - Full Scheduling Wizard</title>
    <style>
        :root {
            --gcm-blue: #2980b9;
            --gcm-dark: #2c3e50;
            --gcm-green: #27ae60;
            --gcm-orange: #e67e22;
            --gcm-light: #f4f7f6;
            --shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: transparent; margin: 0; padding: 0; }
        .page-container { max-width: 500px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); box-sizing: border-box; }
        
        .header { text-align: center; margin-bottom: 20px; }
        .header h1 { color: var(--gcm-dark); font-size: 1.5rem; margin: 0; }
        
        .policy-box { padding: 12px 15px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 20px; border-left: 5px solid transparent; }
        .policy-routine { background: #fff3cd; border-color: var(--gcm-orange); color: #856404; }
        .policy-returning { background: #f0f7ff; border-color: var(--gcm-blue); color: #004085; }

        .action-card { 
            width: 100%; background: white; border: 2px solid #eaeaea; border-radius: 12px; padding: 16px; 
            margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; 
            cursor: pointer; box-shadow: var(--shadow); transition: all 0.1s ease; text-align: left; box-sizing: border-box;
        }
        .action-card:hover { border-color: var(--gcm-dark); }
        .action-card:active { transform: translateY(2px); }
        
        .card-content strong { display: block; font-size: 1.05rem; color: var(--gcm-dark); }
        .card-content span { font-size: 0.8rem; color: #777; }
        .card-arrow { font-size: 1.2rem; }

        .region-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 15px 0; }
        .region-btn { padding: 18px; border-radius: 12px; border: 2px solid #eee; background: white; cursor: pointer; font-weight: bold; font-size: 1rem; width: 100%; box-shadow: var(--shadow); transition: 0.2s; }
        .region-btn.west { border-color: var(--gcm-orange); color: var(--gcm-orange); }
        .region-btn.central { border-color: var(--gcm-green); color: var(--gcm-green); }
        .region-btn.east { border-color: var(--gcm-blue); color: var(--gcm-blue); }

        .gcm-step { display: none; }
        .gcm-step.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        input { padding: 15px; width: 100%; max-width: 250px; border: 2px solid #ddd; border-radius: 10px; text-align: center; font-size: 1.2rem; display: block; margin: 0 auto 15px; box-sizing: border-box; }
        .back-link { display: block; text-align: center; margin-top: 20px; font-size: 0.9rem; color: #777; cursor: pointer; text-decoration: underline; }
    </style>
</head>
<body>

<div class="page-container" id="widget-top">
    <div class="header">
        <h1>Schedule Your Visit</h1>
    </div>

    <div id="gcm-wizard">
        <div id="step-1" class="gcm-step active">
            <h3 style="text-align:center;">When was your last visit?</h3>
            <div class="action-card" onclick="nav('region-select', 'current')">
                <div class="card-content"><strong>🗓️ Within the last year</strong><span>Active care or routine maintenance.</span></div>
                <div class="card-arrow">→</div>
            </div>
            <div class="action-card" onclick="nav('zip-check', 'returning')">
                <div class="card-content"><strong>🔄 Longer than a year ago</strong><span>Re-activation & Comprehensive Evaluation.</span></div>
                <div class="card-arrow">→</div>
            </div>
            <div class="action-card" onclick="nav('zip-check', 'new')">
                <div class="card-content"><strong>👋 I am a New Patient</strong><span>Initial consultation and clinical audit.</span></div>
                <div class="card-arrow">→</div>
            </div>
            <div class="action-card" onclick="nav('zip-check', 'group')">
                <div class="card-content"><strong>👥 Group Visit (2+ People)</strong><span>Sessions at your home or office.</span></div>
                <div class="card-arrow">→</div>
            </div>
        </div>

        <div id="step-region-select" class="gcm-step">
            <h3 style="text-align:center;">Select Your Region</h3>
            <div class="region-grid">
                <button class="region-btn west" onclick="setRegion('West')">WEST REGION</button>
                <button class="region-btn central" onclick="setRegion('Central')">CENTRAL REGION</button>
                <button class="region-btn east" onclick="setRegion('East')">EAST REGION</button>
            </div>
            <span class="back-link" onclick="nav('zip-check', flow)">Not sure? Check your Zip Code 📍</span>
            <span class="back-link" onclick="nav(1)">← Back</span>
        </div>

        <div id="step-zip-check" class="gcm-step">
            <h3 style="text-align:center;">Verify Coverage Area</h3>
            <input type="text" id="zipIn" placeholder="Zip Code" maxlength="5" inputmode="numeric">
            <div class="action-card" style="background: var(--gcm-dark); border: none;" onclick="checkZip()">
                <div class="card-content" style="width:100%; text-align:center;"><strong style="color:white;">Verify Location 📍</strong></div>
            </div>
            <div id="zipOut" style="text-align:center; margin-top:10px; font-weight:bold;"></div>
            <div id="nextBtn" class="action-card" style="display:none; justify-content:center;" onclick="proceed()">
                <div class="card-content" style="text-align:center;"><strong id="continueText">Continue to Booking →</strong></div>
            </div>
            <span class="back-link" onclick="nav(1)">← Back</span>
        </div>

        <div id="step-visit-choice" class="gcm-step">
            <h3 id="choice-header" style="text-align:center;">Select Visit Type</h3>
            <div id="policy-area"></div>
            
            <div id="current-options" style="display:none;">
                <div class="action-card" onclick="book('wellness')">
                    <div class="card-content"><strong>📅 Routine Wellness Visit</strong><span>Maintenance adjustment for active care.</span></div>
                    <div class="card-arrow" id="well-arrow">→</div>
                </div>
                <div class="action-card" style="border-color: #e74c3c;" onclick="book('urgent')">
                    <div class="card-content"><strong>⚡ Urgent Flare-up / Crisis</strong><span>Priority stabilization for acute pain.</span></div>
                    <div class="card-arrow" style="color:#e74c3c">→</div>
                </div>
                <div class="action-card" id="comp-clinical-btn" onclick="book('restorative')">
                    <div class="card-content">
                        <strong id="comp-clinical-title">🛠️ Comprehensive Clinical Visit (40m)</strong>
                        <span>In-depth structural work and functional correction.</span>
                    </div>
                    <div class="card-arrow" id="comp-clinical-arrow">→</div>
                </div>
            </div>

            <div id="new-options" style="display:none;">
                <div id="targeted-relief-card">
                    <div class="action-card" id="targeted-btn" onclick="book('target')">
                        <div class="card-content">
                            <strong id="target-title">Evaluation & Treatment ($100)</strong>
                            <span>Comprehensive examination & treatment if warranted.</span>
                        </div>
                        <div class="card-arrow" id="target-arrow">→</div>
                    </div>
                </div>
                <div class="action-card" id="comp-btn" onclick="book('comprehensive')">
                    <div class="card-content">
                        <strong>🔎 Comprehensive Evaluation ($140)</strong>
                        <span>Deep-dive clinical audit and structural analysis.</span>
                    </div>
                    <div class="card-arrow" id="comp-arrow">→</div>
                </div>
            </div>
            <span class="back-link" onclick="nav(1)">← Back to Start</span>
        </div>

        <div id="step-group-choice" class="gcm-step">
            <h3 style="text-align:center;">Select Group Size</h3>
            <div class="action-card" onclick="proceedGroup()">
                <div class="card-content"><strong>👥 2 People</strong><span>Joint session at one location.</span></div>
                <div class="card-arrow">→</div>
            </div>
            <div class="action-card" onclick="window.location.href='https://koalendar.com/e/group-visit-3-4'">
                <div class="card-content"><strong>🏠 3-4 People</strong><span>Family or small group session.</span></div>
                <div class="card-arrow">→</div>
            </div>
            <div class="action-card" onclick="window.location.href='https://koalendar.com/e/group-visit-5-6'">
                <div class="card-content"><strong>🏢 5-6 People</strong><span>Corporate or event sessions.</span></div>
                <div class="card-arrow">→</div>
            </div>
            <span class="back-link" onclick="nav(1)">← Back to Start</span>
        </div>
    </div>
</div>

<script>
    let activeZone = '';
    let flow = '';
    const zipData = {
        'West': ['19317', '19342', '19060', '19061', '19703', '19803', '19810'],
        'Central': ['19063', '19037', '19086', '19014', '19015'],
        'East': ['19064', '19083', '19081', '19082', '19018', '19050', '19026']
    };

    function nav(id, type) {
        document.querySelectorAll('.gcm-step').forEach(s => s.classList.remove('active'));
        document.getElementById('step-' + id).classList.add('active');
        if (type) flow = type;
        document.getElementById('widget-top').scrollIntoView({behavior: 'smooth', block: 'start'});
    }

    function setRegion(zone) {
        activeZone = zone;
        showFinalVisitChoices();
    }

    function checkZip() {
        const val = document.getElementById('zipIn').value.trim();
        const res = document.getElementById('zipOut');
        const btn = document.getElementById('nextBtn');
        const text = document.getElementById('continueText');
        activeZone = '';
        
        for (const [zone, zips] of Object.entries(zipData)) {
            if (zips.includes(val)) { activeZone = zone; break; }
        }

        if (activeZone) {
            const colors = {'West': '#e67e22', 'Central': '#27ae60', 'East': '#2980b9'};
            res.innerHTML = `<span style="color:${colors[activeZone]}">✓ ${activeZone} Region Found</span>`;
            btn.style.display = 'flex';
            btn.style.borderColor = colors[activeZone];
            text.style.color = colors[activeZone];
        } else {
            res.innerHTML = `<div class="action-card" style="border-color:var(--gcm-blue);" onclick="window.location.href='https://gochiromobile.com/contact'"><div class="card-content"><strong>📍 Outside standard area?</strong><span>Contact for Special Consideration.</span></div><div class="card-arrow">→</div></div>`;
            btn.style.display = 'none';
        }
    }

    function proceed() {
        showFinalVisitChoices();
    }

    function showFinalVisitChoices() {
        const policyArea = document.getElementById('policy-area');
        const currentOps = document.getElementById('current-options');
        const newOps = document.getElementById('new-options');
        
        const targetBtn = document.getElementById('targeted-btn');
        const targetTitle = document.getElementById('target-title');
        const targetArrow = document.getElementById('target-arrow');
        
        const compBtn = document.getElementById('comp-btn');
        const compArrow = document.getElementById('comp-arrow');

        const compClinicalBtn = document.getElementById('comp-clinical-btn');
        const compClinicalTitle = document.getElementById('comp-clinical-title');
        const compClinicalArrow = document.getElementById('comp-clinical-arrow');
        const wellArrow = document.getElementById('well-arrow');

        const colors = {'West': '#e67e22', 'Central': '#27ae60', 'East': '#2980b9'};
        const activeColor = colors[activeZone];
        
        document.getElementById('choice-header').innerHTML = `<span style="color:${activeColor}">${activeZone} Region Care</span>`;
        
        if (flow === 'current') {
            policyArea.innerHTML = `<div class="policy-box policy-routine">⚡ <b>Urgent?</b> Select Flare-up. <br>📅 <b>Routine:</b> Wellness visits require 24h notice.</div>`;
            currentOps.style.display = 'block';
            newOps.style.display = 'none';

            compClinicalBtn.style.borderColor = activeColor;
            compClinicalTitle.style.color = activeColor;
            compClinicalArrow.style.color = activeColor;
            wellArrow.style.color = activeColor;
        } else {
            policyArea.innerHTML = '';
            currentOps.style.display = 'none';
            newOps.style.display = 'block';
            
            targetBtn.style.borderColor = activeColor;
            targetTitle.style.color = activeColor;
            targetArrow.style.color = activeColor;
            compBtn.style.borderColor = activeColor;
            compArrow.style.color = activeColor;

            if (flow === 'returning') {
                policyArea.innerHTML = `<div class="policy-box policy-returning">🔄 <b>Re-Activation:</b> A clinical exam is required for visits over 12 months apart.</div>`;
            }
        }
        nav('visit-choice');
    }

    function proceedGroup() {
        const glinks = {'West':'https://koalendar.com/e/group-2-3-W','Central':'https://koalendar.com/e/group-visit-C','East':'https://koalendar.com/e/group-visit-E-2'};
        window.location.href = glinks[activeZone];
    }

    function book(type) {
        const links = {
            'East': {'wellness': 'https://koalendar.com/e/EP-WE', 'urgent': 'https://koalendar.com/e/RP-SFE', 'restorative': 'https://koalendar.com/e/RP-RSTE', 'comprehensive': 'https://koalendar.com/e/NP-SE', 'target': 'https://koalendar.com/e/NP-TWE2'},
            'Central': {'wellness': 'https://koalendar.com/e/EP-WC', 'urgent': 'https://koalendar.com/e/RP-SFC', 'restorative': 'https://koalendar.com/e/RP-RSTC', 'comprehensive': 'https://koalendar.com/e/NP-SC', 'target': 'https://koalendar.com/e/NP-TWE2-2'},
            'West': {'wellness': 'https://koalendar.com/e/EP-WW', 'urgent': 'https://koalendar.com/e/RP-SFW', 'restorative': 'https://koalendar.com/e/RP-RSTW', 'comprehensive': 'https://koalendar.com/e/NP-SW', 'target': 'https://koalendar.com/e/NP-TW2'}
        };
        window.location.href = links[activeZone][type];
    }
</script>

</body>
</html>

David DeFries