/* global React */
const { useState, useEffect } = React;
// ====== Icons ======
const Icon = {
Bolt: ({ size = 16, color = "currentColor" }) => (
),
Phone: ({ size = 14 }) => (
),
Pin: ({ size = 14 }) => (
),
Mail: ({ size = 14 }) => (
),
Clock: ({ size = 14 }) => (
),
Check: ({ size = 14 }) => (
),
ArrowRight: ({ size = 14 }) => (
),
Star: ({ size = 14, color = "currentColor" }) => (
),
Plug: ({ size = 24 }) => (
),
Home: ({ size = 24 }) => (
),
Wind: ({ size = 24 }) => (
),
Car: ({ size = 24 }) => (
),
Droplet: ({ size = 24 }) => (
),
Shield: ({ size = 24 }) => (
),
Tool: ({ size = 24 }) => (
),
Menu: ({ size = 20 }) => (
),
X: ({ size = 20 }) => (
),
};
// ====== Logo ======
const Logo = () => (
KW
ELE
ALITY
CTRIC
);
// ====== Nav ======
const Nav = ({ active = "home" }) => {
const [open, setOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
document.body.style.overflow = open ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [open]);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const links = [
["home", "index.html", "Home"],
["services", "services.html", "Services"],
["about", "about.html", "About"],
["schedule", "schedule.html", "Schedule"],
];
return (
<>
>
);
};
// ====== Footer ======
const Footer = () => (
);
// ====== Section heading ======
const SectionHead = ({ eyebrow, title, lead, action }) => (
{eyebrow &&
{eyebrow}
}
{title &&
{title}
}
{lead &&
{lead}
}
{action}
);
// ====== CTA Card (reusable on multiple pages) ======
const CtaCard = () => (
Ready when you are
Let's get your quote started.
Free, no-obligation estimate within 24 hours. Same-day visits when you need them, with upfront flat-rate pricing on every job.
RESPONSE TIME
~ 90 minutes
);
// ====== Expose globally ======
Object.assign(window, { Icon, Logo, Nav, Footer, SectionHead, CtaCard });