import React, { useState, useEffect } from 'react';
import { 
    Phone, 
    Zap, 
    Facebook, 
    Instagram, 
    Droplet, 
    ChevronDown, 
    ChevronRight, 
    Mail, 
    ArrowLeft, 
    Headphones,
    Clock,
    Shield,
    Star,
    MapPin,
    CheckCircle,
    Menu,
    X,
    AlertTriangle
} from 'lucide-react';

const services = {
    'general-plumbing': {
        title: 'General Plumbing',
        desc: 'Comprehensive residential plumbing solutions for every room in your home. We handle everything from leaky faucets and running toilets to complete pipe replacements and water pressure diagnostics. Our Master Plumbers ensure your home\'s water system operates safely and efficiently.',
        img: 'https://images.unsplash.com/photo-1607472586893-edb57cb31311?auto=format&fit=crop&q=80&w=1000'
    },
    'macerator-pump-install': {
        title: 'Macerator Pump Install',
        desc: 'Expert installation and maintenance of upflush pump systems like Saniflo. Perfect for adding a new bathroom, laundry room, or kitchen in your basement without the need for expensive structural concrete trenching. We handle the complex plumbing so you don\'t have to.',
        img: 'https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&q=80&w=1000'
    },
    'drain-cleaning-cornwall': {
        title: 'Professional Drain Cleaning',
        desc: 'Clearing stubborn blockages in kitchen sinks, bathtubs, and main sewer lines quickly and safely. We use advanced augers and hydro-jetting technology to remove grease, hair, and mineral buildup, restoring your pipes to full flowing capacity without damaging them.',
        img: 'https://images.unsplash.com/photo-1542013936693-884638332954?auto=format&fit=crop&q=80&w=1000'
    },
    'water-heater-installation-cornwall': {
        title: 'Water Heater Install',
        desc: 'Professional installation, repair, and maintenance of traditional tanked and modern tankless water heaters. We optimize your system for maximum energy efficiency and ensure you never run out of hot water during those brutally cold Cornwall winters.',
        img: 'https://images.unsplash.com/photo-1584622781564-1d987f7333c1?auto=format&fit=crop&q=80&w=1000'
    },
    'sewer-line-repair-cornwall': {
        title: 'Sewer Line Repair',
        desc: 'Repairing main sewer line collapses, tree root intrusions, and severe blockages with minimal disruption to your property. We offer comprehensive camera inspections to pinpoint the exact location of the issue before recommending a trenchless or traditional repair.',
        img: 'https://images.unsplash.com/photo-1504148455328-c376907d081c?auto=format&fit=crop&q=80&w=1000'
    },
    'toilet-repair-cornwall': {
        title: 'Toilet Repair & Install',
        desc: 'Fast fixing of continuous leaks, phantom flushes, or installation of brand new, high-efficiency smart toilets. We make sure your bathroom fixtures are properly seated, sealed, and functioning to save you money on your water bill and prevent water damage.',
        img: 'https://images.unsplash.com/photo-1620627747869-7033f679796e?auto=format&fit=crop&q=80&w=1000'
    },
    'bathroom-kitchen-plumbing': {
        title: 'Bathroom & Kitchen',
        desc: 'Professional faucet swaps, modern sink installs, and shower valve repairs. Upgrade the look and feel of your most-used rooms with our precision fixture installation services. We guarantee leak-free connections and flawless aesthetic finishes for your remodels.',
        img: 'https://images.unsplash.com/photo-1556911220-e15b29be8c8f?auto=format&fit=crop&q=80&w=1000'
    },
    'water-softener-installation': {
        title: 'Water Softener',
        desc: 'Protect your home\'s plumbing infrastructure, appliances, and your skin from hard water damage with advanced water softening and filtration systems. We test your water quality and install the perfect unit to ensure pristine, mineral-free water flows from every tap.',
        img: 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&q=80&w=1000'
    }
};

const serviceAreas = {
    'area-cornwall': {
        title: 'Plumbing Services in Cornwall',
        desc: 'Proudly serving the heart of Cornwall with 24/7 emergency response, general repairs, and advanced installations. Our local master plumbers know Cornwall homes inside and out, providing fast, reliable, and upfront services to our community.',
        img: 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=1000'
    },
    'area-south-glengarry': {
        title: 'Plumbing in South Glengarry',
        desc: 'Reliable residential plumbing for South Glengarry. From well-pump maintenance and water heater installations to fast leak repairs, we are your trusted local professionals dedicated to keeping your home\'s plumbing flowing perfectly.',
        img: 'https://images.unsplash.com/photo-1449844908441-8829872d2607?auto=format&fit=crop&q=80&w=1000'
    },
    'area-south-stormont': {
        title: 'Plumbing in South Stormont',
        desc: 'Expert plumbing solutions for South Stormont residents. We specialize in water softening systems, complete bathroom renovations, and urgent emergency repairs. Count on SABS Plumbing for 5-star service every time.',
        img: 'https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&q=80&w=1000'
    },
    'area-south-dundas': {
        title: 'Plumbing in South Dundas',
        desc: 'Fast, upfront, and guaranteed plumbing services in South Dundas. Whether it is clearing a severely clogged drain or installing a new macerator pump for a basement suite, our certified experts are just a call away.',
        img: 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&q=80&w=1000'
    }
};

const faqs = [
    { q: "How quickly can you respond to plumbing emergencies in Cornwall?", a: "We offer 24/7 emergency plumbing services in Cornwall and surrounding areas. In most cases, we aim to respond as quickly as possible to minimize water damage and restore safety to your home." },
    { q: "Are you a licensed and insured plumber in Ontario?", a: "Yes. Our plumbing services are fully licensed and insured in Ontario. All work is performed according to provincial plumbing codes and safety standards." },
    { q: "What areas do you serve besides Cornwall?", a: "We proudly serve Cornwall, South Glengarry, South Stormont, South Dundas, Long Sault, Lancaster, Ingleside, and surrounding SD&G Counties." },
    { q: "Do you provide free plumbing estimates?", a: "Yes. We provide transparent, upfront estimates before starting any work. There are no hidden fees, and we only begin once you approve the quote." },
    { q: "What counts as a plumbing emergency?", a: "Common plumbing emergencies include burst pipes, severe water leaks, sewer backups, overflowing toilets, flooding, or no hot water during winter. If you're unsure, call us immediately for guidance." },
    { q: "Do you offer same-day plumbing service in Cornwall?", a: "Yes, same-day service is available for many plumbing repairs, depending on scheduling and urgency." },
    { q: "How do I know if I need professional drain cleaning?", a: "If you notice slow drains, recurring clogs, bad odors, gurgling sounds, or water backing up, it’s time to schedule professional drain cleaning services." },
    { q: "How long does water heater installation take?", a: "Most water heater installations in Cornwall take between 2–4 hours, depending on the type (tank or tankless) and plumbing configuration." },
    { q: "Do you install tankless water heaters?", a: "Yes. We install both traditional tank water heaters and energy-efficient tankless water heater systems." },
    { q: "What should I do if a pipe bursts?", a: "Immediately shut off your main water valve, turn off electrical power if necessary, and call our emergency plumber in Cornwall right away." },
    { q: "Do you offer warranties on plumbing work?", a: "Yes. We stand behind our workmanship and provide warranties on parts and labor depending on the service performed." },
    { q: "How can I prevent frozen pipes during Cornwall winters?", a: "To prevent frozen pipes: Insulate exposed pipes, keep cabinets open under sinks, let faucets drip during extreme cold, and maintain indoor heating." },
    { q: "What is a macerator or upflush pump system?", a: "A macerator (also called an upflush pump) is a plumbing system that allows you to install a bathroom or toilet below the main sewer line without breaking concrete. It grinds waste into a slurry and pumps it upward into the main drain system." },
    { q: "Do you install macerator or upflush toilet systems in Cornwall?", a: "Yes. We install and service macerator and upflush pump systems for basements, in-law suites, and renovation projects throughout Cornwall and surrounding areas." },
    { q: "How do I know if my macerator pump needs repair?", a: "Common signs include loud or unusual noises, slow flushing, bad odors, frequent clogging, or the pump running continuously. If you notice these issues, contact a licensed plumber in Cornwall for inspection." }
];

const testimonials = [
    { name: "Sarah Jenkins", area: "Cornwall", text: "Fast, reliable, and very clean. They fixed our burst pipe in no time!", rating: 5 },
    { name: "Mark T.", area: "South Glengarry", text: "Upfront pricing was a breath of fresh air. No hidden fees. Highly recommend SABS Plumbing.", rating: 5 },
    { name: "Emily R.", area: "South Stormont", text: "Installed our new macerator pump flawlessly. Great team of professionals and very polite.", rating: 5 },
    { name: "David L.", area: "Cornwall", text: "Called them at 2 AM for an emergency. They were here in 20 mins. Absolute lifesavers!", rating: 5 },
    { name: "Jessica M.", area: "South Dundas", text: "Very polite and knowledgeable. Explained the issue with my water heater clearly before fixing it.", rating: 5 },
    { name: "Brian C.", area: "Cornwall", text: "Top-notch service from start to finish. They left the workspace cleaner than they found it.", rating: 5 },
    { name: "Amanda W.", area: "Cornwall", text: "The only plumbers I trust with my heritage home. Extremely careful, skilled, and fairly priced.", rating: 5 },
    { name: "Tom H.", area: "South Glengarry", text: "Excellent drain cleaning service. They got the job done fast and we haven't had an issue since.", rating: 5 }
];

export default function App() {
    const [currentPage, setCurrentPage] = useState('home');
    const [openFaq, setOpenFaq] = useState(null);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [mobileServicesOpen, setMobileServicesOpen] = useState(false);
    const [mobileAreasOpen, setMobileAreasOpen] = useState(false);

    useEffect(() => {
        const handleHashChange = () => {
            const hash = window.location.hash.substring(1);
            if (hash) {
                setCurrentPage(hash);
            }
        };
        window.addEventListener('hashchange', handleHashChange);
        handleHashChange(); // initial load
        return () => window.removeEventListener('hashchange', handleHashChange);
    }, []);

    const navigateTo = (pageId) => {
        window.location.hash = pageId;
        setCurrentPage(pageId);
        setIsMobileMenuOpen(false);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    const navigateAndScroll = (page, sectionId) => {
        setIsMobileMenuOpen(false);
        if (currentPage !== page) {
            navigateTo(page);
            setTimeout(() => {
                const el = document.getElementById(sectionId);
                if (el) window.scrollTo({ top: el.offsetTop - 130, behavior: 'smooth' });
            }, 100);
        } else {
            const el = document.getElementById(sectionId);
            if (el) window.scrollTo({ top: el.offsetTop - 130, behavior: 'smooth' });
        }
    };

    const toggleFaq = (idx) => {
        setOpenFaq(openFaq === idx ? null : idx);
    };

    return (
        <div className="bg-[#f8fafc] font-sans text-slate-900 overflow-x-hidden">
            <style>{`
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
                body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
                
                .nav-link { 
                    font-size: 13px; 
                    color: #4a90e2; 
                    font-weight: 800; 
                    transition: all 0.2s ease; 
                    text-transform: uppercase; 
                    letter-spacing: 0.5px; 
                    padding: 24px 0; 
                    white-space: nowrap; 
                    cursor: pointer; 
                }
                .nav-link:hover { color: #0b1120; }
                
                .dropdown-menu { opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 0; background: white; min-width: 280px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-radius: 12px; padding: 12px 0; transition: all 0.2s ease-in-out; border-top: 4px solid #4a90e2; transform: translateY(10px); }
                .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
                .service-item { display: block; padding: 12px 24px; font-size: 14px; font-weight: 700; color: #334155; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.2s, padding-left 0.2s; }
                .service-item:hover { background-color: #f8fafc; color: #4a90e2; padding-left: 28px; }
                
                .page-content { animation: fadeIn 0.4s ease-in-out; }
                @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
                .contact-input { width: 100%; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; outline: none; transition: border-color 0.2s; font-weight: 500;}
                .contact-input:focus { border-color: #4a90e2; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); }
                
                @keyframes marquee {
                    0% { transform: translateX(0%); }
                    100% { transform: translateX(-50%); }
                }
                .animate-marquee {
                    animation: marquee 40s linear infinite;
                    width: max-content;
                }
            `}</style>

            {/* HEADER */}
            <header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm border-b border-slate-100">
                {/* Mobile-Responsive Dark Top Bar */}
                <div className="bg-[#0b1120] text-slate-300 py-3 md:py-2.5 text-[12px] md:text-[13px] font-medium">
                    <div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row justify-between items-center gap-2 md:gap-0">
                        <div className="flex flex-wrap items-center justify-center md:justify-start gap-x-5 gap-y-2">
                            <a href="tel:6135550123" className="flex items-center hover:text-white transition">
                                <Phone className="w-3.5 h-3.5 text-[#5a8bf1] mr-1.5" /> (613) 555-0123
                            </a>
                            <a href="mailto:info@sabsplumbing.ca" className="flex items-center hover:text-white transition">
                                <Mail className="w-3.5 h-3.5 text-[#5a8bf1] mr-1.5" /> info@sabsplumbing.ca
                            </a>
                            <span className="flex items-center text-[#ff6b6b] font-bold uppercase tracking-wide">
                                <Zap className="w-3.5 h-3.5 mr-1.5" /> 24/7 Emergency Plumbing
                            </span>
                        </div>
                        <div className="hidden lg:flex items-center space-x-5">
                            <a href="https://facebook.com" target="_blank" rel="noreferrer" className="hover:text-white transition"><Facebook className="w-4 h-4" /></a>
                            <a href="https://instagram.com" target="_blank" rel="noreferrer" className="hover:text-white transition"><Instagram className="w-4 h-4" /></a>
                        </div>
                    </div>
                </div>

                {/* Main Navigation Row */}
                <div className="bg-white relative">
                    <div className="container mx-auto px-4 md:px-6">
                        <div className="flex justify-between items-center">
                            {/* Logo */}
                            <div onClick={() => navigateTo('home')} className="py-4 cursor-pointer flex items-center gap-4">
                                <div className="bg-[#4a90e2] text-white w-10 h-10 md:w-12 md:h-12 rounded-[12px] md:rounded-[14px] flex items-center justify-center shadow-md">
                                    <Droplet className="w-6 h-6 md:w-7 md:h-7" strokeWidth={2.5} />
                                </div>
                                <div className="flex flex-col justify-center">
                                    <h1 className="text-[20px] md:text-[26px] font-black text-[#0b1120] leading-none tracking-tight">SABS PLUMBING</h1>
                                    <span className="text-[9px] md:text-[10px] font-black text-slate-500 uppercase tracking-[2px] mt-1">Residential Experts</span>
                                </div>
                            </div>

                            {/* Mobile Hamburger Button */}
                            <button 
                                className="lg:hidden p-2 text-slate-800 hover:text-[#4a90e2] transition-colors"
                                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                            >
                                {isMobileMenuOpen ? <X className="w-8 h-8" /> : <Menu className="w-8 h-8" />}
                            </button>

                            {/* Desktop Nav Links */}
                            <nav className="hidden lg:flex items-center space-x-7 h-full">
                                <div onClick={() => navigateTo('home')} className="nav-link">Home</div>
                                <div onClick={() => navigateAndScroll('home', 'about-section')} className="nav-link">About Us</div>
                                
                                <div className="relative dropdown group h-full flex items-center">
                                    <button onClick={() => navigateAndScroll('home', 'home-services-grid')} className="nav-link flex items-center gap-1">
                                        Services <ChevronDown className="w-3.5 h-3.5 opacity-50 stroke-[3px]" />
                                    </button>
                                    <div className="dropdown-menu z-50">
                                        {Object.entries(services).map(([key, service]) => (
                                            <div key={key} onClick={() => navigateTo(key)} className="service-item">{service.title}</div>
                                        ))}
                                    </div>
                                </div>

                                <div onClick={() => navigateTo('emergency-plumber-cornwall')} className="nav-link">Emergency Plumbing</div>
                                
                                <div className="relative dropdown group h-full flex items-center">
                                    <button className="nav-link flex items-center gap-1">
                                        Service Areas <ChevronDown className="w-3.5 h-3.5 opacity-50 stroke-[3px]" />
                                    </button>
                                    <div className="dropdown-menu z-50">
                                        {Object.entries(serviceAreas).map(([key, area]) => (
                                            <div key={key} onClick={() => navigateTo(key)} className="service-item">{area.title.replace('Plumbing Services in ', '')}</div>
                                        ))}
                                    </div>
                                </div>

                                <div onClick={() => navigateTo('pricing')} className="nav-link">Pricing</div>
                                <div onClick={() => navigateTo('faq')} className="nav-link">FAQ</div>
                                <div onClick={() => navigateTo('contact')} className="nav-link">Contact</div>
                            </nav>
                        </div>
                    </div>

                    {/* Mobile Menu Dropdown Panel */}
                    <div className={`lg:hidden absolute top-full left-0 w-full bg-white shadow-2xl border-t border-slate-100 flex flex-col transition-all duration-300 origin-top ${isMobileMenuOpen ? 'scale-y-100 opacity-100' : 'scale-y-0 opacity-0 pointer-events-none'}`}>
                        <div className="flex flex-col p-4 space-y-2 overflow-y-auto max-h-[70vh]">
                            <button onClick={() => navigateTo('home')} className="text-left font-black uppercase text-[13px] tracking-wider text-[#4a90e2] hover:text-[#0b1120] transition-colors p-4 hover:bg-slate-50 rounded-xl">Home</button>
                            <button onClick={() => navigateAndScroll('home', 'about-section')} className="text-left font-black uppercase text-[13px] tracking-wider text-[#4a90e2] hover:text-[#0b1120] transition-colors p-4 hover:bg-slate-50 rounded-xl">About Us</button>
                            
                            {/* Mobile Services Accordion */}
                            <div>
                                <button onClick={() => setMobileServicesOpen(!mobileServicesOpen)} className="w-full flex justify-between items-center font-black uppercase text-[13px] tracking-wider text-[#4a90e2] hover:text-[#0b1120] transition-colors p-4 hover:bg-slate-50 rounded-xl">
                                    Services <ChevronDown className={`w-5 h-5 transition-transform ${mobileServicesOpen ? 'rotate-180 text-[#0b1120]' : ''}`} />
                                </button>
                                {mobileServicesOpen && (
                                    <div className="flex flex-col pl-4 border-l-2 border-[#4a90e2]/20 ml-6 mt-1 space-y-2 mb-2">
                                        {Object.entries(services).map(([key, service]) => (
                                            <button key={key} onClick={() => navigateTo(key)} className="text-left text-[14px] font-bold text-slate-600 p-2 hover:text-[#4a90e2]">
                                                {service.title}
                                            </button>
                                        ))}
                                    </div>
                                )}
                            </div>

                            <button onClick={() => navigateTo('emergency-plumber-cornwall')} className="text-left font-black uppercase text-[13px] tracking-wider text-[#ff6b6b] p-4 hover:bg-red-50 rounded-xl">Emergency Plumbing</button>

                            {/* Mobile Service Areas Accordion */}
                            <div>
                                <button onClick={() => setMobileAreasOpen(!mobileAreasOpen)} className="w-full flex justify-between items-center font-black uppercase text-[13px] tracking-wider text-[#4a90e2] hover:text-[#0b1120] transition-colors p-4 hover:bg-slate-50 rounded-xl">
                                    Service Areas <ChevronDown className={`w-5 h-5 transition-transform ${mobileAreasOpen ? 'rotate-180 text-[#0b1120]' : ''}`} />
                                </button>
                                {mobileAreasOpen && (
                                    <div className="flex flex-col pl-4 border-l-2 border-[#4a90e2]/20 ml-6 mt-1 space-y-2 mb-2">
                                        {Object.entries(serviceAreas).map(([key, area]) => (
                                            <button key={key} onClick={() => navigateTo(key)} className="text-left text-[14px] font-bold text-slate-600 p-2 hover:text-[#4a90e2]">
                                                {area.title.replace('Plumbing Services in ', '')}
                                            </button>
                                        ))}
                                    </div>
                                )}
                            </div>

                            <button onClick={() => navigateTo('pricing')} className="text-left font-black uppercase text-[13px] tracking-wider text-[#4a90e2] hover:text-[#0b1120] transition-colors p-4 hover:bg-slate-50 rounded-xl">Pricing</button>
                            <button onClick={() => navigateTo('faq')} className="text-left font-black uppercase text-[13px] tracking-wider text-[#4a90e2] hover:text-[#0b1120] transition-colors p-4 hover:bg-slate-50 rounded-xl">FAQ</button>
                            <button onClick={() => navigateTo('contact')} className="text-left font-black uppercase text-[13px] tracking-wider text-white bg-[#0b1120] hover:bg-[#4a90e2] transition-colors p-4 rounded-xl mt-2">Contact Us</button>
                        </div>
                    </div>
                </div>
            </header>

            <main className="pt-[150px] md:pt-[140px] min-h-[80vh]">
                
                {/* HOME PAGE */}
                {currentPage === 'home' && (
                    <div className="page-content">
                        
                        {/* HERO SECTION */}
                        <section className="relative pt-24 pb-48 md:pb-56 flex items-center min-h-[75vh] md:min-h-[85vh]" style={{
                            backgroundImage: "linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.75) 50%, rgba(15, 23, 42, 0.4) 100%), url('https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&q=80&w=2070')",
                            backgroundSize: 'cover',
                            backgroundPosition: 'center'
                        }}>
                            <div className="container mx-auto px-6 relative z-10 text-left">
                                <div className="max-w-3xl">
                                    {/* Emergency Badge */}
                                    <div className="inline-flex items-center px-4 py-2 rounded-full bg-[#ef4444]/15 text-[#f87171] border border-[#ef4444]/20 font-bold text-[12px] md:text-[13px] mb-6 md:mb-8 backdrop-blur-sm tracking-wide">
                                        <Clock className="w-4 h-4 mr-2" /> 24/7 Emergency Plumber Available
                                    </div>
                                    
                                    {/* Main Headline */}
                                    <h1 className="text-4xl sm:text-5xl md:text-[5.5rem] font-black text-white leading-[1.1] mb-6 tracking-tight">
                                        Expert Plumbing <br />
                                        <span className="text-[#8bb4f6]">When You Need It<br/>Most.</span>
                                    </h1>
                                    
                                    {/* Subheadline */}
                                    <p className="text-[18px] md:text-[20px] text-slate-300 mb-8 md:mb-10 leading-relaxed max-w-2xl font-medium">
                                        From leaky faucets to complete pipe replacements, our licensed professionals deliver fast, reliable, and guaranteed plumbing solutions.
                                    </p>
                                    
                                    {/* CTA Buttons */}
                                    <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-5">
                                        <div onClick={() => navigateTo('contact')} className="bg-[#5a6cfd] hover:bg-blue-600 text-white px-8 py-4 rounded-xl font-bold text-lg text-center transition shadow-lg shadow-blue-600/30 cursor-pointer flex items-center justify-center">
                                            Get a Free Quote
                                        </div>
                                        <a href="tel:18005553569" className="bg-white hover:bg-slate-50 text-slate-900 px-8 py-4 rounded-xl font-black text-lg text-center transition flex items-center justify-center shadow-lg">
                                            <Phone className="w-5 h-5 mr-3 text-slate-700" />
                                            Call (800) 555-FLOW
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </section>

                        {/* TRUST BANNER */}
                        <div className="container mx-auto px-6 relative z-20 -mt-20 md:-mt-28 mb-16 md:mb-20">
                            <div className="bg-white py-10 md:py-12 border border-slate-100 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.08)] max-w-5xl mx-auto">
                                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x divide-slate-100 px-6">
                                    <div className="flex flex-col items-center p-4">
                                        <div className="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center border-4 border-white shadow-sm mb-5">
                                            <Shield className="w-7 h-7 text-[#5a6cfd]" strokeWidth={2.5} />
                                        </div>
                                        <h3 className="font-black text-slate-900 text-xl mb-2">Licensed & Insured</h3>
                                        <p className="text-[15px] text-slate-500 leading-relaxed font-medium">Peace of mind guaranteed. Our team carries full master certifications and insurance.</p>
                                    </div>
                                    <div className="flex flex-col items-center p-4">
                                        <div className="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center border-4 border-white shadow-sm mb-5">
                                            <Clock className="w-7 h-7 text-[#5a6cfd]" strokeWidth={2.5} />
                                        </div>
                                        <h3 className="font-black text-slate-900 text-xl mb-2">Upfront Pricing</h3>
                                        <p className="text-[15px] text-slate-500 leading-relaxed font-medium">Know the cost before we start. No hidden fees, surprise hourly additions, or confusing estimates.</p>
                                    </div>
                                    <div className="flex flex-col items-center p-4">
                                        <div className="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center border-4 border-white shadow-sm mb-5">
                                            <Star className="w-7 h-7 text-[#5a6cfd]" strokeWidth={2.5} />
                                        </div>
                                        <h3 className="font-black text-slate-900 text-xl mb-2">5-Star Rated</h3>
                                        <p className="text-[15px] text-slate-500 leading-relaxed font-medium">Trusted by 1,000+ locals across Cornwall and SD&G for unmatched residential service.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <section id="about-section" className="py-16 md:py-20 bg-[#f8fafc]">
                            <div className="container mx-auto px-6">
                                <div className="grid lg:grid-cols-2 gap-12 md:gap-16 items-center">
                                    <div className="relative">
                                        <img src="https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?auto=format&fit=crop&q=80&w=800" className="rounded-[2rem] shadow-2xl relative z-10" alt="Plumbing Experts" />
                                        <div className="absolute -bottom-6 -right-6 w-48 h-48 md:w-64 md:h-64 bg-blue-200/50 rounded-full -z-0"></div>
                                    </div>
                                    <div>
                                        <span className="text-[#4a90e2] font-black uppercase tracking-widest text-[13px]">About SABS Plumbing</span>
                                        <h2 className="text-3xl md:text-5xl font-black text-slate-900 mt-4 mb-6 leading-tight tracking-tight">Your Local Master Plumbers in the Heart of Cornwall</h2>
                                        <div className="space-y-4 text-slate-600 text-[16px] md:text-lg leading-relaxed font-medium">
                                            <p>
                                                At SABS Plumbing, we are more than just service technicians; we are a dedicated team of Master Plumbers committed to serving the residential needs of Cornwall and the greater SD&G area. 
                                            </p>
                                            <p>
                                                With over a decade of experience navigating the unique plumbing challenges of Ontario's homes, we have built a reputation based on surgical precision, unwavering reliability, and absolute transparency in our flat-rate pricing. 
                                            </p>
                                        </div>
                                        <div className="mt-10 flex flex-col sm:flex-row items-start sm:items-center gap-6 sm:gap-8 bg-white p-6 rounded-2xl shadow-sm border border-slate-100 sm:w-max w-full">
                                            <div className="text-center w-full sm:w-auto">
                                                <div className="text-4xl font-black text-[#0b1120]">10+</div>
                                                <div className="text-xs uppercase font-bold text-slate-400 mt-1 tracking-wide">Years Exp.</div>
                                            </div>
                                            <div className="w-full h-px sm:w-px sm:h-12 bg-slate-200"></div>
                                            <div className="text-center w-full sm:w-auto">
                                                <div className="text-4xl font-black text-[#0b1120]">100%</div>
                                                <div className="text-xs uppercase font-bold text-slate-400 mt-1 tracking-wide">Licensed</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <section id="home-services-grid" className="py-20 md:py-24 bg-white">
                            <div className="container mx-auto px-6">
                                <div className="text-center mb-16">
                                    <span className="text-[#4a90e2] font-black uppercase tracking-widest text-[13px]">Full Range Expertise</span>
                                    <h2 className="text-3xl md:text-5xl font-black text-slate-900 mt-3 tracking-tight">Our Core Services</h2>
                                    <div className="w-20 h-1.5 bg-[#4a90e2] mx-auto mt-6 rounded-full"></div>
                                </div>
                                
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                                    {Object.entries(services).map(([key, s]) => (
                                        <div key={key} onClick={() => navigateTo(key)} className="group bg-white rounded-3xl shadow-sm hover:shadow-[0_20px_40px_rgba(0,0,0,0.08)] p-6 border border-slate-100 cursor-pointer transition-all duration-300 transform hover:-translate-y-1">
                                            <div className="overflow-hidden rounded-2xl mb-6 h-48 bg-slate-100">
                                                <img src={s.img} className="w-full h-full object-cover group-hover:scale-105 transition duration-700" alt={s.title} />
                                            </div>
                                            <div className="flex justify-between items-start mb-3">
                                                <h3 className="text-[20px] md:text-[22px] font-black text-slate-900 leading-tight tracking-tight">{s.title}</h3>
                                                <div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-[#4a90e2] group-hover:text-white transition flex-shrink-0">
                                                    <ChevronRight className="w-4 h-4" />
                                                </div>
                                            </div>
                                            <p className="text-slate-500 text-[15px] leading-relaxed line-clamp-3 font-medium">{s.desc}</p>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </section>

                        {/* TESTIMONIALS SECTION */}
                        <section className="py-20 md:py-24 bg-slate-900 overflow-hidden relative">
                            <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&q=80&w=2000')] opacity-5 bg-cover bg-center"></div>
                            <div className="container mx-auto px-6 mb-12 md:mb-16 text-center relative z-10">
                                <span className="text-[#4a90e2] font-black uppercase tracking-widest text-[13px]">Customer Reviews</span>
                                <h2 className="text-3xl md:text-5xl font-black text-white mt-3 tracking-tight">What Our Clients Say</h2>
                            </div>
                            
                            {/* Marquee Wrapper */}
                            <div className="relative w-full flex overflow-x-hidden group z-10">
                                {/* Gradient Fades */}
                                <div className="absolute left-0 top-0 bottom-0 w-24 md:w-32 bg-gradient-to-r from-slate-900 to-transparent z-10 pointer-events-none"></div>
                                <div className="absolute right-0 top-0 bottom-0 w-24 md:w-32 bg-gradient-to-l from-slate-900 to-transparent z-10 pointer-events-none"></div>
                                
                                {/* Scrolling Track */}
                                <div className="flex space-x-4 md:space-x-6 animate-marquee group-hover:[animation-play-state:paused] px-3">
                                    {[...testimonials, ...testimonials].map((t, i) => (
                                        <div key={i} className="w-[320px] md:w-[380px] flex-shrink-0 bg-slate-800/50 backdrop-blur-md p-6 md:p-8 rounded-3xl border border-slate-700/50 flex flex-col justify-between transition hover:bg-slate-800 cursor-grab active:cursor-grabbing">
                                            <div>
                                                <div className="flex text-yellow-400 mb-4 md:mb-5">
                                                    {[...Array(t.rating)].map((_, idx) => <Star key={idx} className="w-5 h-5 fill-current" />)}
                                                </div>
                                                <p className="text-slate-300 text-[15px] md:text-[16px] italic mb-6 md:mb-8 leading-relaxed">"{t.text}"</p>
                                            </div>
                                            <div className="flex items-center gap-4">
                                                <div className="w-12 h-12 rounded-full bg-[#4a90e2] text-white flex items-center justify-center font-black text-xl">
                                                    {t.name.charAt(0)}
                                                </div>
                                                <div>
                                                    <h4 className="font-black text-white">{t.name}</h4>
                                                    <p className="text-[10px] md:text-[11px] text-slate-400 uppercase tracking-widest font-black mt-1">{t.area}</p>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </section>
                    </div>
                )}

                {/* SERVICE AREA PAGES */}
                {currentPage.startsWith('area-') && serviceAreas[currentPage] && (
                    <div className="page-content">
                        <div className="container mx-auto px-6 py-12 md:py-16">
                            <div className="grid lg:grid-cols-2 gap-12 md:gap-16 items-center">
                                <div>
                                    <button onClick={() => navigateTo('home')} className="flex items-center gap-2 text-[#4a90e2] font-black uppercase text-[12px] tracking-widest mb-8 hover:-translate-x-1 transition-transform">
                                        <ArrowLeft className="w-4 h-4" /> Back to Home
                                    </button>
                                    <div className="inline-flex items-center px-4 py-1.5 rounded-full bg-blue-100 text-blue-700 font-bold text-[13px] mb-6 tracking-wide">
                                        <MapPin className="w-4 h-4 mr-2" /> Serving {serviceAreas[currentPage].title.replace('Plumbing Services in ', '').replace('Plumbing in ', '')}
                                    </div>
                                    <h2 className="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tight leading-tight">{serviceAreas[currentPage].title}</h2>
                                    <p className="text-[16px] md:text-xl text-slate-600 leading-relaxed mb-10 font-medium">{serviceAreas[currentPage].desc}</p>
                                    
                                    <div className="flex flex-col sm:flex-row gap-4">
                                        <button onClick={() => navigateTo('contact')} className="bg-[#0b1120] text-white px-10 py-4 rounded-xl font-black uppercase tracking-wide shadow-xl hover:bg-slate-800 transition">
                                            Request Service Here
                                        </button>
                                        <a href="tel:6135550123" className="bg-red-50 text-red-600 px-10 py-4 rounded-xl font-black uppercase tracking-wide flex items-center justify-center hover:bg-red-100 transition">
                                            <Phone className="w-5 h-5 mr-2" /> Emergency Call
                                        </a>
                                    </div>
                                </div>
                                <div className="rounded-[2rem] overflow-hidden shadow-2xl relative">
                                    <img src={serviceAreas[currentPage].img} className="w-full h-[400px] md:h-[600px] object-cover" alt={serviceAreas[currentPage].title} />
                                    <div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent flex items-end p-6 md:p-10">
                                        <h3 className="text-2xl md:text-3xl font-black text-white tracking-tight">{serviceAreas[currentPage].title.replace('Plumbing in ', '')} Experts</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* CONTACT PAGE */}
                {currentPage === 'contact' && (
                    <div className="page-content">
                        <div className="container mx-auto px-6 py-12 md:py-20 max-w-7xl">
                            <div className="text-center mb-12 md:mb-16">
                                <span className="text-[#4a90e2] font-black uppercase tracking-widest text-[13px]">Get In Touch</span>
                                <h2 className="text-4xl md:text-5xl font-black text-slate-900 mt-3 tracking-tight">Contact SABS Plumbing</h2>
                                <p className="text-slate-500 mt-4 max-w-2xl mx-auto text-[16px] md:text-lg font-medium">We're here to help with any plumbing project or emergency. Reach out to our team of experts today.</p>
                            </div>

                            <div className="grid lg:grid-cols-5 gap-12 items-start">
                                {/* Left Side: Contact Information */}
                                <div className="lg:col-span-2 space-y-6">
                                    <div className="bg-white p-6 md:p-8 rounded-3xl shadow-[0_10px_40px_rgba(0,0,0,0.04)] border border-slate-100 flex items-start gap-5 hover:-translate-y-1 transition-transform">
                                        <div className="w-12 h-12 md:w-14 md:h-14 bg-blue-50 text-[#4a90e2] rounded-2xl flex items-center justify-center flex-shrink-0">
                                            <Phone className="w-6 h-6" strokeWidth={2.5} />
                                        </div>
                                        <div>
                                            <h3 className="font-black text-lg text-slate-900 mb-1">Phone Number</h3>
                                            <a href="tel:6135550123" className="text-[#4a90e2] font-black text-xl hover:underline tracking-tight">(613) 555-0123</a>
                                            <p className="text-red-500 text-[11px] mt-2 uppercase font-black tracking-widest">24/7 Emergency Line</p>
                                        </div>
                                    </div>

                                    <div className="bg-white p-6 md:p-8 rounded-3xl shadow-[0_10px_40px_rgba(0,0,0,0.04)] border border-slate-100 flex items-start gap-5 hover:-translate-y-1 transition-transform">
                                        <div className="w-12 h-12 md:w-14 md:h-14 bg-slate-50 text-slate-700 rounded-2xl flex items-center justify-center flex-shrink-0">
                                            <Mail className="w-6 h-6" strokeWidth={2.5} />
                                        </div>
                                        <div>
                                            <h3 className="font-black text-lg text-slate-900 mb-1">Email Address</h3>
                                            <p className="text-slate-600 font-medium">info@sabsplumbing.ca</p>
                                            <p className="text-slate-400 text-[11px] mt-2 uppercase font-bold tracking-widest">We reply within 24hrs</p>
                                        </div>
                                    </div>

                                    <div className="bg-[#0b1120] p-6 md:p-8 rounded-3xl shadow-[0_10px_40px_rgba(0,0,0,0.04)] text-white flex items-start gap-5">
                                        <div className="w-12 h-12 md:w-14 md:h-14 bg-white/10 text-white rounded-2xl flex items-center justify-center flex-shrink-0">
                                            <Clock className="w-6 h-6" strokeWidth={2.5} />
                                        </div>
                                        <div className="w-full">
                                            <h3 className="font-black text-lg text-white mb-3">Business Hours</h3>
                                            <ul className="space-y-2 text-sm text-slate-300 font-medium">
                                                <li className="flex justify-between"><span>Mon - Fri</span> <span className="text-white">7:00 AM - 6:00 PM</span></li>
                                                <li className="flex justify-between"><span>Saturday</span> <span className="text-white">8:00 AM - 4:00 PM</span></li>
                                                <li className="flex justify-between pt-2 border-t border-slate-700 mt-2">
                                                    <span>Sunday</span> <span className="text-[#ff6b6b] font-bold">Emergency Only</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                {/* Right Side: Contact Form */}
                                <div className="lg:col-span-3">
                                    <form className="bg-white p-8 md:p-12 rounded-[2rem] shadow-[0_10px_40px_rgba(0,0,0,0.04)] border border-slate-100 grid md:grid-cols-2 gap-6" onSubmit={(e) => { 
                                        e.preventDefault(); 
                                        const phoneVal = e.target.phone.value;
                                        const digits = phoneVal.replace(/\D/g, '');
                                        if (digits.length !== 10) {
                                            alert('Please enter exactly 10 digits for your phone number.');
                                            return;
                                        }
                                        alert('Message sent! We will contact you shortly.'); 
                                    }}>
                                        <div className="md:col-span-2 mb-2">
                                            <h3 className="text-2xl font-black text-slate-900">Send us a message</h3>
                                            <p className="text-slate-500 text-sm mt-1 font-medium">Fill out the form below and we'll get back to you to schedule your service.</p>
                                        </div>
                                        <div className="space-y-2">
                                            <label className="text-[12px] font-black uppercase tracking-wide text-slate-700">First Name</label>
                                            <input type="text" placeholder="John" className="contact-input bg-[#f8fafc]" required />
                                        </div>
                                        <div className="space-y-2">
                                            <label className="text-[12px] font-black uppercase tracking-wide text-slate-700">Last Name</label>
                                            <input type="text" placeholder="Doe" className="contact-input bg-[#f8fafc]" required />
                                        </div>
                                        <div className="space-y-2">
                                            <label className="text-[12px] font-black uppercase tracking-wide text-slate-700">Phone Number</label>
                                            <input type="tel" name="phone" placeholder="(613) 000-0000" className="contact-input bg-[#f8fafc]" required />
                                        </div>
                                        <div className="space-y-2">
                                            <label className="text-[12px] font-black uppercase tracking-wide text-slate-700">Service Needed</label>
                                            <select className="contact-input bg-[#f8fafc] text-slate-700">
                                                <option>General Inquiry</option>
                                                <option>Emergency Service</option>
                                                <option>Drain Cleaning</option>
                                                <option>Water Heater</option>
                                                <option>Pump Installation</option>
                                                <option>Other</option>
                                            </select>
                                        </div>
                                        <div className="space-y-2 md:col-span-2">
                                            <label className="text-[12px] font-black uppercase tracking-wide text-slate-700">Message / Description</label>
                                            <textarea placeholder="Tell us about your plumbing needs..." rows="4" className="contact-input bg-[#f8fafc] resize-none" required></textarea>
                                        </div>
                                        <div className="md:col-span-2 mt-4">
                                            <button type="submit" className="w-full bg-[#0b1120] text-white font-black uppercase tracking-widest py-4 rounded-xl shadow-lg hover:bg-[#4a90e2] transition-colors text-[14px]">Send Request</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* FAQ PAGE */}
                {currentPage === 'faq' && (
                    <div className="page-content">
                        <div className="container mx-auto px-6 py-12 md:py-16 max-w-4xl">
                            <div className="text-center mb-12 md:mb-16">
                                <span className="text-[#4a90e2] font-black uppercase tracking-widest text-[13px]">Help Center</span>
                                <h2 className="text-4xl md:text-5xl font-black mt-3 text-slate-900 tracking-tight">Frequently Asked Questions</h2>
                            </div>
                            <div className="space-y-4">
                                {faqs.map((faq, idx) => (
                                    <div key={idx} className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
                                        <button className="w-full text-left p-5 md:p-6 font-black text-slate-900 flex justify-between items-center hover:bg-slate-50 transition text-[16px] md:text-lg" onClick={() => toggleFaq(idx)}>
                                            <span className="pr-4">{idx + 1}. {faq.q}</span>
                                            <ChevronDown className={`w-6 h-6 flex-shrink-0 text-[#4a90e2] transition-transform ${openFaq === idx ? 'rotate-180' : ''}`} />
                                        </button>
                                        {openFaq === idx && (
                                            <div className="p-5 md:p-6 pt-0 text-slate-600 leading-relaxed font-medium text-[15px] md:text-[16px]">
                                                {faq.a}
                                            </div>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                )}

                {/* PRICING PAGE */}
                {currentPage === 'pricing' && (
                    <div className="page-content">
                        <div className="container mx-auto px-6 py-12 md:py-20 max-w-7xl">
                            <div className="text-center mb-12 md:mb-16">
                                <span className="text-[#4a90e2] font-black uppercase tracking-widest text-[13px]">No Surprises</span>
                                <h2 className="text-4xl md:text-6xl font-black text-slate-900 mt-3 mb-6 tracking-tight">Flat-Rate Pricing</h2>
                                <p className="text-slate-500 text-[16px] md:text-lg font-medium max-w-2xl mx-auto">
                                    Quality service with zero hourly surprises. We charge by the job, not by the hour, so you always know exactly what you are paying before any work begins.
                                </p>
                            </div>

                            <div className="grid md:grid-cols-3 gap-8 mb-16">
                                {/* Tier 1 */}
                                <div className="bg-white rounded-[2rem] shadow-[0_10px_40px_rgba(0,0,0,0.04)] border border-slate-100 p-8 md:p-10 flex flex-col hover:shadow-xl transition-shadow">
                                    <div className="mb-8">
                                        <h3 className="text-2xl font-black text-slate-900 mb-2">Diagnostic Visit</h3>
                                        <p className="text-slate-500 font-medium text-sm">Professional troubleshooting & quote</p>
                                    </div>
                                    <div className="mb-8">
                                        <span className="text-4xl font-black text-[#4a90e2]">Flat Fee</span>
                                    </div>
                                    <ul className="space-y-4 mb-10 flex-1">
                                        <li className="flex items-start gap-3 text-slate-700 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#4a90e2] flex-shrink-0 mt-0.5" /> Thorough system inspection
                                        </li>
                                        <li className="flex items-start gap-3 text-slate-700 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#4a90e2] flex-shrink-0 mt-0.5" /> Exact problem identification
                                        </li>
                                        <li className="flex items-start gap-3 text-slate-700 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#4a90e2] flex-shrink-0 mt-0.5" /> Firm, written quote for repairs
                                        </li>
                                    </ul>
                                    <button onClick={() => navigateTo('contact')} className="w-full py-4 rounded-xl font-black uppercase tracking-widest text-[13px] bg-slate-100 text-slate-900 hover:bg-slate-200 transition-colors">Book Inspection</button>
                                </div>

                                {/* Tier 2 */}
                                <div className="bg-[#0b1120] rounded-[2rem] shadow-2xl p-8 md:p-10 flex flex-col transform md:-translate-y-4 relative border border-slate-800 mt-4 md:mt-0">
                                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#4a90e2] text-white px-5 py-1.5 rounded-full text-[11px] font-black uppercase tracking-widest shadow-lg whitespace-nowrap">
                                        Most Common
                                    </div>
                                    <div className="mb-8">
                                        <h3 className="text-2xl font-black text-white mb-2">Standard Repairs</h3>
                                        <p className="text-slate-400 font-medium text-sm">Leaks, clogs, and fixture swaps</p>
                                    </div>
                                    <div className="mb-8">
                                        <span className="text-3xl md:text-4xl font-black text-white">Upfront Quote</span>
                                    </div>
                                    <ul className="space-y-4 mb-10 flex-1">
                                        <li className="flex items-start gap-3 text-slate-300 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#4a90e2] flex-shrink-0 mt-0.5" /> Price given before work starts
                                        </li>
                                        <li className="flex items-start gap-3 text-slate-300 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#4a90e2] flex-shrink-0 mt-0.5" /> Parts and labor included
                                        </li>
                                        <li className="flex items-start gap-3 text-slate-300 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#4a90e2] flex-shrink-0 mt-0.5" /> Clean workspace guarantee
                                        </li>
                                        <li className="flex items-start gap-3 text-slate-300 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#4a90e2] flex-shrink-0 mt-0.5" /> Full warranty on workmanship
                                        </li>
                                    </ul>
                                    <button onClick={() => navigateTo('contact')} className="w-full py-4 rounded-xl font-black uppercase tracking-widest text-[13px] bg-[#4a90e2] text-white hover:bg-blue-600 transition-colors shadow-lg shadow-blue-500/20">Get A Quote</button>
                                </div>

                                {/* Tier 3 */}
                                <div className="bg-white rounded-[2rem] shadow-[0_10px_40px_rgba(0,0,0,0.04)] border border-slate-100 p-8 md:p-10 flex flex-col hover:shadow-xl transition-shadow mt-4 md:mt-0">
                                    <div className="mb-8">
                                        <h3 className="text-2xl font-black text-slate-900 mb-2">Emergency Service</h3>
                                        <p className="text-slate-500 font-medium text-sm">After-hours, floods, severe leaks</p>
                                    </div>
                                    <div className="mb-8">
                                        <span className="text-4xl font-black text-[#ff6b6b]">Immediate</span>
                                    </div>
                                    <ul className="space-y-4 mb-10 flex-1">
                                        <li className="flex items-start gap-3 text-slate-700 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#ff6b6b] flex-shrink-0 mt-0.5" /> Rapid response dispatch
                                        </li>
                                        <li className="flex items-start gap-3 text-slate-700 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#ff6b6b] flex-shrink-0 mt-0.5" /> Stop active water damage
                                        </li>
                                        <li className="flex items-start gap-3 text-slate-700 font-medium">
                                            <CheckCircle className="w-5 h-5 text-[#ff6b6b] flex-shrink-0 mt-0.5" /> Emergency rate applies
                                        </li>
                                    </ul>
                                    <a href="tel:6135550123" className="w-full py-4 rounded-xl font-black uppercase tracking-widest text-[13px] bg-red-50 text-red-600 hover:bg-red-100 transition-colors flex items-center justify-center">
                                        <Phone className="w-4 h-4 mr-2" /> Call Now
                                    </a>
                                </div>
                            </div>

                            <div className="bg-[#eef2ff] rounded-[2rem] p-8 md:p-14 flex flex-col md:flex-row items-center justify-between gap-8 md:gap-10">
                                <div className="max-w-xl text-center md:text-left">
                                    <h3 className="text-2xl md:text-3xl font-black text-slate-900 mb-4 tracking-tight">Why we use Flat-Rate Pricing?</h3>
                                    <p className="text-slate-600 leading-relaxed font-medium">
                                        Hourly rates punish you for slow work. With flat-rate pricing, you pay for the solution, not the time it takes. If a repair takes us longer than expected, we absorb the cost, not you. It guarantees our technicians work efficiently and you get the fairest price possible.
                                    </p>
                                </div>
                                <div className="w-full md:w-auto">
                                    <button onClick={() => navigateTo('contact')} className="w-full md:w-auto bg-[#0b1120] text-white px-10 py-5 rounded-xl font-black uppercase tracking-widest hover:bg-[#4a90e2] transition-colors shadow-xl">
                                        Request Service
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* EMERGENCY PAGE - REDESIGNED */}
                {currentPage === 'emergency-plumber-cornwall' && (
                    <div className="page-content">
                        {/* Dramatic Hero Area */}
                        <div className="relative bg-slate-900 py-20 md:py-32 overflow-hidden">
                            <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1590479017803-7f428d002735?auto=format&fit=crop&q=80&w=2000')] opacity-30 bg-cover bg-center mix-blend-overlay"></div>
                            <div className="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent"></div>
                            
                            <div className="container mx-auto px-6 relative z-10 text-center max-w-4xl">
                                <div className="inline-flex items-center px-5 py-2 rounded-full bg-red-500/20 text-red-400 font-black text-[13px] uppercase tracking-widest mb-8 border border-red-500/30 backdrop-blur-md">
                                    <AlertTriangle className="w-4 h-4 mr-2 animate-pulse" /> Urgent Response Required
                                </div>
                                <h2 className="text-5xl md:text-7xl font-black text-white mb-6 tracking-tight leading-tight">Don't Wait. <br/><span className="text-[#ff6b6b]">Stop The Damage Now.</span></h2>
                                <p className="text-lg md:text-2xl text-slate-300 mb-12 font-medium leading-relaxed">
                                    Our master plumbers are on standby 24/7 across Cornwall and SD&G. If water is leaking where it shouldn't be, we need to be there.
                                </p>
                                
                                <div className="bg-white/10 backdrop-blur-lg rounded-[2rem] p-8 md:p-12 border border-white/20 shadow-2xl">
                                    <h3 className="text-white text-xl font-bold mb-6 uppercase tracking-widest text-slate-300">Direct Emergency Hotline</h3>
                                    <a href="tel:6135550123" className="bg-[#ff6b6b] hover:bg-red-500 text-white px-8 py-6 rounded-2xl text-3xl md:text-5xl font-black shadow-[0_0_40px_rgba(255,107,107,0.4)] transition-all flex items-center justify-center w-full transform hover:-translate-y-1">
                                        <Phone className="w-8 h-8 md:w-10 md:h-10 mr-4 animate-bounce" /> 613-555-0123
                                    </a>
                                    <p className="text-slate-400 mt-6 font-medium">Tap the button above to call immediately. No answering machines, talk to a real dispatcher.</p>
                                </div>
                            </div>
                        </div>

                        {/* Common Emergencies Section */}
                        <div className="container mx-auto px-6 py-20 max-w-6xl">
                            <div className="text-center mb-16">
                                <h3 className="text-3xl md:text-4xl font-black text-slate-900 tracking-tight">Common Emergencies We Handle</h3>
                                <div className="w-20 h-1.5 bg-[#ff6b6b] mx-auto mt-6 rounded-full"></div>
                            </div>

                            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                                <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 border-l-4 border-l-[#ff6b6b]">
                                    <h4 className="text-xl font-black text-slate-900 mb-3">Burst Pipes</h4>
                                    <p className="text-slate-600 font-medium leading-relaxed">A burst pipe can release gallons of water in minutes. Locate your main shutoff valve immediately and call us to replace the damaged section.</p>
                                </div>
                                <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 border-l-4 border-l-[#ff6b6b]">
                                    <h4 className="text-xl font-black text-slate-900 mb-3">Sewer Backups</h4>
                                    <p className="text-slate-600 font-medium leading-relaxed">Raw sewage backing up into your sinks or basement is a severe health hazard. Do not use any water in the house until we clear the main line.</p>
                                </div>
                                <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 border-l-4 border-l-[#ff6b6b]">
                                    <h4 className="text-xl font-black text-slate-900 mb-3">No Hot Water</h4>
                                    <p className="text-slate-600 font-medium leading-relaxed">A completely failed water heater during the dead of winter isn't just uncomfortable, it can be dangerous. We offer emergency swap-outs.</p>
                                </div>
                                <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 border-l-4 border-l-[#ff6b6b]">
                                    <h4 className="text-xl font-black text-slate-900 mb-3">Overflowing Toilets</h4>
                                    <p className="text-slate-600 font-medium leading-relaxed">Turn the valve behind the toilet clockwise to stop the water flow. If plunging doesn't work, we have professional augers to clear severe clogs.</p>
                                </div>
                                <div className="bg-white p-8 rounded-3xl shadow-sm border border-slate-100 border-l-4 border-l-[#ff6b6b]">
                                    <h4 className="text-xl font-black text-slate-900 mb-3">Sump Pump Failure</h4>
                                    <p className="text-slate-600 font-medium leading-relaxed">During heavy rain or snowmelt, a dead sump pump means a flooded basement. We provide rapid replacements to save your lower level.</p>
                                </div>
                                <div className="bg-[#0b1120] p-8 rounded-3xl shadow-xl flex flex-col justify-center text-center">
                                    <h4 className="text-xl font-black text-white mb-4">Not Sure What To Do?</h4>
                                    <a href="tel:6135550123" className="bg-[#4a90e2] text-white py-3 px-6 rounded-xl font-bold hover:bg-blue-600 transition-colors">
                                        Call For Guidance
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* PRIVACY POLICY PAGE */}
                {currentPage === 'privacy-policy' && (
                    <div className="page-content">
                        <div className="container mx-auto px-6 py-12 md:py-20 max-w-4xl">
                            <div className="bg-white rounded-[2rem] shadow-sm p-8 md:p-12 border border-slate-200">
                                <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-8 capitalize tracking-tight">Privacy Policy</h2>
                                <div className="space-y-6 text-slate-600 leading-relaxed font-medium">
                                    <p><strong>Last Updated: {new Date().getFullYear()}</strong></p>
                                    <p>
                                        Regarding privacy: Client data collected during inquiries or service provision will be used solely for dispatch, billing, collection, and internal 
                                        quality assurance. We do not sell client data, but we reserve the right to share information with collections agencies or legal counsel in the event of non-payment.
                                    </p>
                                    <button onClick={() => navigateTo('home')} className="mt-8 bg-[#0b1120] text-white px-8 py-3 rounded-full font-bold shadow-lg hover:bg-[#4a90e2] transition-colors">
                                        Acknowledge & Return
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* TERMS OF SERVICE PAGE */}
                {currentPage === 'terms-of-service' && (
                    <div className="page-content">
                        <div className="container mx-auto px-6 py-12 md:py-20 max-w-4xl">
                            <div className="bg-white rounded-[2rem] shadow-sm p-8 md:p-12 border border-slate-200">
                                <h2 className="text-3xl md:text-4xl font-black text-slate-900 mb-8 tracking-tight">Terms of Service & Service Policy</h2>
                                <div className="space-y-6 text-slate-600 leading-relaxed font-medium">
                                    <p><strong>Effective Date:</strong> February 21, {new Date().getFullYear()}</p>
                                    <p>Welcome to SABS Plumbing. By booking our services, requesting an estimate, or using our website, you agree to the following Terms of Service.</p>

                                    <h3 className="text-xl md:text-2xl font-black text-slate-900 mt-10 mb-4 tracking-tight">1. Service Agreement</h3>
                                    <p>By scheduling plumbing services with SABS Plumbing, the customer agrees to:</p>
                                    <ul className="list-disc pl-6 space-y-2">
                                        <li>Provide accurate information about the plumbing issue.</li>
                                        <li>Provide safe and reasonable access to the work area.</li>
                                        <li>Ensure pets, valuables, and obstructions are secured or removed before service.</li>
                                        <li>Comply with payment terms outlined below.</li>
                                    </ul>
                                    <p>We reserve the right to refuse or discontinue service if working conditions are unsafe, hazardous, or non-compliant with local regulations.</p>

                                    <h3 className="text-xl md:text-2xl font-black text-slate-900 mt-10 mb-4 tracking-tight">2. Estimates & Pricing</h3>
                                    <ul className="list-disc pl-6 space-y-2">
                                        <li>All estimates are provided based on visible conditions at the time of inspection.</li>
                                        <li>Additional charges may apply if hidden or unforeseen issues are discovered during service.</li>
                                        <li>Any additional work will be discussed and approved before proceeding.</li>
                                        <li>Pricing is subject to change without notice unless a written quote has been issued.</li>
                                        <li>Diagnostic fees may apply and are non-refundable once service has been performed.</li>
                                    </ul>

                                    <h3 className="text-xl md:text-2xl font-black text-slate-900 mt-10 mb-4 tracking-tight">3. Payment Terms</h3>
                                    <p>Payment is due immediately upon completion of services unless otherwise agreed in writing. We accept:</p>
                                    <ul className="list-disc pl-6 space-y-2">
                                        <li>Cash, Debit, Credit Card, E-Transfer</li>
                                    </ul>
                                    <p className="mt-4">Failure to make payment may result in Late fees, Collection actions, Legal recovery of unpaid balances, and Recovery of legal and administrative costs.</p>

                                    <h3 className="text-xl md:text-2xl font-black text-slate-900 mt-10 mb-4 tracking-tight">4. Emergency Services</h3>
                                    <ul className="list-disc pl-6 space-y-2">
                                        <li>Emergency plumbing services are available 24/7. After-hours, weekend, or holiday service calls may include additional fees.</li>
                                        <li>Emergency response times are estimates only and may vary based on weather, demand, or traffic conditions.</li>
                                    </ul>

                                    <h3 className="text-xl md:text-2xl font-black text-slate-900 mt-10 mb-4 tracking-tight">5. Warranty & Liability</h3>
                                    <p>We provide a workmanship warranty on services performed by our company. However:</p>
                                    <ul className="list-disc pl-6 space-y-2">
                                        <li>Warranty does not cover misuse, neglect, freezing pipes, improper use of fixtures, or third-party interference.</li>
                                        <li>We are not responsible for pre-existing plumbing issues or structural deficiencies.</li>
                                        <li>We are not liable for damage caused by concealed or deteriorated pipes discovered during service.</li>
                                    </ul>

                                    <div className="mt-12">
                                        <button onClick={() => navigateTo('home')} className="bg-[#0b1120] text-white px-8 py-3 rounded-full font-bold shadow-lg hover:bg-[#4a90e2] transition-colors w-full md:w-auto">
                                            Acknowledge & Return
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* SERVICE DETAIL PAGE */}
                {services[currentPage] && (
                    <div className="page-content">
                        <div className="container mx-auto px-6 py-12 md:py-16">
                            <div className="grid lg:grid-cols-2 gap-12 md:gap-16 items-start">
                                <div>
                                    <button onClick={() => navigateTo('home')} className="flex items-center gap-2 text-[#4a90e2] font-black uppercase text-[12px] tracking-widest mb-8 hover:-translate-x-1 transition-transform">
                                        <ArrowLeft className="w-4 h-4" /> Back to Home
                                    </button>
                                    <h2 className="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tight leading-tight">{services[currentPage].title}</h2>
                                    <p className="text-[16px] md:text-xl text-slate-600 leading-relaxed mb-10 font-medium">{services[currentPage].desc}</p>
                                    <button onClick={() => navigateTo('contact')} className="bg-[#4a90e2] text-white px-10 py-4 rounded-xl font-black uppercase tracking-wide shadow-xl shadow-blue-500/20 hover:bg-blue-600 transition-colors w-full sm:w-auto">Book This Service</button>
                                </div>
                                <div className="rounded-[2rem] overflow-hidden shadow-2xl">
                                    <img src={services[currentPage].img} className="w-full h-[300px] md:h-[500px] object-cover" alt={services[currentPage].title} />
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </main>

            <footer className="bg-[#0b1120] text-white pt-20 md:pt-24 pb-12 mt-16 md:mt-24">
                <div className="container mx-auto px-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 md:gap-16 mb-16 md:mb-20">
                        <div className="space-y-6">
                            <div className="flex items-center gap-4">
                                <div className="bg-[#4a90e2] w-12 h-12 rounded-[14px] flex items-center justify-center">
                                    <Droplet className="w-6 h-6 text-white" strokeWidth={2.5} />
                                </div>
                                <div>
                                    <h2 className="text-white text-[22px] font-black tracking-tight leading-none">SABS PLUMBING</h2>
                                    <span className="text-slate-400 text-[10px] font-black tracking-[2px] uppercase">Residential Experts</span>
                                </div>
                            </div>
                            <p className="text-slate-400 text-[14px] leading-relaxed font-medium pr-4">
                                Cornwall's premier choice for residential plumbing excellence. From minor repairs to complex upflush installations, we deliver master-level craftsmanship with local heart.
                            </p>
                            <div className="flex gap-4">
                                <a href="https://facebook.com" target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full flex items-center justify-center bg-white/5 hover:bg-[#4a90e2] hover:-translate-y-1 transition text-slate-400 hover:text-white"><Facebook className="w-4 h-4" /></a>
                                <a href="https://instagram.com" target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full flex items-center justify-center bg-white/5 hover:bg-pink-500 hover:-translate-y-1 transition text-slate-400 hover:text-white"><Instagram className="w-4 h-4" /></a>
                            </div>
                        </div>

                        <div>
                            <h4 className="text-[15px] font-black mb-6 uppercase tracking-widest text-slate-100">Quick Navigation</h4>
                            <ul className="space-y-4">
                                <li onClick={() => navigateTo('home')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Home</li>
                                <li onClick={() => navigateAndScroll('home', 'about-section')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">About Our Company</li>
                                <li onClick={() => navigateTo('pricing')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Flat-Rate Pricing</li>
                                <li onClick={() => navigateTo('faq')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Frequently Asked Questions</li>
                                <li onClick={() => navigateTo('contact')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Contact Us</li>
                            </ul>
                        </div>

                        <div>
                            <h4 className="text-[15px] font-black mb-6 uppercase tracking-widest text-slate-100">Popular Services</h4>
                            <ul className="space-y-4">
                                <li onClick={() => navigateTo('emergency-plumber-cornwall')} className="text-[#ff6b6b] font-bold text-[14px] hover:text-red-400 hover:translate-x-1 transition cursor-pointer flex items-center gap-2">24/7 Emergency Support</li>
                                <li onClick={() => navigateTo('general-plumbing')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">General Plumbing</li>
                                <li onClick={() => navigateTo('macerator-pump-install')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Macerator Pump Systems</li>
                                <li onClick={() => navigateTo('drain-cleaning-cornwall')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Professional Drain Cleaning</li>
                                <li onClick={() => navigateTo('water-heater-installation-cornwall')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Water Heater Replacement</li>
                                <li onClick={() => navigateTo('bathroom-kitchen-plumbing')} className="text-slate-400 font-medium text-[14px] hover:text-[#4a90e2] hover:translate-x-1 transition cursor-pointer flex items-center gap-2">Kitchen & Bath Fixtures</li>
                            </ul>
                        </div>

                        <div>
                            <h4 className="text-[15px] font-black mb-6 uppercase tracking-widest text-slate-100">Contact & Support</h4>
                            <div className="space-y-6">
                                <div className="flex gap-4 items-start mb-6">
                                    <div className="w-10 h-10 bg-white/5 rounded-lg flex items-center justify-center text-[#4a90e2]">
                                        <Headphones className="w-5 h-5" />
                                    </div>
                                    <div>
                                        <p className="text-[10px] text-slate-500 uppercase font-black tracking-widest mb-1">Direct Line</p>
                                        <a href="tel:6135550123" className="text-xl font-black text-white hover:text-[#4a90e2] transition">(613) 555-0123</a>
                                    </div>
                                </div>
                                <div className="pt-6 border-t border-slate-800">
                                    <h5 className="text-[11px] font-black text-slate-400 mb-4 uppercase tracking-widest">Business Hours</h5>
                                    <ul className="space-y-3 text-[14px] text-slate-400 font-medium">
                                        <li className="flex justify-between items-center">
                                            <span>Mon - Fri</span> 
                                            <span className="text-slate-200">7:00 AM - 6:00 PM</span>
                                        </li>
                                        <li className="flex justify-between items-center">
                                            <span>Saturday</span> 
                                            <span className="text-slate-200">8:00 AM - 4:00 PM</span>
                                        </li>
                                        <li className="flex justify-between items-center">
                                            <span>Sunday</span> 
                                            <span className="bg-[#ff6b6b]/20 text-[#ff6b6b] px-2.5 py-1 rounded text-[11px] font-bold tracking-wide uppercase">Emergency Only</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
                        <div className="flex flex-col md:flex-row items-center gap-2 md:gap-4 text-slate-500 text-[13px] font-medium text-center md:text-left">
                            <span>&copy; {new Date().getFullYear()} SABS Plumbing. All rights reserved. Licensed Master Plumbers of Ontario.</span>
                            <span className="hidden md:inline text-slate-700">|</span>
                            <span>Designed and powered by <a href="https://latitudeitp.com/" target="_blank" rel="noreferrer" className="text-slate-300 hover:text-white transition-colors font-bold underline">LATITUDEitp</a></span>
                        </div>
                        <div className="flex space-x-8 text-[13px] font-bold text-slate-500 uppercase tracking-wide">
                            <button onClick={() => navigateTo('privacy-policy')} className="hover:text-white transition">Privacy Policy</button>
                            <button onClick={() => navigateTo('terms-of-service')} className="hover:text-white transition">Terms of Service</button>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}