{"id":10,"date":"2026-10-01T12:40:40","date_gmt":"2026-10-01T04:40:40","guid":{"rendered":"https:\/\/zenmotorworks.com\/?page_id=10"},"modified":"2026-10-01T12:41:02","modified_gmt":"2026-10-01T04:41:02","slug":"main","status":"publish","type":"page","link":"https:\/\/zenmotorworks.com\/","title":{"rendered":"main"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41299ad e-flex e-con-boxed e-con e-parent\" data-id=\"41299ad\" 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-ad315e9 elementor-widget elementor-widget-html\" data-id=\"ad315e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"ms\">\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<title>ZEN Motorworks | Bengkel Premium Klang Valley<\/title>\r\n<meta name=\"description\" content=\"Servis, penyelenggaraan dan pemasangan komponen untuk kereta dan motosikal JDM, BMW dan Mercedes-Benz. Berasaskan appointment di Klang Valley.\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Archivo:wdth,wght@62..125,400..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap\">\r\n<style>\r\n:root{\r\n  --bg:#0D0E10; --bg-2:#111215; --panel:#17181C; --panel-2:#131417;\r\n  --line:#23252A; --line-2:#2E3035; --line-3:#3A3C42;\r\n  --text:#ECEBE6; --text-2:#C9C8C2; --muted:#A3A39D; --muted-2:#8E8E88; --faint:#6E6F6A;\r\n  --accent:#FF7A2F; --accent-2:#FFA16B; --ok:#7FD18B;\r\n  --mono:'IBM Plex Mono', ui-monospace, monospace;\r\n  --sans:'Archivo','Helvetica Neue',sans-serif;\r\n}\r\n*{box-sizing:border-box}\r\nhtml{scroll-behavior:smooth;scroll-padding-top:80px}\r\nbody{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55}\r\na{color:var(--accent)}a:hover{color:var(--accent-2)}\r\nimg{max-width:100%;display:block}\r\ninput,textarea,button{font:inherit}\r\ninput::placeholder,textarea::placeholder{color:var(--faint)}\r\n:focus-visible{outline:2px solid var(--accent);outline-offset:2px}\r\n.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}\r\n.mono{font-family:var(--mono)}\r\n.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}\r\nh1,h2,h3{margin:0}\r\n.h2{font-size:clamp(34px,4vw,52px);line-height:1.05;font-weight:800;font-stretch:112%}\r\n.sec{padding-top:104px;padding-bottom:48px;display:flex;flex-direction:column;gap:40px}\r\n.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}\r\n.sec-head .t{display:flex;flex-direction:column;gap:12px}\r\n.sec-head p{margin:0;max-width:420px;color:var(--muted)}\r\n.ph{background:var(--panel);border:1px solid #2A2C31;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--faint);text-align:center;padding:12px}\r\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:4px;font-weight:700;text-decoration:none;cursor:pointer;border:0;min-height:48px}\r\n.btn-primary{background:var(--accent);color:var(--bg)}\r\n.btn-primary:hover{background:var(--accent-2);color:var(--bg)}\r\n.btn-ghost{border:1px solid var(--line-3);color:var(--text);background:transparent;font-weight:600}\r\n.btn-ghost:hover{border-color:var(--text);color:var(--text)}\r\n\r\n\/* NAV *\/\r\nheader{position:sticky;top:0;z-index:20;background:rgba(13,14,16,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}\r\nnav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}\r\n.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}\r\n.logo:hover{color:var(--text)}\r\n.logo-mark{width:34px;height:34px;border:2px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:13px;color:var(--accent)}\r\n.logo-text{font-weight:800;font-stretch:112%;letter-spacing:.06em;font-size:17px}\r\n.logo-text span{font-weight:400;color:var(--muted)}\r\n.nav-links{display:flex;align-items:center;gap:4px}\r\n.nav-links a{color:var(--text-2);text-decoration:none;padding:12px;font-size:15px}\r\n.nav-links a:hover{color:var(--text)}\r\n.nav-links .btn{margin-left:8px;padding:12px 20px;font-size:15px;color:var(--bg)}\r\n.menu-btn{display:none;background:transparent;border:1px solid var(--line-3);color:var(--text);width:44px;height:44px;border-radius:4px;cursor:pointer;align-items:center;justify-content:center}\r\n@media (max-width:820px){\r\n  .menu-btn{display:inline-flex}\r\n  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 24px 20px}\r\n  .nav-links.open{display:flex}\r\n  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line)}\r\n  .nav-links .btn{margin:12px 0 0;border-bottom:0}\r\n}\r\n\r\n\/* HERO *\/\r\n.hero{padding-top:88px;padding-bottom:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:56px;align-items:center}\r\n.hero-copy{display:flex;flex-direction:column;gap:28px}\r\n.hero h1{font-size:clamp(44px,6.4vw,84px);line-height:.98;font-weight:800;font-stretch:118%;letter-spacing:-.01em}\r\n.hero p{margin:0;font-size:19px;color:#B4B3AD;max-width:520px}\r\n.hero-cta{display:flex;gap:12px;flex-wrap:wrap}\r\n.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}\r\n.facts div{background:var(--bg);padding:16px}\r\n.facts .k{font-family:var(--mono);font-size:12px;color:var(--muted-2);letter-spacing:.08em}\r\n.facts .v{font-weight:700;margin-top:4px}\r\n@media (max-width:520px){.facts{grid-template-columns:1fr}}\r\n.hero-visual{position:relative;min-height:520px;overflow:hidden}\r\n.hero-visual .ph{position:absolute;inset:0;border-radius:6px}\r\n.jobcard{position:absolute;left:20px;bottom:20px;right:20px;max-width:320px;background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:10px}\r\n.jobcard .row{display:flex;justify-content:space-between;font-size:14px;color:#B4B3AD}\r\n.jobcard .top{font-family:var(--mono);font-size:12px;color:var(--muted-2);letter-spacing:.06em}\r\n.dot-ok{color:var(--ok)}\r\n.hr{height:1px;background:var(--line)}\r\n\r\n\/* STEPS *\/\r\n.steps{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}\r\n.steps .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}\r\n.step{padding:32px 24px 32px 0;display:flex;gap:16px;align-items:flex-start}\r\n.step .n{font-family:var(--mono);color:var(--accent);font-size:14px;padding-top:3px}\r\n.step .t{font-weight:700;font-size:18px}\r\n.step .d{color:var(--muted);font-size:15px}\r\n\r\n\/* SERVICES *\/\r\n.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}\r\n.svc{background:var(--bg);padding:32px;display:flex;flex-direction:column;gap:14px;min-height:230px;transition:background .2s}\r\n.svc:hover{background:#121317}\r\n.svc .top{display:flex;justify-content:space-between;align-items:center}\r\n.svc .code{font-family:var(--mono);font-size:13px;color:var(--faint)}\r\n.tag{font-family:var(--mono);font-size:12px;color:var(--muted-2);border:1px solid var(--line-2);padding:4px 8px;border-radius:3px}\r\n.svc h3{font-size:22px;font-weight:700}\r\n.svc p{margin:0;color:var(--muted);font-size:15px;flex-grow:1}\r\n.svc .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1E2024;padding-top:14px;font-size:14px;color:var(--text-2)}\r\n.svc .foot strong{color:var(--text)}\r\n.svc .foot a{text-decoration:none;font-weight:600;padding:10px 0}\r\n\r\n\/* BYOP *\/\r\n.byop{background:var(--accent);color:var(--bg);border-radius:6px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;align-items:center}\r\n.byop .eyebrow{color:var(--bg);font-weight:600}\r\n.byop h2{font-size:clamp(32px,4vw,50px);line-height:1.02;font-weight:800;font-stretch:112%;margin:16px 0}\r\n.byop p{margin:0;font-size:17px;max-width:480px}\r\n.byop ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--bg)}\r\n.byop li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(13,14,16,.25)}\r\n.byop li b{font-family:var(--mono)}\r\n\r\n\/* VEHICLES *\/\r\n.veh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}\r\n.veh{border:1px solid #2A2C31;border-radius:6px;overflow:hidden;display:flex;flex-direction:column}\r\n.veh .ph{height:180px;border:0;border-radius:0}\r\n.veh .b{padding:20px;display:flex;flex-direction:column;gap:6px}\r\n.veh .name{font-weight:800;font-size:26px;font-stretch:115%}\r\n.veh .d{color:var(--muted);font-size:15px}\r\n\r\n\/* WORKS *\/\r\n.filters{display:flex;gap:8px;flex-wrap:wrap}\r\n.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}\r\n.work{margin:0;display:flex;flex-direction:column;gap:12px}\r\n.work .ph{aspect-ratio:4\/3}\r\n.work figcaption{display:flex;justify-content:space-between;gap:12px;font-size:15px}\r\n.work figcaption span:first-child{font-weight:600}\r\n.work figcaption .mono{font-size:12px;color:var(--muted-2);padding-top:3px}\r\n.work[hidden]{display:none}\r\n\r\n\/* PRODUCTS *\/\r\n.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}\r\n.prod{background:var(--panel-2);border:1px solid #2A2C31;border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:12px}\r\n.prod .ph{aspect-ratio:1\/1;background:#1B1C20;border:0;border-radius:4px}\r\n.prod .cat{font-family:var(--mono);font-size:12px;color:var(--muted-2);letter-spacing:.08em}\r\n.prod .name{font-weight:700;font-size:18px}\r\n.prod .row{display:flex;justify-content:space-between;align-items:center}\r\n.prod .row span:last-child{font-size:13px;color:var(--muted)}\r\n\r\n\/* BOOKING *\/\r\n.booking{border-top:1px solid var(--line);background:var(--bg-2);margin-top:88px}\r\n.booking .wrap{padding-top:104px;padding-bottom:104px;display:flex;flex-direction:column;gap:40px}\r\n.bk-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:32px;align-items:start}\r\n@media (max-width:900px){.bk-grid{grid-template-columns:1fr}}\r\n.bk-form{display:flex;flex-direction:column;gap:32px}\r\nfieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}\r\nlegend{font-weight:700;font-size:18px;margin-bottom:14px;padding:0}\r\nlegend small{color:var(--muted-2);font-weight:400;font-size:15px}\r\n.chips{display:flex;flex-wrap:wrap;gap:10px}\r\n.chip{background:transparent;color:var(--text);border:1px solid var(--line-3);border-radius:4px;min-height:44px;padding:10px 16px;font-size:15px;font-weight:500;cursor:pointer}\r\n.chip:hover{border-color:var(--text)}\r\n.chip[aria-pressed=\"true\"]{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:700}\r\n.chip:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}\r\n.dates{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}\r\n.dates .chip{padding:10px 6px;text-align:center;line-height:1.25}\r\n.dates .chip span{display:block}\r\n.dates .dow{font-family:var(--mono);font-size:12px;letter-spacing:.06em}\r\n.dates .day{font-size:24px;font-weight:800}\r\n.dates .mon{font-size:12px}\r\n.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}\r\nlabel.f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}\r\n.f input,.f textarea{background:var(--bg);border:1px solid var(--line-2);color:var(--text);border-radius:4px;padding:13px 14px;font-size:16px;width:100%}\r\n.f textarea{resize:vertical}\r\nlabel.check{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line-2);border-radius:4px;cursor:pointer;font-size:15px}\r\nlabel.check input{width:20px;height:20px;accent-color:var(--accent)}\r\n.summary{position:sticky;top:88px;background:var(--bg);border:1px solid var(--line-2);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:18px}\r\n.summary .lbl{font-size:13px;color:var(--muted-2)}\r\n.summary .val{font-weight:600}\r\n.summary .note{font-size:14px;color:var(--accent);border:1px solid #5A3418;border-radius:4px;padding:10px 12px}\r\n.summary .total{display:flex;justify-content:space-between;align-items:baseline}\r\n.summary .total span:first-child{color:var(--muted)}\r\n.summary .total span:last-child{font-weight:800;font-size:22px}\r\n.err{font-size:14px;color:#FFB4A3}\r\n.small{font-size:13px;color:var(--muted-2)}\r\n.done{border:1px solid var(--line-2);background:var(--bg);border-radius:6px;padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:16px;max-width:720px}\r\n.done .tick{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}\r\n.done h3{font-size:30px;font-weight:800}\r\n.done p{margin:0;color:#B4B3AD}\r\n.done .ref{font-family:var(--mono);font-size:22px;color:var(--accent)}\r\n.done .grid{border-top:1px solid var(--line);padding-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;font-size:15px}\r\n[hidden]{display:none!important}\r\n\r\n\/* FOOTER *\/\r\nfooter{border-top:1px solid var(--line)}\r\n.foot-grid{padding-top:64px;padding-bottom:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px}\r\n.foot-grid > div{display:flex;flex-direction:column;gap:6px;font-size:15px}\r\n.foot-grid .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted-2);margin-bottom:6px}\r\n.foot-grid .m{color:var(--muted)}\r\n.copy{padding-top:20px;padding-bottom:32px;border-top:1px solid #1B1C20;font-size:13px;color:var(--muted-2)}\r\n\r\n\/* WhatsApp float *\/\r\n.wa{position:fixed;right:20px;bottom:20px;z-index:30;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}\r\n.wa:hover{color:var(--bg);background:var(--accent-2)}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n  <nav class=\"wrap\" style=\"position:relative\">\r\n    <a href=\"#atas\" class=\"logo\" aria-label=\"ZEN Motorworks, ke atas\">\r\n      <span class=\"logo-mark\">Z<\/span>\r\n      <span class=\"logo-text\">ZEN <span>MOTORWORKS<\/span><\/span>\r\n    <\/a>\r\n    <button class=\"menu-btn\" type=\"button\" aria-label=\"Buka menu\" aria-expanded=\"false\" aria-controls=\"navLinks\" id=\"menuBtn\">\r\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M4 7h16M4 12h16M4 17h16\"\/><\/svg>\r\n    <\/button>\r\n    <div class=\"nav-links\" id=\"navLinks\">\r\n      <a href=\"#servis\">Servis<\/a>\r\n      <a href=\"#hasil\">Hasil Kerja<\/a>\r\n      <a href=\"#kenderaan\">Kenderaan<\/a>\r\n      <a href=\"#produk\">Produk<\/a>\r\n      <a href=\"#tempah\" class=\"btn btn-primary\">Tempah Slot<\/a>\r\n    <\/div>\r\n  <\/nav>\r\n<\/header>\r\n\r\n<main>\r\n  <!-- HERO -->\r\n  <section id=\"atas\" class=\"wrap hero\">\r\n    <div class=\"hero-copy\">\r\n      <div class=\"eyebrow\">Bengkel Premium \u00b7 Klang Valley \u00b7 Appointment Sahaja<\/div>\r\n      <h1>Ketelitian untuk mesin yang anda hargai.<\/h1>\r\n      <p>Servis, penyelenggaraan dan pemasangan komponen untuk kereta dan motosikal JDM, BMW dan Mercedes-Benz. Satu slot, satu kenderaan, perhatian penuh.<\/p>\r\n      <div class=\"hero-cta\">\r\n        <a href=\"#tempah\" class=\"btn btn-primary\">Tempah Appointment\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\r\n        <\/a>\r\n        <a href=\"#servis\" class=\"btn btn-ghost\">Lihat Servis<\/a>\r\n      <\/div>\r\n      <div class=\"facts\">\r\n        <div><div class=\"k\">KONSEP<\/div><div class=\"v\">Berasaskan slot<\/div><\/div>\r\n        <div><div class=\"k\">KENDERAAN<\/div><div class=\"v\">Kereta &amp; motosikal<\/div><\/div>\r\n        <div><div class=\"k\">ALAT GANTI<\/div><div class=\"v\">Boleh bawa sendiri<\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"hero-visual\">\r\n      <!-- Ganti dengan: <img decoding=\"async\" src=\"hero.jpg\" alt=\"...\" style=\"position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px\"> -->\r\n      <div class=\"ph\">[FOTO HERO]<br>Kenderaan di atas lif, bay bengkel ZEN<\/div>\r\n      <div class=\"jobcard\">\r\n        <div class=\"row top\"><span>KAD KERJA<\/span><span class=\"dot-ok\">\u25cf DALAM BAY<\/span><\/div>\r\n        <div style=\"font-weight:700;font-size:18px\">[MODEL KENDERAAN]<\/div>\r\n        <div class=\"hr\"><\/div>\r\n        <div class=\"row\"><span>Servis berkala<\/span><span class=\"dot-ok\">Selesai<\/span><\/div>\r\n        <div class=\"row\"><span>Pasang coilover (BYOP)<\/span><span style=\"color:var(--accent)\">Sedang dibuat<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- STEPS -->\r\n  <section class=\"steps\" aria-label=\"Cara tempahan\">\r\n    <div class=\"wrap\">\r\n      <div class=\"step\"><span class=\"n\">01<\/span><div><div class=\"t\">Pilih servis<\/div><div class=\"d\">Pilih satu atau lebih servis secara online.<\/div><\/div><\/div>\r\n      <div class=\"step\"><span class=\"n\">02<\/span><div><div class=\"t\">Pilih tarikh &amp; masa<\/div><div class=\"d\">Slot dikunci khas untuk kenderaan anda.<\/div><\/div><\/div>\r\n      <div class=\"step\"><span class=\"n\">03<\/span><div><div class=\"t\">Hadir ke bengkel<\/div><div class=\"d\">Terus masuk bay, tanpa menunggu giliran.<\/div><\/div><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SERVIS -->\r\n  <section id=\"servis\" class=\"wrap sec\">\r\n    <div class=\"sec-head\">\r\n      <div class=\"t\"><div class=\"eyebrow\">Servis Kami<\/div><h2 class=\"h2\">Apa yang kami kerjakan<\/h2><\/div>\r\n      <p>Setiap kerja direkod dalam kad kerja dan dimaklumkan kepada anda sebelum sebarang tambahan dibuat.<\/p>\r\n    <\/div>\r\n    <div class=\"svc-grid\" id=\"svcGrid\"><\/div>\r\n  <\/section>\r\n\r\n  <!-- BYOP -->\r\n  <section class=\"wrap\" style=\"padding-top:48px;padding-bottom:48px\">\r\n    <div class=\"byop\">\r\n      <div>\r\n        <div class=\"eyebrow\">Bring Your Own Parts<\/div>\r\n        <h2>Beli sendiri di luar. Kami pasang dengan betul.<\/h2>\r\n        <p>Alat ganti, aksesori atau komponen yang anda beli sendiri boleh dipasang di ZEN Motorworks dengan caj pemasangan yang bersesuaian.<\/p>\r\n      <\/div>\r\n      <ol>\r\n        <li><b>A<\/b><span>Nyatakan komponen semasa tempahan supaya slot dan masa kerja dianggar tepat.<\/span><\/li>\r\n        <li><b>B<\/b><span>Kami semak keserasian part dengan kenderaan sebelum dipasang.<\/span><\/li>\r\n        <li><b>C<\/b><span>Caj pemasangan dimaklumkan lebih awal, tiada kejutan di kaunter.<\/span><\/li>\r\n      <\/ol>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- KENDERAAN -->\r\n  <section id=\"kenderaan\" class=\"wrap sec\">\r\n    <div class=\"sec-head\"><div class=\"t\"><div class=\"eyebrow\">Kenderaan Yang Kami Kendalikan<\/div><h2 class=\"h2\">Premium. Performance. Peminat.<\/h2><\/div><\/div>\r\n    <div class=\"veh-grid\">\r\n      <div class=\"veh\"><div class=\"ph\">[FOTO JDM]<\/div><div class=\"b\"><div class=\"name\">JDM<\/div><div class=\"d\">Honda, Toyota, Nissan, Subaru, Mitsubishi dan rakan sejawat.<\/div><\/div><\/div>\r\n      <div class=\"veh\"><div class=\"ph\">[FOTO BMW]<\/div><div class=\"b\"><div class=\"name\">BMW<\/div><div class=\"d\">Siri 3, 5, X dan model M, termasuk enjin turbo moden.<\/div><\/div><\/div>\r\n      <div class=\"veh\"><div class=\"ph\">[FOTO MERCEDES-BENZ]<\/div><div class=\"b\"><div class=\"name\">Mercedes-Benz<\/div><div class=\"d\">Kelas C, E, GLC, AMG dan model klasik.<\/div><\/div><\/div>\r\n      <div class=\"veh\"><div class=\"ph\">[FOTO MOTOSIKAL]<\/div><div class=\"b\"><div class=\"name\">Motosikal<\/div><div class=\"d\">Superbike dan motosikal premium berkapasiti tinggi.<\/div><\/div><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- HASIL KERJA -->\r\n  <section id=\"hasil\" class=\"wrap sec\">\r\n    <div class=\"sec-head\">\r\n      <div class=\"t\"><div class=\"eyebrow\">Hasil Kerja<\/div><h2 class=\"h2\">Dari bay kami<\/h2><\/div>\r\n      <div class=\"filters\" id=\"workFilters\" role=\"group\" aria-label=\"Tapis hasil kerja\"><\/div>\r\n    <\/div>\r\n    <div class=\"work-grid\" id=\"workGrid\"><\/div>\r\n    <a href=\"#tempah\" style=\"text-decoration:none;font-weight:600;align-self:flex-start;padding:12px 0\">Mahu kenderaan anda di sini? Tempah slot \u2192<\/a>\r\n  <\/section>\r\n\r\n  <!-- PRODUK -->\r\n  <section id=\"produk\" class=\"wrap sec\">\r\n    <div class=\"sec-head\"><div class=\"t\"><div class=\"eyebrow\">Produk &amp; Komponen Pilihan<\/div><h2 class=\"h2\">Yang kami percaya<\/h2><\/div><\/div>\r\n    <div class=\"prod-grid\">\r\n      <div class=\"prod\"><div class=\"ph\">[FOTO PRODUK]<\/div><div class=\"cat\">MINYAK ENJIN<\/div><div class=\"name\">[NAMA PRODUK]<\/div><div class=\"row\"><span>[HARGA]<\/span><span>Termasuk pemasangan<\/span><\/div><\/div>\r\n      <div class=\"prod\"><div class=\"ph\">[FOTO PRODUK]<\/div><div class=\"cat\">BREK<\/div><div class=\"name\">[NAMA PRODUK]<\/div><div class=\"row\"><span>[HARGA]<\/span><span>Termasuk pemasangan<\/span><\/div><\/div>\r\n      <div class=\"prod\"><div class=\"ph\">[FOTO PRODUK]<\/div><div class=\"cat\">SUSPENSI<\/div><div class=\"name\">[NAMA PRODUK]<\/div><div class=\"row\"><span>[HARGA]<\/span><span>Termasuk pemasangan<\/span><\/div><\/div>\r\n      <div class=\"prod\"><div class=\"ph\">[FOTO PRODUK]<\/div><div class=\"cat\">EKZOS &amp; INTAKE<\/div><div class=\"name\">[NAMA PRODUK]<\/div><div class=\"row\"><span>[HARGA]<\/span><span>Termasuk pemasangan<\/span><\/div><\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- TEMPAHAN -->\r\n  <section id=\"tempah\" class=\"booking\">\r\n    <div class=\"wrap\">\r\n      <div style=\"display:flex;flex-direction:column;gap:12px\">\r\n        <div class=\"eyebrow\">Online Booking Appointment<\/div>\r\n        <h2 class=\"h2\">Tempah slot anda<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"done\" id=\"doneBox\" hidden>\r\n        <div class=\"tick\"><svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0D0E10\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"\/><\/svg><\/div>\r\n        <h3>Tempahan diterima<\/h3>\r\n        <p>Teruskan ke WhatsApp untuk pengesahan slot. Sila simpan nombor rujukan ini.<\/p>\r\n        <div class=\"ref\" id=\"refNo\"><\/div>\r\n        <div class=\"grid\">\r\n          <div><div class=\"small\">Tarikh &amp; masa<\/div><div style=\"font-weight:600\" id=\"doneWhen\"><\/div><\/div>\r\n          <div><div class=\"small\">Servis<\/div><div style=\"font-weight:600\" id=\"doneSvc\"><\/div><\/div>\r\n        <\/div>\r\n        <div style=\"display:flex;gap:12px;flex-wrap:wrap\">\r\n          <a class=\"btn btn-primary\" id=\"waLink\" href=\"#\" target=\"_blank\" rel=\"noopener\">Sahkan melalui WhatsApp<\/a>\r\n          <button type=\"button\" class=\"btn btn-ghost\" id=\"resetBtn\">Buat tempahan lain<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <form class=\"bk-grid\" id=\"bookForm\" novalidate>\r\n        <div class=\"bk-form\">\r\n          <fieldset>\r\n            <legend>1. Pilih servis <small>(boleh lebih dari satu)<\/small><\/legend>\r\n            <div class=\"chips\" id=\"svcChips\"><\/div>\r\n          <\/fieldset>\r\n\r\n          <fieldset>\r\n            <legend>2. Kenderaan<\/legend>\r\n            <div class=\"chips\" id=\"vtypeChips\">\r\n              <button type=\"button\" class=\"chip\" data-v=\"Kereta\" aria-pressed=\"true\">Kereta<\/button>\r\n              <button type=\"button\" class=\"chip\" data-v=\"Motosikal\" aria-pressed=\"false\">Motosikal<\/button>\r\n            <\/div>\r\n            <div class=\"fields\">\r\n              <label class=\"f\">Jenama<input type=\"text\" id=\"make\" placeholder=\"cth. BMW, Honda, Yamaha\"><\/label>\r\n              <label class=\"f\">Model &amp; tahun<input type=\"text\" id=\"model\" placeholder=\"cth. F30 320i 2016\"><\/label>\r\n              <label class=\"f\">No. pendaftaran<input type=\"text\" id=\"plate\" placeholder=\"cth. WXY 1234\"><\/label>\r\n            <\/div>\r\n          <\/fieldset>\r\n\r\n          <fieldset>\r\n            <legend>3. Tarikh<\/legend>\r\n            <div class=\"dates\" id=\"dateChips\"><\/div>\r\n          <\/fieldset>\r\n\r\n          <fieldset>\r\n            <legend>4. Masa<\/legend>\r\n            <div class=\"chips\" id=\"timeChips\"><\/div>\r\n          <\/fieldset>\r\n\r\n          <fieldset>\r\n            <legend>5. Maklumat anda<\/legend>\r\n            <div class=\"fields\">\r\n              <label class=\"f\">Nama<input type=\"text\" id=\"name\" autocomplete=\"name\" required><\/label>\r\n              <label class=\"f\">No. telefon (WhatsApp)<input type=\"tel\" id=\"phone\" autocomplete=\"tel\" placeholder=\"01X-XXX XXXX\" required><\/label>\r\n            <\/div>\r\n            <label class=\"check\"><input type=\"checkbox\" id=\"byop\"> Saya akan bawa alat ganti \/ aksesori sendiri<\/label>\r\n            <label class=\"f\">Nota (simptom, part yang dibawa, dll.)<textarea id=\"note\" rows=\"3\"><\/textarea><\/label>\r\n          <\/fieldset>\r\n        <\/div>\r\n\r\n        <aside class=\"summary\" aria-live=\"polite\">\r\n          <div class=\"mono small\" style=\"letter-spacing:.1em\">RINGKASAN TEMPAHAN<\/div>\r\n          <div><div class=\"lbl\">Servis<\/div><div class=\"val\" id=\"sSvc\">Belum dipilih<\/div><\/div>\r\n          <div><div class=\"lbl\">Kenderaan<\/div><div class=\"val\" id=\"sVeh\">Kereta<\/div><\/div>\r\n          <div><div class=\"lbl\">Tarikh &amp; masa<\/div><div class=\"val\" id=\"sWhen\">Tarikh belum dipilih<\/div><\/div>\r\n          <div class=\"note\" id=\"sByop\" hidden>Bawa part sendiri: caj pemasangan akan dimaklumkan.<\/div>\r\n          <div class=\"hr\"><\/div>\r\n          <div class=\"total\"><span>Anggaran dari<\/span><span>[HARGA]<\/span><\/div>\r\n          <div class=\"err\" id=\"err\" role=\"alert\"><\/div>\r\n          <button type=\"submit\" class=\"btn btn-primary\" style=\"width:100%\">Sahkan Tempahan<\/button>\r\n          <div class=\"small\">Tiada bayaran sekarang. Slot disahkan melalui WhatsApp.<\/div>\r\n        <\/aside>\r\n      <\/form>\r\n    <\/div>\r\n  <\/section>\r\n<\/main>\r\n\r\n<footer>\r\n  <div class=\"wrap foot-grid\">\r\n    <div>\r\n      <div class=\"logo-text\" style=\"font-size:20px\">ZEN <span>MOTORWORKS<\/span><\/div>\r\n      <p style=\"margin:6px 0 0\" class=\"m\">Bengkel automotif dipercayai pemilik kenderaan premium dan peminat automotif.<\/p>\r\n    <\/div>\r\n    <div><div class=\"k\">LOKASI<\/div><div>[ALAMAT BENGKEL]<\/div><div class=\"m\">Klang Valley<\/div><\/div>\r\n    <div><div class=\"k\">WAKTU OPERASI<\/div><div>[HARI &amp; JAM OPERASI]<\/div><div class=\"m\">Dengan appointment sahaja<\/div><\/div>\r\n    <div><div class=\"k\">HUBUNGI<\/div><div>WhatsApp: [NOMBOR]<\/div><div>Instagram: [@AKAUN]<\/div><\/div>\r\n  <\/div>\r\n  <div class=\"wrap copy\">\u00a9 <span id=\"yr\"><\/span> ZEN Motorworks. Hak cipta terpelihara.<\/div>\r\n<\/footer>\r\n\r\n<a class=\"wa\" id=\"waFloat\" href=\"#\" target=\"_blank\" rel=\"noopener\" aria-label=\"WhatsApp ZEN Motorworks\">\r\n  <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 11.5a8.4 8.4 0 0 1-12.5 7.4L3 20.5l1.6-5.3A8.4 8.4 0 1 1 21 11.5z\"\/><path d=\"M8.5 9.5c.5 2.5 2.5 4.5 5 5l1.2-1.2 2 1-.6 1.7c-3.8.3-8.4-4.3-8.1-8.1l1.7-.6 1 2z\"\/><\/svg>\r\n<\/a>\r\n\r\n<script>\r\n\/* ========= TETAPAN: ubah di sini ========= *\/\r\nvar CONFIG = {\r\n  whatsapp: '60123456789',            \/\/ [NOMBOR] format antarabangsa tanpa + (cth. 60123456789)\r\n  daysAhead: 14,                      \/\/ berapa hari ke hadapan boleh ditempah\r\n  closedDays: [0],                    \/\/ hari tutup: 0=Ahad, 1=Isnin ... 6=Sabtu\r\n  times: ['9:00 pagi', '10:30 pagi', '12:00 tgh', '2:30 ptg', '4:00 ptg']\r\n};\r\n\r\nvar SERVICES = [\r\n  { id:'srv',   code:'S-01', tag:'Kereta & Moto', name:'Servis Berkala & Tukar Minyak', desc:'Minyak enjin, penapis dan semakan menyeluruh mengikut jadual pengeluar.', price:'[HARGA]' },\r\n  { id:'diag',  code:'S-02', tag:'Diagnostik',    name:'Diagnostik & Imbasan ECU',      desc:'Baca kod ralat, analisis data langsung dan kenal pasti punca sebenar masalah.', price:'[HARGA]' },\r\n  { id:'brake', code:'S-03', tag:'Chassis',       name:'Brek & Suspensi',              desc:'Pad, disk, cecair brek, absorber, bush dan penjajaran geometri.', price:'[HARGA]' },\r\n  { id:'acc',   code:'S-04', tag:'Pemasangan',    name:'Aksesori & Komponen Performance', desc:'Ekzos, intake, coilover, rim, lampu dan naik taraf lain dipasang dengan kemas.', price:'[HARGA]' },\r\n  { id:'moto',  code:'S-05', tag:'Motosikal',     name:'Servis Motosikal Premium',     desc:'Superbike dan motosikal berkapasiti tinggi: servis, chain, brek dan pemasangan part.', price:'[HARGA]' },\r\n  { id:'byop',  code:'S-06', tag:'BYOP',          name:'Pasang Part Sendiri',          desc:'Bawa komponen yang dibeli di luar, kami pasang dengan caj pemasangan bersesuaian.', price:'[HARGA]' }\r\n];\r\n\r\nvar WORKS = [\r\n  { title:'[Projek: pemasangan coilover]', cat:'JDM' },\r\n  { title:'[Projek: servis besar]',        cat:'BMW' },\r\n  { title:'[Projek: naik taraf brek]',     cat:'MERCEDES' },\r\n  { title:'[Projek: ekzos penuh]',         cat:'JDM' },\r\n  { title:'[Projek: servis superbike]',    cat:'MOTOSIKAL' },\r\n  { title:'[Projek: diagnostik ECU]',      cat:'BMW' }\r\n];\r\n\/* ======================================== *\/\r\n\r\n(function(){\r\n  var $ = function(id){ return document.getElementById(id); };\r\n  var esc = function(s){ return String(s).replace(\/[&<>\"']\/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]; }); };\r\n  var waBase = 'https:\/\/wa.me\/' + CONFIG.whatsapp;\r\n\r\n  $('yr').textContent = new Date().getFullYear();\r\n  $('waFloat').href = waBase;\r\n\r\n  \/\/ Mobile menu\r\n  var menuBtn = $('menuBtn'), navLinks = $('navLinks');\r\n  menuBtn.addEventListener('click', function(){\r\n    var open = navLinks.classList.toggle('open');\r\n    menuBtn.setAttribute('aria-expanded', open);\r\n  });\r\n  navLinks.addEventListener('click', function(e){\r\n    if (e.target.tagName === 'A') { navLinks.classList.remove('open'); menuBtn.setAttribute('aria-expanded', false); }\r\n  });\r\n\r\n  \/\/ Services grid\r\n  $('svcGrid').innerHTML = SERVICES.map(function(s){\r\n    return '<article class=\"svc\"><div class=\"top\"><span class=\"code\">'+esc(s.code)+'<\/span><span class=\"tag\">'+esc(s.tag)+'<\/span><\/div>'+\r\n      '<h3>'+esc(s.name)+'<\/h3><p>'+esc(s.desc)+'<\/p>'+\r\n      '<div class=\"foot\"><span>Dari <strong>'+esc(s.price)+'<\/strong><\/span><a href=\"#tempah\" data-svc=\"'+s.id+'\">Tempah \u2192<\/a><\/div><\/article>';\r\n  }).join('');\r\n\r\n  \/\/ Works + filter\r\n  var cats = ['SEMUA'].concat(WORKS.map(function(w){return w.cat;}).filter(function(c,i,a){return a.indexOf(c)===i;}));\r\n  $('workFilters').innerHTML = cats.map(function(c,i){\r\n    return '<button type=\"button\" class=\"chip\" data-cat=\"'+esc(c)+'\" aria-pressed=\"'+(i===0)+'\">'+esc(c)+'<\/button>';\r\n  }).join('');\r\n  $('workGrid').innerHTML = WORKS.map(function(w){\r\n    return '<figure class=\"work\" data-cat=\"'+esc(w.cat)+'\"><div class=\"ph\">[FOTO HASIL KERJA]<\/div>'+\r\n      '<figcaption><span>'+esc(w.title)+'<\/span><span class=\"mono\">'+esc(w.cat)+'<\/span><\/figcaption><\/figure>';\r\n  }).join('');\r\n  $('workFilters').addEventListener('click', function(e){\r\n    var b = e.target.closest('button'); if (!b) return;\r\n    var c = b.dataset.cat;\r\n    this.querySelectorAll('button').forEach(function(x){ x.setAttribute('aria-pressed', x === b); });\r\n    document.querySelectorAll('.work').forEach(function(f){ f.hidden = !(c === 'SEMUA' || f.dataset.cat === c); });\r\n  });\r\n\r\n  \/\/ Booking state\r\n  var st = { services: [], vtype: 'Kereta', date: null, dateLabel: '', time: null };\r\n\r\n  $('svcChips').innerHTML = SERVICES.map(function(s){\r\n    return '<button type=\"button\" class=\"chip\" data-id=\"'+s.id+'\" aria-pressed=\"false\">'+esc(s.name)+'<\/button>';\r\n  }).join('');\r\n  $('svcChips').addEventListener('click', function(e){\r\n    var b = e.target.closest('button'); if (!b) return;\r\n    toggleService(b.dataset.id);\r\n  });\r\n  function toggleService(id, forceOn){\r\n    var i = st.services.indexOf(id);\r\n    if (i >= 0 && !forceOn) st.services.splice(i, 1);\r\n    else if (i < 0) st.services.push(id);\r\n    document.querySelectorAll('#svcChips .chip').forEach(function(c){ c.setAttribute('aria-pressed', st.services.indexOf(c.dataset.id) >= 0); });\r\n    if (id === 'byop') $('byop').checked = st.services.indexOf('byop') >= 0;\r\n    update();\r\n  }\r\n  \/\/ \"Tempah \u2192\" in service cards preselects that service\r\n  $('svcGrid').addEventListener('click', function(e){\r\n    var a = e.target.closest('a[data-svc]'); if (a) toggleService(a.dataset.svc, true);\r\n  });\r\n\r\n  $('vtypeChips').addEventListener('click', function(e){\r\n    var b = e.target.closest('button'); if (!b) return;\r\n    st.vtype = b.dataset.v;\r\n    this.querySelectorAll('button').forEach(function(x){ x.setAttribute('aria-pressed', x === b); });\r\n    update();\r\n  });\r\n\r\n  \/\/ Dates\r\n  var dows = ['AHD','ISN','SEL','RAB','KHA','JUM','SAB'];\r\n  var mons = ['Jan','Feb','Mac','Apr','Mei','Jun','Jul','Ogo','Sep','Okt','Nov','Dis'];\r\n  var html = '';\r\n  for (var i = 1; i <= CONFIG.daysAhead; i++){\r\n    var d = new Date(); d.setDate(d.getDate() + i);\r\n    var closed = CONFIG.closedDays.indexOf(d.getDay()) >= 0;\r\n    var key = d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');\r\n    var label = dows[d.getDay()]+', '+d.getDate()+' '+mons[d.getMonth()]+' '+d.getFullYear();\r\n    html += '<button type=\"button\" class=\"chip\" data-key=\"'+key+'\" data-label=\"'+label+'\" aria-pressed=\"false\"'+(closed?' disabled title=\"Tutup\"':'')+'>'+\r\n      '<span class=\"dow\">'+dows[d.getDay()]+'<\/span><span class=\"day\">'+d.getDate()+'<\/span><span class=\"mon\">'+mons[d.getMonth()]+'<\/span><\/button>';\r\n  }\r\n  $('dateChips').innerHTML = html;\r\n  $('dateChips').addEventListener('click', function(e){\r\n    var b = e.target.closest('button'); if (!b || b.disabled) return;\r\n    st.date = b.dataset.key; st.dateLabel = b.dataset.label;\r\n    this.querySelectorAll('button').forEach(function(x){ x.setAttribute('aria-pressed', x === b); });\r\n    update();\r\n  });\r\n\r\n  \/\/ Times\r\n  $('timeChips').innerHTML = CONFIG.times.map(function(t){\r\n    return '<button type=\"button\" class=\"chip\" data-t=\"'+esc(t)+'\" aria-pressed=\"false\">'+esc(t)+'<\/button>';\r\n  }).join('');\r\n  $('timeChips').addEventListener('click', function(e){\r\n    var b = e.target.closest('button'); if (!b) return;\r\n    st.time = b.dataset.t;\r\n    this.querySelectorAll('button').forEach(function(x){ x.setAttribute('aria-pressed', x === b); });\r\n    update();\r\n  });\r\n\r\n  ['make','model','plate'].forEach(function(id){ $(id).addEventListener('input', update); });\r\n  $('byop').addEventListener('change', update);\r\n\r\n  function svcNames(){\r\n    return SERVICES.filter(function(s){ return st.services.indexOf(s.id) >= 0; }).map(function(s){ return s.name; });\r\n  }\r\n  function vehicleText(){\r\n    var v = [$('make').value.trim(), $('model').value.trim()].filter(Boolean).join(' ');\r\n    return st.vtype + (v ? ' \u00b7 ' + v : '');\r\n  }\r\n  function whenText(){\r\n    return (st.dateLabel || 'Tarikh belum dipilih') + (st.time ? ' \u00b7 ' + st.time : '');\r\n  }\r\n  function update(){\r\n    var n = svcNames();\r\n    $('sSvc').textContent = n.length ? n.join(', ') : 'Belum dipilih';\r\n    $('sVeh').textContent = vehicleText();\r\n    $('sWhen').textContent = whenText();\r\n    $('sByop').hidden = !($('byop').checked || st.services.indexOf('byop') >= 0);\r\n    $('err').textContent = '';\r\n  }\r\n\r\n  $('bookForm').addEventListener('submit', function(e){\r\n    e.preventDefault();\r\n    var name = $('name').value.trim(), phone = $('phone').value.trim();\r\n    var err = '';\r\n    if (!st.services.length) err = 'Sila pilih sekurang-kurangnya satu servis.';\r\n    else if (!st.date) err = 'Sila pilih tarikh.';\r\n    else if (!st.time) err = 'Sila pilih masa.';\r\n    else if (!name || !phone) err = 'Sila isi nama dan nombor telefon.';\r\n    else if (!\/^[0-9+\\-\\s]{9,15}$\/.test(phone)) err = 'Nombor telefon tidak sah.';\r\n    if (err) { $('err').textContent = err; return; }\r\n\r\n    var ref = 'ZEN-' + Math.floor(1000 + Math.random() * 9000);\r\n    var byop = $('byop').checked || st.services.indexOf('byop') >= 0;\r\n    var msg = [\r\n      'Salam ZEN Motorworks, saya ingin membuat tempahan.',\r\n      '',\r\n      'Rujukan: ' + ref,\r\n      'Nama: ' + name,\r\n      'Telefon: ' + phone,\r\n      'Servis: ' + svcNames().join(', '),\r\n      'Kenderaan: ' + vehicleText() + ($('plate').value.trim() ? ' (' + $('plate').value.trim() + ')' : ''),\r\n      'Tarikh & masa: ' + whenText(),\r\n      'Bawa part sendiri: ' + (byop ? 'Ya' : 'Tidak'),\r\n      $('note').value.trim() ? 'Nota: ' + $('note').value.trim() : ''\r\n    ].filter(function(l, i){ return l !== '' || i === 1; }).join('\\n');\r\n\r\n    $('refNo').textContent = ref;\r\n    $('doneWhen').textContent = whenText();\r\n    $('doneSvc').textContent = svcNames().join(', ');\r\n    $('waLink').href = waBase + '?text=' + encodeURIComponent(msg);\r\n    $('bookForm').hidden = true;\r\n    $('doneBox').hidden = false;\r\n    $('tempah').scrollIntoView({ behavior: 'smooth' });\r\n\r\n    \/* Untuk sambung ke backend (WordPress \/ Google Sheets \/ API), hantar data di sini:\r\n       fetch('\/api\/booking', { method:'POST', headers:{'Content-Type':'application\/json'},\r\n         body: JSON.stringify({ ref:ref, name:name, phone:phone, services:st.services, vtype:st.vtype,\r\n           make:$('make').value, model:$('model').value, plate:$('plate').value,\r\n           date:st.date, time:st.time, byop:byop, note:$('note').value }) });\r\n    *\/\r\n  });\r\n\r\n  $('resetBtn').addEventListener('click', function(){\r\n    $('bookForm').reset();\r\n    st = { services: [], vtype: 'Kereta', date: null, dateLabel: '', time: null };\r\n    document.querySelectorAll('#svcChips .chip, #dateChips .chip, #timeChips .chip').forEach(function(c){ c.setAttribute('aria-pressed', false); });\r\n    document.querySelectorAll('#vtypeChips .chip').forEach(function(c){ c.setAttribute('aria-pressed', c.dataset.v === 'Kereta'); });\r\n    $('doneBox').hidden = true; $('bookForm').hidden = false;\r\n    update();\r\n  });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\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","protected":false},"excerpt":{"rendered":"<p>ZEN Motorworks | Bengkel Premium Klang Valley Z ZEN MOTORWORKS Servis Hasil Kerja Kenderaan Produk Tempah Slot Bengkel Premium \u00b7 Klang Valley \u00b7 Appointment Sahaja Ketelitian untuk mesin yang anda hargai. Servis, penyelenggaraan dan pemasangan komponen untuk kereta dan motosikal JDM, BMW dan Mercedes-Benz. Satu slot, satu kenderaan, perhatian penuh. Tempah Appointment Lihat Servis KONSEPBerasaskan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":4,"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/zenmotorworks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}