/* ── SMD Detailing · Nav + Footer ── */
function Nav({ currentPage, navigate }) {
const [menuOpen, setMenuOpen] = React.useState(false);
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
React.useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
const links = [
{ id: 'home', label: 'Home' },
{ id: 'services', label: 'Services' },
{ id: 'about', label: 'About' },
{ id: 'gallery', label: 'Gallery' },
{ id: 'dealers', label: 'Dealers' },
];
const navStyle = {
position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
padding: scrolled ? '12px clamp(20px,5vw,40px)' : '20px clamp(20px,5vw,40px)',
background: scrolled ? 'rgba(12,11,9,0.92)' : 'transparent',
backdropFilter: scrolled ? 'blur(16px)' : 'none',
WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
transition: 'all 0.35s ease',
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
};
const logoStyle = {
fontFamily: 'var(--font-display)', fontWeight: 700,
fontSize: '1.3rem', color: 'var(--text-primary)',
cursor: 'pointer', letterSpacing: '-0.01em',
display: 'flex', alignItems: 'center', gap: '10px',
};
const desktopLinks = {
display: 'flex', gap: '32px', alignItems: 'center',
};
const handleNav = (id) => {
navigate(id);
setMenuOpen(false);
};
return (
<>
{/* Mobile menu overlay */}
{links.map((l, i) => (
))}
handleNav('book')} style={{
marginTop: '16px',
transform: menuOpen ? 'translateY(0)' : 'translateY(20px)',
opacity: menuOpen ? 1 : 0,
transition: 'all 0.3s',
transitionDelay: '0.3s',
}}>Book Now
);
}
function Footer({ navigate }) {
const towns = ['Ballybofey', 'Stranorlar', 'Letterkenny', 'Donegal Town', 'Killybegs', 'Ardara', 'Glenties', 'Raphoe', 'Convoy', 'Lifford', 'Castlefinn', 'Dungloe'];
return (
);
}
Object.assign(window, { Nav, Footer });
/* ── SMD Detailing · Hero Section ── */
function Hero({ navigate }) {
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
const t = setTimeout(() => setLoaded(true), 100);
return () => clearTimeout(t);
}, []);
const trustItems = [
{ icon: '◆', label: 'All-Ireland 1st Place' },
{ icon: '◆', label: 'North Macedonia 2026' },
{ icon: '◆', label: 'High Demand — Book Early' },
];
return (
{/* Background image */}
{/* Overlays */}
{/* Content */}
{/* Eyebrow */}
Ballybofey, Co. Donegal
{/* Headline */}
Craft Detailing.
Every Car. Every Time.
{/* Sub */}
I do every single car myself. Published prices, no DMs for a quote.
Owner-operator detailing with international credentials.
{/* CTAs */}
navigate('book')}>Get on the List
navigate('services')}>View Packages
{/* Trust strip */}
{trustItems.map((item, i) => (
{item.icon}
{item.label}
))}
{/* Scroll indicator */}
);
}
Object.assign(window, { Hero });