{"id":6710,"date":"2026-02-10T04:28:06","date_gmt":"2026-02-10T04:28:06","guid":{"rendered":"https:\/\/dev.mathconcept.com\/?page_id=6710"},"modified":"2026-04-22T00:42:54","modified_gmt":"2026-04-22T08:42:54","slug":"assessment-booking","status":"publish","type":"page","link":"https:\/\/dev.mathconcept.com\/en\/assessment-booking\/","title":{"rendered":"\u9810\u7d04\u8a55\u4f30"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6710\" class=\"elementor elementor-6710\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ca6f86 e-flex e-con-boxed e-con e-parent\" data-id=\"9ca6f86\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a0e9a72 elementor-widget elementor-widget-shortcode\" data-id=\"a0e9a72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"mc-booking-system-root\">\n        <div style=\"padding: 100px; text-align: center; color: #ccc; font-family: sans-serif;\">\n            \u6b63\u5728\u8f09\u5165\u4e92\u52d5\u5730\u5716\u9810\u7d04\u7cfb\u7d71...\n        <\/div>\n    <\/div>\n    <!-- 1. \u8f09\u5165 Tailwind \u8207\u76f8\u95dc\u5eab -->\n<script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n<script>\n    \/\/ \u53d6\u6d88\u81ea\u5b9a\u7fa9\u984f\u8272\u8a2d\u5b9a\u907f\u514d WordPress \u8173\u672c\u885d\u7a81\uff0c\u50c5\u4fdd\u7559 preflight \u8a2d\u5b9a\n    tailwind.config = { corePlugins: { preflight: false } };\n<\/script>\n<script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyAp9oEN42qdkbYH3Hv8GKaH3njbBHSB3dw\"><\/script>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Public+Sans:wght@400;700;900&family=Noto+Sans+TC:wght@400;700&display=swap\" rel=\"stylesheet\"\/>\n<link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\n\n<!-- 2. \u7cfb\u7d71\u6a23\u5f0f (\u91dd\u5c0d WordPress \u74b0\u5883\u512a\u5316) -->\n<style>\n    #mc-booking-system-root { \n        position: relative;\n        width: 100%;\n        \/* \u7e2e\u5c0f\u9ad8\u5ea6\uff0c\u4e26\u4f7f\u7528 calc \u9810\u7559\u7db2\u7ad9\u4e0a\u65b9 Header \u7684\u7a7a\u9593 *\/\n        height: 70vh; \n        max-height: calc(100vh - 90px); \n        min-height: 520px; \/* \u964d\u4f4e\u6700\u5c0f\u9ad8\u5ea6\uff0c\u9069\u61c9\u5c0f\u87a2\u5e55\u624b\u6a5f *\/\n        display: flex;\n        flex-direction: column;\n        background-color: #f7f9fb;\n        font-family: 'Public Sans', 'Noto Sans TC', sans-serif !important;\n        border-radius: 1.5rem;\n        overflow: hidden;\n        box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1);\n        border: 1px solid #e2e8f0;\n        z-index: 10; \n        margin-top: 0.5rem; \/* \u7e2e\u5c0f\u8207\u7db2\u7ad9 Header \u7684\u9593\u8ddd *\/\n        margin-bottom: 1rem;\n    }\n\n    @media (min-width: 768px) {\n        #mc-booking-system-root {\n            height: 70vh;\n            max-height: 800px;\n            min-height: 600px;\n            margin-top: 1.5rem;\n            margin-bottom: 2rem;\n            border-radius: 2rem;\n        }\n    }\n\n    #mc-booking-system-root .main-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }\n    \n    \/* \u96b1\u85cf\u539f\u751f\u6372\u8ef8\u4f46\u4fdd\u7559\u6ed1\u52d5\u529f\u80fd *\/\n    #mc-booking-system-root .hide-scrollbar::-webkit-scrollbar { display: none; }\n    #mc-booking-system-root .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n\n    #mc-booking-system-root .custom-scroll::-webkit-scrollbar { width: 6px; }\n    #mc-booking-system-root .custom-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }\n\n    \/* \u8abf\u6574\u624b\u6a5f\u7248 Region \u6309\u9215\u5927\u5c0f *\/\n    #mc-booking-system-root .region-btn { \n        border: none; \n        padding: 12px 16px; \n        font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; \n        width: 100%; background: transparent; color: #64748b; \n    }\n    @media (min-width: 1024px) {\n        #mc-booking-system-root .region-btn { padding: 18px 24px; gap: 12px; justify-content: flex-start; }\n    }\n    \n    #mc-booking-system-root .region-active { background: #e1251b !important; color: white !important; }\n    \n    #mc-booking-system-root .mkt-card { border: 2px solid #f1f5f9; transition: 0.3s; background: white; border-radius: 1.25rem; }\n    #mc-booking-system-root .mkt-card.selected { border-color: #e1251b; background-color: #e1251b; color: white; }\n    \n    #mc-booking-system-root input, \n    #mc-booking-system-root select { \n        appearance: none; background-color: white; border: 2px solid #f1f5f9; \n        height: 3rem; \/* \u7a0d\u5fae\u58d3\u7e2e\u8f38\u5165\u6846\u9ad8\u5ea6\u7bc0\u7701\u7a7a\u9593 *\/\n        padding: 0 1rem; border-radius: 0.75rem; width: 100%; \n        outline: none; margin: 0; box-sizing: border-box;\n        font-family: inherit; font-size: 15px;\n    }\n    @media (min-width: 768px) {\n        #mc-booking-system-root input, \n        #mc-booking-system-root select { height: 3.5rem; padding: 0 1.25rem; border-radius: 1rem; }\n    }\n    #mc-booking-system-root input:focus, \n    #mc-booking-system-root select:focus { border-color: #e1251b; }\n\n    \/* \u58d3\u7e2e\u5e95\u90e8\u6309\u9215\u5217\u7684\u9ad8\u5ea6\uff0c\u78ba\u4fdd\u4e0d\u6703\u88ab\u64e0\u51fa\u756b\u9762 *\/\n    #mc-booking-system-root .fixed-footer {\n        height: 72px; flex-shrink: 0; background: white;\n        border-top: 1px solid #f1f5f9; display: flex; align-items: center;\n        padding: 0 1rem; z-index: 100;\n    }\n    @media (min-width: 768px) {\n        #mc-booking-system-root .fixed-footer { height: 90px; padding: 0 2rem; }\n    }\n<\/style>\n\n<!-- 4. \u7cfb\u7d71\u4e3b\u7a0b\u5f0f -->\n<script type=\"text\/babel\">\nconst { useState, useEffect, useRef } = React;\n\nconst BookingApp = () => {\n    const [step, setStep] = useState(1);\n    const[centers, setCenters] = useState([]);\n    const[region, setRegion] = useState('HK');\n    const[data, setData] = useState({ studentName: '', grade: '', schoolName: '', course: '', selectedCenter: null });\n\n    const mapRef = useRef(null);\n    const markersRef = useRef([]);\n\n    useEffect(() => {\n        fetch('\/wp-json\/mathconcept\/v1\/centers')\n            .then(r => {\n                if (!r.ok) throw new Error('API not found');\n                return r.json();\n            })\n            .then(d => setCenters(d))\n            .catch(err => {\n                console.warn('WordPress API fetch failed, using fallback data.');\n                setCenters([\n                    { id: 1, name: '\u9285\u947c\u7063\u5206\u6821', region: 'HK', address: '\u9999\u6e2f\u9285\u947c\u7063\u8ed2\u5c3c\u8a69\u9053', lat: 22.2800, lng: 114.1800, whatsapp: '12345678' },\n                    { id: 2, name: '\u592a\u53e4\u5206\u6821', region: 'HK', address: '\u9999\u6e2f\u592a\u53e4\u57ce\u9053', lat: 22.2865, lng: 114.2185, whatsapp: '12345678' },\n                    { id: 3, name: '\u65fa\u89d2\u5206\u6821', region: 'KLN', address: '\u4e5d\u9f8d\u65fa\u89d2\u5f4c\u6566\u9053', lat: 22.3193, lng: 114.1694, whatsapp: '23456789' },\n                    { id: 4, name: '\u6c99\u7530\u5206\u6821', region: 'NTE', address: '\u65b0\u754c\u6c99\u7530\u6b63\u8857', lat: 22.3800, lng: 114.1900, whatsapp: '34567890' },\n                    { id: 5, name: '\u8343\u7063\u5206\u6821', region: 'NTW', address: '\u65b0\u754c\u8343\u7063\u5927\u6cb3\u9053', lat: 22.3700, lng: 114.1100, whatsapp: '45678901' }\n                ]);\n            });\n    },[]);\n\n    useEffect(() => {\n        if (step === 2) {\n            const timer = setTimeout(() => {\n                const mapEl = document.getElementById('map-canvas-main');\n                if (mapEl && window.google) {\n                    if (!mapRef.current) {\n                        mapRef.current = new google.maps.Map(mapEl, {\n                            center: { lat: 22.3193, lng: 114.1694 },\n                            zoom: 11,\n                            disableDefaultUI: false,\n                            zoomControl: true\n                        });\n                    }\n                    updateMarkers();\n                }\n            }, 100);\n            return () => clearTimeout(timer);\n        }\n    }, [step]);\n\n    useEffect(() => {\n        if (step === 2 && mapRef.current) updateMarkers();\n    }, [region, centers]);\n\n    const updateMarkers = () => {\n        if (!mapRef.current) return;\n        markersRef.current.forEach(m => m.setMap(null));\n        markersRef.current =[];\n        const filtered = centers.filter(c => c.region === region);\n        const bounds = new google.maps.LatLngBounds();\n        \n        filtered.forEach(c => {\n            if (c.lat && c.lng) {\n                const marker = new google.maps.Marker({\n                    position: { lat: parseFloat(c.lat), lng: parseFloat(c.lng) },\n                    map: mapRef.current,\n                    icon: 'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/red-dot.png'\n                });\n                marker.addListener('click', () => handleCenterSelect(c));\n                markersRef.current.push(marker);\n                bounds.extend(marker.getPosition());\n            }\n        });\n        if (filtered.length > 0 && !data.selectedCenter) mapRef.current.fitBounds(bounds);\n    };\n\n    const handleRegionSelect = (id) => {\n        setData(prev => ({ ...prev, selectedCenter: null })); \n        \n        if (region !== id) {\n            setRegion(id);\n        } else {\n            if (mapRef.current) {\n                const filtered = centers.filter(c => c.region === id);\n                const bounds = new google.maps.LatLngBounds();\n                let hasValidCoords = false;\n                filtered.forEach(c => {\n                    if (c.lat && c.lng) {\n                        bounds.extend({ lat: parseFloat(c.lat), lng: parseFloat(c.lng) });\n                        hasValidCoords = true;\n                    }\n                });\n                if (hasValidCoords) mapRef.current.fitBounds(bounds);\n            }\n        }\n    };\n\n   const handleCenterSelect = (center) => {\n        setData(prev => ({ ...prev, selectedCenter: center }));\n        if (mapRef.current) {\n            const pos = { lat: parseFloat(center.lat), lng: parseFloat(center.lng) };\n            mapRef.current.panTo(pos);\n            mapRef.current.setZoom(17); \n\t\t\tconst targetCard = document.getElementById(center.id);\n\t\t\ttargetCard.scrollIntoView({\n            behavior: 'smooth', \/\/ \u5e73\u6ed1\u6efe\u52d5\n            block: 'center'     \/\/ \u7f6e\u4e2d\u986f\u793a (\u4e5f\u53ef\u6539\u70ba 'nearest' \u6216 'start')\n        });\n        }\n    };\n\n    const handleWhatsApp = () => {\n        const center = data.selectedCenter;\n        const targetPhone = center.whatsapp || center.phone || \"\";\n        const cleanPhone = targetPhone.replace(\/\\D\/g, '');\n        const message = `\u4f60\u597d\uff0c\u6211\u60f3\u9810\u7d04 MathConcept \u6578\u5b78\u8a55\u4f30\u3002\\n\\n\u3010\u9810\u7d04\u8cc7\u6599\u3011\\n\u5b78\u751f\u59d3\u540d\uff1a${data.studentName}\\n\u5c31\u8b80\u5e74\u7d1a\uff1a${data.grade}\\n\u5c31\u8b80\u5b78\u6821\uff1a${data.schoolName}\\n\u8208\u8da3\u8ab2\u7a0b\uff1a${data.course}\\n\u9810\u7d04\u5206\u6821\uff1a${center.name}`;\n        window.open(`https:\/\/wa.me\/${cleanPhone}?text=${encodeURIComponent(message)}`, '_blank');\n        setStep(3);\n    };\n\n    return (\n        <div className=\"flex flex-col h-full overflow-hidden\">\n            {\/* \u7cfb\u7d71\u5167\u90e8\u7684 Header \u9ad8\u5ea6\u4e5f\u7a0d\u5fae\u58d3\u7e2e (h-14) \u7bc0\u7701\u7a7a\u9593 *\/}\n            <header className=\"h-14 md:h-20 bg-white border-b border-slate-100 flex flex-shrink-0 items-center justify-center shadow-sm\">\n                <div className=\"flex items-center gap-2 md:gap-4\">\n                    <div className={`flex items-center gap-1 md:gap-2 ${step === 1 ? 'text-[#e1251b] font-black' : 'text-slate-300'}`}>\n                        <span className={`w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center text-[10px] ${step === 1 ? 'bg-[#e1251b] text-white' : 'bg-slate-100'}`}>1<\/span>\n                        <span className=\"text-[10px] md:text-[11px] uppercase tracking-wider font-bold\">\u8cc7\u6599\u586b\u5beb<\/span>\n                    <\/div>\n                    <div className=\"w-8 md:w-12 h-px bg-slate-200\"><\/div>\n                    <div className={`flex items-center gap-1 md:gap-2 ${step === 2 ? 'text-[#e1251b] font-black' : 'text-slate-300'}`}>\n                        <span className={`w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center text-[10px] ${step === 2 ? 'bg-[#e1251b] text-white' : 'bg-slate-100'}`}>2<\/span>\n                        <span className=\"text-[10px] md:text-[11px] uppercase tracking-wider font-bold\">\u9078\u64c7\u5206\u6821<\/span>\n                    <\/div>\n                <\/div>\n            <\/header>\n\n            <main className=\"main-content\">\n                {step === 1 ? (\n                    <div className=\"h-full flex flex-col items-center p-4 md:p-6 bg-[#f7f9fb] overflow-y-auto custom-scroll\">\n                        <div className=\"max-w-3xl w-full bg-white p-6 md:p-12 rounded-2xl md:rounded-[3rem] shadow-xl my-auto\">\n                            <h3 className=\"text-xl md:text-3xl font-black text-slate-800 mb-5 md:mb-10 flex items-center gap-2 md:gap-3 m-0\">\n                                <span className=\"material-icons text-[#e1251b] text-2xl md:text-3xl\">edit_note<\/span> \u5b78\u751f\u5831\u540d\u8cc7\u6599\n                            <\/h3>\n                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 mt-2 md:mt-6\">\n                                <div className=\"space-y-1 md:space-y-2\">\n                                    <label className=\"font-bold text-slate-500 text-[10px] md:text-[11px] uppercase tracking-widest ml-1\">\u5b78\u751f\u59d3\u540d *<\/label>\n                                    <input value={data.studentName} onChange={e=>setData({...data, studentName:e.target.value})} placeholder=\"\u59d3\u540d\" \/>\n                                <\/div>\n                                <div className=\"space-y-1 md:space-y-2\">\n                                    <label className=\"font-bold text-slate-500 text-[10px] md:text-[11px] uppercase tracking-widest ml-1\">\u5c31\u8b80\u5e74\u7d1a *<\/label>\n                                    <select value={data.grade} onChange={e=>setData({...data, grade:e.target.value})}>\n                                        <option value=\"\">\u8acb\u9078\u64c7<\/option>\n                                        <option value=\"K1\">\u5e7c\u7a1a\u5712 K1<\/option><option value=\"K2\">\u5e7c\u7a1a\u5712 K2<\/option><option value=\"K3\">\u5e7c\u7a1a\u5712 K3<\/option>\n                                        <option value=\"P1\">\u5c0f\u5b78 P1<\/option><option value=\"P2\">\u5c0f\u5b78 P2<\/option><option value=\"P3\">\u5c0f\u5b78 P3<\/option>\n                                        <option value=\"P4\">\u5c0f\u5b78 P4<\/option><option value=\"P5\">\u5c0f\u5b78 P5<\/option><option value=\"P6\">\u5c0f\u5b78 P6<\/option>\n                                        <option value=\"S1\">\u4e2d\u5b78 S1<\/option><option value=\"S2\">\u4e2d\u5b78 S2<\/option><option value=\"S3\">\u4e2d\u5b78 S3<\/option>\n                                        <option value=\"S4-S6\">\u9ad8\u4e2d S4-S6<\/option>\n                                    <\/select>\n                                <\/div>\n                                <div className=\"space-y-1 md:space-y-2\">\n                                    <label className=\"font-bold text-slate-500 text-[10px] md:text-[11px] uppercase tracking-widest ml-1\">\u5c31\u8b80\u5b78\u6821 *<\/label>\n                                    <input value={data.schoolName} onChange={e=>setData({...data, schoolName:e.target.value})} placeholder=\"\u5b78\u6821\u540d\u7a31\" \/>\n                                <\/div>\n                                <div className=\"space-y-1 md:space-y-2\">\n                                    <label className=\"font-bold text-slate-500 text-[10px] md:text-[11px] uppercase tracking-widest ml-1\">\u611f\u8208\u8da3\u8ab2\u7a0b *<\/label>\n                                    <select value={data.course} onChange={e=>setData({...data, course:e.target.value})}>\n                                        <option value=\"\">\u8acb\u9078\u64c7<\/option>\n                                        <optgroup label=\"\u5e7c\u7a1a\u5712\u8ab2\u7a0b\">\n                                            <option value=\"\u5e7c\u7a1a\u5712\u6578\u5b78\u8ab2\u7a0b\">\u5e7c\u7a1a\u5712\u6578\u5b78\u8ab2\u7a0b<\/option>\n                                            <option value=\"\u5e7c\u7a1a\u5712\u5967\u6578\u8ab2\u7a0b\">\u5e7c\u7a1a\u5712\u5967\u6578\u8ab2\u7a0b<\/option>\n                                        <\/optgroup>\n                                        <optgroup label=\"\u5c0f\u5b78\u8ab2\u7a0b\">\n                                            <option value=\"\u5c0f\u5b78\u6578\u5b78\u8ab2\u7a0b\">\u5c0f\u5b78\u6578\u5b78\u8ab2\u7a0b<\/option>\n                                            <option value=\"\u5c0f\u5b78\u5967\u6578\u8ab2\u7a0b\">\u5c0f\u5b78\u5967\u6578\u8ab2\u7a0b<\/option>\n                                        <\/optgroup>\n                                        <optgroup label=\"\u4e2d\u5b78\u8ab2\u7a0b\">\n                                            <option value=\"\u4e2d\u5b78\u6578\u5b78\u8ab2\u7a0b\">\u4e2d\u5b78\u6578\u5b78\u8ab2\u7a0b<\/option>\n                                        <\/optgroup>\n                                    <\/select>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                ) : step === 2 ? (\n                    <div className=\"h-full flex flex-col lg:flex-row overflow-hidden\">\n                        <aside className=\"w-full lg:w-64 bg-white border-b lg:border-b-0 lg:border-r flex-shrink-0 flex lg:flex-col overflow-x-auto lg:overflow-y-auto hide-scrollbar\">\n                            {['HK', 'KLN', 'NTE', 'NTW'].map(id => (\n                                <button key={id} onClick={()=>handleRegionSelect(id)} className={`region-btn flex-1 lg:flex-none whitespace-nowrap lg:whitespace-normal ${region === id ? 'region-active' : ''}`}>\n                                    <span className=\"material-icons text-[16px] md:text-xl\">{id === 'HK' ? 'location_on' : id === 'KLN' ? 'location_city' : 'map'}<\/span>\n                                    <span className=\"text-[11px] md:text-xs font-black uppercase\">{id === 'HK' ? '\u9999\u6e2f\u5cf6' : id === 'KLN' ? '\u4e5d\u9f8d' : id === 'NTE' ? '\u65b0\u754c\u6771' : '\u65b0\u754c\u897f'}<\/span>\n                                <\/button>\n                            ))}\n                        <\/aside>\n\n                        <main className=\"flex-1 overflow-y-auto p-3 md:p-8 custom-scroll bg-[#f7f9fb]\">\n                            <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3 md:gap-6\">\n                                {centers.filter(c => c.region === region).map(c => {\n                                    const isSel = data.selectedCenter?.id === c.id;\n                                    return (\n                                        <div key={c.id} id={c.id} onClick={() => handleCenterSelect(c)} className={`mkt-card p-4 md:p-8 cursor-pointer border-2 ${isSel ? 'selected shadow-md' : 'hover:bg-white'}`}>\n                                            <div className=\"flex justify-between items-start mb-1 md:mb-4\">\n                                                <h4 className=\"text-lg md:text-2xl font-black m-0 leading-tight\">{c.name}<\/h4>\n                                                {isSel && <span className=\"material-icons text-white text-xl md:text-2xl\">check_circle<\/span>}\n                                            <\/div>\n                                            <p className={`text-[11px] md:text-[13px] m-0 font-medium ${isSel ? 'text-white\/80' : 'text-slate-500'}`}>{c.address}<\/p>\n                                        <\/div>\n                                    )\n                                })}\n                            <\/div>\n                        <\/main>\n\n                        <section className=\"hidden lg:block w-[45%] p-6 bg-white border-l flex-shrink-0\">\n                            <div id=\"map-canvas-main\" className=\"h-full w-full rounded-[2rem] border overflow-hidden bg-slate-100 flex items-center justify-center\"><\/div>\n                        <\/section>\n                    <\/div>\n                ) : null}\n            <\/main>\n\n            {step !== 3 && (\n                <footer className=\"fixed-footer\">\n                    <div className=\"max-w-7xl mx-auto w-full flex justify-between items-center gap-2\">\n                        {step === 2 ? (\n                            <button onClick={() => setStep(1)} className=\"flex items-center justify-center gap-1 md:gap-3 bg-slate-200 text-slate-700 hover:bg-slate-300 transition-colors px-4 md:px-8 py-2.5 md:py-4 rounded-xl font-bold uppercase text-[11px] md:text-xs shadow-sm border-none cursor-pointer whitespace-nowrap\">\n                                <span className=\"material-icons text-[14px] md:text-sm\">arrow_back<\/span> \n                                <span className=\"hidden sm:inline\">\u8fd4\u56de\u4fee\u6539<\/span>\n                                <span className=\"inline sm:hidden\">\u8fd4\u56de<\/span>\n                            <\/button>\n                        ) : <div><\/div>}\n                        \n                        <button \n                            onClick={step === 1 ? () => { if(data.studentName && data.grade && data.schoolName && data.course) setStep(2); else alert('\u8acb\u586b\u5beb\u5b8c\u6574\u8cc7\u6599'); } : handleWhatsApp}\n                            disabled={step === 2 && !data.selectedCenter}\n                            className={`${step === 2 ? 'bg-[#fab915] text-white' : 'bg-[#e1251b] text-white'} flex-1 sm:flex-none justify-center px-4 md:px-10 py-2.5 md:py-4 rounded-xl md:rounded-full font-black uppercase text-[12px] md:text-sm shadow-xl flex items-center gap-2 md:gap-3 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity border-none cursor-pointer whitespace-nowrap`}\n                        >\n                            {step === 2 && (\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" fill=\"currentColor\" viewBox=\"0 0 16 16\" className=\"inline-block flex-shrink-0\">\n            <path d=\"M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z\"\/>\n        <\/svg>\n    )}\n                            {step === 1 ? '\u4e0b\u4e00\u6b65\uff1a\u9078\u64c7\u5206\u6821' : '\u78ba\u8a8d\u4e26\u767c\u9001\u9810\u7d04'}\n                        <\/button>\n                    <\/div>\n                <\/footer>\n            )}\n\n            {step === 3 && (\n                <div className=\"absolute inset-0 z-50 flex items-center justify-center bg-[#f7f9fb] p-4 text-center\">\n                    <div className=\"bg-white p-8 md:p-12 rounded-3xl md:rounded-[3rem] shadow-2xl max-w-lg w-full\">\n                        <div className=\"w-16 h-16 md:w-20 md:h-20 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 md:mb-6\">\n                            <span className=\"material-icons text-4xl md:text-5xl\">send<\/span>\n                        <\/div>\n                        <h2 className=\"text-2xl md:text-3xl font-black text-slate-900 m-0 leading-tight\">\u5373\u5c07\u958b\u555f WhatsApp<\/h2>\n                        <p className=\"text-slate-500 mt-3 md:mt-4 mb-6 md:mb-8 text-xs md:text-sm\">\u8acb\u5728\u8df3\u51fa\u7684\u61c9\u7528\u7a0b\u5f0f\u9ede\u64ca\u300c\u767c\u9001\u300d\u3002<\/p>\n                        <button onClick={() => setStep(1)} className=\"text-[#e1251b] font-bold uppercase text-xs bg-transparent border-none cursor-pointer underline hover:text-red-700\">\u91cd\u65b0\u9810\u7d04<\/button>\n                    <\/div>\n                <\/div>\n            )}\n        <\/div>\n    );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('mc-booking-system-root'));\nroot.render(<BookingApp \/>);\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n    <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content  wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_angie_page":false,"om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-6710","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"mathconcept","author_link":"https:\/\/dev.mathconcept.com\/en\/author\/mathconcept\/"},"uagb_comment_info":0,"uagb_excerpt":null,"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"mathconcept","author_link":"https:\/\/dev.mathconcept.com\/en\/author\/mathconcept\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/pages\/6710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/comments?post=6710"}],"version-history":[{"count":10,"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/pages\/6710\/revisions"}],"predecessor-version":[{"id":10372,"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/pages\/6710\/revisions\/10372"}],"wp:attachment":[{"href":"https:\/\/dev.mathconcept.com\/en\/wp-json\/wp\/v2\/media?parent=6710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}