{"id":8,"date":"2026-05-29T18:32:48","date_gmt":"2026-05-29T18:32:48","guid":{"rendered":"https:\/\/latepoint.test.wptochina.com\/?page_id=8"},"modified":"2026-05-29T18:32:48","modified_gmt":"2026-05-29T18:32:48","slug":"hibachi-booking-preview","status":"publish","type":"page","link":"https:\/\/latepoint.test.wptochina.com\/?page_id=8","title":{"rendered":"Hibachi Booking Preview"},"content":{"rendered":"    <style>\n        .hb-app,\n        .hb-app * { box-sizing: border-box; }\n\n        .hb-app {\n            --ink: #20120b;\n            --muted: #7a6558;\n            --line: rgba(75, 39, 18, 0.13);\n            --paper: rgba(255, 250, 242, 0.88);\n            --cream: #fff5e4;\n            --coal: #1b0d08;\n            --fire: #f75b16;\n            --amber: #f7a80f;\n            --gold: #ffd17a;\n            --green: #12663f;\n            --red: #ad1d17;\n            color: var(--ink);\n            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n            margin: 0 auto;\n            max-width: 1180px;\n            padding: clamp(16px, 4vw, 54px) clamp(12px, 3vw, 28px);\n        }\n\n        .hb-stage {\n            background:\n                radial-gradient(circle at 82% 10%, rgba(247, 91, 22, 0.18), transparent 30%),\n                radial-gradient(circle at 18% 0%, rgba(247, 168, 15, 0.18), transparent 32%),\n                linear-gradient(135deg, #fffaf1 0%, #f8e5ca 44%, #fff2de 100%);\n            border: 1px solid rgba(75, 39, 18, 0.14);\n            border-radius: 34px;\n            box-shadow: 0 28px 90px rgba(78, 36, 9, 0.18), inset 0 1px 0 rgba(255,255,255,0.85);\n            display: grid;\n            grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);\n            min-height: 760px;\n            overflow: hidden;\n            position: relative;\n        }\n\n        .hb-stage:before {\n            background-image: linear-gradient(rgba(38, 18, 9, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 18, 9, 0.04) 1px, transparent 1px);\n            background-size: 32px 32px;\n            content: \"\";\n            inset: 0;\n            opacity: 0.72;\n            pointer-events: none;\n            position: absolute;\n        }\n\n        .hb-side,\n        .hb-main { position: relative; z-index: 1; }\n\n        .hb-side {\n            background:\n                radial-gradient(circle at 24% 12%, rgba(247, 168, 15, 0.20), transparent 34%),\n                linear-gradient(180deg, rgba(28, 11, 5, 0.98), rgba(77, 25, 11, 0.96));\n            color: #fff8ec;\n            overflow: hidden;\n            padding: clamp(24px, 3vw, 42px);\n        }\n\n        .hb-side:after {\n            background: radial-gradient(circle, rgba(247, 91, 22, 0.34), transparent 62%);\n            bottom: -155px;\n            content: \"\";\n            height: 340px;\n            left: -145px;\n            position: absolute;\n            width: 340px;\n        }\n\n        .hb-kicker {\n            align-items: center;\n            color: var(--gold);\n            display: inline-flex;\n            font-size: 12px;\n            font-weight: 900;\n            gap: 9px;\n            letter-spacing: 0.14em;\n            text-transform: uppercase;\n        }\n\n        .hb-kicker:before {\n            background: linear-gradient(135deg, var(--fire), var(--amber));\n            border-radius: 99px;\n            box-shadow: 0 0 20px rgba(247, 91, 22, 0.8);\n            content: \"\";\n            height: 10px;\n            width: 10px;\n        }\n\n        .hb-side h2 {\n            color: #fff7eb;\n            font-size: clamp(34px, 4.6vw, 58px);\n            letter-spacing: -0.07em;\n            line-height: 0.94;\n            margin: 22px 0 16px;\n        }\n\n        .hb-side p {\n            color: rgba(255, 248, 236, 0.74);\n            font-size: 15px;\n            line-height: 1.65;\n            margin: 0 0 26px;\n            max-width: 32ch;\n        }\n\n        .hb-mini-stats {\n            display: grid;\n            gap: 10px;\n            grid-template-columns: repeat(3, 1fr);\n            margin: 26px 0 32px;\n        }\n\n        .hb-stat {\n            background: rgba(255,255,255,0.08);\n            border: 1px solid rgba(255,255,255,0.13);\n            border-radius: 18px;\n            padding: 13px 10px;\n        }\n\n        .hb-stat strong { color: white; display: block; font-size: 18px; letter-spacing: -0.03em; }\n        .hb-stat span { color: rgba(255,248,236,0.62); display: block; font-size: 11px; margin-top: 3px; }\n\n        .hb-steps { display: grid; gap: 11px; position: relative; z-index: 1; }\n\n        .hb-step {\n            align-items: center;\n            background: rgba(255,255,255,0.07);\n            border: 1px solid rgba(255,255,255,0.11);\n            border-radius: 19px;\n            color: rgba(255,248,236,0.58);\n            display: grid;\n            gap: 12px;\n            grid-template-columns: 34px 1fr auto;\n            padding: 12px;\n            transition: transform 180ms ease, background 180ms ease, color 180ms ease;\n        }\n\n        .hb-step.is-active {\n            background: linear-gradient(135deg, rgba(247, 168, 15, 0.22), rgba(247, 91, 22, 0.18));\n            border-color: rgba(255, 209, 122, 0.38);\n            color: #fff8ec;\n            transform: translateX(4px);\n        }\n\n        .hb-step.is-done { color: rgba(255,248,236,0.85); }\n        .hb-step-num { align-items: center; background: rgba(255,255,255,0.11); border-radius: 12px; display: flex; font-size: 13px; font-weight: 900; height: 34px; justify-content: center; width: 34px; }\n        .hb-step strong { display: block; font-size: 13px; line-height: 1.15; }\n        .hb-step small { color: currentColor; display: block; font-size: 11px; opacity: 0.66; }\n        .hb-step-check { opacity: 0; transform: scale(0.8); transition: 180ms ease; }\n        .hb-step.is-done .hb-step-check { opacity: 1; transform: scale(1); }\n\n        .hb-main { padding: clamp(22px, 4vw, 48px); }\n        .hb-top { align-items: center; display: grid; gap: 16px; grid-template-columns: auto 1fr auto; margin-bottom: 30px; }\n        .hb-step-label { color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }\n        .hb-track { background: rgba(75, 39, 18, 0.1); border-radius: 99px; height: 10px; overflow: hidden; }\n        .hb-bar { background: linear-gradient(90deg, var(--fire), var(--amber)); border-radius: inherit; box-shadow: 0 0 22px rgba(247, 91, 22, 0.36); height: 100%; transition: width 260ms ease; width: 20%; }\n        .hb-save-note { color: var(--green); font-size: 12px; font-weight: 900; opacity: 0; transition: opacity 180ms ease; }\n        .hb-save-note.is-visible { opacity: 1; }\n\n        .hb-panel { animation: hbEnter 220ms ease; display: none; }\n        .hb-panel.is-active { display: block; }\n        @keyframes hbEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n\n        .hb-panel h3 { color: var(--ink); font-size: clamp(32px, 4.8vw, 56px); letter-spacing: -0.075em; line-height: 0.98; margin: 0 0 10px; }\n        .hb-panel > p { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0 0 26px; max-width: 68ch; }\n\n        .hb-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .hb-grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }\n        .hb-full { grid-column: 1 \/ -1; }\n        .hb-section-label { color: #3a2418; display: flex; font-size: 13px; font-weight: 950; justify-content: space-between; letter-spacing: 0.01em; margin: 20px 0 10px; }\n        .hb-section-label em { color: var(--muted); font-style: normal; font-weight: 800; }\n\n        .hb-field { min-width: 0; }\n        .hb-field label { color: #3a2418; display: block; font-size: 13px; font-weight: 950; margin: 0 0 8px; }\n        .hb-field input,\n        .hb-field select,\n        .hb-field textarea {\n            appearance: none;\n            background: rgba(255, 255, 255, 0.82);\n            border: 1px solid rgba(75, 39, 18, 0.16);\n            border-radius: 18px;\n            box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 10px 24px rgba(70, 34, 12, 0.04);\n            color: var(--ink);\n            font: inherit;\n            font-size: 17px;\n            min-height: 58px;\n            min-width: 0;\n            outline: none;\n            padding: 15px 16px;\n            transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;\n            width: 100%;\n        }\n        .hb-field select { background-image: linear-gradient(45deg, transparent 50%, #5b3d2e 50%), linear-gradient(135deg, #5b3d2e 50%, transparent 50%); background-position: calc(100% - 20px) 25px, calc(100% - 14px) 25px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; }\n        .hb-field textarea { min-height: 112px; resize: vertical; }\n        .hb-field input:focus,\n        .hb-field select:focus,\n        .hb-field textarea:focus { border-color: rgba(247, 91, 22, 0.58); box-shadow: 0 0 0 4px rgba(247, 91, 22, 0.11), inset 0 1px 0 rgba(255,255,255,0.88); }\n\n        .hb-date-grid { display: grid; gap: 12px; grid-template-columns: repeat(7, minmax(0, 1fr)); }\n        .hb-date-card,\n        .hb-time-card,\n        .hb-choice-card {\n            background: var(--paper);\n            border: 1px solid var(--line);\n            border-radius: 22px;\n            box-shadow: 0 10px 26px rgba(70, 34, 12, 0.05);\n            color: var(--ink);\n            cursor: pointer;\n            min-width: 0;\n            position: relative;\n            transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;\n        }\n        .hb-date-card:hover,\n        .hb-time-card:hover,\n        .hb-choice-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(70, 34, 12, 0.11); }\n        .hb-date-card[aria-pressed=\"true\"],\n        .hb-time-card[aria-pressed=\"true\"],\n        .hb-choice-card.is-selected { background: linear-gradient(135deg, rgba(247, 91, 22, 0.13), rgba(247, 168, 15, 0.16)); border-color: rgba(247, 91, 22, 0.44); box-shadow: 0 20px 40px rgba(247, 91, 22, 0.13); }\n        .hb-date-card { min-height: 84px; padding: 12px; text-align: left; }\n        .hb-date-card small { color: var(--muted); display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; }\n        .hb-date-card strong { display: block; font-size: 24px; letter-spacing: -0.05em; margin-top: 3px; }\n        .hb-date-card span { color: var(--muted); display: block; font-size: 11px; margin-top: 2px; }\n        .hb-time-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }\n        .hb-time-card { min-height: 82px; padding: 16px; text-align: left; }\n        .hb-time-card strong { display: block; font-size: 18px; letter-spacing: -0.03em; }\n        .hb-time-card span { color: var(--muted); display: block; font-size: 12px; margin-top: 5px; }\n\n        .hb-choice-card { display: grid; gap: 10px; min-height: 124px; padding: 17px; text-align: left; }\n        .hb-choice-card input { height: 1px; opacity: 0; position: absolute; width: 1px; }\n        .hb-choice-top { align-items: center; display: flex; gap: 10px; justify-content: space-between; }\n        .hb-choice-name { font-size: 18px; font-weight: 950; letter-spacing: -0.035em; }\n        .hb-checkmark { align-items: center; background: rgba(75, 39, 18, 0.08); border-radius: 99px; color: transparent; display: flex; height: 28px; justify-content: center; width: 28px; }\n        .hb-choice-card.is-selected .hb-checkmark { background: linear-gradient(135deg, var(--fire), var(--amber)); color: var(--coal); }\n        .hb-choice-card small { color: var(--muted); font-size: 13px; line-height: 1.35; }\n        .hb-choice-card.is-disabled { cursor: not-allowed; opacity: 0.42; transform: none; }\n\n        .hb-consent {\n            align-items: flex-start;\n            background: rgba(255,255,255,0.58);\n            border: 1px solid var(--line);\n            border-radius: 18px;\n            color: var(--muted);\n            display: flex;\n            font-size: 15px;\n            gap: 12px;\n            line-height: 1.5;\n            padding: 14px;\n        }\n        .hb-consent input { accent-color: var(--fire); flex: 0 0 auto; height: 18px; margin-top: 2px; width: 18px; }\n\n        .hb-counter-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .hb-counter {\n            align-items: center;\n            background: rgba(255,255,255,0.70);\n            border: 1px solid var(--line);\n            border-radius: 24px;\n            display: flex;\n            gap: 14px;\n            justify-content: space-between;\n            padding: 16px;\n        }\n        .hb-counter button,\n        .hb-nav button { border: 0; cursor: pointer; font: inherit; }\n        .hb-counter button { align-items: center; background: var(--coal); border-radius: 14px; color: #fff8ec; display: flex; font-size: 20px; height: 42px; justify-content: center; width: 42px; }\n        .hb-counter button:disabled { cursor: not-allowed; opacity: 0.34; }\n        .hb-counter strong { display: block; font-size: 30px; letter-spacing: -0.06em; text-align: center; }\n        .hb-counter span { color: var(--muted); display: block; font-size: 12px; font-weight: 900; text-align: center; text-transform: uppercase; }\n\n        .hb-estimate {\n            background: linear-gradient(135deg, rgba(18, 102, 63, 0.12), rgba(247, 168, 15, 0.12));\n            border: 1px solid rgba(18, 102, 63, 0.16);\n            border-radius: 26px;\n            display: grid;\n            gap: 12px;\n            grid-template-columns: repeat(4, minmax(0, 1fr));\n            margin: 18px 0 20px;\n            padding: 18px;\n        }\n        .hb-estimate span { color: var(--muted); display: block; font-size: 11px; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase; }\n        .hb-estimate strong { display: block; font-size: 22px; letter-spacing: -0.04em; margin-top: 4px; }\n\n        .hb-review { background: rgba(255,255,255,0.72); border: 1px solid var(--line); border-radius: 26px; padding: 20px; }\n        .hb-review-row { align-items: baseline; border-bottom: 1px solid rgba(75, 39, 18, 0.1); display: flex; gap: 18px; justify-content: space-between; padding: 12px 0; }\n        .hb-review-row:first-child { padding-top: 0; }\n        .hb-review-row:last-child { border-bottom: 0; padding-bottom: 0; }\n        .hb-review-row span { color: var(--muted); font-size: 13px; font-weight: 950; }\n        .hb-review-row strong { max-width: 70%; text-align: right; }\n\n        .hb-alert { background: rgba(173, 29, 23, 0.09); border: 1px solid rgba(173, 29, 23, 0.18); border-radius: 16px; color: var(--red); display: none; font-size: 14px; font-weight: 900; margin-top: 18px; padding: 12px 14px; }\n        .hb-alert.is-visible { display: block; }\n        .hb-success { background: linear-gradient(135deg, rgba(18, 102, 63, 0.15), rgba(247, 168, 15, 0.12)); border: 1px solid rgba(18, 102, 63, 0.17); border-radius: 22px; color: var(--green); display: none; font-weight: 900; margin-top: 16px; padding: 16px; }\n        .hb-success.is-visible { display: block; }\n\n        .hb-nav { align-items: center; border-top: 1px solid rgba(75, 39, 18, 0.10); display: flex; gap: 12px; justify-content: space-between; margin-top: 32px; padding-top: 20px; }\n        .hb-btn { align-items: center; border-radius: 999px; display: inline-flex; font-weight: 950; justify-content: center; min-height: 54px; padding: 0 24px; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; }\n        .hb-btn:hover:not(:disabled) { transform: translateY(-1px); }\n        .hb-btn:disabled { cursor: not-allowed; opacity: 0.42; }\n        .hb-btn-back { background: rgba(255,255,255,0.74); border: 1px solid var(--line) !important; color: var(--ink); }\n        .hb-btn-next,\n        .hb-btn-submit { background: linear-gradient(135deg, var(--fire), var(--amber)); box-shadow: 0 18px 36px rgba(247, 91, 22, 0.24); color: #220e05; }\n\n        @media (max-width: 980px) {\n            .hb-stage { grid-template-columns: 1fr; }\n            .hb-side { padding-bottom: 24px; }\n            .hb-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }\n            .hb-step { grid-template-columns: 1fr; justify-items: center; padding: 10px 6px; text-align: center; }\n            .hb-step strong,\n            .hb-step small,\n            .hb-step-check { display: none; }\n            .hb-mini-stats { max-width: 440px; }\n        }\n\n        @media (max-width: 720px) {\n            .hb-app { padding: 10px; }\n            .hb-stage { border-radius: 24px; }\n            .hb-main { padding: 22px 16px; }\n            .hb-top { grid-template-columns: 1fr; }\n            .hb-grid,\n            .hb-grid-3,\n            .hb-date-grid,\n            .hb-time-grid,\n            .hb-counter-row,\n            .hb-estimate { grid-template-columns: 1fr; }\n            .hb-panel h3 { font-size: 36px; }\n            .hb-nav { position: sticky; bottom: 0; background: rgba(255, 245, 228, 0.88); backdrop-filter: blur(14px); border-radius: 20px 20px 0 0; margin-left: -16px; margin-right: -16px; padding: 14px 16px; }\n            .hb-btn { flex: 1; padding: 0 16px; }\n        }\n    <\/style>\n\n    <div class=\"hb-app\">\n        <section class=\"hb-stage\" data-hb-app aria-label=\"Premium hibachi booking preview\">\n            <aside class=\"hb-side\">\n                <div class=\"hb-kicker\">Private Hibachi At Home<\/div>\n                <h2>Reserve the chef, grill, and fire show.<\/h2>\n                <p>A high-polish five-step booking flow with clean validation, controlled choices, and live pricing.<\/p>\n                <div class=\"hb-mini-stats\">\n                    <div class=\"hb-stat\"><strong>90m<\/strong><span>chef show<\/span><\/div>\n                    <div class=\"hb-stat\"><strong>$60<\/strong><span>adult base<\/span><\/div>\n                    <div class=\"hb-stat\"><strong>10+<\/strong><span>adult min<\/span><\/div>\n                <\/div>\n                <div class=\"hb-steps\" aria-label=\"Booking steps\">\n                    <div class=\"hb-step is-active\" data-step-nav=\"0\"><span class=\"hb-step-num\">1<\/span><span><strong>Date & Time<\/strong><small>pick a slot<\/small><\/span><span class=\"hb-step-check\">\u2713<\/span><\/div>\n                    <div class=\"hb-step\" data-step-nav=\"1\"><span class=\"hb-step-num\">2<\/span><span><strong>Your Info<\/strong><small>contact details<\/small><\/span><span class=\"hb-step-check\">\u2713<\/span><\/div>\n                    <div class=\"hb-step\" data-step-nav=\"2\"><span class=\"hb-step-num\">3<\/span><span><strong>Menu<\/strong><small>2 proteins<\/small><\/span><span class=\"hb-step-check\">\u2713<\/span><\/div>\n                    <div class=\"hb-step\" data-step-nav=\"3\"><span class=\"hb-step-num\">4<\/span><span><strong>Party<\/strong><small>guests + address<\/small><\/span><span class=\"hb-step-check\">\u2713<\/span><\/div>\n                    <div class=\"hb-step\" data-step-nav=\"4\"><span class=\"hb-step-num\">5<\/span><span><strong>Review<\/strong><small>reserve<\/small><\/span><span class=\"hb-step-check\">\u2713<\/span><\/div>\n                <\/div>\n            <\/aside>\n\n            <main class=\"hb-main\">\n                <div class=\"hb-top\">\n                    <div class=\"hb-step-label\" data-step-label>Step 1 of 5<\/div>\n                    <div class=\"hb-track\"><div class=\"hb-bar\" data-progress><\/div><\/div>\n                    <div class=\"hb-save-note\" data-save-note>Saved<\/div>\n                <\/div>\n\n                <form data-hb-form novalidate>\n                    <section class=\"hb-panel is-active\" data-panel=\"0\">\n                        <h3>When is the party?<\/h3>\n                        <p>Choose a curated date and time slot. This avoids the ugly native date picker and keeps the booking flow branded.<\/p>\n                        <div class=\"hb-section-label\"><span>Select date<\/span><em data-date-helper>Next available days<\/em><\/div>\n                        <div class=\"hb-date-grid\" data-date-grid><\/div>\n                        <div class=\"hb-section-label\"><span>Select time<\/span><em>90-minute experience<\/em><\/div>\n                        <div class=\"hb-time-grid\" data-time-grid>\n                                                            <button class=\"hb-time-card\" type=\"button\" data-time=\"12:00 PM\" aria-pressed=\"false\"><strong>12:00 PM<\/strong><span>Lunch show<\/span><\/button>\n                                                            <button class=\"hb-time-card\" type=\"button\" data-time=\"2:30 PM\" aria-pressed=\"false\"><strong>2:30 PM<\/strong><span>Afternoon slot<\/span><\/button>\n                                                            <button class=\"hb-time-card\" type=\"button\" data-time=\"5:00 PM\" aria-pressed=\"false\"><strong>5:00 PM<\/strong><span>Dinner prime<\/span><\/button>\n                                                            <button class=\"hb-time-card\" type=\"button\" data-time=\"7:30 PM\" aria-pressed=\"false\"><strong>7:30 PM<\/strong><span>Evening party<\/span><\/button>\n                                                    <\/div>\n                    <\/section>\n\n                    <section class=\"hb-panel\" data-panel=\"1\">\n                        <h3>Your information<\/h3>\n                        <p>We use this only to confirm the reservation and coordinate details with your local manager.<\/p>\n                        <div class=\"hb-grid\">\n                            <div class=\"hb-field\"><label for=\"hb-first\">First Name<\/label><input id=\"hb-first\" name=\"firstName\" autocomplete=\"given-name\" required><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-last\">Last Name<\/label><input id=\"hb-last\" name=\"lastName\" autocomplete=\"family-name\" required><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-phone\">Phone<\/label><input id=\"hb-phone\" name=\"phone\" inputmode=\"tel\" autocomplete=\"tel\" placeholder=\"(512) 555-0123\" required><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-email\">Email<\/label><input id=\"hb-email\" name=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required><\/div>\n                            <label class=\"hb-consent hb-full\"><input type=\"checkbox\" name=\"sms\" required> <span>I agree to receive booking-related SMS messages for this reservation. Message and data rates may apply.<\/span><\/label>\n                        <\/div>\n                    <\/section>\n\n                    <section class=\"hb-panel\" data-panel=\"2\">\n                        <h3>Build the menu<\/h3>\n                        <p>Pick exactly 2 main proteins. Premium upgrades are optional and update the estimate instantly.<\/p>\n                        <div class=\"hb-section-label\"><span>Main proteins<\/span><em data-protein-count>0 of 2 selected<\/em><\/div>\n                        <div class=\"hb-grid-3\" data-protein-grid>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"protein\" value=\"Chicken\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Chicken<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>Reliable, family-friendly classic.<\/small><\/label>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"protein\" value=\"Steak\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Steak<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>Rich, savory hibachi staple.<\/small><\/label>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"protein\" value=\"Shrimp\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Shrimp<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>Fast-seared seafood favorite.<\/small><\/label>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"protein\" value=\"Salmon\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Salmon<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>Buttery and lighter option.<\/small><\/label>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"protein\" value=\"Scallops\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Scallops<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>Premium texture and flavor.<\/small><\/label>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"protein\" value=\"Tofu\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Tofu<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>Vegetarian-friendly protein.<\/small><\/label>\n                                                    <\/div>\n                        <div class=\"hb-section-label\"><span>Optional upgrades<\/span><em>charged per paid guest<\/em><\/div>\n                        <div class=\"hb-grid-3\" data-upgrade-grid>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"upgrade\" value=\"Filet Mignon\" data-price=\"5\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Filet Mignon<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>+$5 per paid guest.<\/small><\/label>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"upgrade\" value=\"Lobster Tail\" data-price=\"10\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Lobster Tail<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>+$10 per paid guest.<\/small><\/label>\n                                                            <label class=\"hb-choice-card\"><input type=\"checkbox\" name=\"upgrade\" value=\"Garlic Noodles\" data-price=\"5\"><span class=\"hb-choice-top\"><span class=\"hb-choice-name\">Garlic Noodles<\/span><span class=\"hb-checkmark\">\u2713<\/span><\/span><small>+$5 per paid guest.<\/small><\/label>\n                                                    <\/div>\n                        <div class=\"hb-grid\" style=\"margin-top:20px;\">\n                            <div class=\"hb-field\"><label for=\"hb-menu-notes\">Menu notes<\/label><textarea id=\"hb-menu-notes\" name=\"menuNotes\" placeholder=\"TBD is fine. Mention protein preferences here.\"><\/textarea><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-allergies\">Food allergies<\/label><textarea id=\"hb-allergies\" name=\"allergies\" placeholder=\"Write None if no allergies.\" required><\/textarea><\/div>\n                        <\/div>\n                    <\/section>\n\n                    <section class=\"hb-panel\" data-panel=\"3\">\n                        <h3>Party details<\/h3>\n                        <p>Adult count drives the minimum. Kids are estimated separately; final details can be adjusted by your manager.<\/p>\n                        <div class=\"hb-counter-row\">\n                            <div class=\"hb-counter\"><button type=\"button\" data-counter=\"adults\" data-dir=\"-1\">\u2212<\/button><div><span>Adults<\/span><strong data-adults>10<\/strong><\/div><button type=\"button\" data-counter=\"adults\" data-dir=\"1\">+<\/button><\/div>\n                            <div class=\"hb-counter\"><button type=\"button\" data-counter=\"kids\" data-dir=\"-1\">\u2212<\/button><div><span>Kids 5-12<\/span><strong data-kids>0<\/strong><\/div><button type=\"button\" data-counter=\"kids\" data-dir=\"1\">+<\/button><\/div>\n                        <\/div>\n                        <div class=\"hb-estimate\">\n                            <div><span>Estimate<\/span><strong data-total>$600<\/strong><\/div>\n                            <div><span>Adults<\/span><strong data-adult-line>10 x $60<\/strong><\/div>\n                            <div><span>Kids<\/span><strong data-kid-line>0 x $30<\/strong><\/div>\n                            <div><span>Avg \/ guest<\/span><strong data-average>$60<\/strong><\/div>\n                        <\/div>\n                        <div class=\"hb-grid\">\n                            <div class=\"hb-field hb-full\"><label for=\"hb-address\">Street Address<\/label><input id=\"hb-address\" name=\"address\" autocomplete=\"street-address\" required><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-city\">City<\/label><input id=\"hb-city\" name=\"city\" required><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-zip\">Zip Code<\/label><input id=\"hb-zip\" name=\"zip\" inputmode=\"numeric\" required><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-occasion\">Occasion<\/label><select id=\"hb-occasion\" name=\"occasion\" required><option value=\"\">Select occasion<\/option><option>Birthday Party<\/option><option>Anniversary<\/option><option>Graduation<\/option><option>Corporate Event<\/option><option>Holiday Celebration<\/option><option>Wedding Reception<\/option><option>Baby Shower<\/option><option>Housewarming<\/option><option>Bachelorette Party<\/option><option>Other<\/option><\/select><\/div>\n                            <div class=\"hb-field\"><label for=\"hb-source\">How did you hear about us?<\/label><select id=\"hb-source\" name=\"source\" required><option value=\"\">Select source<\/option><option>Google<\/option><option>Instagram<\/option><option>Yelp<\/option><option>Facebook<\/option><option>Referral<\/option><option>Repeat Customer<\/option><option>Other<\/option><\/select><\/div>\n                            <div class=\"hb-field hb-full\"><label for=\"hb-chef-notes\">Chef notes<\/label><textarea id=\"hb-chef-notes\" name=\"chefNotes\" placeholder=\"Access details, parking, covered patio, special requests...\"><\/textarea><\/div>\n                        <\/div>\n                    <\/section>\n\n                    <section class=\"hb-panel\" data-panel=\"4\">\n                        <h3>Review & reserve<\/h3>\n                        <p>No payment is collected in this preview. The output below is what should flow into LatePoint booking meta or CRM notes.<\/p>\n                        <div class=\"hb-review\" data-review><\/div>\n                        <label class=\"hb-consent\" style=\"margin-top:16px;\"><input type=\"checkbox\" name=\"policy\" required> <span>I agree to the 48-hour cancellation and weather policy.<\/span><\/label>\n                        <label class=\"hb-consent\" style=\"margin-top:10px;\"><input type=\"checkbox\" name=\"terms\" required> <span>I agree to the terms and conditions.<\/span><\/label>\n                        <div class=\"hb-success\" data-success>Reservation preview complete. This interaction model is ready to connect to LatePoint.<\/div>\n                    <\/section>\n\n                    <div class=\"hb-alert\" data-alert><\/div>\n                    <div class=\"hb-nav\">\n                        <button class=\"hb-btn hb-btn-back\" type=\"button\" data-prev disabled>Back<\/button>\n                        <button class=\"hb-btn hb-btn-next\" type=\"button\" data-next>Continue<\/button>\n                        <button class=\"hb-btn hb-btn-submit\" type=\"submit\" data-submit style=\"display:none;\">Reserve Now<\/button>\n                    <\/div>\n                <\/form>\n            <\/main>\n        <\/section>\n    <\/div>\n\n    <script>\n        (function () {\n            const settings = {\"adultPrice\":60,\"kidPrice\":30,\"minAdults\":10,\"minKids\":0,\"minimumTotal\":600,\"requiredProteinCount\":2};\n            const root = document.querySelector('[data-hb-app]');\n            if (!root) return;\n            const form = root.querySelector('[data-hb-form]');\n            const panels = Array.from(root.querySelectorAll('[data-panel]'));\n            const nav = Array.from(root.querySelectorAll('[data-step-nav]'));\n            const progress = root.querySelector('[data-progress]');\n            const label = root.querySelector('[data-step-label]');\n            const alert = root.querySelector('[data-alert]');\n            const prev = root.querySelector('[data-prev]');\n            const next = root.querySelector('[data-next]');\n            const submit = root.querySelector('[data-submit]');\n            const saved = root.querySelector('[data-save-note]');\n            const review = root.querySelector('[data-review]');\n            const success = root.querySelector('[data-success]');\n            const state = { step: 0, date: '', time: '', adults: settings.minAdults, kids: settings.minKids };\n\n            const $ = (selector) => root.querySelector(selector);\n            const $$ = (selector) => Array.from(root.querySelectorAll(selector));\n            const money = (amount) => '$' + Math.round(amount).toLocaleString();\n            const checkedValues = (name) => $$('[name=\"' + name + '\"]:checked').map((input) => input.value);\n\n            function flashSaved() {\n                saved.classList.add('is-visible');\n                window.clearTimeout(flashSaved.timer);\n                flashSaved.timer = window.setTimeout(() => saved.classList.remove('is-visible'), 800);\n            }\n\n            function setAlert(message) {\n                alert.textContent = message || '';\n                alert.classList.toggle('is-visible', Boolean(message));\n            }\n\n            function buildDates() {\n                const grid = $('[data-date-grid]');\n                const formatter = new Intl.DateTimeFormat('en-US', { weekday: 'short', month: 'short', day: 'numeric' });\n                for (let i = 1; i <= 14; i++) {\n                    const date = new Date();\n                    date.setDate(date.getDate() + i);\n                    const iso = date.toISOString().slice(0, 10);\n                    const parts = formatter.format(date).replace(',', '').split(' ');\n                    const button = document.createElement('button');\n                    button.type = 'button';\n                    button.className = 'hb-date-card';\n                    button.dataset.date = iso;\n                    button.setAttribute('aria-pressed', 'false');\n                    button.innerHTML = '<small>' + parts[0] + '<\/small><strong>' + parts[2] + '<\/strong><span>' + parts[1] + '<\/span>';\n                    grid.appendChild(button);\n                }\n            }\n\n            function selectCard(selector, attr, value) {\n                $$(selector).forEach((button) => button.setAttribute('aria-pressed', button.dataset[attr] === value ? 'true' : 'false'));\n            }\n\n            function upgradePerGuest() {\n                return $$('[name=\"upgrade\"]:checked').reduce((sum, input) => sum + Number(input.dataset.price || 0), 0);\n            }\n\n            function estimate() {\n                const paidGuests = state.adults + state.kids;\n                const adultLine = state.adults * (settings.adultPrice + upgradePerGuest());\n                const kidLine = state.kids * (settings.kidPrice + upgradePerGuest());\n                const total = Math.max(settings.minimumTotal, adultLine + kidLine);\n                return { paidGuests, total, avg: total \/ Math.max(1, paidGuests), adultLine, kidLine };\n            }\n\n            function renderEstimate() {\n                const e = estimate();\n                $('[data-adults]').textContent = state.adults;\n                $('[data-kids]').textContent = state.kids;\n                $('[data-total]').textContent = money(e.total);\n                $('[data-adult-line]').textContent = state.adults + ' x ' + money(settings.adultPrice + upgradePerGuest());\n                $('[data-kid-line]').textContent = state.kids + ' x ' + money(settings.kidPrice + upgradePerGuest());\n                $('[data-average]').textContent = money(e.avg);\n                $$('[data-counter=\"adults\"][data-dir=\"-1\"]').forEach((button) => button.disabled = state.adults <= settings.minAdults);\n                $$('[data-counter=\"kids\"][data-dir=\"-1\"]').forEach((button) => button.disabled = state.kids <= settings.minKids);\n            }\n\n            function syncChoiceCards() {\n                $$('.hb-choice-card').forEach((card) => {\n                    const input = card.querySelector('input');\n                    card.classList.toggle('is-selected', input.checked);\n                });\n                const proteins = checkedValues('protein');\n                $('[data-protein-count]').textContent = proteins.length + ' of ' + settings.requiredProteinCount + ' selected';\n                $$('[name=\"protein\"]').forEach((input) => {\n                    const card = input.closest('.hb-choice-card');\n                    const disabled = proteins.length >= settings.requiredProteinCount ? !input.checked : false;\n                    input.disabled = disabled;\n                    card.classList.toggle('is-disabled', disabled);\n                });\n                renderEstimate();\n            }\n\n            function showStep(index) {\n                state.step = Math.max(0, Math.min(4, index));\n                panels.forEach((panel, i) => panel.classList.toggle('is-active', i === state.step));\n                nav.forEach((item, i) => {\n                    item.classList.toggle('is-active', i === state.step);\n                    item.classList.toggle('is-done', i < state.step);\n                });\n                label.textContent = 'Step ' + (state.step + 1) + ' of 5';\n                progress.style.width = ((state.step + 1) * 20) + '%';\n                prev.disabled = state.step === 0;\n                next.style.display = state.step === 4 ? 'none' : 'inline-flex';\n                submit.style.display = state.step === 4 ? 'inline-flex' : 'none';\n                if (state.step === 4) renderReview();\n                setAlert('');\n            }\n\n            function validateStep() {\n                setAlert('');\n                if (state.step === 0) {\n                    if (!state.date || !state.time) return setAlert('Choose both a date and a time slot.'), false;\n                }\n                if (state.step === 2) {\n                    if (checkedValues('protein').length !== settings.requiredProteinCount) return setAlert('Choose exactly ' + settings.requiredProteinCount + ' main proteins.'), false;\n                }\n                const fields = Array.from(panels[state.step].querySelectorAll('input, select, textarea'));\n                for (const field of fields) {\n                    if (!field.disabled) {\n                        if (field.checkValidity()) continue;\n                        field.reportValidity();\n                        return false;\n                    }\n                }\n                return true;\n            }\n\n            function renderReview() {\n                const data = new FormData(form);\n                const e = estimate();\n                const rows = [\n                    ['Date & Time', (state.date || 'TBD') + ' at ' + (state.time || 'TBD')],\n                    ['Guest', (data.get('firstName') || '') + ' ' + (data.get('lastName') || '') + ' \u00b7 ' + (data.get('phone') || '')],\n                    ['Menu', checkedValues('protein').join(' + ') + ' \u00b7 Upgrades: ' + (checkedValues('upgrade').join(', ') || 'None')],\n                    ['Estimate', money(e.total) + ' for ' + (state.adults + state.kids) + ' paid guests'],\n                    ['Address', (data.get('address') || 'TBD') + ', ' + (data.get('city') || '') + ' ' + (data.get('zip') || '')],\n                    ['Occasion', data.get('occasion') || 'TBD'],\n                    ['Allergies', data.get('allergies') || 'TBD']\n                ];\n                review.innerHTML = rows.map(([key, value]) => '<div class=\"hb-review-row\"><span>' + key + '<\/span><strong>' + value + '<\/strong><\/div>').join('');\n            }\n\n            buildDates();\n            renderEstimate();\n            syncChoiceCards();\n\n            root.addEventListener('click', function (event) {\n                const date = event.target.closest('[data-date]');\n                if (date) {\n                    state.date = date.dataset.date;\n                    selectCard('.hb-date-card', 'date', state.date);\n                    flashSaved();\n                }\n                const time = event.target.closest('[data-time]');\n                if (time) {\n                    state.time = time.dataset.time;\n                    selectCard('.hb-time-card', 'time', state.time);\n                    flashSaved();\n                }\n                const counter = event.target.closest('[data-counter]');\n                if (counter) {\n                    const key = counter.dataset.counter;\n                    const dir = Number(counter.dataset.dir);\n                    state[key] = Math.max(key === 'adults' ? settings.minAdults : settings.minKids, state[key] + dir);\n                    renderEstimate();\n                    flashSaved();\n                }\n            });\n\n            form.addEventListener('change', function (event) {\n                if (event.target.matches('[name=\"protein\"], [name=\"upgrade\"]')) syncChoiceCards();\n                flashSaved();\n            });\n\n            prev.addEventListener('click', () => showStep(state.step - 1));\n            next.addEventListener('click', () => { if (validateStep()) showStep(state.step + 1); });\n            form.addEventListener('submit', function (event) {\n                event.preventDefault();\n                if (!validateStep()) return;\n                success.classList.add('is-visible');\n                submit.disabled = true;\n                submit.textContent = 'Reserved';\n            });\n        })();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/latepoint.test.wptochina.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/latepoint.test.wptochina.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/latepoint.test.wptochina.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/latepoint.test.wptochina.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":0,"href":"https:\/\/latepoint.test.wptochina.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"wp:attachment":[{"href":"https:\/\/latepoint.test.wptochina.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}