Your Electric Firm | Licensed Electricians<\/title>\n <style>\n \/* \u2500\u2500 Reset & Base \u2500\u2500 *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Segoe UI', system-ui, sans-serif;\n color: #1a1a2e;\n background: #ffffff;\n line-height: 1.65;\n }\n a { text-decoration: none; color: inherit; }\n img { max-width: 100%; display: block; }\n \n \/* \u2500\u2500 Tokens \u2500\u2500 *\/\n :root {\n --yellow: #f5c400;\n --yellow-dk: #d4a900;\n --dark: #1a1a2e;\n --mid: #2d2d44;\n --grey-light: #f5f6fa;\n --grey-text: #555566;\n --white: #ffffff;\n --radius: 10px;\n --shadow: 0 4px 24px rgba(0,0,0,0.08);\n }\n \n \/* \u2500\u2500 Layout helpers \u2500\u2500 *\/\n .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }\n section { padding: 96px 0; }\n \n \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n .btn {\n display: inline-block;\n padding: 15px 34px;\n border-radius: var(--radius);\n font-weight: 700;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n }\n .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }\n .btn-primary { background: var(--yellow); color: var(--dark); }\n .btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); }\n .btn-dark { background: var(--dark); color: var(--white); }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVIGATION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n background: rgba(26,26,46,0.97);\n backdrop-filter: blur(8px);\n padding: 18px 0;\n }\n .nav-inner {\n display: flex; align-items: center; justify-content: space-between;\n }\n .nav-logo {\n font-size: 1.25rem; font-weight: 800;\n color: var(--white);\n letter-spacing: -0.5px;\n }\n .nav-logo span { color: var(--yellow); }\n .nav-links { display: flex; gap: 32px; list-style: none; }\n .nav-links a { color: rgba(255,255,255,0.82); font-size: 0.92rem; font-weight: 500; transition: color 0.2s; }\n .nav-links a:hover { color: var(--yellow); }\n .nav-cta { margin-left: 16px; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #hero {\n background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 60%, #1a1a2e 100%);\n padding: 180px 0 120px;\n position: relative;\n overflow: hidden;\n }\n #hero::before {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse at 70% 50%, rgba(245,196,0,0.12) 0%, transparent 65%);\n pointer-events: none;\n }\n .hero-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 64px;\n align-items: center;\n }\n .hero-badge {\n display: inline-block;\n background: rgba(245,196,0,0.15);\n border: 1px solid rgba(245,196,0,0.4);\n color: var(--yellow);\n font-size: 0.8rem;\n font-weight: 700;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n padding: 6px 14px;\n border-radius: 100px;\n margin-bottom: 20px;\n }\n .hero-text h1 {\n font-size: clamp(2.4rem, 4.5vw, 3.6rem);\n font-weight: 900;\n color: var(--white);\n line-height: 1.12;\n letter-spacing: -1px;\n margin-bottom: 20px;\n }\n .hero-text h1 span { color: var(--yellow); }\n .hero-sub {\n font-size: 1.15rem;\n color: rgba(255,255,255,0.72);\n margin-bottom: 36px;\n max-width: 460px;\n }\n .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }\n .hero-trust {\n display: flex; gap: 24px; margin-top: 40px; flex-wrap: wrap;\n }\n .hero-trust-item {\n display: flex; align-items: center; gap: 8px;\n color: rgba(255,255,255,0.65); font-size: 0.88rem;\n }\n .hero-trust-item .dot {\n width: 7px; height: 7px; border-radius: 50%;\n background: var(--yellow); flex-shrink: 0;\n }\n \/* Hero visual card *\/\n .hero-card {\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 16px;\n padding: 40px;\n backdrop-filter: blur(6px);\n }\n .hero-card-stat { margin-bottom: 28px; }\n .hero-card-stat:last-child { margin-bottom: 0; }\n .stat-number {\n font-size: 2.6rem; font-weight: 900;\n color: var(--yellow); line-height: 1;\n }\n .stat-label {\n color: rgba(255,255,255,0.65); font-size: 0.9rem; margin-top: 4px;\n }\n .stat-divider {\n height: 1px; background: rgba(255,255,255,0.08); margin: 20px 0;\n }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TRUST BAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #trust-bar {\n background: var(--yellow);\n padding: 24px 0;\n }\n .trust-bar-inner {\n display: flex; gap: 40px; flex-wrap: wrap;\n align-items: center; justify-content: center;\n }\n .trust-item {\n display: flex; align-items: center; gap: 10px;\n font-weight: 700; font-size: 0.92rem; color: var(--dark);\n }\n .trust-icon { font-size: 1.2rem; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SERVICES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #services { background: var(--grey-light); }\n .section-label {\n font-size: 0.78rem; font-weight: 800; letter-spacing: 2px;\n text-transform: uppercase; color: var(--yellow-dk);\n margin-bottom: 10px;\n }\n .section-title {\n font-size: clamp(1.8rem, 3vw, 2.5rem);\n font-weight: 900; color: var(--dark);\n letter-spacing: -0.5px; line-height: 1.15;\n margin-bottom: 14px;\n }\n .section-sub {\n font-size: 1.05rem; color: var(--grey-text);\n max-width: 560px; margin-bottom: 56px;\n }\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 24px;\n }\n .service-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 36px 30px;\n box-shadow: var(--shadow);\n border-top: 4px solid var(--yellow);\n transition: transform 0.2s;\n }\n .service-card:hover { transform: translateY(-4px); }\n .service-icon { font-size: 2.2rem; margin-bottom: 16px; }\n .service-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--dark); margin-bottom: 10px; }\n .service-card p { font-size: 0.93rem; color: var(--grey-text); line-height: 1.6; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WHY CHOOSE US\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #why { background: var(--white); }\n .why-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 72px;\n align-items: center;\n }\n .why-text h2 { margin-bottom: 18px; }\n .why-text p { color: var(--grey-text); margin-bottom: 28px; font-size: 1rem; }\n .why-pillars { display: flex; flex-direction: column; gap: 22px; }\n .pillar {\n display: flex; gap: 18px; align-items: flex-start;\n }\n .pillar-icon {\n width: 48px; height: 48px; border-radius: 10px;\n background: var(--yellow); display: flex; align-items: center;\n justify-content: center; font-size: 1.3rem; flex-shrink: 0;\n }\n .pillar-content h4 { font-size: 1rem; font-weight: 800; color: var(--dark); margin-bottom: 4px; }\n .pillar-content p { font-size: 0.9rem; color: var(--grey-text); }\n \/* Stats panel *\/\n .why-stats {\n background: var(--dark);\n border-radius: 16px;\n padding: 48px 40px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 36px;\n }\n .why-stat .num { font-size: 2.4rem; font-weight: 900; color: var(--yellow); }\n .why-stat .lbl { font-size: 0.87rem; color: rgba(255,255,255,0.65); margin-top: 4px; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CHATBOT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #chatbot {\n background: linear-gradient(135deg, #1a1a2e, #2d2d44);\n color: var(--white);\n }\n .chatbot-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 64px;\n align-items: center;\n }\n #chatbot .section-label { color: rgba(245,196,0,0.9); }\n #chatbot .section-title { color: var(--white); margin-bottom: 18px; }\n #chatbot .section-sub { color: rgba(255,255,255,0.65); margin-bottom: 32px; }\n .chat-features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }\n .chat-features li {\n display: flex; align-items: center; gap: 12px;\n color: rgba(255,255,255,0.82); font-size: 0.95rem;\n }\n .chat-features li::before {\n content: '\u2713';\n width: 24px; height: 24px; border-radius: 50%;\n background: var(--yellow); color: var(--dark);\n font-weight: 900; font-size: 0.8rem;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n \/* Chat widget mockup *\/\n .chat-mockup {\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.12);\n border-radius: 16px;\n padding: 28px;\n font-size: 0.9rem;\n }\n .chat-header {\n display: flex; align-items: center; gap: 10px;\n padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.1);\n margin-bottom: 20px;\n }\n .chat-avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: var(--yellow); display: flex; align-items: center;\n justify-content: center; font-size: 1.2rem;\n }\n .chat-header-text .name { font-weight: 700; color: var(--white); }\n .chat-header-text .status{ font-size: 0.78rem; color: #4ade80; }\n .chat-bubble {\n border-radius: 12px; padding: 12px 16px;\n margin-bottom: 12px; max-width: 85%; line-height: 1.5;\n }\n .bubble-bot { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.88); }\n .bubble-user {\n background: var(--yellow); color: var(--dark);\n font-weight: 600; margin-left: auto;\n }\n .chat-input {\n display: flex; gap: 10px; margin-top: 16px;\n border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px;\n }\n .chat-input-field {\n flex: 1; background: rgba(255,255,255,0.08);\n border: none; border-radius: 8px;\n padding: 10px 14px; color: rgba(255,255,255,0.5);\n font-size: 0.85rem; outline: none;\n }\n .chat-send {\n background: var(--yellow); border: none; border-radius: 8px;\n padding: 10px 16px; font-weight: 700; font-size: 0.85rem;\n color: var(--dark); cursor: pointer;\n }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CTA SECTION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #cta { background: var(--grey-light); }\n .cta-box {\n background: var(--dark);\n border-radius: 20px;\n padding: 72px 64px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .cta-box::before {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse at 50% 0%, rgba(245,196,0,0.18) 0%, transparent 65%);\n pointer-events: none;\n }\n .cta-box h2 {\n font-size: clamp(1.8rem, 3vw, 2.6rem);\n font-weight: 900; color: var(--white);\n letter-spacing: -0.5px; margin-bottom: 14px;\n }\n .cta-box p {\n color: rgba(255,255,255,0.65); font-size: 1.05rem;\n max-width: 500px; margin: 0 auto 36px;\n }\n .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\n .cta-footnote {\n color: rgba(255,255,255,0.4); font-size: 0.82rem; margin-top: 22px;\n }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n footer {\n background: var(--dark); border-top: 1px solid rgba(255,255,255,0.06);\n padding: 36px 0;\n }\n .footer-inner {\n display: flex; justify-content: space-between;\n align-items: center; flex-wrap: gap;\n gap: 16px;\n }\n .footer-brand { font-weight: 800; color: var(--white); font-size: 1rem; }\n .footer-brand span { color: var(--yellow); }\n .footer-copy { color: rgba(255,255,255,0.35); font-size: 0.82rem; }\n .footer-links { display: flex; gap: 24px; }\n .footer-links a { color: rgba(255,255,255,0.45); font-size: 0.82rem; transition: color 0.2s; }\n .footer-links a:hover { color: var(--yellow); }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 768px) {\n section { padding: 72px 0; }\n .hero-inner, .why-inner, .chatbot-inner { grid-template-columns: 1fr; gap: 40px; }\n .hero-card, .why-stats { display: none; } \/* hide visual panels on mobile *\/\n .nav-links, .nav-cta { display: none; }\n .cta-box { padding: 48px 28px; }\n .why-stats { grid-template-columns: 1fr 1fr; display: grid; }\n }\n <\/style>\n<\/head>\n<body>\n \n \n <nav>\n <div class=\"container nav-inner\">\n <div class=\"nav-logo\">\u26a1 <span>Volt<\/span>Pro <\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#why\">About Us<\/a><\/li>\n <li><a href=\"#chatbot\">Support<\/a><\/li>\n <li><a href=\"#cta\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"#cta\" class=\"btn btn-primary nav-cta\">Get a Quote<\/a>\n <\/div>\n <\/nav>\n \n \n <section id=\"hero\">\n <div class=\"container\">\n <div class=\"hero-inner\">\n <div class=\"hero-text\">\n <div class=\"hero-badge\">Licensed & Insured Electricians<\/div>\n <h1>Power You Can <span>Count On.<\/span><\/h1>\n <p class=\"hero-sub\">\n Professional electrical services for homes and businesses, delivered safely, on schedule, and to the highest standard.\n <\/p>\n <div class=\"hero-buttons\">\n <a href=\"#cta\" class=\"btn btn-primary\">Get a Free Quote<\/a>\n <a href=\"tel:+000000000\" class=\"btn btn-secondary\">Call Us Now<\/a>\n <\/div>\n <div class=\"hero-trust\">\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>Residential<\/div>\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>Commercial<\/div>\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>Emergency Callouts<\/div>\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>EV Chargers<\/div>\n <\/div>\n <\/div>\n <div class=\"hero-card\">\n <div class=\"hero-card-stat\">\n <div class=\"stat-number\">500+<\/div>\n <div class=\"stat-label\">Projects completed<\/div>\n <\/div>\n <div class=\"stat-divider\"><\/div>\n <div class=\"hero-card-stat\">\n <div class=\"stat-number\">10+<\/div>\n <div class=\"stat-label\">Years of experience<\/div>\n <\/div>\n <div class=\"stat-divider\"><\/div>\n <div class=\"hero-card-stat\">\n <div class=\"stat-number\">5\u2605<\/div>\n <div class=\"stat-label\">Average customer rating<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <div id=\"trust-bar\">\n <div class=\"container\">\n <div class=\"trust-bar-inner\">\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> Fully Licensed & Insured<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> Certified Electrical Work<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> No Hidden Fees<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> Same-Day Response Available<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> 5-Star Google Rated<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <section id=\"services\">\n <div class=\"container\">\n <div class=\"section-label\">What We Do<\/div>\n <h2 class=\"section-title\">Full-Service Electrical,<br>From the Panel to the Plug<\/h2>\n <p class=\"section-sub\">\n Whether it’s a single socket or a full commercial installation,\n we handle every job safely, efficiently, and to code.\n <\/p>\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83c\udfe0<\/div>\n <h3>Residential Electrical<\/h3>\n <p>Rewiring, consumer unit upgrades, lighting installation, and general electrical work for homeowners, done cleanly, safely, and to current standards.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83c\udfe2<\/div>\n <h3>Commercial Electrical<\/h3>\n <p>Reliable solutions for offices, retail spaces, and industrial sites. We plan around your schedule to keep disruption to a minimum.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83d\udd0d<\/div>\n <h3>Fault Finding & Repairs<\/h3>\n <p>Tripping breakers, dead sockets, or flickering lights? We diagnose quickly and fix it right, no guesswork, no repeat callouts.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83d\udd28<\/div>\n <h3>New Builds & Renovations<\/h3>\n <p>First-fix to second-fix electrical, working alongside builders and developers from groundwork through to completion.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83d\udd0c<\/div>\n <h3>EV Charger Installation<\/h3>\n <p>Government-approved EV charging point installations for homes and businesses, future-proof, certified, and fully compliant.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\u26a1<\/div>\n <h3>Emergency Callouts<\/h3>\n <p>Electrical emergencies don’t wait, and neither do we. Available for urgent callouts when you need fast, safe intervention.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"why\">\n <div class=\"container\">\n <div class=\"why-inner\">\n <div class=\"why-text\">\n <div class=\"section-label\">Why Choose Us<\/div>\n <h2 class=\"section-title\">Electricians Who Actually Show Up<\/h2>\n <p>\n We know the frustration of waiting for a tradesperson who\n doesn’t communicate, turns up late, or leaves the job unfinished.\n We built our business on the opposite: clear communication,\n on-time arrivals, and work that’s done properly the first time.\n <\/p>\n <div class=\"why-pillars\">\n <div class=\"pillar\">\n <div class=\"pillar-icon\">\ud83d\udd12<\/div>\n <div class=\"pillar-content\">\n <h4>Safety First, Always<\/h4>\n <p>All work meets current regulations and is fully certified where required, no shortcuts, no compromises.<\/p>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <div class=\"pillar-icon\">\ud83d\uddd3\ufe0f<\/div>\n <div class=\"pillar-content\">\n <h4>On Time, Every Time<\/h4>\n <p>We confirm appointments, communicate clearly, and respect your schedule, because your time matters.<\/p>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <div class=\"pillar-icon\">\u2b50<\/div>\n <div class=\"pillar-content\">\n <h4>Quality You Can See<\/h4>\n <p>Neat finishes, proper materials, and a clean site when we’re done. Our work speaks for itself.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"why-stats\">\n <div class=\"why-stat\">\n <div class=\"num\">500+<\/div>\n <div class=\"lbl\">Projects completed<\/div>\n <\/div>\n <div class=\"why-stat\">\n <div class=\"num\">10+<\/div>\n <div class=\"lbl\">Years in business<\/div>\n <\/div>\n <div class=\"why-stat\">\n <div class=\"num\">98%<\/div>\n <div class=\"lbl\">Customer satisfaction<\/div>\n <\/div>\n <div class=\"why-stat\">\n <div class=\"num\">24\/7<\/div>\n <div class=\"lbl\">Emergency availability<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"chatbot\">\n <div class=\"container\">\n <div class=\"chatbot-inner\">\n <div>\n <div class=\"section-label\">Quick Answers, Anytime<\/div>\n <h2 class=\"section-title\">Got a Question?<br>Our Smart Assistant Can Help.<\/h2>\n <p class=\"section-sub\">\n Not sure what service you need or want a rough cost estimate before you call?\n Our on-site assistant is available around the clock to help you get answers fast.\n <\/p>\n <ul class=\"chat-features\">\n <li>Available 24\/7, no waiting on hold<\/li>\n <li>Answers common questions instantly<\/li>\n <li>Helps you describe your job before booking<\/li>\n <li>Connects you to our team when you’re ready<\/li>\n <\/ul>\n <p style=\"color:rgba(255,255,255,0.45); font-size:0.82rem; margin-bottom:24px;\">\n Powered by intelligent n8n automation, smart, fast, and always on.\n <\/p>\n <a href=\"#cta\" class=\"btn btn-primary\">\ud83d\udcac Chat with Us Now<\/a>\n <\/div>\n \n <div class=\"chat-mockup\">\n <div class=\"chat-header\">\n <div class=\"chat-avatar\">\u26a1<\/div>\n <div class=\"chat-header-text\">\n <div class=\"name\">VoltPro Assistant<\/div>\n <div class=\"status\">\u25cf Online now<\/div>\n <\/div>\n <\/div>\n <div class=\"chat-bubble bubble-bot\">\n \ud83d\udc4b Hi there! How can I help you today? Ask me about our services, pricing, or availability.\n <\/div>\n <div class=\"chat-bubble bubble-user\">\n Do you do EV charger installations?\n <\/div>\n <div class=\"chat-bubble bubble-bot\">\n Absolutely! We install certified home and commercial EV charging points. Want me to connect you with our team for a quote?\n <\/div>\n <div class=\"chat-input\">\n <input class=\"chat-input-field\" placeholder=\"Type your question...\" disabled \/>\n <button class=\"chat-send\">Send<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"cta\">\n <div class=\"container\">\n <div class=\"cta-box\">\n <h2>Ready to Get Started?<\/h2>\n <p>\n Tell us about your project and we’ll get back to you with a\n clear, no-obligation quote, usually within a few hours.\n <\/p>\n <div class=\"cta-buttons\">\n <a href=\"mailto:hello@yourfirm.com\" class=\"btn btn-primary\">Get a Free Quote<\/a>\n <a href=\"tel:+000000000\" class=\"btn btn-secondary\">\ud83d\udcde Call Us Now<\/a>\n <\/div>\n <p class=\"cta-footnote\">No jargon. No hidden fees. Just honest electrical work you can rely on.<\/p>\n <\/div>\n <\/div>\n <\/section>\n \n \n <footer>\n <div class=\"container footer-inner\">\n <div class=\"footer-brand\">\u26a1 <span>Volt<\/span>Pro<\/div>\n <div class=\"footer-copy\">\n \u00a9 2025 YourFirm Ltd. Licensed Electrical Contractors. Reg. No. XXXXXXX\n <\/div>\n <div class=\"footer-links\">\n <a href=\"#\">Privacy Policy<\/a>\n <a href=\"#\">Terms<\/a>\n <a href=\"#cta\">Contact<\/a>\n <\/div>\n <\/div>\n <\/footer>\n \n<\/body>\n<\/html><div style=\"width:100%;margin:0;padding:0;background:#f6f7fb;font-family:Arial,sans-serif;color:#111;\">\n <style>\n .sm-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box;}\n .sm-hero{padding:80px 0 50px;background:linear-gradient(180deg,#ffffff 0%,#f6f7fb 100%);}\n .sm-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;}\n .sm-badge{display:inline-block;background:#e8f1ff;color:#1b4dff;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:700;margin-bottom:18px;}\n .sm-h1{font-size:52px;line-height:1.05;margin:0 0 16px;}\n .sm-p{font-size:18px;line-height:1.6;color:#444;margin:0 0 24px;}\n .sm-btn{display:inline-block;background:#111;color:#fff;text-decoration:none;padding:14px 20px;border-radius:12px;font-weight:700;margin-right:10px;}\n .sm-btn2{display:inline-block;background:#fff;color:#111;text-decoration:none;padding:14px 20px;border-radius:12px;font-weight:700;border:1px solid #ddd;}\n .sm-card{background:#fff;border:1px solid #e8e8e8;border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.05);}\n .sm-section{padding:20px 0 70px;}\n .sm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}\n .sm-box{background:#fff;border:1px solid #e8e8e8;border-radius:16px;padding:20px;}\n .sm-box h3{margin:0 0 10px;font-size:20px;}\n .sm-box p{margin:0;color:#555;line-height:1.6;}\n .sm-chat{margin-top:20px;background:#fff;border:1px solid #ddd;border-radius:18px;padding:18px;}\n .sm-chatlog{height:280px;overflow:auto;border:1px solid #eee;border-radius:12px;padding:12px;background:#fafafa;margin-bottom:12px;}\n .sm-row{display:flex;gap:10px;}\n .sm-input{flex:1;padding:14px;border:1px solid #ccc;border-radius:12px;font-size:16px;}\n .sm-send{padding:14px 18px;border:0;border-radius:12px;background:#111;color:#fff;font-weight:700;cursor:pointer;}\n .msg{margin:8px 0;padding:10px 12px;border-radius:12px;max-width:85%;line-height:1.5;white-space:pre-wrap;}\n .mine{background:#dff3ff;margin-left:auto;}\n .bot{background:#fff;border:1px solid #eee;}\n @media (max-width: 900px){\n .sm-grid,.sm-cols{grid-template-columns:1fr;}\n .sm-h1{font-size:38px;}\n }\n <\/style>\n\n <section class=\"sm-hero\">\n <div class=\"sm-wrap\">\n <div class=\"sm-grid\">\n <div>\n <div class=\"sm-badge\">Trusted Electrical Services<\/div>\n <h1 class=\"sm-h1\">Reliable Electrical Work for Homes and Businesses<\/h1>\n <p class=\"sm-p\">\n We provide safe, clean, and professional electrical services with fast support, quality workmanship, and solutions you can count on.\n <\/p>\n <a class=\"sm-btn\" href=\"#chatbot\">Chat with us<\/a>\n <a class=\"sm-btn2\" href=\"#services\">Our services<\/a>\n <\/div>\n\n <div class=\"sm-card\">\n <h2 style=\"margin-top:0;\">Why choose us?<\/h2>\n <ul style=\"margin:0;padding-left:18px;line-height:1.9;color:#444;\">\n <li>Fast response times<\/li>\n <li>Clear communication<\/li>\n <li>Safe and professional work<\/li>\n <li>Support for homes, offices, and shops<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"sm-section\" id=\"services\">\n <div class=\"sm-wrap\">\n <div class=\"sm-cols\">\n <div class=\"sm-box\">\n <h3>Electrical Repairs<\/h3>\n <p>Fix faults, wiring issues, outlets, switches, and other electrical problems quickly and safely.<\/p>\n <\/div>\n <div class=\"sm-box\">\n <h3>Installations<\/h3>\n <p>Lighting, sockets, panels, appliances, and new electrical setup for homes or business spaces.<\/p>\n <\/div>\n <div class=\"sm-box\">\n <h3>Maintenance<\/h3>\n <p>Routine checks and electrical maintenance to help prevent downtime and future issues.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"sm-chat\" id=\"chatbot\">\n <h2 style=\"margin-top:0;\">Chat with our assistant<\/h2>\n <p style=\"margin-top:0;color:#555;\">Ask a question and our chatbot will send it to our automation system.<\/p>\n\n <div id=\"chatlog\" class=\"sm-chatlog\"><\/div>\n\n <div class=\"sm-row\">\n <input id=\"chatinput\" class=\"sm-input\" type=\"text\" placeholder=\"Type your message...\" \/>\n <button id=\"chatsend\" class=\"sm-send\">Send<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ >>> PASTE YOUR N8N WEBHOOK URL RIGHT HERE <<<\n const webhookUrl = \"PASTE_YOUR_N8N_WEBHOOK_URL_HERE\";\n\n const chatlog = document.getElementById(\"chatlog\");\n const chatinput = document.getElementById(\"chatinput\");\n const chatsend = document.getElementById(\"chatsend\");\n\n function addMsg(text, mine = false) {\n const div = document.createElement(\"div\");\n div.className = \"msg \" + (mine ? \"mine\" : \"bot\");\n div.textContent = text;\n chatlog.appendChild(div);\n chatlog.scrollTop = chatlog.scrollHeight;\n }\n\n async function sendMsg() {\n const text = chatinput.value.trim();\n if (!text) return;\n\n addMsg(text, true);\n chatinput.value = \"\";\n\n try {\n const res = await fetch(webhookUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({\n message: text,\n source: \"website_chatbot\",\n page: window.location.href\n })\n });\n\n const data = await res.json().catch(() => ({}));\n addMsg(data.reply || data.message || \"Thanks \u2014 we received your message.\");\n } catch (e) {\n addMsg(\"Sorry, the chatbot is unavailable right now.\");\n }\n }\n\n chatsend.addEventListener(\"click\", sendMsg);\n chatinput.addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") sendMsg();\n });\n\n addMsg(\"Hi! How can we help?\");\n <\/script>\n<\/div><p><\/p>","protected":false},"excerpt":{"rendered":"<p>Your Electric Firm | Licensed Electricians \u26a1 VoltPro Services About Us Support Contact Get a Quote Licensed & Insured Electricians Power You Can Count On. Professional electrical services for homes and businesses, delivered safely, on schedule, and to the highest standard. Get a Free Quote Call Us Now Residential Commercial Emergency Callouts EV Chargers 500+ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-2595","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages\/2595"}],"collection":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2595"}],"version-history":[{"count":3,"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages\/2595\/revisions"}],"predecessor-version":[{"id":2601,"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages\/2595\/revisions\/2601"}],"wp:attachment":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2595,"date":"2026-05-04T21:06:59","date_gmt":"2026-05-04T21:06:59","guid":{"rendered":"https:\/\/slushymedia.com\/?page_id=2595"},"modified":"2026-05-04T22:13:29","modified_gmt":"2026-05-04T22:13:29","slug":"2595-2","status":"publish","type":"page","link":"https:\/\/slushymedia.com\/","title":{"rendered":""},"content":{"rendered":"\n\n\n \n \n Your Electric Firm | Licensed Electricians<\/title>\n <style>\n \/* \u2500\u2500 Reset & Base \u2500\u2500 *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Segoe UI', system-ui, sans-serif;\n color: #1a1a2e;\n background: #ffffff;\n line-height: 1.65;\n }\n a { text-decoration: none; color: inherit; }\n img { max-width: 100%; display: block; }\n \n \/* \u2500\u2500 Tokens \u2500\u2500 *\/\n :root {\n --yellow: #f5c400;\n --yellow-dk: #d4a900;\n --dark: #1a1a2e;\n --mid: #2d2d44;\n --grey-light: #f5f6fa;\n --grey-text: #555566;\n --white: #ffffff;\n --radius: 10px;\n --shadow: 0 4px 24px rgba(0,0,0,0.08);\n }\n \n \/* \u2500\u2500 Layout helpers \u2500\u2500 *\/\n .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }\n section { padding: 96px 0; }\n \n \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n .btn {\n display: inline-block;\n padding: 15px 34px;\n border-radius: var(--radius);\n font-weight: 700;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n }\n .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }\n .btn-primary { background: var(--yellow); color: var(--dark); }\n .btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); }\n .btn-dark { background: var(--dark); color: var(--white); }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVIGATION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n background: rgba(26,26,46,0.97);\n backdrop-filter: blur(8px);\n padding: 18px 0;\n }\n .nav-inner {\n display: flex; align-items: center; justify-content: space-between;\n }\n .nav-logo {\n font-size: 1.25rem; font-weight: 800;\n color: var(--white);\n letter-spacing: -0.5px;\n }\n .nav-logo span { color: var(--yellow); }\n .nav-links { display: flex; gap: 32px; list-style: none; }\n .nav-links a { color: rgba(255,255,255,0.82); font-size: 0.92rem; font-weight: 500; transition: color 0.2s; }\n .nav-links a:hover { color: var(--yellow); }\n .nav-cta { margin-left: 16px; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #hero {\n background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 60%, #1a1a2e 100%);\n padding: 180px 0 120px;\n position: relative;\n overflow: hidden;\n }\n #hero::before {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse at 70% 50%, rgba(245,196,0,0.12) 0%, transparent 65%);\n pointer-events: none;\n }\n .hero-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 64px;\n align-items: center;\n }\n .hero-badge {\n display: inline-block;\n background: rgba(245,196,0,0.15);\n border: 1px solid rgba(245,196,0,0.4);\n color: var(--yellow);\n font-size: 0.8rem;\n font-weight: 700;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n padding: 6px 14px;\n border-radius: 100px;\n margin-bottom: 20px;\n }\n .hero-text h1 {\n font-size: clamp(2.4rem, 4.5vw, 3.6rem);\n font-weight: 900;\n color: var(--white);\n line-height: 1.12;\n letter-spacing: -1px;\n margin-bottom: 20px;\n }\n .hero-text h1 span { color: var(--yellow); }\n .hero-sub {\n font-size: 1.15rem;\n color: rgba(255,255,255,0.72);\n margin-bottom: 36px;\n max-width: 460px;\n }\n .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }\n .hero-trust {\n display: flex; gap: 24px; margin-top: 40px; flex-wrap: wrap;\n }\n .hero-trust-item {\n display: flex; align-items: center; gap: 8px;\n color: rgba(255,255,255,0.65); font-size: 0.88rem;\n }\n .hero-trust-item .dot {\n width: 7px; height: 7px; border-radius: 50%;\n background: var(--yellow); flex-shrink: 0;\n }\n \/* Hero visual card *\/\n .hero-card {\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 16px;\n padding: 40px;\n backdrop-filter: blur(6px);\n }\n .hero-card-stat { margin-bottom: 28px; }\n .hero-card-stat:last-child { margin-bottom: 0; }\n .stat-number {\n font-size: 2.6rem; font-weight: 900;\n color: var(--yellow); line-height: 1;\n }\n .stat-label {\n color: rgba(255,255,255,0.65); font-size: 0.9rem; margin-top: 4px;\n }\n .stat-divider {\n height: 1px; background: rgba(255,255,255,0.08); margin: 20px 0;\n }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TRUST BAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #trust-bar {\n background: var(--yellow);\n padding: 24px 0;\n }\n .trust-bar-inner {\n display: flex; gap: 40px; flex-wrap: wrap;\n align-items: center; justify-content: center;\n }\n .trust-item {\n display: flex; align-items: center; gap: 10px;\n font-weight: 700; font-size: 0.92rem; color: var(--dark);\n }\n .trust-icon { font-size: 1.2rem; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SERVICES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #services { background: var(--grey-light); }\n .section-label {\n font-size: 0.78rem; font-weight: 800; letter-spacing: 2px;\n text-transform: uppercase; color: var(--yellow-dk);\n margin-bottom: 10px;\n }\n .section-title {\n font-size: clamp(1.8rem, 3vw, 2.5rem);\n font-weight: 900; color: var(--dark);\n letter-spacing: -0.5px; line-height: 1.15;\n margin-bottom: 14px;\n }\n .section-sub {\n font-size: 1.05rem; color: var(--grey-text);\n max-width: 560px; margin-bottom: 56px;\n }\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 24px;\n }\n .service-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 36px 30px;\n box-shadow: var(--shadow);\n border-top: 4px solid var(--yellow);\n transition: transform 0.2s;\n }\n .service-card:hover { transform: translateY(-4px); }\n .service-icon { font-size: 2.2rem; margin-bottom: 16px; }\n .service-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--dark); margin-bottom: 10px; }\n .service-card p { font-size: 0.93rem; color: var(--grey-text); line-height: 1.6; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WHY CHOOSE US\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #why { background: var(--white); }\n .why-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 72px;\n align-items: center;\n }\n .why-text h2 { margin-bottom: 18px; }\n .why-text p { color: var(--grey-text); margin-bottom: 28px; font-size: 1rem; }\n .why-pillars { display: flex; flex-direction: column; gap: 22px; }\n .pillar {\n display: flex; gap: 18px; align-items: flex-start;\n }\n .pillar-icon {\n width: 48px; height: 48px; border-radius: 10px;\n background: var(--yellow); display: flex; align-items: center;\n justify-content: center; font-size: 1.3rem; flex-shrink: 0;\n }\n .pillar-content h4 { font-size: 1rem; font-weight: 800; color: var(--dark); margin-bottom: 4px; }\n .pillar-content p { font-size: 0.9rem; color: var(--grey-text); }\n \/* Stats panel *\/\n .why-stats {\n background: var(--dark);\n border-radius: 16px;\n padding: 48px 40px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 36px;\n }\n .why-stat .num { font-size: 2.4rem; font-weight: 900; color: var(--yellow); }\n .why-stat .lbl { font-size: 0.87rem; color: rgba(255,255,255,0.65); margin-top: 4px; }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CHATBOT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #chatbot {\n background: linear-gradient(135deg, #1a1a2e, #2d2d44);\n color: var(--white);\n }\n .chatbot-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 64px;\n align-items: center;\n }\n #chatbot .section-label { color: rgba(245,196,0,0.9); }\n #chatbot .section-title { color: var(--white); margin-bottom: 18px; }\n #chatbot .section-sub { color: rgba(255,255,255,0.65); margin-bottom: 32px; }\n .chat-features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }\n .chat-features li {\n display: flex; align-items: center; gap: 12px;\n color: rgba(255,255,255,0.82); font-size: 0.95rem;\n }\n .chat-features li::before {\n content: '\u2713';\n width: 24px; height: 24px; border-radius: 50%;\n background: var(--yellow); color: var(--dark);\n font-weight: 900; font-size: 0.8rem;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n \/* Chat widget mockup *\/\n .chat-mockup {\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(255,255,255,0.12);\n border-radius: 16px;\n padding: 28px;\n font-size: 0.9rem;\n }\n .chat-header {\n display: flex; align-items: center; gap: 10px;\n padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.1);\n margin-bottom: 20px;\n }\n .chat-avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: var(--yellow); display: flex; align-items: center;\n justify-content: center; font-size: 1.2rem;\n }\n .chat-header-text .name { font-weight: 700; color: var(--white); }\n .chat-header-text .status{ font-size: 0.78rem; color: #4ade80; }\n .chat-bubble {\n border-radius: 12px; padding: 12px 16px;\n margin-bottom: 12px; max-width: 85%; line-height: 1.5;\n }\n .bubble-bot { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.88); }\n .bubble-user {\n background: var(--yellow); color: var(--dark);\n font-weight: 600; margin-left: auto;\n }\n .chat-input {\n display: flex; gap: 10px; margin-top: 16px;\n border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px;\n }\n .chat-input-field {\n flex: 1; background: rgba(255,255,255,0.08);\n border: none; border-radius: 8px;\n padding: 10px 14px; color: rgba(255,255,255,0.5);\n font-size: 0.85rem; outline: none;\n }\n .chat-send {\n background: var(--yellow); border: none; border-radius: 8px;\n padding: 10px 16px; font-weight: 700; font-size: 0.85rem;\n color: var(--dark); cursor: pointer;\n }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CTA SECTION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n #cta { background: var(--grey-light); }\n .cta-box {\n background: var(--dark);\n border-radius: 20px;\n padding: 72px 64px;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .cta-box::before {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse at 50% 0%, rgba(245,196,0,0.18) 0%, transparent 65%);\n pointer-events: none;\n }\n .cta-box h2 {\n font-size: clamp(1.8rem, 3vw, 2.6rem);\n font-weight: 900; color: var(--white);\n letter-spacing: -0.5px; margin-bottom: 14px;\n }\n .cta-box p {\n color: rgba(255,255,255,0.65); font-size: 1.05rem;\n max-width: 500px; margin: 0 auto 36px;\n }\n .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\n .cta-footnote {\n color: rgba(255,255,255,0.4); font-size: 0.82rem; margin-top: 22px;\n }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n footer {\n background: var(--dark); border-top: 1px solid rgba(255,255,255,0.06);\n padding: 36px 0;\n }\n .footer-inner {\n display: flex; justify-content: space-between;\n align-items: center; flex-wrap: gap;\n gap: 16px;\n }\n .footer-brand { font-weight: 800; color: var(--white); font-size: 1rem; }\n .footer-brand span { color: var(--yellow); }\n .footer-copy { color: rgba(255,255,255,0.35); font-size: 0.82rem; }\n .footer-links { display: flex; gap: 24px; }\n .footer-links a { color: rgba(255,255,255,0.45); font-size: 0.82rem; transition: color 0.2s; }\n .footer-links a:hover { color: var(--yellow); }\n \n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 768px) {\n section { padding: 72px 0; }\n .hero-inner, .why-inner, .chatbot-inner { grid-template-columns: 1fr; gap: 40px; }\n .hero-card, .why-stats { display: none; } \/* hide visual panels on mobile *\/\n .nav-links, .nav-cta { display: none; }\n .cta-box { padding: 48px 28px; }\n .why-stats { grid-template-columns: 1fr 1fr; display: grid; }\n }\n <\/style>\n<\/head>\n<body>\n \n \n <nav>\n <div class=\"container nav-inner\">\n <div class=\"nav-logo\">\u26a1 <span>Volt<\/span>Pro <\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#why\">About Us<\/a><\/li>\n <li><a href=\"#chatbot\">Support<\/a><\/li>\n <li><a href=\"#cta\">Contact<\/a><\/li>\n <\/ul>\n <a href=\"#cta\" class=\"btn btn-primary nav-cta\">Get a Quote<\/a>\n <\/div>\n <\/nav>\n \n \n <section id=\"hero\">\n <div class=\"container\">\n <div class=\"hero-inner\">\n <div class=\"hero-text\">\n <div class=\"hero-badge\">Licensed & Insured Electricians<\/div>\n <h1>Power You Can <span>Count On.<\/span><\/h1>\n <p class=\"hero-sub\">\n Professional electrical services for homes and businesses, delivered safely, on schedule, and to the highest standard.\n <\/p>\n <div class=\"hero-buttons\">\n <a href=\"#cta\" class=\"btn btn-primary\">Get a Free Quote<\/a>\n <a href=\"tel:+000000000\" class=\"btn btn-secondary\">Call Us Now<\/a>\n <\/div>\n <div class=\"hero-trust\">\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>Residential<\/div>\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>Commercial<\/div>\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>Emergency Callouts<\/div>\n <div class=\"hero-trust-item\"><div class=\"dot\"><\/div>EV Chargers<\/div>\n <\/div>\n <\/div>\n <div class=\"hero-card\">\n <div class=\"hero-card-stat\">\n <div class=\"stat-number\">500+<\/div>\n <div class=\"stat-label\">Projects completed<\/div>\n <\/div>\n <div class=\"stat-divider\"><\/div>\n <div class=\"hero-card-stat\">\n <div class=\"stat-number\">10+<\/div>\n <div class=\"stat-label\">Years of experience<\/div>\n <\/div>\n <div class=\"stat-divider\"><\/div>\n <div class=\"hero-card-stat\">\n <div class=\"stat-number\">5\u2605<\/div>\n <div class=\"stat-label\">Average customer rating<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <div id=\"trust-bar\">\n <div class=\"container\">\n <div class=\"trust-bar-inner\">\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> Fully Licensed & Insured<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> Certified Electrical Work<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> No Hidden Fees<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> Same-Day Response Available<\/div>\n <div class=\"trust-item\"><span class=\"trust-icon\">\u2713<\/span> 5-Star Google Rated<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <section id=\"services\">\n <div class=\"container\">\n <div class=\"section-label\">What We Do<\/div>\n <h2 class=\"section-title\">Full-Service Electrical,<br>From the Panel to the Plug<\/h2>\n <p class=\"section-sub\">\n Whether it’s a single socket or a full commercial installation,\n we handle every job safely, efficiently, and to code.\n <\/p>\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83c\udfe0<\/div>\n <h3>Residential Electrical<\/h3>\n <p>Rewiring, consumer unit upgrades, lighting installation, and general electrical work for homeowners, done cleanly, safely, and to current standards.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83c\udfe2<\/div>\n <h3>Commercial Electrical<\/h3>\n <p>Reliable solutions for offices, retail spaces, and industrial sites. We plan around your schedule to keep disruption to a minimum.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83d\udd0d<\/div>\n <h3>Fault Finding & Repairs<\/h3>\n <p>Tripping breakers, dead sockets, or flickering lights? We diagnose quickly and fix it right, no guesswork, no repeat callouts.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83d\udd28<\/div>\n <h3>New Builds & Renovations<\/h3>\n <p>First-fix to second-fix electrical, working alongside builders and developers from groundwork through to completion.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\ud83d\udd0c<\/div>\n <h3>EV Charger Installation<\/h3>\n <p>Government-approved EV charging point installations for homes and businesses, future-proof, certified, and fully compliant.<\/p>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\">\u26a1<\/div>\n <h3>Emergency Callouts<\/h3>\n <p>Electrical emergencies don’t wait, and neither do we. Available for urgent callouts when you need fast, safe intervention.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"why\">\n <div class=\"container\">\n <div class=\"why-inner\">\n <div class=\"why-text\">\n <div class=\"section-label\">Why Choose Us<\/div>\n <h2 class=\"section-title\">Electricians Who Actually Show Up<\/h2>\n <p>\n We know the frustration of waiting for a tradesperson who\n doesn’t communicate, turns up late, or leaves the job unfinished.\n We built our business on the opposite: clear communication,\n on-time arrivals, and work that’s done properly the first time.\n <\/p>\n <div class=\"why-pillars\">\n <div class=\"pillar\">\n <div class=\"pillar-icon\">\ud83d\udd12<\/div>\n <div class=\"pillar-content\">\n <h4>Safety First, Always<\/h4>\n <p>All work meets current regulations and is fully certified where required, no shortcuts, no compromises.<\/p>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <div class=\"pillar-icon\">\ud83d\uddd3\ufe0f<\/div>\n <div class=\"pillar-content\">\n <h4>On Time, Every Time<\/h4>\n <p>We confirm appointments, communicate clearly, and respect your schedule, because your time matters.<\/p>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <div class=\"pillar-icon\">\u2b50<\/div>\n <div class=\"pillar-content\">\n <h4>Quality You Can See<\/h4>\n <p>Neat finishes, proper materials, and a clean site when we’re done. Our work speaks for itself.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"why-stats\">\n <div class=\"why-stat\">\n <div class=\"num\">500+<\/div>\n <div class=\"lbl\">Projects completed<\/div>\n <\/div>\n <div class=\"why-stat\">\n <div class=\"num\">10+<\/div>\n <div class=\"lbl\">Years in business<\/div>\n <\/div>\n <div class=\"why-stat\">\n <div class=\"num\">98%<\/div>\n <div class=\"lbl\">Customer satisfaction<\/div>\n <\/div>\n <div class=\"why-stat\">\n <div class=\"num\">24\/7<\/div>\n <div class=\"lbl\">Emergency availability<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"chatbot\">\n <div class=\"container\">\n <div class=\"chatbot-inner\">\n <div>\n <div class=\"section-label\">Quick Answers, Anytime<\/div>\n <h2 class=\"section-title\">Got a Question?<br>Our Smart Assistant Can Help.<\/h2>\n <p class=\"section-sub\">\n Not sure what service you need or want a rough cost estimate before you call?\n Our on-site assistant is available around the clock to help you get answers fast.\n <\/p>\n <ul class=\"chat-features\">\n <li>Available 24\/7, no waiting on hold<\/li>\n <li>Answers common questions instantly<\/li>\n <li>Helps you describe your job before booking<\/li>\n <li>Connects you to our team when you’re ready<\/li>\n <\/ul>\n <p style=\"color:rgba(255,255,255,0.45); font-size:0.82rem; margin-bottom:24px;\">\n Powered by intelligent n8n automation, smart, fast, and always on.\n <\/p>\n <a href=\"#cta\" class=\"btn btn-primary\">\ud83d\udcac Chat with Us Now<\/a>\n <\/div>\n \n <div class=\"chat-mockup\">\n <div class=\"chat-header\">\n <div class=\"chat-avatar\">\u26a1<\/div>\n <div class=\"chat-header-text\">\n <div class=\"name\">VoltPro Assistant<\/div>\n <div class=\"status\">\u25cf Online now<\/div>\n <\/div>\n <\/div>\n <div class=\"chat-bubble bubble-bot\">\n \ud83d\udc4b Hi there! How can I help you today? Ask me about our services, pricing, or availability.\n <\/div>\n <div class=\"chat-bubble bubble-user\">\n Do you do EV charger installations?\n <\/div>\n <div class=\"chat-bubble bubble-bot\">\n Absolutely! We install certified home and commercial EV charging points. Want me to connect you with our team for a quote?\n <\/div>\n <div class=\"chat-input\">\n <input class=\"chat-input-field\" placeholder=\"Type your question...\" disabled \/>\n <button class=\"chat-send\">Send<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"cta\">\n <div class=\"container\">\n <div class=\"cta-box\">\n <h2>Ready to Get Started?<\/h2>\n <p>\n Tell us about your project and we’ll get back to you with a\n clear, no-obligation quote, usually within a few hours.\n <\/p>\n <div class=\"cta-buttons\">\n <a href=\"mailto:hello@yourfirm.com\" class=\"btn btn-primary\">Get a Free Quote<\/a>\n <a href=\"tel:+000000000\" class=\"btn btn-secondary\">\ud83d\udcde Call Us Now<\/a>\n <\/div>\n <p class=\"cta-footnote\">No jargon. No hidden fees. Just honest electrical work you can rely on.<\/p>\n <\/div>\n <\/div>\n <\/section>\n \n \n <footer>\n <div class=\"container footer-inner\">\n <div class=\"footer-brand\">\u26a1 <span>Volt<\/span>Pro<\/div>\n <div class=\"footer-copy\">\n \u00a9 2025 YourFirm Ltd. Licensed Electrical Contractors. Reg. No. XXXXXXX\n <\/div>\n <div class=\"footer-links\">\n <a href=\"#\">Privacy Policy<\/a>\n <a href=\"#\">Terms<\/a>\n <a href=\"#cta\">Contact<\/a>\n <\/div>\n <\/div>\n <\/footer>\n \n<\/body>\n<\/html><div style=\"width:100%;margin:0;padding:0;background:#f6f7fb;font-family:Arial,sans-serif;color:#111;\">\n <style>\n .sm-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box;}\n .sm-hero{padding:80px 0 50px;background:linear-gradient(180deg,#ffffff 0%,#f6f7fb 100%);}\n .sm-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;}\n .sm-badge{display:inline-block;background:#e8f1ff;color:#1b4dff;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:700;margin-bottom:18px;}\n .sm-h1{font-size:52px;line-height:1.05;margin:0 0 16px;}\n .sm-p{font-size:18px;line-height:1.6;color:#444;margin:0 0 24px;}\n .sm-btn{display:inline-block;background:#111;color:#fff;text-decoration:none;padding:14px 20px;border-radius:12px;font-weight:700;margin-right:10px;}\n .sm-btn2{display:inline-block;background:#fff;color:#111;text-decoration:none;padding:14px 20px;border-radius:12px;font-weight:700;border:1px solid #ddd;}\n .sm-card{background:#fff;border:1px solid #e8e8e8;border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.05);}\n .sm-section{padding:20px 0 70px;}\n .sm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}\n .sm-box{background:#fff;border:1px solid #e8e8e8;border-radius:16px;padding:20px;}\n .sm-box h3{margin:0 0 10px;font-size:20px;}\n .sm-box p{margin:0;color:#555;line-height:1.6;}\n .sm-chat{margin-top:20px;background:#fff;border:1px solid #ddd;border-radius:18px;padding:18px;}\n .sm-chatlog{height:280px;overflow:auto;border:1px solid #eee;border-radius:12px;padding:12px;background:#fafafa;margin-bottom:12px;}\n .sm-row{display:flex;gap:10px;}\n .sm-input{flex:1;padding:14px;border:1px solid #ccc;border-radius:12px;font-size:16px;}\n .sm-send{padding:14px 18px;border:0;border-radius:12px;background:#111;color:#fff;font-weight:700;cursor:pointer;}\n .msg{margin:8px 0;padding:10px 12px;border-radius:12px;max-width:85%;line-height:1.5;white-space:pre-wrap;}\n .mine{background:#dff3ff;margin-left:auto;}\n .bot{background:#fff;border:1px solid #eee;}\n @media (max-width: 900px){\n .sm-grid,.sm-cols{grid-template-columns:1fr;}\n .sm-h1{font-size:38px;}\n }\n <\/style>\n\n <section class=\"sm-hero\">\n <div class=\"sm-wrap\">\n <div class=\"sm-grid\">\n <div>\n <div class=\"sm-badge\">Trusted Electrical Services<\/div>\n <h1 class=\"sm-h1\">Reliable Electrical Work for Homes and Businesses<\/h1>\n <p class=\"sm-p\">\n We provide safe, clean, and professional electrical services with fast support, quality workmanship, and solutions you can count on.\n <\/p>\n <a class=\"sm-btn\" href=\"#chatbot\">Chat with us<\/a>\n <a class=\"sm-btn2\" href=\"#services\">Our services<\/a>\n <\/div>\n\n <div class=\"sm-card\">\n <h2 style=\"margin-top:0;\">Why choose us?<\/h2>\n <ul style=\"margin:0;padding-left:18px;line-height:1.9;color:#444;\">\n <li>Fast response times<\/li>\n <li>Clear communication<\/li>\n <li>Safe and professional work<\/li>\n <li>Support for homes, offices, and shops<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"sm-section\" id=\"services\">\n <div class=\"sm-wrap\">\n <div class=\"sm-cols\">\n <div class=\"sm-box\">\n <h3>Electrical Repairs<\/h3>\n <p>Fix faults, wiring issues, outlets, switches, and other electrical problems quickly and safely.<\/p>\n <\/div>\n <div class=\"sm-box\">\n <h3>Installations<\/h3>\n <p>Lighting, sockets, panels, appliances, and new electrical setup for homes or business spaces.<\/p>\n <\/div>\n <div class=\"sm-box\">\n <h3>Maintenance<\/h3>\n <p>Routine checks and electrical maintenance to help prevent downtime and future issues.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"sm-chat\" id=\"chatbot\">\n <h2 style=\"margin-top:0;\">Chat with our assistant<\/h2>\n <p style=\"margin-top:0;color:#555;\">Ask a question and our chatbot will send it to our automation system.<\/p>\n\n <div id=\"chatlog\" class=\"sm-chatlog\"><\/div>\n\n <div class=\"sm-row\">\n <input id=\"chatinput\" class=\"sm-input\" type=\"text\" placeholder=\"Type your message...\" \/>\n <button id=\"chatsend\" class=\"sm-send\">Send<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <script>\n \/\/ >>> PASTE YOUR N8N WEBHOOK URL RIGHT HERE <<<\n const webhookUrl = \"PASTE_YOUR_N8N_WEBHOOK_URL_HERE\";\n\n const chatlog = document.getElementById(\"chatlog\");\n const chatinput = document.getElementById(\"chatinput\");\n const chatsend = document.getElementById(\"chatsend\");\n\n function addMsg(text, mine = false) {\n const div = document.createElement(\"div\");\n div.className = \"msg \" + (mine ? \"mine\" : \"bot\");\n div.textContent = text;\n chatlog.appendChild(div);\n chatlog.scrollTop = chatlog.scrollHeight;\n }\n\n async function sendMsg() {\n const text = chatinput.value.trim();\n if (!text) return;\n\n addMsg(text, true);\n chatinput.value = \"\";\n\n try {\n const res = await fetch(webhookUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({\n message: text,\n source: \"website_chatbot\",\n page: window.location.href\n })\n });\n\n const data = await res.json().catch(() => ({}));\n addMsg(data.reply || data.message || \"Thanks \u2014 we received your message.\");\n } catch (e) {\n addMsg(\"Sorry, the chatbot is unavailable right now.\");\n }\n }\n\n chatsend.addEventListener(\"click\", sendMsg);\n chatinput.addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") sendMsg();\n });\n\n addMsg(\"Hi! How can we help?\");\n <\/script>\n<\/div><p><\/p>","protected":false},"excerpt":{"rendered":"<p>Your Electric Firm | Licensed Electricians \u26a1 VoltPro Services About Us Support Contact Get a Quote Licensed & Insured Electricians Power You Can Count On. Professional electrical services for homes and businesses, delivered safely, on schedule, and to the highest standard. Get a Free Quote Call Us Now Residential Commercial Emergency Callouts EV Chargers 500+ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-2595","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages\/2595"}],"collection":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2595"}],"version-history":[{"count":3,"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages\/2595\/revisions"}],"predecessor-version":[{"id":2601,"href":"https:\/\/slushymedia.com\/index.php?rest_route=\/wp\/v2\/pages\/2595\/revisions\/2601"}],"wp:attachment":[{"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/slushymedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}