<?php require_once 'db/business_config.php'; ?>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To <?php echo BUSINESS_NAME; ?> | <?php echo PHONE_PRIMARY; ?> — Get Your Free Quote Now</title>
<meta name="description" content=" — Call Us At <?php echo PHONE_PRIMARY; ?> | <?php echo BUSINESS_NAME; ?> ">

<link rel="icon" type="image/png" sizes="32x32" href="<?php echo LOGO_FILENAME; ?>">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo LOGO_FILENAME; ?>">
<link rel="shortcut icon" href="<?php echo LOGO_FILENAME; ?>">

<link rel="apple-touch-icon" sizes="180x180" href="<?php echo LOGO_FILENAME; ?>">
<meta name="theme-color" content="#07162d">
    
<?php require_once 'gtm-head.php'; ?>

    <link rel="canonical" href="<?php echo WEBSITE_URL; ?>">
    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700;900&display=swap" rel="stylesheet">

    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        if (window.lucide) lucide.createIcons();
      });
    </script>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "<?php echo BUSINESS_NAME; ?>",
      "image": "<?php echo LOGO_FILENAME; ?>",
      "telephone": "<?php echo PHONE_PRIMARY; ?>",
      "email": "<?php echo EMAIL_PRIMARY; ?>",
      "url": "<?php echo WEBSITE_URL; ?>",
      "openingHoursSpecification": [
        {
                      "@type": "OpeningHoursSpecification",
                      "dayOfWeek": ["Monday"],
                      "opens": "09:00",
                      "closes": "17:00"
                    },{
                      "@type": "OpeningHoursSpecification",
                      "dayOfWeek": ["Tuesday"],
                      "opens": "09:00",
                      "closes": "17:00"
                    },{
                      "@type": "OpeningHoursSpecification",
                      "dayOfWeek": ["Wednesday"],
                      "opens": "09:00",
                      "closes": "17:00"
                    },{
                      "@type": "OpeningHoursSpecification",
                      "dayOfWeek": ["Thursday"],
                      "opens": "09:00",
                      "closes": "17:00"
                    },{
                      "@type": "OpeningHoursSpecification",
                      "dayOfWeek": ["Friday"],
                      "opens": "09:00",
                      "closes": "17:00"
                    },{
                      "@type": "OpeningHoursSpecification",
                      "dayOfWeek": ["Saturday"],
                      "opens": "09:00",
                      "closes": "17:00"
                    }      ],
      "description": "",
      "priceRange": "$$"
    }
    </script>

<link rel="stylesheet" href="style.css">

</head>

<body>

<?php require_once 'gtm-body.php'; ?>

<div id="wrapper" class="pt-[64px] md:pt-0"><header class="hidden md:block bg-white border-b border-black/5 shadow-[0_8px_30px_rgba(0,0,0,0.06)]">
    <div class="max-w-7xl mx-auto px-6 lg:px-8 py-5">
    <div class="flex items-center gap-6">
            <div class="flex-shrink-0 flex items-center">
                  <a href="<?php echo WEBSITE_URL; ?>" aria-label="Home" class="inline-flex items-center">
            <img
              src="<?php echo LOGO_FILENAME; ?>"
              alt="<?php echo BUSINESS_NAME; ?> logo"
              class="h-14 lg:h-16 w-auto object-contain"
              loading="eager" decoding="async"
            >
          </a>
              </div>

            <div class="ml-auto"></div>

            <nav aria-label="Primary actions" class="flex items-center gap-3 lg:gap-4">
                        <a
          href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
          class="group inline-flex items-center gap-3 pl-2 pr-4 py-2 rounded-2xl bg-white border border-black/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary/50"
          aria-label="Call us"
        >
          <span class="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-brand-secondary text-brand-primary shadow-xs group-hover:shadow-sm transition">
            <i data-lucide="phone" class="w-5 h-5"></i>
          </span>
          <span class="font-extrabold text-brand-primary tracking-wide">
            <?php echo PHONE_PRIMARY; ?>          </span>
        </a>

                            <span aria-hidden="true" class="hidden xl:block w-px h-8 bg-black/10"></span>

                    <a
            href="tel:<?php echo PHONE_SECONDARY_CLICK; ?>"
            class="group inline-flex items-center gap-3 pl-2 pr-4 py-2 rounded-2xl bg-white border border-black/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary/50"
            aria-label="Call us (line 2)"
          >
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-brand-primary text-white shadow-xs group-hover:shadow-sm transition">
              <i data-lucide="phone-call" class="w-5 h-5"></i>
            </span>
            <span class="font-extrabold text-brand-primary tracking-wide">
              <?php echo PHONE_SECONDARY; ?> </span>
          </a>
                
            <span aria-hidden="true" class="hidden xl:block w-px h-8 bg-black/10"></span>

                    <a
            href="mailto:<?php echo EMAIL_PRIMARY; ?>"
            class="group inline-flex items-center gap-3 pl-2 pr-4 py-2 rounded-2xl bg-white border border-black/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary/50"
            aria-label="Email us"
          >
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-brand-secondary text-brand-primary shadow-xs group-hover:shadow-sm transition">
              <i data-lucide="mail" class="w-5 h-5"></i>
            </span>
            <span class="font-extrabold text-brand-primary tracking-wide max-w-[260px] lg:max-w-none truncate">
              <?php echo EMAIL_PRIMARY; ?></span>
          </a>
        
                <a
          href="#quote-form"
          class="inline-flex items-center gap-3 px-6 py-3.5 rounded-2xl font-extrabold
                 text-brand-primary bg-brand-secondary
                 shadow-[0_10px_24px_rgba(0,0,0,0.12)] hover:shadow-[0_14px_30px_rgba(0,0,0,0.16)]
                 hover:-translate-y-0.5 active:translate-y-0 transition-all
                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary/60"
          role="button" aria-label="Get a quote">
          GET A QUOTE
          <i data-lucide="arrow-big-right-dash" class="w-5 h-5"></i>
        </a>
      </nav>
    </div>
  </div>

    <nav class="bg-brand-primary py-3 shadow-md hidden md:block" id="main-navbar" aria-label="Primary">
    <ul class="max-w-7xl mx-auto flex flex-wrap justify-center items-center gap-x-6 gap-y-2 text-[15px] font-extrabold uppercase tracking-wide">
      <li>
        <a href="#wrapper"
           class="text-white/95 hover:text-white inline-flex items-center gap-2 px-3 py-2 rounded-lg
                  hover:bg-white/10 transition-colors">
          <i data-lucide="house" class="w-5 h-5"></i> Home
        </a>
      </li>
      <li>
        <a href="#solution-section"
           class="text-white/95 hover:text-white inline-flex items-center gap-2 px-3 py-2 rounded-lg
                  hover:bg-white/10 transition-colors">
          <i data-lucide="lightbulb" class="w-5 h-5"></i> Our Solution
        </a>
      </li>
      <li>
        <a href="#services-list"
           class="text-white/95 hover:text-white inline-flex items-center gap-2 px-3 py-2 rounded-lg
                  hover:bg-white/10 transition-colors">
          <i data-lucide="briefcase" class="w-5 h-5"></i> Services
        </a>
      </li>
      <li>
        <a href="#how-it-works"
           class="text-white/95 hover:text-white inline-flex items-center gap-2 px-3 py-2 rounded-lg
                  hover:bg-white/10 transition-colors">
          <i data-lucide="settings" class="w-5 h-5"></i> How It Works
        </a>
      </li>
      <li>
        <a href="#gallery-section"
           class="text-white/95 hover:text-white inline-flex items-center gap-2 px-3 py-2 rounded-lg
                  hover:bg-white/10 transition-colors">
          <i data-lucide="image" class="w-5 h-5"></i> Projects
        </a>
      </li>
      <li>
        <a href="#coverage-area"
           class="text-white/95 hover:text-white inline-flex items-center gap-2 px-3 py-2 rounded-lg
                  hover:bg-white/10 transition-colors">
          <i data-lucide="map-pin" class="w-5 h-5"></i> Coverage
        </a>
      </li>
      <li>
        <a href="#quote-form"
           class="border-2 border-brand-secondary text-brand-secondary
                  hover:bg-brand-secondary hover:text-brand-primary transition-colors
                  px-3 py-1 rounded-lg inline-flex items-center gap-2 text-sm">
          <i data-lucide="phone-outgoing" class="w-4 h-4"></i> Contact Us
        </a>
      </li>
    </ul>
  </nav>
</header>

<header class="md:hidden bg-white text-brand-primary shadow-lg py-3 px-4 flex items-center fixed top-0 left-0 w-full z-50">
  <img src="<?php echo LOGO_FILENAME; ?>" alt="<?php echo BUSINESS_NAME; ?> Mobile Logo" class="w-auto h-12 object-contain mr-auto max-w-[120px]">
    <a href="tel:<?php echo PHONE_SECONDARY_CLICK; ?>" class="mr-2 inline-flex h-10 w-10 items-center justify-center rounded-md bg-black/5 text-brand-primary" aria-label="Call secondary">
    <i data-lucide="phone" class="w-5 h-5"></i>
  </a>
    <button id="openAgendaModalMobile" class="mr-2 inline-flex items-center gap-2 px-3 py-2 rounded-lg font-bold bg-brand-secondary text-brand-primary">
    <span>QUOTE</span>
    <i data-lucide="note-pen" class="w-5 h-5"></i>
  </button>
  <button id="openMobileMenu" aria-label="Open menu" class="ml-auto inline-flex h-10 w-10 items-center justify-center rounded-md bg-black/5 text-brand-primary">
    <i data-lucide="menu" class="w-6 h-6"></i>
  </button>
</header>

<div class="mobile-menu hidden fixed inset-0 z-[60] flex flex-col h-full bg-brand-dark" id="mobileMenu">
  <div class="w-full bg-white px-6 pt-5 pb-5 relative">
    <a href="#" id="closeMobileMenu" class="mobile-menu-link absolute top-4 right-4 flex items-center justify-center w-10 h-10 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200 hover:scale-110 transition-all" aria-label="Close menu">
      <i data-lucide="x" class="w-6 h-6"></i>
    </a>
    <div class="flex justify-center">
      <img
        src="<?php echo LOGO_FILENAME; ?>"
        alt="<?php echo BUSINESS_NAME; ?> Logo"
        class="h-14 w-auto object-contain max-h-[56px]"
        loading="lazy" decoding="async"
      />
    </div>
  </div>

  <div class="bg-brand-primary p-6 rounded-2xl shadow-2xl mx-4 mb-4">
    <p class="text-center text-lg font-bold tracking-wider text-brand-secondary mb-4">
      ¿Ready To Start?
    </p>

    <a href="https://wa.me/<?php echo WHATSAPP_NUMBER_CLICK; ?>" target="_blank" rel="noopener" class="group block w-full bg-brand-secondary text-brand-primary p-4 rounded-xl shadow-lg hover:brightness-110 active:scale-95 transition-all mb-4">
      <div class="flex items-center gap-4">
        <div class="flex-shrink-0">
          <i data-lucide="phone" class="w-7 h-7 group-hover:animate-pulse"></i>
        </div>
        <div class="text-left">
          <p class="font-extrabold text-2xl leading-tight"><?php echo PHONE_PRIMARY; ?></p>
          <p class="text-sm font-medium opacity-80">WhatsApp Or Call</p>
        </div>
      </div>
    </a>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <a href="mailto:<?php echo EMAIL_PRIMARY; ?>" class="mobile-menu-link flex items-center justify-center gap-2 rounded-lg bg-white/10 text-white font-bold py-3 hover:bg-white/20 active:scale-95 transition-all">
        <i data-lucide="mail" class="w-5 h-5"></i>
        SEND AN EMAIL
      </a>
          </div>
  </div>

  <nav class="p-4">
    <ul class="divide-y divide-white/10 rounded-lg overflow-hidden border border-white/10">
      <li>
        <a href="#wrapper" class="mobile-menu-link flex items-center justify-between px-4 py-3 text-white/90 hover:text-white hover:bg:white/10 transition-colors duration-200">
          <span class="flex items-center gap-3 font-medium"><i data-lucide="house" class="w-5 h-5 text-brand-secondary"></i> HOME</span>
          <i data-lucide="chevron-right" class="w-5 h-5 opacity-50"></i>
        </a>
      </li>
      <li>
        <a href="#solution-section" class="mobile-menu-link flex items-center justify-between px-4 py-3 text-white/90 hover:text-white hover:bg-white/10 transition-colors duration-200">
          <span class="flex items-center gap-3 font-medium"><i data-lucide="lightbulb" class="w-5 h-5 text-brand-secondary"></i> OUR SOLUTION</span>
          <i data-lucide="chevron-right" class="w-5 h-5 opacity-50"></i>
        </a>
      </li>
      <li>
        <a href="#services-list" class="mobile-menu-link flex items-center justify-between px-4 py-3 text-white/90 hover:text-white hover:bg-white/10 transition-colors duration-200">
          <span class="flex items-center gap-3 font-medium"><i data-lucide="briefcase" class="w-5 h-5 text-brand-secondary"></i> SERVICES</span>
          <i data-lucide="chevron-right" class="w-5 h-5 opacity-50"></i>
        </a>
      </li>
      <li>
        <a href="#how-it-works" class="mobile-menu-link flex items-center justify-between px-4 py-3 text-white/90 hover:text-white hover:bg-white/10 transition-colors duration-200">
          <span class="flex items-center gap-3 font-medium"><i data-lucide="settings" class="w-5 h-5 text-brand-secondary"></i> HOW IT WORKS</span>
          <i data-lucide="chevron-right" class="w-5 h-5 opacity-50"></i>
        </a>
      </li>
      <li>
        <a href="#gallery-section" class="mobile-menu-link flex items-center justify-between px-4 py-3 text-white/90 hover:text-white hover:bg-white/10 transition-colors duration-200">
          <span class="flex items-center gap-3 font-medium"><i data-lucide="image" class="w-5 h-5 text-brand-secondary"></i> PROJECTS</span>
          <i data-lucide="chevron-right" class="w-5 h-5 opacity-50"></i>
        </a>
      </li>
      <li>
        <a href="#coverage-area" class="mobile-menu-link flex items-center justify-between px-4 py-3 text-white/90 hover:text-white hover:bg-white/10 transition-colors duration-200">
          <span class="flex items-center gap-3 font-medium"><i data-lucide="map-pin" class="w-5 h-5 text-brand-secondary"></i> COVERAGE</span>
          <i data-lucide="chevron-right" class="w-5 h-5 opacity-50"></i>
        </a>
      </li>
      <li>
        <a href="#quote-form" class="mobile-menu-link flex items-center justify-between px-4 py-3 text-brand-secondary bg-white/5 hover:bg-white/10 transition-colors duration-200">
          <span class="flex items-center gap-3 font-semibold"><i data-lucide="phone-outgoing" class="w-5 h-5"></i> CONTACT US</span>
          <i data-lucide="chevron-right" class="w-5 h-5 opacity-50"></i>
        </a>
      </li>
    </ul>
  </nav>

  <div class="mobile-menu-footer px-4 pb-6">
      
    <?php include 'footer.php'; ?>
    
 </div>
</div>

<main class="flex-grow">
    
    <!-- =========================
     SECCIÓN 1 | PRESENTACIÓN DEL PROBELMA
     ========================= -->
<section id="hero" class="relative px-6 pt-28 pb-16 md:py-28 hero-section-bg" style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('img/bg01.webp');">
  <div class="absolute inset-0 bg-black/50"></div>

  <div class="relative max-w-7xl mx-auto md:flex md:items-center md:gap-12">
        <div class="md:w-1/2 text-center md:text-left">

            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-white/10 text-brand-secondary font-semibold tracking-widest ring-1 ring-white/20">
                <script type="text/javascript">
                    var day = new Date();
                    var currentHour = day.getHours();
                    var greetingText;
                    var iconName;
                    // Clases CSS de Tailwind para que se vea destacado y en el color de acento
                    var styleClass = 'text-xl sm:text-2xl font-extrabold tracking-wider text-brand-secondary'; 

                    if (currentHour >= 0 && currentHour < 12) {
                        greetingText = "Hello, Good Morning!";
                        iconName = "sun"; // Icono de Lucide para la mañana
                    } else if (currentHour >= 12 && currentHour <= 17) {
                        greetingText = "Hello, Good Afternoon!";
                        iconName = "cloud-sun"; // Icono de Lucide para la tarde
                    } else {
                        greetingText = "Hello, Good Evening!";
                        iconName = "moon"; // Icono de Lucide para la noche
                    }

                    document.write(`
                        <span class="inline-flex items-center gap-3 ${styleClass}">
                            <i data-lucide="${iconName}" class="w-7 h-7"></i>
                            <span>${greetingText}</span>
                        </span>
                    `);
                    
                    // Asegurar que el script que inicializa Lucide se ejecute
                    if (window.lucide && typeof window.lucide.createIcons === 'function') {
                        setTimeout(window.lucide.createIcons, 100);
                    }
                </script>
            </div>
            <h1 class="font-extrabold leading-tight mt-3">
        <span class="block text-3xl sm:text-4xl md:text-5xl text-white">
          Dust, Clutter & Mess
        </span>
        <span class="block text-4xl sm:text-5xl md:text-5xl text-brand-secondary">
          Are Taking Over Your Life
        </span>
      </h1>

            <p class="mt-4 text-base sm:text-lg text-white/90 max-w-lg mx-auto md:mx-0">
        A dirty home or office doesn’t just look bad — it drains your energy, causes stress, and makes every day harder than it should be.
        No one should feel uncomfortable in their own space.
      </p>

            <div class="mt-8 flex flex-col sm:flex-row sm:items-center sm:gap-6 justify-center md:justify-start">
                <a href="#quote-form"
           class="bg-[var(--brand-accent)] hover:brightness-110 text-white font-bold px-8 py-4 rounded-lg shadow-lg inline-flex items-center gap-2 transition">
          REQUEST A FREE QUOTE
          <i data-lucide="arrow-big-right-dash" class="w-5 h-5"></i>
        </a>

        <div class="hidden md:block text-white">
          <p class="text-sm tracking-wide opacity-90">Or Call Now For Your Free Quote</p>
          <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
             class="text-2xl font-extrabold tracking-[0.08em]">
            <?php echo PHONE_PRIMARY; ?></a>
        </div>

                <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
           class="md:hidden mt-4 sm:mt-0 bg-[var(--brand-secondary)] text-[var(--brand-primary)] font-extrabold px-6 py-4 rounded-lg shadow-lg inline-flex items-center justify-center gap-2 transition">
          <i data-lucide="phone" class="w-5 h-5"></i>
          CALL FOR YOUR FREE QUOTE
        </a>
      </div>
    </div>

        <div class="md:w-1/2 mt-10 md:mt-0 flex justify-center md:justify-start">
      <img src="img/image01.webp" alt="Hero Section"
           class="w-full rounded-xl shadow-2xl object-cover h-64 sm:h-80 md:h-96">
    </div>
  </div>
</section>

<!-- =========================
     SECCIÓN 2 | PRESENTACIÓN DE LA SOLUCIÓN
     ========================= -->
<section id="solution-section" class="relative bg-brand-light px-6 pt-24 pb-20 overflow-hidden" data-aos="fade-up">
    <div class="pointer-events-none absolute inset-0 opacity-10" aria-hidden="true"
       style="background-image: radial-gradient(white 1px, transparent 1px);"></div>

  <div class="relative z-10 max-w-7xl mx-auto md:flex md:items-center md:justify-center md:text-left md:gap-12">
        <div class="md:w-1/2 flex justify-center md:justify-end mb-8 md:mb-0">
      <img
        src="img/image02.webp"
        alt="Solution Section"
        class="w-full rounded-xl shadow-xl object-cover h-64 sm:h-80 md:h-96"
        loading="lazy"
        decoding="async"
        fetchpriority="low"
      >
    </div>

        <div class="md:w-1/2 md:pl-8 text-center md:text-left">
            <p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md
                 bg-white/10 text-[var(--brand-accent)] font-extrabold tracking-widest
                 ring-1 ring-[color-mix(in_srgb,var(--brand-primary)_20%,transparent)]">
        Create A Fresh And Healthy Environment In Your Space
      </p>

            <h2 class="upfont-extrabold leading-tight mt-3">
        <span class="block text-4xl sm:text-5xl md:text-5xl text-[var(--brand-primary)]">
          A Spotless Home
        </span>
        <span class="block text-4xl sm:text-5xl md:text-5xl text-[var(--brand-accent)]">
          Shouldn't Be Stressful
        </span>
      </h2>

            <p class="text-[color-mix(in_srgb,var(--brand-primary)_80%,#0000)] leading-relaxed max-w-2xl mt-6 text-base sm:text-lg opacity-95 mx-auto md:mx-0">
        After dreaming of a sparkling space, it's time to make it a reality. Our cleaning system removes the chaos that drains your
        energy and time. With trained staff, consistent checklists and a final inspection on every visit, you get predictable results
        and a place that actually feels fresh.
      </p>

            <ul class="mt-8 flex flex-col space-y-4 text-left max-w-2xl mx-auto md:mx-0">
        <li class="flex items-start gap-3">
          <i data-lucide="check-circle" class="w-5 h-5 mt-1 text-[var(--brand-accent)]" aria-hidden="true"></i>
          <p class="text-[var(--brand-primary)] text-base md:text-lg leading-relaxed">
            <span class="font-extrabold tracking-wide text-[var(--brand-accent)]">Time Saver:</span>
            <span class="opacity-90 font-normal"> no more lost weekends cleaning.</span>
          </p>
        </li>

        <li class="flex items-start gap-3">
          <i data-lucide="shield-check" class="w-5 h-5 mt-1 text-[var(--brand-accent)]" aria-hidden="true"></i>
          <p class="text-[var(--brand-primary)] text-base md:text-lg leading-relaxed">
            <span class="font-extrabold tracking-wide text-[var(--brand-accent)]">Peace of Mind:</span>
            <span class="opacity-90 font-normal"> final inspection included every service.</span>
          </p>
        </li>

        <li class="flex items-start gap-3">
          <i data-lucide="calendar-check-2" class="w-5 h-5 mt-1 text-[var(--brand-accent)]" aria-hidden="true"></i>
          <p class="text-[var(--brand-primary)] text-base md:text-lg leading-relaxed">
            <span class="font-extrabold tracking-wide text-[var(--brand-accent)]">Flexible Scheduling:</span>
            <span class="opacity-90 font-normal"> we adapt to your agenda.</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</section>


<img src="img/mobile01.webp" alt="Mobile Section Divider" class="section-divider-img md:hidden">

     <!-- =========================
     SECCIÓN 3 | ¿POR QUÉ ELEGIRNOS? 
     ========================= -->
<section id="why-choose-us"
         class="relative py-24 px-6 text-center bg-cover bg-center bg-no-repeat"
         style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('img/bg02.webp');">

    <div class="absolute inset-0 bg-[rgba(4,13,26,0.78)]"></div>
  <div class="pointer-events-none absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white/10 to-transparent"></div>
  <div class="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white/10 to-transparent"></div>

  <div class="relative max-w-7xl mx-auto">
        <div class="mb-12">
      <p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-white/10
                text-[var(--brand-secondary)] font-extrabold tracking-widest
                ring-1 ring-white/20">
        What Makes Us Different?
      </p>

      <h2 class="mt-3 font-extrabold leading-tight text-white">
        <span class="block text-4xl sm:text-5xl md:text-5xl">Trusted. Flexible. Guaranteed.</span>
      </h2>

      <p class="mt-4 text-white/90 max-w-3xl mx-auto">
        We earn your trust with professional standards, protected service, and a schedule that adapts to you—backed by a clear guarantee.
      </p>
    </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 text-left">
            <div class="group rounded-2xl bg-white/15 backdrop-blur-md ring-1 ring-white/15 p-6 relative overflow-hidden
                  transition-all duration-300 hover:bg-white/20 hover:ring-white/25">
        <div class="absolute -top-10 -right-10 h-28 w-28 rounded-md bg-white/10 blur-2xl pointer-events-none"></div>
        <div class="flex items-start gap-3">
          <span class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/20
                       transition-transform duration-300 group-hover:scale-105">
            <i data-lucide="handshake" class="w-6 h-6 text-[var(--brand-secondary)]" aria-hidden="true"></i>
          </span>
          <div>
            <h4 class="font-extrabold tracking-wide text-white">Reliable & Responsible</h4>
            <p class="mt-2 text-white/90">Background-checked team, on-time arrivals, and clear checklists every visit.</p>
          </div>
        </div>
      </div>

            <div class="group rounded-2xl bg-white/15 backdrop-blur-md ring-1 ring-white/15 p-6 relative overflow-hidden
                  transition-all duration-300 hover:bg-white/20 hover:ring-white/25">
        <div class="absolute -top-10 -right-10 h-28 w-28 rounded-md bg-white/10 blur-2xl pointer-events-none"></div>
        <div class="flex items-start gap-3">
          <span class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/20
                       transition-transform duration-300 group-hover:scale-105">
            <i data-lucide="shield-check" class="w-6 h-6 text-[var(--brand-secondary)]" aria-hidden="true"></i>
          </span>
          <div>
            <h4 class="font-extrabold tracking-wide text-white">Safe & Professional</h4>
            <p class="mt-2 text-white/90">Insured service, proper products, and procedures that protect your home or business.</p>
          </div>
        </div>
      </div>

            <div class="group rounded-2xl bg-white/15 backdrop-blur-md ring-1 ring-white/15 p-6 relative overflow-hidden
                  transition-all duration-300 hover:bg-white/20 hover:ring-white/25">
        <div class="absolute -top-10 -right-10 h-28 w-28 rounded-md bg-white/10 blur-2xl pointer-events-none"></div>
        <div class="flex items-start gap-3">
          <span class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/20
                       transition-transform duration-300 group-hover:scale-105">
            <i data-lucide="calendar-check-2" class="w-6 h-6 text-[var(--brand-secondary)]" aria-hidden="true"></i>
          </span>
          <div>
            <h4 class="font-extrabold tracking-wide text-white">Flexible Scheduling</h4>
            <p class="mt-2 text-white/90">Weekly, bi-weekly, monthly, or on-demand—built around your agenda.</p>
          </div>
        </div>
      </div>

            <div class="group rounded-2xl bg-white/15 backdrop-blur-md ring-1 ring-white/15 p-6 relative overflow-hidden
                  transition-all duration-300 hover:bg-white/20 hover:ring-white/25">
        <div class="absolute -top-10 -right-10 h-28 w-28 rounded-md bg-white/10 blur-2xl pointer-events-none"></div>
        <div class="flex items-start gap-3">
          <span class="shrink-0 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/20
                       transition-transform duration-300 group-hover:scale-105">
            <i data-lucide="badge-check" class="w-6 h-6 text-[var(--brand-secondary)]" aria-hidden="true"></i>
          </span>
          <div>
            <h4 class="font-extrabold tracking-wide text-white">Service Guarantee</h4>
            <p class="mt-2 text-white/90">Final inspection and satisfaction follow-up. If something’s off, we make it right.</p>
          </div>
        </div>
      </div>
    </div>

        <div class="mt-10 flex flex-col sm:flex-row sm:justify-center sm:items-center gap-4">
            <a href="#quote-form"
         class="bg-[var(--brand-accent)] hover:brightness-110 text-white font-extrabold px-8 py-4 rounded-lg shadow-lg
                inline-flex items-center gap-2 focus:outline-none focus-visible:ring-4 focus-visible:ring-white/40
                active:translate-y-[1px] transition">
        REQUEST A FREE QUOTE
        <i data-lucide="arrow-big-right-dash" class="w-5 h-5" aria-hidden="true"></i>
      </a>

            <div class="hidden md:block text-white">
        <p class="text-sm tracking-wide opacity-90">Or Call Now For Your Free Quote</p>
          <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
             class="text-2xl font-extrabold tracking-[0.08em]">
            <?php echo PHONE_PRIMARY; ?> </a>
      </div>

            <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
         class="md:hidden bg-[var(--brand-secondary)] text-[var(--brand-primary)] font-extrabold px-6 py-4 rounded-lg shadow-lg
                inline-flex items-center justify-center gap-2 focus:outline-none focus-visible:ring-4 focus-visible:ring-white/30
                active:translate-y-[1px] transition"
         aria-label="Call Now For Your Free Quote">
        <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
        CALL FOR YOUR FREE QUOTE
      </a>
    </div>
  </div>
</section>

     <!-- =========================
     SECCIÓN 4 | SERVICIOS OFRECIDOS
     ========================= -->
<section id="services-list" class="py-32 px-6 bg-brand-light">
    <div class="text-center mb-16" data-aos="fade-up">
        <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md
                 bg-white/60 text-[var(--brand-accent)] font-extrabold
                 tracking-[0.15em] ring-1 ring-[color-mix(in_srgb,var(--brand-primary)_30%,transparent)]
                 shadow-[inset_0_1px_0_rgba(255,255,255,.6)]">
            Built for Homes & Apartments
        </p>
        <h2 class="font-extrabold leading-[0.92] tracking-tight mt-4">
            <span class="block text-[var(--brand-primary)] text-4xl sm:text-5xl md:text-6xl">
                The Right Clean For Every Space
            </span>
            <span class="block text-[var(--brand-accent)] text-4xl sm:text-5xl md:text-6xl">
                Less Hassle, More Free Time
            </span>
        </h2>
        <p class="max-w-3xl mx-auto mt-6 text-lg text-gray-700">
            Pick the service that fits your life—quick essentials, deep resets, or specialty care.
        </p>
    </div>

    <div id="dynamic-services-grid" class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

        <article class="bg-white rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.08)]
                    overflow-hidden hover:shadow-[0_14px_40px_rgba(0,0,0,0.12)] transition
                    flex flex-col" data-aos="fade-up">
            <div class="w-full h-44 relative flex items-center justify-center overflow-hidden bg-cover bg-center" style="background-image: url('img/service01.webp');">
                <span class="absolute inset-0 bg-black/40"></span>
                <span class="relative inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/80 ring-1 ring-black/5 shadow-md">
                    <i data-lucide="sparkles" class="w-8 h-8 text-[var(--brand-accent)]" aria-hidden="true"></i>
                </span>
            </div>
            <div class="p-6 flex flex-col flex-grow">
                <h3 class="font-extrabold tracking-wide text-[var(--brand-accent)] text-4xl sm:text-3xl md:text-4xl text-center">
                    Deep Cleaning 
                </h3>
                <p class="mt-2 text-gray-700 text-center">
                    Perfect for a one-time reset. We focus on every detail to get your space looking brand-new.
                </p>
                <ul class="mt-6 space-y-3 text-left flex-grow">
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span><b>Everything in a standard clean, plus:</b></span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Detailed cleaning of baseboards and window</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Inside oven and refrigerator cleaning.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Deep scrub of showers, tubs, and sinks.</span>
                    </li>
                </ul>
                </div>
        </article>

        <article class="bg-white rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.08)]
                    overflow-hidden hover:shadow-[0_14px_40px_rgba(0,0,0,0.12)] transition
                    flex flex-col relative ring-2 ring-[var(--brand-accent)]" data-aos="fade-up" data-aos-delay="100">
            <div class="w-full h-44 relative flex items-center justify-center overflow-hidden bg-cover bg-center" style="background-image: url('img/service03.webp');">
                <span class="absolute inset-0 bg-black/40"></span>
                <span class="relative inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/80 ring-1 ring-black/5 shadow-md">
                    <i data-lucide="repeat" class="w-8 h-8 text-[var(--brand-accent)]" aria-hidden="true"></i>
                </span>
            </div>
            <div class="p-6 flex flex-col flex-grow">
                <h3 class="font-extrabold tracking-wide text-[var(--brand-accent)] text-4xl sm:text-3xl md:text-4xl text-center">
                    Recurring Cleaning
                </h3>
                <p class="mt-2 text-gray-700 text-center">
                    Enjoy a consistently clean home. Our service keeps your space perfect with a schedule that fits your life.
                </p>
                <ul class="mt-6 space-y-3 text-left flex-grow">
                    <li class="flex items-start gap-3">
                        <i data-lucide="square-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span><b>Weekly, Bi-Weekly, or Monthly</b> schedules.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="square-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Keeps your home consistently fresh and tidy.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="square-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>kitchen, bathroom, bedroom, and living areas.</span>
                    </li>
                     <li class="flex items-start gap-3">
                        <i data-lucide="square-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Discounted rates compared to one-time services.</span>
                    </li>
                </ul>
                </div>
        </article>

        <article class="bg-white rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.08)]
                    overflow-hidden hover:shadow-[0_14px_40px_rgba(0,0,0,0.12)] transition
                    flex flex-col" data-aos="fade-up" data-aos-delay="200">
            <div class="w-full h-44 relative flex items-center justify-center overflow-hidden bg-cover bg-center" style="background-image: url('img/service02.webp');">
                <span class="absolute inset-0 bg-black/40"></span>
                <span class="relative inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-white/80 ring-1 ring-black/5 shadow-md">
                    <i data-lucide="calendar-heart" class="w-8 h-8 text-[var(--brand-accent)]" aria-hidden="true"></i>
                </span>
            </div>
            <div class="p-6 flex flex-col flex-grow">
                <h3 class="font-extrabold tracking-wide text-[var(--brand-accent)] text-4xl sm:text-3xl md:text-4xl text-center">
                    Occasional Cleaning
                </h3>
                <p class="mt-2 text-gray-700 text-center">
                    Ideal for special events, before guests arrive, or after a party to get your home sparkling clean.
                </p>
                <ul class="mt-6 space-y-3 text-left flex-grow">
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Flexible scheduling for one-time needs.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Perfect for post-party or pre-holiday cleanup.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Customizable to focus on your priority areas.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <i data-lucide="circle-check-big" class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
                        <span>Leaves your home guest-ready and impressive.</span>
                    </li>
                </ul>
                </div>
        </article>
    </div>

    <div class="mt-16 flex flex-col sm:flex-row sm:justify-center sm:items-center gap-4">
        <a href="#quote-form" class="bg-[var(--brand-accent)] hover:brightness-110 text-white font-extrabold px-8 py-4 rounded-lg shadow-lg inline-flex items-center gap-2 justify-center focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-accent)_30%,transparent)] active:translate-y-[1px] transition">
            REQUEST A FREE QUOTE
            <i data-lucide="arrow-big-right-dash" class="w-5 h-5" aria-hidden="true"></i>
        </a>
        <div class="hidden md:block text-[var(--brand-primary)]">
            <p class="text-sm tracking-wide opacity-80">Or Call Now For Your Free Quote</p>
            <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>" class="text-2xl font-extrabold tracking-[0.08em]">
                <?php echo PHONE_PRIMARY; ?>
            </a>
        </div>
        <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>" class="md:hidden bg-[var(--brand-secondary)] text-[var(--brand-primary)] font-extrabold px-6 py-4 rounded-lg shadow-lg inline-flex items-center justify-center gap-2 focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-secondary)_35%,transparent)] active:translate-y-[1px] transition" aria-label="Call Now For Your Free Quote">
            <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
            CALL FOR YOUR FREE QUOTE
        </a>
    </div>
</section>

<!-- =========================
     SECCIÓN 5 | EL PROCESO PASO A PASO
     ========================= -->
<section id="how-it-works"
           class="relative py-32 px-6 text-white bg-cover bg-center bg-no-repeat"
           style="background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('img/bg03.webp');">

  <div class="absolute inset-0 bg-[rgba(4,13,26,0.78)]"></div>

  <div class="relative max-w-7xl mx-auto">
    <div class="text-center mb-16" data-aos="fade-up">
      <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md
                bg-white/10 text-[var(--brand-secondary)] font-extrabold
                tracking-[0.15em] ring-1 ring-white/20">
        Simple & Transparent Process
      </p>

      <h2 class="font-extrabold leading-[0.92] tracking-tight mt-4">
        <span class="block text-white text-4xl sm:text-5xl md:text-6xl">From Quote To Clean</span>
        <span class="block text-[var(--brand-secondary)] text-4xl sm:text-5xl md:text-6xl">In 4 Simple Steps</span>
      </h2>

      <p class="max-w-3xl mx-auto mt-6 text-lg text-white/90">
        No confusion, no delays — this is exactly how we solve your cleaning problem from the first click
        to the moment your space feels fresh again.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="text-center p-6 rounded-2xl shadow-lg bg-white text-[var(--brand-primary)]
                  ring-1 ring-black/5 transition hover:shadow-xl" data-aos="fade-up" data-aos-delay="50">
        <div class="w-20 h-20 bg-[var(--brand-secondary)] rounded-md flex items-center justify-center mx-auto mb-6 shadow-md
                    ring-1 ring-white/40 transition-transform duration-300 hover:scale-105">
          <i data-lucide="file-text" class="w-10 h-10 text-[var(--brand-primary)]" aria-hidden="true"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">
          <span class="text-[var(--brand-accent)]">Step 1:</span><br />
          <span class="text-[var(--brand-primary)]"> Complete The Form</span>
        </h3>
        <p class="text-[color-mix(in_srgb,var(--brand-primary)_80%,#0000)]">
          Tell us about your space and the service you need. Leave your best contact info so we can reach you quickly.
        </p>
      </div>

      <div class="text-center p-6 rounded-2xl shadow-lg bg-white text-[var(--brand-primary)]
                  ring-1 ring-black/5 transition hover:shadow-xl" data-aos="fade-up" data-aos-delay="100">
        <div class="w-20 h-20 bg-[var(--brand-secondary)] rounded-md flex items-center justify-center mx-auto mb-6 shadow-md
                    ring-1 ring-white/40 transition-transform duration-300 hover:scale-105">
          <i data-lucide="phone" class="w-10 h-10 text-[var(--brand-primary)]" aria-hidden="true"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">
          <span class="text-[var(--brand-accent)]">Step 2:</span><br />
          <span class="text-[var(--brand-primary)]"> We Contact You</span>
        </h3>
        <p class="text-[color-mix(in_srgb,var(--brand-primary)_80%,#0000)]">
          A specialist calls to understand your needs and schedule a visit to provide your quote.
        </p>
      </div>

      <div class="text-center p-6 rounded-2xl shadow-lg bg-white text-[var(--brand-primary)]
                  ring-1 ring-black/5 transition hover:shadow-xl" data-aos="fade-up" data-aos-delay="150">
        <div class="w-20 h-20 bg-[var(--brand-secondary)] rounded-md flex items-center justify-center mx-auto mb-6 shadow-md
                    ring-1 ring-white/40 transition-transform duration-300 hover:scale-105">
          <i data-lucide="handshake" class="w-10 h-10 text-[var(--brand-primary)]" aria-hidden="true"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">
          <span class="text-[var(--brand-accent)]">Step 3:</span><br />
          <span class="text-[var(--brand-primary)]"> Approve Your Quote</span>
        </h3>
        <p class="text-[color-mix(in_srgb,var(--brand-primary)_80%,#0000)]">
          You receive a tailored quote based on your needs. Review it and approve to lock in your date.
        </p>
      </div>

      <div class="text-center p-6 rounded-2xl shadow-lg bg-white text-[var(--brand-primary)]
                  ring-1 ring-black/5 transition hover:shadow-xl" data-aos="fade-up" data-aos-delay="200">
        <div class="w-20 h-20 bg-[var(--brand-secondary)] rounded-md flex items-center justify-center mx-auto mb-6 shadow-md
                    ring-1 ring-white/40 transition-transform duration-300 hover:scale-105">
          <i data-lucide="laugh" class="w-10 h-10 text-[var(--brand-primary)]" aria-hidden="true"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">
          <span class="text-[var(--brand-accent)]">Step 4:</span><br />
          <span class="text-[var(--brand-primary)]"> Enjoy The Results</span>
        </h3>
        <p class="text-[color-mix(in_srgb,var(--brand-primary)_80%,#0000)]">
          Our team handles the work. You enjoy a fresh, comfortable space — without stress or hassle.
        </p>
      </div>
    </div>

    <div class="mt-16">
      <div class="max-w-4xl mx-auto text-center">
        <p class="font-extrabold tracking-[0.15em] mb-2 text-white/80">
          Ready For A Clean Home?
        </p>

        <div class="mt-6 flex flex-col sm:flex-row sm:justify-center gap-4">
          <a href="#quote-form"
             class="inline-flex items-center justify-center gap-3 px-8 py-4 rounded-xl font-extrabold
                    text-white bg-[var(--brand-accent)] hover:brightness-110
                    shadow-[0_12px_30px_rgba(0,0,0,.25)] transition
                    focus:outline-none focus-visible:ring-4 focus-visible:ring-white/40 active:translate-y-[1px]">
            Start With Step 1
            <i data-lucide="arrow-big-right-dash" class="w-5 h-5" aria-hidden="true"></i>
          </a>

          <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
             class="md:hidden inline-flex items-center justify-center gap-2 px-6 py-4 rounded-xl font-extrabold
                    bg-white text-[var(--brand-primary)] shadow-lg transition
                    focus:outline-none focus-visible:ring-4 focus-visible:ring-white/40 active:translate-y-[1px]"
             aria-label="Call now">
            <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
            Call Now For An Estimate
          </a>

          <div class="hidden md:flex items-center justify-center gap-2 font-extrabold text-xl text-white">
            <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
            <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
               class="text-2xl font-extrabold tracking-[0.08em]">
               <?php echo PHONE_PRIMARY; ?>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<img src="img/mobile02.webp" alt="Gallery Section Divider" class="section-divider-img md:hidden">

     <!-- =========================
     SECCIÓN 6 | PRUEBA DE RESULTADOS
     ========================= -->
<section id="gallery-section" class="py-32 px-6 bg-brand-light">
    <div class="text-center mb-16" data-aos="fade-up">
    <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md
              bg-white/60 text-[var(--brand-accent)] font-extrabold
              tracking-[0.15em] ring-1 ring-[color-mix(in_srgb,var(--brand-primary)_30%,transparent)]
              shadow-[inset_0_1px_0_rgba(255,255,255,.6)]">
      Real Work. Real Results
    </p>
    <h2 class="font-extrabold leading-[0.92] tracking-tight mt-4">
      <span class="block text-[var(--brand-primary)] text-4xl sm:text-5xl md:text-5xl">
        Results That Speak For Themselves
      </span>
      <span class="block text-[var(--brand-accent)] text-4xl sm:text-5xl md:text-6xl">
        See How We Transform Spaces
      </span>
    </h2>
  </div>

  <div class="relative max-w-7xl mx-auto" role="region" aria-label="Project gallery">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <main class="order-1 lg:order-2 lg:col-span-8">
        <figure class="mb-2 lg:mb-0">
          <div class="relative rounded-2xl overflow-hidden shadow-xl ring-1 ring-black/10" aria-live="polite">
            <img id="main-gallery-image"
                 src="img/gallery01.webp"
                 alt="Gallery Image 1"
                 class="w-full h-80 sm:h-96 md:h-[520px] object-cover transition-opacity duration-200"
                 loading="eager" decoding="async" fetchpriority="high"
                 width="1600" height="900"
                 sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 66vw" />

                        <span id="main-gallery-label"
                  class="absolute top-4 left-4 px-3 py-1.5 rounded-md text-sm font-extrabold uppercase
                           bg-white/90 text-[var(--brand-primary)] ring-1 ring-black/10 hidden">
                              </span>

                        <button id="g-prev"
                    class="lg:hidden absolute left-3 top-1/2 -translate-y-1/2 inline-flex items-center justify-center
                           w-10 h-10 rounded-md bg-black/40 text-white backdrop-blur hover:bg-black/55 transition
                           focus:outline-none focus:ring-2 focus:ring-white"
                  aria-label="Previous photo" type="button">
              <i data-lucide="chevron-left" class="w-5 h-5" aria-hidden="true"></i>
            </button>
            <button id="g-next"
                    class="lg:hidden absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center justify-center
                           w-10 h-10 rounded-mdbg-black/40 text-white backdrop-blur hover:bg-black/55 transition
                           focus:outline-none focus:ring-2 focus:ring-white"
                  aria-label="Next photo" type="button">
              <i data-lucide="chevron-right" class="w-5 h-5" aria-hidden="true"></i>
            </button>
          </div>
        </figure>

                <div id="g-dots" class="lg:hidden flex items-center justify-center gap-2 mt-3" aria-label="Slide indicators"></div>
      </main>

            <aside class="order-2 lg:order-1 lg:col-span-4">
        <div class="hidden lg:block lg:sticky lg:top-6">
          <div class="max-h-[520px] overflow-y-auto pr-1">
            <div class="grid grid-cols-5 gap-3" id="gallery-grid">
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-[var(--brand-accent)] hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="0" data-src="img/gallery01.webp" data-label="" aria-label="Open image 1" type="button">
                <img src="img/gallery01.webp" alt="Gallery Thumbnail 1" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="1" data-src="img/gallery02.webp" data-label="" aria-label="Open image 2" type="button">
                <img src="img/gallery02.webp" alt="Gallery Thumbnail 2" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="2" data-src="img/gallery03.webp" data-label="" aria-label="Open image 3" type="button">
                <img src="img/gallery03.webp" alt="Gallery Thumbnail 3" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="3" data-src="img/gallery04.webp" data-label="" aria-label="Open image 4" type="button">
                <img src="img/gallery04.webp" alt="Gallery Thumbnail 4" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="4" data-src="img/gallery05.webp" data-label="" aria-label="Open image 5" type="button">
                <img src="img/gallery05.webp" alt="Gallery Thumbnail 5" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="5" data-src="img/gallery06.webp" data-label="" aria-label="Open image 6" type="button">
                <img src="img/gallery06.webp" alt="Gallery Thumbnail 6" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="6" data-src="img/gallery07.webp" data-label="" aria-label="Open image 7" type="button">
                <img src="img/gallery07.webp" alt="Gallery Thumbnail 7" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="7" data-src="img/gallery08.webp" data-label="" aria-label="Open image 8" type="button">
                <img src="img/gallery08.webp" alt="Gallery Thumbnail 8" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="8" data-src="img/gallery09.webp" data-label="" aria-label="Open image 9" type="button">
                <img src="img/gallery09.webp" alt="Gallery Thumbnail 9" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="9" data-src="img/gallery10.webp" data-label="" aria-label="Open image 10" type="button">
                <img src="img/gallery10.webp" alt="Gallery Thumbnail 10" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="10" data-src="img/gallery11.webp" data-label="" aria-label="Open image 11" type="button">
                <img src="img/gallery11.webp" alt="Gallery Thumbnail 11" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="11" data-src="img/gallery12.webp" data-label="" aria-label="Open image 12" type="button">
                <img src="img/gallery12.webp" alt="Gallery Thumbnail 12" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="12" data-src="img/gallery13.webp" data-label="" aria-label="Open image 13" type="button">
                <img src="img/gallery13.webp" alt="Gallery Thumbnail 13" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="13" data-src="img/gallery14.webp" data-label="" aria-label="Open image 14" type="button">
                <img src="img/gallery14.webp" alt="Gallery Thumbnail 14" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="14" data-src="img/gallery15.webp" data-label="" aria-label="Open image 15" type="button">
                <img src="img/gallery15.webp" alt="Gallery Thumbnail 15" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="15" data-src="img/gallery16.webp" data-label="" aria-label="Open image 16" type="button">
                <img src="img/gallery16.webp" alt="Gallery Thumbnail 16" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="16" data-src="img/gallery17.webp" data-label="" aria-label="Open image 17" type="button">
                <img src="img/gallery17.webp" alt="Gallery Thumbnail 17" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="17" data-src="img/gallery18.webp" data-label="" aria-label="Open image 18" type="button">
                <img src="img/gallery18.webp" alt="Gallery Thumbnail 18" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="18" data-src="img/gallery19.webp" data-label="" aria-label="Open image 19" type="button">
                <img src="img/gallery19.webp" alt="Gallery Thumbnail 19" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="19" data-src="img/gallery20.webp" data-label="" aria-label="Open image 20" type="button">
                <img src="img/gallery20.webp" alt="Gallery Thumbnail 20" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="20" data-src="img/gallery21.webp" data-label="" aria-label="Open image 21" type="button">
                <img src="img/gallery21.webp" alt="Gallery Thumbnail 21" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="21" data-src="img/gallery22.webp" data-label="" aria-label="Open image 22" type="button">
                <img src="img/gallery22.webp" alt="Gallery Thumbnail 22" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="22" data-src="img/gallery23.webp" data-label="" aria-label="Open image 23" type="button">
                <img src="img/gallery23.webp" alt="Gallery Thumbnail 23" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="23" data-src="img/gallery24.webp" data-label="" aria-label="Open image 24" type="button">
                <img src="img/gallery24.webp" alt="Gallery Thumbnail 24" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="24" data-src="img/gallery25.webp" data-label="" aria-label="Open image 25" type="button">
                <img src="img/gallery25.webp" alt="Gallery Thumbnail 25" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="25" data-src="img/gallery26.webp" data-label="" aria-label="Open image 26" type="button">
                <img src="img/gallery26.webp" alt="Gallery Thumbnail 26" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="26" data-src="img/gallery27.webp" data-label="" aria-label="Open image 27" type="button">
                <img src="img/gallery27.webp" alt="Gallery Thumbnail 27" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="27" data-src="img/gallery28.webp" data-label="" aria-label="Open image 28" type="button">
                <img src="img/gallery28.webp" alt="Gallery Thumbnail 28" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="28" data-src="img/gallery29.webp" data-label="" aria-label="Open image 29" type="button">
                <img src="img/gallery29.webp" alt="Gallery Thumbnail 29" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
              <button class="gallery-thumb group relative w-full aspect-[1/1] rounded-xl overflow-hidden ring-2 ring-transparent hover:ring-[var(--brand-accent)] transition focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)]" data-index="29" data-src="img/gallery30.webp" data-label="" aria-label="Open image 30" type="button">
                <img src="img/gallery30.webp" alt="Gallery Thumbnail 30" class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="325" />
              </button>
            </div>
          </div>
        </aside>
      </div>

      <link rel="preload" as="image" href="img/gallery02.webp">
      <link rel="preload" as="image" href="img/gallery03.webp">
      <link rel="preload" as="image" href="img/gallery04.webp">
      </div>
</section>

     <!-- =========================
     SECCIÓN 7 | ÁREA DE COBERTURA
     ========================= -->
<section id="coverage-area" class="py-32 px-6 bg-white">
  <div class="text-center mb-16" data-aos="fade-up">
    <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)] text-[var(--brand-accent)]
              font-extrabold tracking-[0.15em]
              ring-1 ring-[color-mix(in_srgb,var(--brand-primary)_18%,transparent)]
              shadow-[inset_0_1px_0_rgba(255,255,255,.7)]">
      See Our Service Area Coverage
    </p>

    <h2 class="font-extrabold leading-[0.92] tracking-tight mt-4">
      <span class="block text-[var(--brand-primary)] text-4xl sm:text-5xl md:text-5xl">
        We’re Serving Northwest Washington
      </span>
      <span class="block text-[var(--brand-accent)] text-4xl sm:text-5xl md:text-6xl">
        Check If Your City Is Covered
      </span>
    </h2>
  </div>

    <div class="relative max-w-7xl mx-auto md:flex md:items-start md:gap-12 md:text-left">
    <div class="md:w-1/2 flex justify-center md:justify-end mb-10 md:mb-0">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d171587.8094601445!2d-122.4276721526685!3d47.61317585324637!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490102c93e83355%3A0x10256214cb438f32!2sSeattle%2C%20WA!5e0!3m2!1ses!2sus!4v1718816400000!5m2!1ses!2sus"
            width="100%"
            height="100%"
            style="border:0;"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            title="Mapa de Google de Seattle, WA"
            class="w-full rounded-2xl shadow-xl object-cover h-64 sm:h-80 md:h-96"
        ></iframe>
        </div>

    <div class="md:w-1/2 text-center md:text-left">
      <p class="text-lg text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] leading-relaxed">
        We proudly cover the Northwest Washington region with reliable, professional cleaning.
        If you see your city below, we can be there. If you don’t, reach out—we may still help.
      </p>

      
      <ul id="cities-list-display"
          class="mt-8 grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-3">
            <li class="flex items-center justify-center md:justify-start gap-2
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)]
              text-[var(--brand-primary)] font-bold p-3 rounded-xl ring-1
              ring-[color-mix(in_srgb,var(--brand-primary)_14%,transparent)]
              shadow-[0_1px_1px_rgba(0,0,0,.04)] transition
              hover:bg-[color-mix(in_srgb,var(--brand-primary)_9%,white)]
              focus-within:ring-[var(--brand-accent)]
              ">
              <i data-lucide="map-pin-check" class="w-5 h-5 text-[var(--brand-accent)]" aria-hidden="true"></i>
              <span class="truncate">Seattle</span>
            </li>
            <li class="flex items-center justify-center md:justify-start gap-2
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)]
              text-[var(--brand-primary)] font-bold p-3 rounded-xl ring-1
              ring-[color-mix(in_srgb,var(--brand-primary)_14%,transparent)]
              shadow-[0_1px_1px_rgba(0,0,0,.04)] transition
              hover:bg-[color-mix(in_srgb,var(--brand-primary)_9%,white)]
              focus-within:ring-[var(--brand-accent)]
              ">
              <i data-lucide="map-pin-check" class="w-5 h-5 text-[var(--brand-accent)]" aria-hidden="true"></i>
              <span class="truncate">Spokane</span>
            </li>
            <li class="flex items-center justify-center md:justify-start gap-2
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)]
              text-[var(--brand-primary)] font-bold p-3 rounded-xl ring-1
              ring-[color-mix(in_srgb,var(--brand-primary)_14%,transparent)]
              shadow-[0_1px_1px_rgba(0,0,0,.04)] transition
              hover:bg-[color-mix(in_srgb,var(--brand-primary)_9%,white)]
              focus-within:ring-[var(--brand-accent)]
              ">
              <i data-lucide="map-pin-check" class="w-5 h-5 text-[var(--brand-accent)]" aria-hidden="true"></i>
              <span class="truncate">Tacoma</span>
            </li>
            <li class="flex items-center justify-center md:justify-start gap-2
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)]
              text-[var(--brand-primary)] font-bold p-3 rounded-xl ring-1
              ring-[color-mix(in_srgb,var(--brand-primary)_14%,transparent)]
              shadow-[0_1px_1px_rgba(0,0,0,.04)] transition
              hover:bg-[color-mix(in_srgb,var(--brand-primary)_9%,white)]
              focus-within:ring-[var(--brand-accent)]
              ">
              <i data-lucide="map-pin-check" class="w-5 h-5 text-[var(--brand-accent)]" aria-hidden="true"></i>
              <span class="truncate">Vancouver</span>
            </li>
            <li class="flex items-center justify-center md:justify-start gap-2
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)]
              text-[var(--brand-primary)] font-bold p-3 rounded-xl ring-1
              ring-[color-mix(in_srgb,var(--brand-primary)_14%,transparent)]
              shadow-[0_1px_1px_rgba(0,0,0,.04)] transition
              hover:bg-[color-mix(in_srgb,var(--brand-primary)_9%,white)]
              focus-within:ring-[var(--brand-accent)]
              ">
              <i data-lucide="map-pin-check" class="w-5 h-5 text-[var(--brand-accent)]" aria-hidden="true"></i>
              <span class="truncate">Bellevue</span>
            </li>
            <li class="flex items-center justify-center md:justify-start gap-2
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)]
              text-[var(--brand-primary)] font-bold p-3 rounded-xl ring-1
              ring-[color-mix(in_srgb,var(--brand-primary)_14%,transparent)]
              shadow-[0_1px_1px_rgba(0,0,0,.04)] transition
              hover:bg-[color-mix(in_srgb,var(--brand-primary)_9%,white)]
              focus-within:ring-[var(--brand-accent)]
              ">
              <i data-lucide="map-pin-check" class="w-5 h-5 text-[var(--brand-accent)]" aria-hidden="true"></i>
              <span class="truncate">Everett</span>
            </li>
      </ul>

      <div class="mt-10 flex flex-col sm:flex-row sm:items-center gap-4 justify-center md:justify-start">
        <a href="#quote-form"
           class="inline-flex items-center justify-center gap-3 px-7 py-4 rounded-xl font-extrabold
                   text-white bg-[var(--brand-accent)] hover:brightness-110 shadow-[0_12px_30px_rgba(0,0,0,.17)] transition
                   focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-accent)_30%,transparent)] active:translate-y-[1px]">
          REQUEST A FREE QUOTE
          <i data-lucide="arrow-big-right-dash" class="w-5 h-5" aria-hidden="true"></i>
        </a>

        <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
           class="md:hidden inline-flex items-center justify-center gap-2 px-6 py-4 rounded-xl font-extrabold
                   bg-[var(--brand-secondary)] text-[var(--brand-primary)] shadow-md transition
                   focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-secondary)_35%,transparent)] active:translate-y-[1px]"
           aria-label="Call now">
          <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
          Call Now For An Estimate
        </a>

        <div class="hidden md:flex items-center justify-center gap-2 font-extrabold text-[var(--brand-primary)]">
          <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
          <div class="hidden md:block text-black">
          <p class="text-sm tracking-wide opacity-90">Or Call Now For Your Free Quote</p>
          <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
             class="text-2xl font-extrabold tracking-[0.08em]">
            <?php echo PHONE_PRIMARY; ?></a>
        </div>
        </div>
      </div>
    </div>
  </div>
</section>

     <!-- =========================
     SECCIÓN 8 | EL FORMULARIO DE CAPTACIÓN
     ========================= -->
<section class="bg-[var(--brand-primary)] text-white py-12 md:py-24 px-4">
  <div class="max-w-7xl mx-auto grid md:grid-cols-2 items-center gap-10 md:gap-12">

    <!-- Lado izquierdo -->
    <div class="text-center md:text-left" data-aos="fade-up">
      <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md
                bg-white/10 text-[var(--brand-secondary)] font-extrabold
                tracking-[0.15em] ring-1 ring-white/20 shadow-[inset_0_1px_0_rgba(255,255,255,.35)]">
        Fast • Free • No Obligation
      </p>

      <h2 class="font-extrabold leading-[0.95] tracking-tight mt-4">
        <span class="block text-white text-3xl sm:text-5xl md:text-4xl">
          Ready To Stop Fighting The Mess?
        </span>
        <span class="block text-[var(--brand-secondary)] text-3xl sm:text-5xl md:text-5xl">
          Get Your Free, Custom Quote
        </span>
      </h2>

      <p class="text-white/90 leading-relaxed max-w-2xl mt-5 text-base sm:text-lg md:text-xl mx-auto md:mx-0">
        Tell us what’s not working in your home or office and we’ll design a cleaning plan that fits
        your reality — not the other way around. No contracts. No pressure. Just clear pricing and a cleaner life.
      </p>

      <ul class="text-white mt-7 space-y-4 list-none p-0">
        <li class="flex items-start justify-center md:justify-start gap-3">
          <i data-lucide="check-circle-2" class="w-6 h-6 text-[var(--brand-secondary)] flex-shrink-0 mt-0.5" aria-hidden="true"></i>
          <div class="text-left"><span class="font-bold">Save Your Time:</span> We clean — you focus on what matters.</div>
        </li>
        <li class="flex items-start justify-center md:justify-start gap-3">
          <i data-lucide="check-circle-2" class="w-6 h-6 text-[var(--brand-secondary)] flex-shrink-0 mt-0.5" aria-hidden="true"></i>
          <div class="text-left"><span class="font-bold">Zero Hassle:</span> Clear process, final inspection on every visit.</div>
        </li>
        <li class="flex items-start justify-center md:justify-start gap-3">
          <i data-lucide="check-circle-2" class="w-6 h-6 text-[var(--brand-secondary)] flex-shrink-0 mt-0.5" aria-hidden="true"></i>
          <div class="text-left"><span class="font-bold">Flexible Scheduling:</span> We work around your calendar.</div>
        </li>
        <li class="flex items-start justify-center md:justify-start gap-3">
          <i data-lucide="check-circle-2" class="w-6 h-6 text-[var(--brand-secondary)] flex-shrink-0 mt-0.5" aria-hidden="true"></i>
          <div class="text-left"><span class="font-bold">Transparent & Friendly:</span> Upfront pricing, no surprises.</div>
        </li>
      </ul>
    </div>

    <!-- Lado derecho: Formulario -->
    <div id="quote-form" class="bg-white text-[var(--brand-primary)]
                -mx-4 sm:mx-0 rounded-none sm:rounded-2xl
                p-5 sm:p-7 md:p-8 shadow-2xl ring-1 ring-black/5"
         data-aos="fade-up" data-aos-delay="80">

      <h3 class="font-extrabold text-center leading-tight mb-2 text-xl sm:text-3xl">
       Request A Free Quote <span class="text-[var(--brand-accent)]">(~60 Sec)</span>
      </h3>
      <p class="text-center text-sm text-[color-mix(in_srgb,var(--brand-primary)_70%,#0000)] mb-5">
        No commitment. We reply fast with clear, customized pricing.
      </p>

          <form id="contact-form-main" class="space-y-5 js-lead-form" action="submit_lead.php" method="post">
              <input type="hidden" name="form_origin" value="main">
              <input type="hidden" name="user_nickname" tabindex="-1" value="" autocomplete="off">
               <input type="hidden" name="website_url" tabindex="-1" value="" autocomplete="off">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">

          <!-- Nombre -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="user" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="text" id="name" name="name" autocomplete="name"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="Your Name" required>
            </div>
          </div>

          <!-- Email -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="mail" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="email" id="email" name="email" autocomplete="email"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="YourEmail@email.com" required>
            </div>
          </div>

          <!-- Teléfono -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="phone" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="tel" id="phone" name="phone" inputmode="tel" autocomplete="tel"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="(XXX) XXX-XXXX" required>
            </div>
          </div>

          <!-- Servicio -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="list-checks" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <select id="service" name="service"
                      class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-10 h-12
                             text-[16px] shadow-sm appearance-none
                             focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                      required>
                <option value="">Select A Service</option>
                     <option value="Deep Cleaning Services">Deep Cleaning Services</option>
                     <option value="Occasional Cleaning">Occasional Cleaning</option>
                     <option value="Recurring Cleaning">Recurring Cleaning</option>
                </select>
              <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                <i data-lucide="chevron-down" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>

        <!-- Mensaje -->
        <div class="min-w-0">
          <div class="relative">
            <span class="absolute left-3 top-3">
              <i data-lucide="message-square-text" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
            </span>
            <textarea id="message" name="message" rows="5"
                      class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 py-3
                             text-[16px] placeholder-gray-400 shadow-sm
                             focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                      placeholder="Tell Us How We Can Help You..." required></textarea>
          </div>
        </div>

        <!-- CTA principal -->
        <button type="submit"
                class="w-full mt-1 inline-flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-extrabold
                       text-white bg-[var(--brand-accent)] hover:brightness-110
                       shadow-[0_12px_30px_rgba(0,0,0,.25)] transition
                       focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-accent)_30%,transparent)]
                       active:translate-y-[1px]">
          <span> GET YOUR FREE QUOTE NOW</span>
          <i data-lucide="send-horizontal" class="w-5 h-5" aria-hidden="true"></i>
        </button>

        <div id="form-message" class="mt-3 text-center text-sm font-semibold hidden"></div>

        <!-- Confianza / privacidad -->
       <div class="hidden sm:flex mt-5 flex-wrap items-center justify-center gap-6 text-black/70">
          <span class="inline-flex items-center gap-2 text-sm">
            <i data-lucide="badge-check" class="w-5 h-5"></i>
            <span>Licensed &amp; Insured</span>
          </span>
          <span class="inline-flex items-center gap-2 text-sm">
            <i data-lucide="handshake" class="w-5 h-5"></i>
            <span>Satisfaction Guarantee</span>
          </span>
          <span class="inline-flex items-center gap-2 text-sm">
            <i data-lucide="shield" class="w-5 h-5"></i>
            <span>Privacy First</span>
          </span>
        </div>
      </form>
    </div>

  </div>
</section>

     <!-- =========================
     SECCIÓN 9 | LA PRUEBA SOCIAL
     ========================= -->
<section id="reviews" class="py-32 px-6 bg-brand-light">
  <!-- Header -->
  <div class="text-center mb-14" data-aos="fade-up">
    <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md
              bg-[color-mix(in_srgb,var(--brand-primary)_6%,white)]
              text-[var(--brand-accent)] font-extrabold tracking-[0.15em]
              ring-1 ring-[color-mix(in_srgb,var(--brand-primary)_18%,transparent)]
              shadow-[inset_0_1px_0_rgba(255,255,255,.7)]">
      Real stories • Real results
    </p>
    <h2 class="font-extrabold leading-[0.92] tracking-tight mt-4">
      <span class="block text-[var(--brand-primary)] text-4xl sm:text-5xl md:text-5xl">
        What Our Customers Say
      </span>
      <span class="block text-[var(--brand-accent)] text-4xl sm:text-5xl md:text-6xl">
        Reviews You Can Verify
      </span>
    </h2>
  </div>

  
  <div class="max-w-7xl mx-auto">
    <!-- Carrusel de reviews -->
    <div class="relative" data-aos="fade-up" data-aos-delay="80">
      <div id="rv-track" class="flex gap-6 overflow-hidden snap-x snap-mandatory pb-2">
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=5"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="Sofia R. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  Sofia R.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">On time and super detailed. My apartment feels new again.</span>
            </p>
          </article>
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=15"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="Luis M. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  Luis M.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">Great service and fair pricing. Scheduling was easy and they’re punctual.</span>
            </p>
          </article>
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=32"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="Caroline T. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  Caroline T.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star-half" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">That final walkthrough makes a big difference. Very professional.</span>
            </p>
          </article>
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=11"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="George A. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  George A.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">Came home from work to a spotless place. Highly recommend.</span>
            </p>
          </article>
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=21"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="Daniela P. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  Daniela P.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">Fast, friendly, and careful with everything. Bathroom is sparkling.</span>
            </p>
          </article>
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=40"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="Raul G. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  Raul G.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">Consistent results and reliable team. Our office looks great.</span>
            </p>
          </article>
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=27"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="Mario Q. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  Mario Q.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star-half" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">Excellent value for the quality. Saved me hours every week.</span>
            </p>
          </article>
                  <article class="rv-card min-w-[88%] sm:min-w-[60%] md:min-w-[46%] lg:min-w-[32%] xl:min-w-[30%]
                          snap-center rounded-2xl ring-1 ring-black/5 shadow-xl p-6
                          bg-white relative overflow-hidden hover:shadow-2xl transition">
            <span class="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-md
                         bg-[radial-gradient(circle_at_center,rgba(0,0,0,0.06),transparent_60%)]"></span>

            <div class="flex items-center gap-4 mb-4">
              <div class="relative">
                <img src="https://i.pravatar.cc/120?img=9"
                     onerror="this.src='data:image/svg+xml;utf8,&lt;svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22&gt;&lt;rect width=%22100%25%22 height=%22100%25%22 fill=%22%23f3f4f6%22/&gt;&lt;/svg&gt;'"
                     alt="Elena C. photo"
                     class="w-12 h-12 rounded-md object-cover ring-2 ring-white shadow"/>
                <span class="absolute -bottom-1 -right-1 inline-flex items-center justify-center
                             h-5 w-5 rounded-md bg-[var(--brand-secondary)] ring-2 ring-white">
                  <i data-lucide="badge-check" class="w-3.5 h-3.5 text-[var(--brand-primary)]"></i>
                </span>
              </div>
              <div>
                <p class="font-extrabold text-[var(--brand-primary)] leading-tight">
                  Elena C.                </p>
                <div class="leading-none mt-1">
                  <div class="inline-flex items-center gap-1"><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i><i data-lucide="star" class="w-5 h-5 text-[var(--brand-secondary)]"></i></div>                </div>
              </div>
            </div>

            <i data-lucide="quote" class="w-6 h-6 text-[color-mix(in_srgb,var(--brand-primary)_35%,#0000)] mb-2"></i>
            <p class="text-[color-mix(in_srgb,var(--brand-primary)_78%,#0000)] text-base">
              <span class="line-clamp-4 block">Kitchen shines again. Super organized and attentive crew.</span>
            </p>
          </article>
              </div>

      <!-- Flechas (usa tu JS actual si lo tienes) -->
      <button id="rv-prev"
              class="absolute -left-2 top-1/2 -translate-y-1/2 w-11 h-11 rounded-md
                     bg-[var(--brand-primary)]/90 text-white inline-flex items-center justify-center
                     hover:bg-[var(--brand-primary)] transition shadow-lg ring-1 ring-black/10"
              aria-label="Previous review">
        <i data-lucide="chevron-left" class="w-5 h-5"></i>
      </button>
      <button id="rv-next"
              class="absolute -right-2 top-1/2 -translate-y-1/2 w-11 h-11 rounded-md
                     bg-[var(--brand-primary)]/90 text-white inline-flex items-center justify-center
                     hover:bg-[var(--brand-primary)] transition shadow-lg ring-1 ring-black/10"
              aria-label="Next review">
        <i data-lucide="chevron-right" class="w-5 h-5"></i>
      </button>
    </div>

<!-- Botones fijos: Google & Facebook (URLs directas) -->
<div class="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 text-center">
  
  <!-- Google -->
  <a href="https://google.com" target="_blank" rel="noopener"
     class="inline-flex items-center justify-center gap-3 px-8 py-4 rounded-xl font-extrabold
            text-white bg-[var(--brand-accent)] hover:brightness-110
            shadow-[0_12px_30px_rgba(0,0,0,.25)] transition
            focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-accent)_30%,transparent)]
            active:translate-y-[1px]">
    <i data-lucide="globe" class="w-5 h-5" aria-hidden="true"></i>
    <span>SEE MORE ON GOOGLE</span>
    <i data-lucide="arrow-big-right-dash" class="w-5 h-5" aria-hidden="true"></i>
  </a>

  <!-- Facebook -->
  <a href="https://facebook.com" target="_blank" rel="noopener"
     class="inline-flex items-center justify-center gap-3 px-8 py-4 rounded-xl font-extrabold
            text-[var(--brand-primary)] bg-white hover:bg-[color-mix(in_srgb,var(--brand-primary)_4%,white)]
            shadow-[0_12px_30px_rgba(0,0,0,.18)] transition
            focus:outline-none focus-visible:ring-4 focus-visible:ring-black/10
            active:translate-y-[1px]">
    <i data-lucide="facebook" class="w-5 h-5" aria-hidden="true"></i>
    <span>SEE MORE ON FACEBOOK</span>
    <i data-lucide="arrow-big-right-dash" class="w-5 h-5" aria-hidden="true"></i>
  </a>

</div>

</section>
            
     <!-- =========================
     SECCIÓN 10 | CTA PERSUASIVO
     ========================= -->
<section id="final-cta"
  class="relative z-[30] isolate bg-[var(--brand-primary)] text-white py-28 md:py-32 px-6">

    <div aria-hidden="true" class="absolute inset-0 z-0 overflow-hidden pointer-events-none">
    <div
      class="absolute top-0 right-0 translate-x-1/4 -translate-y-1/4 w-[42rem] h-[42rem]
                 rounded-md blur-3xl opacity-20"
      style="background: radial-gradient(closest-side, var(--brand-secondary), transparent 70%);">
    </div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto">
        <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md
              bg-white/10 text-[var(--brand-secondary)] font-extrabold tracking-[0.15em]
              ring-1 ring-white/20 shadow-[inset_0_1px_0_rgba(255,255,255,.35)]">
      Make It Easy On Yourself — Start Today
    </p>

    <h2 class="font-extrabold leading-[0.92] tracking-tight mt-4">
      <span class="block text-4xl sm:text-5xl md:text-5xl">Ready To Love Your Space Again?</span>
      <span class="block text-[var(--brand-secondary)] text-4xl sm:text-5xl md:text-6xl">
        Choose How You’d Like To Start
      </span>
    </h2>

    <p class="max-w-3xl mt-6 text-lg md:text-xl text-white/90">
      No pressure. No hassle. Pick what’s easiest for you—get a quick quote, call us, or drop an email.
      Do it today and enjoy the result as soon as tomorrow.
    </p>

        <div class="mt-10 grid grid-cols-1 lg:grid-cols-12 gap-6 items-center">
            <div class="lg:col-span-5">
        <a href="#quote-form"
           class="group w-full flex flex-col items-center justify-center gap-2 px-8 py-5 rounded-2xl
                  font-extrabold text-[var(--brand-primary)] bg-[var(--brand-secondary)]
                  shadow-[0_14px_32px_rgba(0,0,0,.22)] hover:shadow-[0_18px_42px_rgba(0,0,0,.28)]
                  hover:-translate-y-0.5 transition text-center">
          <span class="inline-flex items-center gap-2">
            REQUEST A FREE QUOTE
            <i data-lucide="arrow-big-right-dash" class="w-5 h-5 text-[var(--brand-primary)] transition-transform group-hover:translate-x-0.5"></i>
          </span>
          <span class="text-sm font-normal opacity-80">Takes About 60 Seconds</span>
        </a>
      </div>

            <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-3 gap-4 items-stretch">
        
          <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
             class="h-full inline-flex items-center justify-center gap-3 px-5 py-4 rounded-xl
                    bg-white/10 hover:bg-white/15 ring-1 ring-white/15
                    font-extrabold text-white transition text-center">
            <i data-lucide="phone" class="w-5 h-5 text-[var(--brand-secondary)]"></i>
            <span>Call Us Now<br><span class="font-normal opacity-90"><?php echo PHONE_PRIMARY; ?></span></span>
          </a>
        
           <a href="tel:<?php echo PHONE_SECONDARY_CLICK; ?>"
             class="h-full inline-flex items-center justify-center gap-3 px-5 py-4 rounded-xl
                    bg-white/10 hover:bg-white/15 ring-1 ring-white/15
                    font-extrabold text-white transition text-center">
            <i data-lucide="phone-call" class="w-5 h-5 text-[var(--brand-secondary)]"></i>
            <span>Our Second Phone<br><span class="font-normal opacity-90"><?php echo PHONE_SECONDARY; ?></span></span>
          </a>
        
           <a href="mailto:<?php echo EMAIL_PRIMARY; ?>"
             class="h-full inline-flex items-center justify-center gap-3 px-5 py-4 rounded-xl
                    bg-white/10 hover:bg-white/15 ring-1 ring-white/15
                    font-extrabold text-white transition text-center">
            <i data-lucide="mail" class="w-5 h-5 text-[var(--brand-secondary)]"></i>
            <span>Send Us An Email<br><span class="font-normal opacity-90"><?php echo EMAIL_PRIMARY; ?></span></span>
          </a>
              </div>
    </div>

    
    <div class="mt-8 flex flex-wrap gap-3 text-sm">
      <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-white/10 ring-1 ring-white/15">
        <i data-lucide="badge-check" class="w-4 h-4 text-[var(--brand-secondary)]"></i> Final inspection on every visit
      </span>
      <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-white/10 ring-1 ring-white/15">
        <i data-lucide="calendar-check-2" class="w-4 h-4 text-[var(--brand-secondary)]"></i> Flexible scheduling
      </span>
      <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-white/10 ring-1 ring-white/15">
        <i data-lucide="handshake" class="w-4 h-4 text-[var(--brand-secondary)]"></i> Friendly, professional team
      </span>
    </div>
  </div>
</section>

<!-- =========================
     SECCIÓN 11 | HORARIOS DE ATENCIÓN
     ========================= -->
<section id="contact-and-hours" class="relative py-28 md:py-36 px-6 bg-[var(--brand-light)] overflow-hidden">
  <div class="relative max-w-7xl mx-auto">

    <!-- Head -->
    <div class="text-center mb-10">
      <p class="inline-flex items-center gap-2 px-5 py-1.5 rounded-md
                bg-white/80 text-[var(--brand-accent)] font-extrabold tracking-[0.15em]
                ring-1 ring-[color-mix(in_srgb,var(--brand-primary)_25%,transparent)] shadow">
        Real People • Fast Answers
      </p>
      <h2 class="font-extrabold leading-[0.9] tracking-tight mt-5">
        <span class="block text-[var(--brand-primary)] text-4xl sm:text-5xl md:text-5xl">
          We’re Here When You Need Us
        </span>
        <span class="block text-[var(--brand-accent)] text-4xl sm:text-5xl md:text-6xl">
          Check Hours • Plan With Confidence
        </span>
      </h2>
    </div>

        <!-- ====== 2 columnas: Schedule (izq) + Live Status (der) ====== -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

      <!-- LEFT: WEEKLY SCHEDULE -->
      <div class="lg:col-span-7">
        <div class="rounded-3xl shadow-xl ring-1 ring-black/10 overflow-hidden bg-white">
          <div class="px-6 sm:px-8 py-6 flex items-center justify-between">
            <h3 class="text-[var(--brand-primary)] font-extrabold text-2xl sm:text-3xl tracking-wide">
              Our Weekly Schedule
            </h3>
            <div class="hidden sm:flex items-center gap-2 text-xs text-[color-mix(in_srgb,var(--brand-primary)_70%,#0000)]">
              <i data-lucide="globe" class="w-4 h-4"></i>
              <span id="tz-label">Times Shown In: <?php echo BUSINESS_TIMEZONE; ?></span>
            </div>
          </div>

          <!-- La grilla se llena vía JS -->
          <ul id="hours-grid" class="px-6 sm:px-8 pb-8 grid grid-cols-1 sm:grid-cols-2 gap-5"></ul>
        </div>
      </div>

      <!-- RIGHT: LIVE STATUS CARD -->
      <div class="lg:col-span-5">
        <!-- Barra superior (estado + CTA) -->
        <div class="rounded-2xl px-6 py-5 mb-6 bg-white/85 backdrop-blur ring-1 ring-black/10 shadow-xl flex flex-col gap-4">
          <div class="flex items-center gap-3">
            <!-- DOT dinámico -->
            <span id="stateDot" class="relative inline-flex h-3.5 w-3.5 rounded-md bg-emerald-500">
              <span id="statePing" class="absolute inline-flex h-full w-full rounded-md animate-ping bg-emerald-400/60"></span>
            </span>
            <div class="leading-tight">
              <p class="text-[11px] font-extrabold tracking-[0.2em] text-[color-mix(in_srgb,var(--brand-primary)_72%,#0000)]">
                Business Schedule Status
              </p>
              <p id="status-line" class="text-xl font-extrabold text-[var(--brand-primary)]">Loading…</p>
              <p id="today-line" class="text-xs text-[color-mix(in_srgb,var(--brand-primary)_70%,#0000)]">—</p>
            </div>
          </div>

          <a id="cta-link" href="#quote-form"
             class="self-start inline-flex items-center uppercase justify-center gap-3 px-6 py-3 rounded-xl font-extrabold
                    text-white bg-[var(--brand-accent)] hover:brightness-110
                    shadow-[0_12px_28px_rgba(0,0,0,.18)] transition">
            Start Your Free Quote
            <i data-lucide="arrow-big-right-dash" class="w-5 h-5"></i>
          </a>
        </div>

        <!-- Tarjeta visual secundaria (beneficios) -->
        <div class="rounded-3xl overflow-hidden shadow-xl ring-1 ring-black/10 bg-gradient-to-br from-white to-[color-mix(in_srgb,var(--brand-secondary)_16%,white)]">
          <div class="p-6">
            <h4 class="text-[var(--brand-primary)] font-extrabold tracking-wide text-4xl sm:text-5xl md:text-4xl">
              Why Schedule With Us
            </h4>
            <ul class="mt-4 space-y-3 text-[color-mix(in_srgb,var(--brand-primary)_80%,#0000)] font-semibold">
              <li class="flex items-center gap-3">
                <i data-lucide="sparkles" class="w-5 h-5 text-[var(--brand-accent)]"></i> Predictable, Spotless Results
              </li>
              <li class="flex items-center gap-3">
                <i data-lucide="users" class="w-5 h-5 text-[var(--brand-accent)]"></i> Trained, Background-Checked Team
              </li>
              <li class="flex items-center gap-3">
                <i data-lucide="clipboard-check" class="w-5 h-5 text-[var(--brand-accent)]"></i> Checklist + Final Walkthrough
              </li>
            </ul>
          </div>
         </div>
      </div>
    </div>
      </div>
</section>

</main>

<!-- =========================
     SECCIÓN 12 | EL FOOTER PERSUASIVO
     ========================= -->
<footer class="mt-auto bg-brand-primary text-white border-t border-white/10">
  <div class="max-w-7xl mx-auto px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-10 items-start">

      <div class="md:col-span-4">
    <div class="inline-flex items-center gap-3 rounded-2xl bg-white/95 ring-1 ring-black/10 shadow-md px-4 py-3">
        <img
            src="<?php echo LOGO_FILENAME; ?>"
            alt="<?php echo BUSINESS_NAME; ?> logo"
            class="h-12 w-auto object-contain"
        >
    </div>

    <p class="mt-5 text-sm/6 text-white/90">
        Commercial & Residential <span class="mx-2">|</span> Licensed & Insured
    </p>
        <p class="mt-5 text-sm/6 text-white">
        <?php if (BUSINESS_LICENSE_NUMBER !== ''): ?>
            Lic. # <span class="mx-2">|</span> <span class="mx-2 text-[var(--brand-secondary)]"><?php echo BUSINESS_LICENSE_NUMBER; ?></span>
        <?php endif; ?>
    </p>
</div>

            <div class="md:col-span-5">
        <h3 class="text-sm font-semibold tracking-wider text-white/80 uppercase text-left">Connect with us</h3>
        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                                                  <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer"
                 class="group inline-flex items-center justify-between gap-3 rounded-xl px-4 py-2
                        bg-white/5 hover:bg-white/10 ring-1 ring-white/10 hover:ring-white/20
                        transition-all">
                <span class="inline-flex items-center gap-3">
                  <i data-lucide="link-2" class="w-5 h-5 text-white/80 group-hover:text-white"></i>
                  <span class="text-sm font-medium text-white/90 group-hover:text-white">
                    Facebook                  </span>
                </span>
                <i data-lucide="arrow-up-right" class="w-4 h-4 text-white/50 group-hover:text-white/80"></i>
              </a>
                                        <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer"
                 class="group inline-flex items-center justify-between gap-3 rounded-xl px-4 py-2
                        bg-white/5 hover:bg-white/10 ring-1 ring-white/10 hover:ring-white/20
                        transition-all">
                <span class="inline-flex items-center gap-3">
                  <i data-lucide="link-2" class="w-5 h-5 text-white/80 group-hover:text-white"></i>
                  <span class="text-sm font-medium text-white/90 group-hover:text-white">
                    TikTok                  </span>
                </span>
                <i data-lucide="arrow-up-right" class="w-4 h-4 text-white/50 group-hover:text-white/80"></i>
              </a>
                                        <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer"
                 class="group inline-flex items-center justify-between gap-3 rounded-xl px-4 py-2
                        bg-white/5 hover:bg-white/10 ring-1 ring-white/10 hover:ring-white/20
                        transition-all">
                <span class="inline-flex items-center gap-3">
                  <i data-lucide="link-2" class="w-5 h-5 text-white/80 group-hover:text-white"></i>
                  <span class="text-sm font-medium text-white/90 group-hover:text-white">
                    Pinterest                  </span>
                </span>
                <i data-lucide="arrow-up-right" class="w-4 h-4 text-white/50 group-hover:text-white/80"></i>
              </a>
                              </div>
      </div>

            <div class="md:col-span-3">
        <h3 class="text-sm font-semibold tracking-wider text-white/80 uppercase text-left">Contact us now</h3>
        <ul class="mt-4 space-y-3">
                      <li class="flex items-center gap-3">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/10">
                <i data-lucide="phone" class="w-4 h-4"></i>
              </span>
              <a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>"
                 class="text-sm text-white/90 hover:text-white font-medium transition">
                <?php echo PHONE_PRIMARY; ?></a>
            </li>
          
                      <li class="flex items-center gap-3">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/10">
                <i data-lucide="mail" class="w-4 h-4"></i>
              </span>
              <a href="mailto:<?php echo EMAIL_PRIMARY; ?>"
                 class="text-sm text-white/90 hover:text-white font-medium transition truncate max-w-[240px]">
                <?php echo EMAIL_PRIMARY; ?>              </a>
            </li>
          
                      <li class="flex items-center gap-3">
              <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/10">
                <i data-lucide="globe" class="w-4 h-4"></i>
              </span>
              <a href="<?php echo WEBSITE_URL; ?>"
                 class="text-sm text-white/90 hover:text-white font-medium transition">
                <?php echo WEBSITE_URL; ?>              </a>
            </li>
                  </ul>
      </div>
    </div>

        <div class="mt-10 pt-6 border-t border-white/10">
            <div class="flex flex-col items-center gap-4">
        <div class="flex items-center gap-4 text-xs text-white/60">
          <a href="#quote-form"
             class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 hover:ring-white/20 transition">
            <i data-lucide="note-pencil" class="w-4 h-4"></i>
            Get a Free Quote
          </a>
          <a href="#top"
             class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 hover:ring-white/20 transition">
            <i data-lucide="arrow-up" class="w-4 h-4"></i>
            Back to Top
          </a>
        </div>

        <p class="text-xs text-white/60">
          © <?php echo date('Y'); ?> <?php echo BUSINESS_NAME; ?>. All Rights Reserved.
        </p>
      </div>

       <?php include 'footer.php'; ?>
       
    </div>
  </div>
</footer>

<!-- ============================================================
     SECCIÓN 13 | FORMULARIO FIJO
     ============================================================ -->
<!-- ===== Desktop launcher (left tab) ===== -->
<button id="openAgendaModalDesktop"
        class="hidden md:flex fixed top-1/3 right-0 z-50 bg-[var(--brand-accent)] text-white py-4 px-3 rounded-l-xl
               shadow-lg hover:scale-105 hover:shadow-xl transition-all duration-300 flex-col items-center justify-center
               cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/60">
  <span class="font-extrabold text-sm uppercase tracking-wide">Get a Quote</span>
  <i data-lucide="file-text" class="w-6 h-6 mt-1"></i>
</button>

<!-- ===== Mobile bottom CTA ===== -->
<a href="tel:<?php echo PHONE_PRIMARY_CLICK; ?>" id="fixedBottomQuoteBtn"
   class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-[var(--brand-secondary)] text-[var(--brand-primary)]
          py-4 text-center font-extrabold text-lg uppercase shadow-lg flex items-center justify-center gap-2
          pb-[max(0px,env(safe-area-inset-bottom))]">
  <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
  <?php echo PHONE_PRIMARY; ?></a>

<!-- MODAL RIGHT DRAWER (sin títulos en móvil) -->
<div id="agendaModal"
     class="fixed inset-0 z-[1001] hidden opacity-0 bg-black/70 backdrop-blur-sm
            transition-opacity duration-300 ease-out
            flex items-stretch justify-end"
     role="dialog" aria-modal="true" aria-labelledby="modal-quote-title">

  <!-- Sheet -->
  <div id="agendaModalContent"
       class="relative w-full md:w-1/2 h-screen bg-white shadow-2xl
              translate-x-full transition-transform duration-300 ease-out
              border-l border-black/10 flex flex-col">

    <!-- Header (solo badge y close) -->
    <div class="sticky top-0 z-10 bg-white/90 backdrop-blur supports-[backdrop-filter]:bg-white/70
                border-b border-black/10 px-4 sm:px-6 py-3 md:py-4">
      <div class="relative">
        <button id="closeAgendaModal"
                class="absolute right-0 top-0 inline-flex h-10 w-10 items-center justify-center rounded-md
                       bg-black/5 text-black/70 hover:bg-black/10 focus:outline-none
                       focus:ring-2 focus:ring-[var(--brand-accent)]"
                aria-label="Close">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>

        <p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md
                  bg-[var(--brand-secondary)]/20 text-[var(--brand-accent)] font-extrabold
                  tracking-[0.12em] ring-1 ring-[var(--brand-secondary)]/40">
          Free Quote · No Obligation
        </p>

        <!-- Título y subtítulo solo desde md: -->
        <h2 id="modal-quote-title" class="hidden md:block font-extrabold leading-tight tracking-tight mt-2 pr-12">
          <span class="block text-[var(--brand-primary)] text-2xl md:text-3xl">
            Ready for a Cleaner, Calmer Space?
          </span>
          <span class="block text-[var(--brand-accent)] text-2xl md:text-2xl">
            Tell Us What You Need — We’ll Handle the Rest
          </span>
        </h2>
      </div>
    </div>

    <!-- Body (scrollable) -->
    <div class="flex-1 overflow-y-auto px-4 sm:px-6 pt-5 pb-28">
      <form id="contact-form-modal" class="space-y-5 js-lead-form" action="submit_lead.php" method="post">
          <input type="hidden" name="form_origin" value="modal">
          <input type="hidden" name="user_nickname" tabindex="-1" value="" autocomplete="off">
          <input type="hidden" name="website_url" tabindex="-1" value="" autocomplete="off">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">

          <!-- Nombre -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="user" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="text" id="name" name="name" autocomplete="name"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="Your Name" required>
            </div>
          </div>

          <!-- Email -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="mail" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="email" id="email" name="email" autocomplete="email"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="YourEmail@email.com" required>
            </div>
          </div>

          <!-- Teléfono -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="phone" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="tel" id="phone" name="phone" inputmode="tel" autocomplete="tel"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="(XXX) XXX-XXXX" required>
            </div>
          </div>

          <!-- Servicio -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="list-checks" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <select id="service" name="service"
                      class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-10 h-12
                             text-[16px] shadow-sm appearance-none
                             focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                      required>
                <option value="">Select A Service</option>
                     <option value="Deep Cleaning Services">Deep Cleaning Services</option>
                     <option value="Occasional Cleaning">Occasional Cleaning</option>
                     <option value="Recurring Cleaning">Recurring Cleaning</option>
                </select>
              <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                <i data-lucide="chevron-down" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>

        <!-- Mensaje -->
        <div class="min-w-0">
          <div class="relative">
            <span class="absolute left-3 top-3">
              <i data-lucide="message-square-text" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
            </span>
            <textarea id="message" name="message" rows="5"
                      class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 py-3
                             text-[16px] placeholder-gray-400 shadow-sm
                             focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                      placeholder="Tell Us How We Can Help You..." required></textarea>
          </div>
        </div>

        <!-- CTA principal -->
        <button type="submit"
                class="w-full mt-1 inline-flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-extrabold
                       text-white bg-[var(--brand-accent)] hover:brightness-110
                       shadow-[0_12px_30px_rgba(0,0,0,.25)] transition
                       focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-accent)_30%,transparent)]
                       active:translate-y-[1px]">
          <span> GET YOUR FREE QUOTE NOW</span>
          <i data-lucide="send-horizontal" class="w-5 h-5" aria-hidden="true"></i>
        </button>

        <div id="form-message" class="mt-3 text-center text-sm font-semibold hidden"></div>

        <!-- Confianza / privacidad -->
       <div class="hidden sm:flex mt-5 flex-wrap items-center justify-center gap-6 text-black/70">
          <span class="inline-flex items-center gap-2 text-sm">
            <i data-lucide="badge-check" class="w-5 h-5"></i>
            <span>Licensed &amp; Insured</span>
          </span>
          <span class="inline-flex items-center gap-2 text-sm">
            <i data-lucide="handshake" class="w-5 h-5"></i>
            <span>Satisfaction Guarantee</span>
          </span>
          <span class="inline-flex items-center gap-2 text-sm">
            <i data-lucide="shield" class="w-5 h-5"></i>
            <span>Privacy First</span>
          </span>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ============================================================
     SECCIÓN 14 | INTENTO DE SALIDA
     ============================================================ -->
<div id="exit-intent-popup" class="fixed inset-0 z-[1100] hidden">
  <!-- Overlay -->
  <div id="popup-overlay" class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 opacity-0"></div>

  <!-- Card wrapper -->
  <div class="relative w-full min-h-[100dvh] flex items-end sm:items-center justify-center p-0 sm:p-4">
    <div id="popup-card"
         class="w-full sm:w-[92vw] sm:max-w-2xl rounded-t-2xl sm:rounded-3xl bg-white shadow-2xl overflow-hidden
                transition-all duration-300 transform scale-95 opacity-0
                max-h-[85dvh] sm:max-h-[90dvh] overflow-y-auto">

      <!-- Header (solo desktop) -->
      <div class="hidden sm:block px-7 pt-8 pb-5 bg-[var(--brand-primary)] text-white">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-md bg-[var(--brand-accent)] ring-1 ring-white/20">
          <i data-lucide="hand" class="w-4 h-4"></i>
          <span class="text-sm font-semibold tracking-wide">Wait... Before You GO</span>
        </div>
        <h3 class="mt-3 text-2xl md:text-3xl font-extrabold leading-tight">
          Get Your Free, No-Obligation Quote
        </h3>
        <p class="mt-2 text-white/90">
          Tell us What you Need and we'll get back to you in Minutes. Fast and Professional.
        </p>
        <!-- Close (X) -->
        <button type="button" id="close-popup"
          class="absolute top-3 right-3 inline-flex h-10 w-10 items-center justify-center rounded-md
                 bg-white/10 text-white hover:bg-white/15 focus:outline-none focus:ring-2 focus:ring-[var(--brand-highlight)]
                 transition"
          aria-label="Close">
          <i data-lucide="x" class="w-5 h-5"></i>
        </button>
      </div>

      <!-- Close (X) compacto solo móvil -->
      <button type="button" id="close-popup"
        class="sm:hidden absolute top-3 right-3 inline-flex h-10 w-10 items-center justify-center rounded-full
               bg-black/10 text-white hover:bg-black/15 focus:outline-none focus:ring-2 focus:ring-[var(--brand-highlight)]
               transition z-10"
        aria-label="Close">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>

      <!-- Body -->
      <div class="px-5 sm:px-7 pt-5 sm:pt-6 pb-6 sm:pb-7">
        <!-- SOLO FORM en móvil; en desktop se ve todo -->
        <form id="contact-form-popup" class="space-y-5 js-lead-form" action="submit_lead.php" method="post">
            <input type="hidden" name="form_origin" value="popup">
            <input type="hidden" name="user_nickname" tabindex="-1" value="" autocomplete="off">
            <input type="hidden" name="website_url" tabindex="-1" value="" autocomplete="off">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">

          <!-- Nombre -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="user" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="text" id="name" name="name" autocomplete="name"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="Your Name" required>
            </div>
          </div>

          <!-- Email -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="mail" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="email" id="email" name="email" autocomplete="email"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="YourEmail@email.com" required>
            </div>
          </div>

          <!-- Teléfono -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="phone" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <input type="tel" id="phone" name="phone" inputmode="tel" autocomplete="tel"
                     class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 h-12
                            text-[16px] placeholder-gray-400 shadow-sm
                            focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                     placeholder="(XXX) XXX-XXXX" required>
            </div>
          </div>

          <!-- Servicio -->
          <div class="min-w-0">
            <div class="relative">
              <span class="absolute left-3 top-1/2 -translate-y-1/2">
                <i data-lucide="list-checks" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
              <select id="service" name="service"
                      class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-10 h-12
                             text-[16px] shadow-sm appearance-none
                             focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                      required>
                <option value="">Select A Service</option>
                     <option value="Deep Cleaning Services">Deep Cleaning Services</option>
                     <option value="Occasional Cleaning">Occasional Cleaning</option>
                     <option value="Recurring Cleaning">Recurring Cleaning</option>
                </select>
              <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                <i data-lucide="chevron-down" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
              </span>
            </div>
          </div>
        </div>

        <!-- Mensaje -->
        <div class="min-w-0">
          <div class="relative">
            <span class="absolute left-3 top-3">
              <i data-lucide="message-square-text" class="w-5 h-5 text-gray-400" aria-hidden="true"></i>
            </span>
            <textarea id="message" name="message" rows="5"
                      class="block w-full rounded-xl border border-gray-200 bg-white pl-11 pr-3 py-3
                             text-[16px] placeholder-gray-400 shadow-sm
                             focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:border-transparent"
                      placeholder="Tell Us How We Can Help You..." required></textarea>
          </div>
        </div>

        <!-- CTA principal -->
        <button type="submit"
                class="w-full mt-1 inline-flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-extrabold
                       text-white bg-[var(--brand-accent)] hover:brightness-110
                       shadow-[0_12px_30px_rgba(0,0,0,.25)] transition
                       focus:outline-none focus-visible:ring-4 focus-visible:ring-[color-mix(in_srgb,var(--brand-accent)_30%,transparent)]
                       active:translate-y-[1px]">
          <span> GET YOUR FREE QUOTE NOW</span>
          <i data-lucide="send-horizontal" class="w-5 h-5" aria-hidden="true"></i>
        </button>

        <div id="form-message" class="mt-3 text-center text-sm font-semibold hidden"></div>
      </form>
      </div>
    </div>
  </div>
</div>

<!-- ============================================================
     SECCIÓN 15 | WHATSAPP
     ============================================================ -->
<button type="button" id="openWhatsappLeadModalDesktop"
        class="fixed bottom-6 right-6 z-[1000] 
               bg-[#25D366] text-white w-14 h-14 rounded-full 
               shadow-xl hover:scale-105 transition-all duration-300 
               flex items-center justify-center cursor-pointer 
               focus:outline-none focus:ring-4 focus:ring-[#25D366]/50"
        aria-label="Chat with us on WhatsApp">
  <i data-lucide="message-circle" class="w-8 h-8"></i>
</button>

<div id="whatsappLeadModal"
     class="fixed inset-0 z-[1002] hidden opacity-0 bg-black/50 backdrop-blur-sm
            transition-opacity duration-300 ease-out
            flex items-end sm:items-center justify-end p-0 sm:p-6"
     role="dialog" aria-modal="true" aria-labelledby="modal-whatsapp-title">

  <div id="whatsappLeadModalContent"
       class="relative w-full sm:w-[340px] h-[calc(100vh-80px)] sm:h-[500px] bg-white rounded-t-2xl sm:rounded-xl shadow-2xl
              transition-all duration-300 transform scale-95 opacity-0
              flex flex-col overflow-hidden mb-0 sm:mb-20 mr-0 sm:mr-4">

    <div class="flex-shrink-0 bg-[#38B953] text-white p-5 rounded-t-2xl sm:rounded-t-xl relative">
      <button type="button" id="closeWhatsappLeadModal"
              class="absolute top-4 right-4 inline-flex h-8 w-8 items-center justify-center rounded-full
                     bg-white/30 text-white hover:bg-white/50 focus:outline-none focus:ring-2 focus:ring-white
                     transition"
              aria-label="Close window">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>

      <div class="flex items-start gap-3">
        <img src="<?php echo LOGO_FILENAME; ?>" alt="<?php echo BUSINESS_NAME; ?> Logo" class="h-10 w-10 object-contain rounded-full bg-white p-1 shadow-md"/>
        <div>
          <p class="font-extrabold text-lg leading-tight"><?php echo BUSINESS_NAME; ?></p>
          <p class="text-sm opacity-90">We deliver a perfect clean for your space.</p>
          <p class="text-[11px] font-extrabold tracking-wide mt-1 inline-flex items-center gap-1.5">
            <span class="relative flex h-2.5 w-2.5">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-400"></span>
            </span>
            WE ARE ONLINE
          </p>
        </div>
      </div>
    </div>

    <div class="flex-grow p-5 overflow-y-auto">
        <div class="p-4 rounded-xl bg-gray-100 text-gray-800 mb-4 shadow-sm">
            <p class="mt-2 text-m text-gray-600 inline-flex items-center gap-1.5">
                <i data-lucide="zap" class="w-4 h-4 text-green-600"></i> How can I help you today?
            </p>
        </div>

      <h3 id="modal-whatsapp-title" class="font-extrabold text-center leading-tight text-xl text-[var(--brand-primary)]">
        Let's Talk Now
      </h3>

      <form id="whatsapp-lead-form"
            action="submit_whastsapp.php"
            method="post"
            class="space-y-4 js-lead-form">

        <input type="hidden" name="email"   value="whatsapp-lead-<?php echo EMAIL_PRIMARY; ?>">
        <input type="hidden" name="service" value="WhatsApp Lead Capture">
        <input type="hidden" name="message" value="Urgent contact request via WhatsApp.">

        <div class="min-w-0">
            <div class="relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
                    <i data-lucide="user" class="w-5 h-5" aria-hidden="true"></i>
                </span>
                <input type="text" id="wa_name" name="name" autocomplete="name"
                       class="block w-full rounded-xl bg-white pl-11 pr-3 h-12 text-[16px] 
                              placeholder-gray-500 shadow-sm ring-1 ring-gray-200/70
                              focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:shadow-md transition"
                       placeholder="Your Name" required>
            </div>
        </div>

        <div class="min-w-0">
            <div class="relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
                    <i data-lucide="phone" class="w-5 h-5" aria-hidden="true"></i>
                </span>
                <input type="tel" id="wa_phone" name="phone" inputmode="tel" autocomplete="tel"
                       class="block w-full rounded-xl bg-white pl-11 pr-3 h-12 text-[16px] 
                              placeholder-gray-500 shadow-sm ring-1 ring-gray-200/70
                              focus:outline-none focus:ring-2 focus:ring-[var(--brand-accent)] focus:shadow-md transition"
                       placeholder="Your WhatsApp Number" required>
            </div>
        </div>

        <div id="wa-form-message" class="mt-3 text-center text-sm font-semibold hidden"></div>

        <div class="flex-shrink-0 p-4 border-t border-gray-100">
            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-3 px-6 py-3 rounded-xl font-extrabold
                           text-white bg-[#38B953] hover:bg-[#32A849]
                           shadow-[0_4px_12px_rgba(56,185,83,0.3)] transition
                           focus:outline-none focus-visible:ring-4 focus-visible:ring-[#38B953]/50">
                <span>REPLY & START CHAT</span>
                <i data-lucide="send-horizontal" class="w-5 h-5 ml-1" aria-hidden="true"></i>
            </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
/* -------------------------------------------
 * LÓGICA DEL POP-UP DE INTENCIÓN DE SALIDA
 * ------------------------------------------- */
(function(){
  const popup = document.getElementById('exit-intent-popup');
  if (!popup) return;

  const popupOverlay = document.getElementById('popup-overlay');
  const popupCard = document.getElementById('popup-card');
  // Soporta 1 o varios botones de cierre (mismo id repetido o clase auxiliar)
  const closeNodes = document.querySelectorAll('#exit-intent-popup #close-popup, #exit-intent-popup .js-exit-close');
  const popupLinks = document.querySelectorAll('#exit-intent-popup a');

  let popupShown = false;     // ¿está abierto ahora?
  let lastShownAt = 0;        // anti doble-disparo inmediato
  const THROTTLE_MS = 1200;   // 1.2s de margen

  const showPopup = () => {
    const now = Date.now();
    if (popupShown) return;
    if (now - lastShownAt < THROTTLE_MS) return;

    popupShown = true;
    lastShownAt = now;
    popup.classList.remove('hidden');
    setTimeout(() => {
      if (popupOverlay) popupOverlay.classList.remove('opacity-0');
      if (popupCard) popupCard.classList.remove('scale-95', 'opacity-0');
    }, 50);

    // Redibuja iconos Lucide si aplica
    if (window.lucide && typeof window.lucide.createIcons === 'function') {
      window.lucide.createIcons();
    }
  };

  const hidePopup = () => {
    if (!popupShown) return;
    popupShown = false;
    if (popupOverlay) popupOverlay.classList.add('opacity-0');
    if (popupCard) popupCard.classList.add('scale-95', 'opacity-0');
    setTimeout(() => popup.classList.add('hidden'), 300);
  };

  // === TRIGGERS (exactamente los tuyos) ===
  // 1) Intención de salida por borde superior
  document.addEventListener('mouseout', e => {
    if (e.clientY < 20) showPopup();
  });

  // 2) Scroll profundo -> volver casi a top
  let hasScrolledDeep = false;
  const scrollTriggerPoint = 800;
  document.addEventListener('scroll', () => {
    const currentScrollY = window.scrollY;
    if (!hasScrolledDeep && currentScrollY > scrollTriggerPoint) hasScrolledDeep = true;
    if (hasScrolledDeep && currentScrollY < 50) {
      showPopup();
      hasScrolledDeep = false;
    }
  }, { passive: true });

  // Cierres
  closeNodes.forEach(btn => btn.addEventListener('click', hidePopup));
  if (popupOverlay) popupOverlay.addEventListener('click', hidePopup);
  popupLinks.forEach(link => link.addEventListener('click', hidePopup));
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && popupShown) hidePopup();
  });
})();
</script>


<script>
(() => {
  /* =========================
     1) CONFIG desde PHP
     ========================= */
  const BUSINESS_TZ = "<?php echo BUSINESS_TIMEZONE; ?>"; 

(function() {
    // === DECLARACIÓN DE VARIABLES Y CONSTANTES (Globales dentro del script) ===
    const waModal = document.getElementById('whatsappLeadModal');
    const waModalContent = document.getElementById('whatsappLeadModalContent');
    const openWaDesktop = document.getElementById('openWhatsappLeadModalDesktop'); 
    const closeWa = document.getElementById('closeWhatsappLeadModal');
    const waForm = document.getElementById('whatsapp-lead-form');
    

    // === ASIGNACIÓN DE EVENTOS DENTRO DE DOMContentLoaded ===
    document.addEventListener('DOMContentLoaded', function() {
        // Inicialización de estado y clases
        if (waModal && waModalContent) {
             waModalContent.classList.add('scale-95', 'opacity-0');
             waModal.classList.add('initial-hidden');
        }

        // Conectamos el botón flotante (Abre el modal)
        openWaDesktop?.addEventListener('click', openWaModal);
        
        // Conectamos el botón de cerrar (X)
        closeWa?.addEventListener('click', closeWaModal);
        
        // Conectamos el clic en el fondo oscuro
        waModal?.addEventListener('click', (e) => { 
            if (e.target === waModal) closeWaModal(); 
        });
    });

})();
    
  // Programación semanal y excepciones
  const RAW_SCHEDULE  = [{"day_of_week":"Monday","is_active":1,"start_time":"09:00:00","end_time":"17:00:00"},{"day_of_week":"Tuesday","is_active":1,"start_time":"09:00:00","end_time":"17:00:00"},{"day_of_week":"Wednesday","is_active":1,"start_time":"09:00:00","end_time":"17:00:00"},{"day_of_week":"Thursday","is_active":1,"start_time":"09:00:00","end_time":"17:00:00"},{"day_of_week":"Friday","is_active":1,"start_time":"09:00:00","end_time":"17:00:00"},{"day_of_week":"Saturday","is_active":1,"start_time":"09:00:00","end_time":"17:00:00"},{"day_of_week":"Sunday","is_active":0,"start_time":"09:00:00","end_time":"17:00:00"}];  // [{day_of_week,is_active,start_time,end_time}]
  const BLOCKED_DATES = [];  // ["YYYY-MM-DD",...]

  // Compatibilidad con otras partes del sitio (no cambiar IDs)
  const crm_api_base_url_js = "";
  const enableBookingGlobal = true;

  // Alias (compat) para scripts heredados
  const weeklyScheduleConfig = RAW_SCHEDULE;
  const blockedDatesConfig   = BLOCKED_DATES;

  /* =========================
     2) HELPERS de tiempo (robustos con TZ)
     ========================= */
  function validTZ(tz) {
    try { new Intl.DateTimeFormat('en-US', { timeZone: tz }).format(); return tz; }
    catch { return 'UTC'; }
  }
  const TZ = validTZ(BUSINESS_TZ);

  const DAY_INDEX = { 'Sunday':0,'Sun':0,'Monday':1,'Mon':1,'Tuesday':2,'Tue':2,'Wednesday':3,'Wed':3,'Thursday':4,'Thu':4,'Friday':5,'Fri':5,'Saturday':6,'Sat':6 };
  const dayNames  = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

  const weeklyHours = {0:[],1:[],2:[],3:[],4:[],5:[],6:[]};

  function nowPartsTZ(tz){
    const fmt = new Intl.DateTimeFormat('en-GB',{
      timeZone:tz, hour12:false,
      year:'numeric', month:'2-digit', day:'2-digit',
      weekday:'short', hour:'2-digit', minute:'2-digit'
    });
    const parts = fmt.formatToParts(new Date());
    const g = Object.fromEntries(parts.map(p=>[p.type,p.value]));
    const map = {Sun:0,Mon:1,Tue:2,Wed:3,Thu:4,Fri:5,Sat:6};
    return { dow: map[g.weekday], y:+g.year, m:+g.month, d:+g.day, h:+g.hour, min:+g.minute };
  }
  const pad2 = n => String(n).padStart(2,'0');
  const todayKeyTZ = tz => { const n = nowPartsTZ(tz); return `${n.y}-${pad2(n.m)}-${pad2(n.d)}`; }; // YYYY-MM-DD
  function parseHM(hm){
    if (!hm) return {h:0,m:0};
    const m = String(hm).match(/^(\d{1,2}):(\d{2})(?::\d{2})?$/);
    return { h: m ? Math.min(23, parseInt(m[1],10)) : 0, m: m ? Math.min(59, parseInt(m[2],10)) : 0 };
  }
  const hmToMinutes = hm => { const {h,m}=parseHM(hm); return h*60+m; };
  function to12h(hm){
    const {h,m}=parseHM(hm);
    const ampm = h>=12?'PM':'AM';
    const hour = ((h+11)%12)+1;
    return `${hour}:${String(m).padStart(2,'0')} ${ampm}`;
  }
  function formatSpan(span){ return `${to12h(span.start)} – ${to12h(span.end)}`; }

  /* =========================
     3) HIDRATAR weeklyHours desde RAW_SCHEDULE
     ========================= */
  (function hydrateWeeklyHoursFromDB(){
    if (!Array.isArray(RAW_SCHEDULE)) return;
    RAW_SCHEDULE.forEach(row=>{
      const idx = DAY_INDEX[(row.day_of_week||'').trim()];
      if (idx === undefined) return;

      const active = row.is_active === 1 || row.is_active === '1' || row.is_active === true || row.is_active === 'true';
      if (!active) return;

      const s = (row.start_time||'').toString();
      const e = (row.end_time  ||'').toString();
      if (!/^(\d{1,2}:\d{2})(?::\d{2})?$/.test(s) || !/^(\d{1,2}:\d{2})(?::\d{2})?$/.test(e)) return;

      weeklyHours[idx].push({ start: s.slice(0,5), end: e.slice(0,5) });
    });
    for (const k in weeklyHours){
      weeklyHours[k].sort((a,b)=> hmToMinutes(a.start) - hmToMinutes(b.start));
    }
  })();

  const isBlockedToday = () => Array.isArray(BLOCKED_DATES) && BLOCKED_DATES.includes(todayKeyTZ(TZ));

  function isOpenNow(){
    if (isBlockedToday()) return { open:false, reason:'blocked', next: findNextOpen(nowPartsTZ(TZ)) };

    const now = nowPartsTZ(TZ);
    const nowMin = now.h*60 + now.min;

    // 1) Hoy
    for (const span of (weeklyHours[now.dow] || [])) {
      const s = hmToMinutes(span.start), e = hmToMinutes(span.end);
      if (s < e) {
        if (nowMin >= s && nowMin < e) return { open:true, currentSpan:span, effectiveDay:now.dow, carried:false };
      } else if (s > e) {
        if (nowMin >= s) return { open:true, currentSpan:span, effectiveDay:now.dow, carried:false };
      }
    }
    // 2) Ayer arrastre medianoche
    const y = (now.dow + 6) % 7;
    for (const span of (weeklyHours[y] || [])) {
      const s = hmToMinutes(span.start), e = hmToMinutes(span.end);
      if (s > e && (nowMin < e)) return { open:true, currentSpan:span, effectiveDay:y, carried:true };
    }
    return { open:false, next: findNextOpen(now) };
  }

  function findNextOpen(now){
    const nowMin = now.h*60 + now.min;
    let candidates = [];
    for (const span of (weeklyHours[now.dow] || [])) {
      const s = hmToMinutes(span.start);
      if (s > nowMin) candidates.push({ day: now.dow, start: s, span });
    }
    for (let i=1;i<=7;i++){
      const d = (now.dow + i) % 7;
      for (const span of (weeklyHours[d] || [])) {
        candidates.push({ day:d, start: hmToMinutes(span.start), span });
      }
    }
    if (!candidates.length) return null;
    candidates.sort((a,b)=>{
      const da = (a.day - now.dow + 7) % 7;
      const db = (b.day - now.dow + 7) % 7;
      if (da !== db) return da - db;
      return a.start - b.start;
    });
    return candidates[0];
  }

  /* =========================
     4) RENDER: grilla semanal + estado en vivo (versión avanzada)
     ========================= */
  function renderHoursGrid(){
    const grid = document.getElementById("hours-grid");
    if (!grid) return;

    const now = nowPartsTZ(TZ);
    const openNow = isOpenNow().open;

    grid.innerHTML = dayNames.map((name, idx) => {
      const spans = weeklyHours[idx] || [];
      const isToday = idx === now.dow;
      const closedAllDay = spans.length === 0;

      let chipText='', chipClass='';
      if (closedAllDay){
        chipText='Closed All Day';
        chipClass='bg-rose-100 text-rose-700 ring-rose-200';
      } else if (isToday && openNow){
        chipText='Open Now';
        chipClass='bg-emerald-100 text-emerald-700 ring-emerald-200';
      } else {
        chipText='We Are Open';
        chipClass='bg-emerald-100 text-emerald-700 ring-emerald-200';
      }

      const ranges = closedAllDay
        ? `<span class="text-rose-600 font-semibold">—</span>`
        : spans.map(formatSpan).join("<br>");

      return `
        <li class="p-5 rounded-2xl ring-1 ring-black/10 shadow-sm bg-white ${isToday ? 'outline outline-2 outline-[var(--brand-accent)]/50' : ''}">
          <div class="flex items-start justify-between gap-3">
            <div>
              <p class="uppercase text-sm font-extrabold tracking-wide ${isToday ? 'text-[var(--brand-accent)]' : 'text-[var(--brand-primary)]'}">${name}</p>
              <p class="mt-2 text-[15px] font-semibold text-[color-mix(in_srgb,var(--brand-primary)_85%,#0000)] leading-relaxed">${ranges}</p>
            </div>
            <span class="inline-flex items-center px-3 py-1 rounded-md text-[11px] font-bold ring-1 ${chipClass}">${chipText}</span>
          </div>
        </li>
      `;
    }).join("");
  }

  function updateLiveStatus(){
    const status  = isOpenNow();
    const statusEl = document.getElementById("status-line");
    const todayEl  = document.getElementById("today-line");
    const dot      = document.getElementById("stateDot");
    const ping     = document.getElementById("statePing");
    if (!statusEl || !todayEl || !dot || !ping) return;

    const now = nowPartsTZ(TZ);
    const todaysSpans = weeklyHours[now.dow] || [];
    const todayText = todaysSpans.length ? todaysSpans.map(formatSpan).join(" • ") : "Closed Today";

    if (status.open) {
      statusEl.textContent = "We’re OPEN Right Now";
      statusEl.classList.remove("text-rose-700");
      statusEl.classList.add("text-emerald-700");
      dot.classList.remove("bg-rose-500");  dot.classList.add("bg-emerald-500");
      ping.classList.remove("bg-rose-400/60"); ping.classList.add("bg-emerald-400/60");
      todayEl.textContent = `Today: ${todayText}`;
    } else {
      statusEl.textContent = "We’re CLOSED Right Now";
      statusEl.classList.remove("text-emerald-700");
      statusEl.classList.add("text-rose-700");
      dot.classList.remove("bg-emerald-500"); dot.classList.add("bg-rose-500");
      ping.classList.remove("bg-emerald-400/60"); ping.classList.add("bg-rose-400/60");

      if (status.next) {
        const nextLabel = status.next.day === now.dow ? "later today" : dayNames[status.next.day];
        const nextHour  = status.next.span ? to12h(status.next.span.start) : '';
        todayEl.textContent = `Next opening: ${nextLabel} ${nextHour} • Today: ${todayText}`;
      } else {
        todayEl.textContent = `Today: ${todayText}`;
      }
    }
  }

function renderTZLabel(){
    const el = document.getElementById('tz-label');
    if (!el) return;
    // La función ahora usa el valor inyectado en el HTML.
    el.textContent = 'Times Shown In: <?php echo BUSINESS_TIMEZONE; ?>'; 
  }

  /* =========================
     5) VERSIÓN SIMPLE heredada
     ========================= */
  function updateBusinessStatusSimple() {
    const box = document.getElementById('current-status-display');
    if (!enableBookingGlobal || !box) { if(box) box.style.display = 'none'; return; }

    if (isBlockedToday()) {
      box.textContent = 'Closed Today (Blocked Date)';
      box.className = 'mb-4 p-4 rounded-lg font-bold text-xl w-full max-w-sm sm:max-w-md lg:max-w-xl mx-auto bg-gray-500 text-white';
      return;
    }
    const status = isOpenNow();
    box.textContent = status.open ? 'We Are Currently Open' : 'Currently Closed';
    box.className = `mb-4 p-4 rounded-lg font-bold text-xl w-full max-w-sm sm:max-w-md lg:max-w-xl mx-auto ${status.open ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`;
  }

  function renderFullScheduleSimple() {
    const ul = document.querySelector('#full-schedule-display ul');
    const container = document.getElementById('full-schedule-display');
    if (!enableBookingGlobal || !ul) { if(container) container.style.display = 'none'; return; }

    ul.innerHTML = '';
    const daysOrder = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
    daysOrder.forEach(dayName => {
      const idx = DAY_INDEX[dayName];
      const spans = weeklyHours[idx] || [];
      const li = document.createElement('li');
      li.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-md shadow-sm';

      if (spans.length) {
        const first = spans[0], last = spans[spans.length-1];
        li.innerHTML = `<span class="font-semibold text-gray-800">${dayName}:</span> <span class="text-brand-primary font-bold">${formatSpan({start:first.start,end:last.end})}${spans.length>1?' (+)':''}</span>`;
      } else {
        li.innerHTML = `<span class="font-semibold text-gray-800">${dayName}:</span> <span class="text-red-500 font-bold">CLOSED</span>`;
      }
      ul.appendChild(li);
    });
  }

  /* =========================
     6) FORMULARIOS (fetch JSON POST)
     ========================= */
  async function processFormSubmission(formElement, messageElement, onSuccessCallback) {
    if (!formElement || !messageElement) return;
    messageElement.textContent = 'Sending...';
    messageElement.className = 'mt-4 text-center text-sm font-semibold text-brand-primary';
    messageElement.classList.remove('hidden');
    try {
      const formData = new FormData(formElement);
      const data = Object.fromEntries(formData.entries());
      
// === Normaliza claves a lo que espera submit_lead.php ===
if (data.full_name && !data.name) data.name = data.full_name;
if (data.phone_number && !data.phone) data.phone = data.phone_number;
if (data.service_type && !data.service) data.service = data.service_type;
const response = await fetch(`${crm_api_base_url_js}submit_lead.php`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      const result = await response.json();
      if (!response.ok) throw new Error(result.message || `Server Error: ${response.status}`);
      messageElement.textContent = result.message;
      messageElement.classList.replace('text-brand-primary', 'text-green-600');
      formElement.reset();
      if (onSuccessCallback) onSuccessCallback();
    } catch (error) {
      messageElement.textContent = error.message;
      messageElement.classList.replace('text-brand-primary', 'text-red-600');
    }
  }
  
  /* =========================
     0) NUEVA FUNCIÓN PARA FORMATEAR TELÉFONO
     ========================= */
  function formatPhoneNumber(input) {
    let cleaned = ('' + input.value).replace(/\D/g, '');
    cleaned = cleaned.substring(0, 10);
    const match = cleaned.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
    if (match) {
      let formatted = '';
      if (match[1]) {
        formatted += `(${match[1]}`;
      }
      if (match[2]) {
        formatted += `) ${match[2]}`;
      }
      if (match[3]) {
        formatted += `-${match[3]}`;
      }
      input.value = formatted;
    }
  }
 

  /* =========================
     7) MODAL (abrir/cerrar)
     ========================= */
  function openModal(modal, content) {
    if (!modal || !content) return;
    modal.classList.remove('initial-hidden');
    modal.classList.add('active');
    requestAnimationFrame(() => { content.style.transform = 'translateX(0%)'; });
  }
  function closeModal(modal, content) {
    if (!modal || !content) return;
    content.style.transform = 'translateX(100%)';
    setTimeout(() => {
      modal.classList.remove('active');
      modal.classList.add('initial-hidden');
    }, 300);
  }

  /* =========================
     8) GALERÍA principal (thumbs + dots + swipe)
     ========================= */
  function initMainGallery(){
    const thumbs = Array.from(document.querySelectorAll('.gallery-thumb'));
    const mainImg = document.getElementById('main-gallery-image');
    const mainLbl = document.getElementById('main-gallery-label');
    const prevBtn = document.getElementById('g-prev');
    const nextBtn = document.getElementById('g-next');
    const dotsWrap = document.getElementById('g-dots');

    const images = thumbs.map(b => ({ src: b.getAttribute('data-src'), label: b.getAttribute('data-label') || '' }));
    if (!images.length || !mainImg) return;

    let current = 0;
    const dots = images.map((_, i) => {
      const d = document.createElement('button');
      d.className = 'w-2.5 h-2.5 rounded-md bg-[rgba(7,22,45,.25)] data-[active=true]:bg-[var(--brand-accent)] transition focus:outline-none focus:ring-1 focus:ring-[var(--brand-accent)]';
      d.setAttribute('data-index', i);
      d.setAttribute('aria-label', 'Go to slide ' + (i+1));
      d.addEventListener('click', () => setActive(i, true));
      return d;
    });
    if (dotsWrap) dots.forEach(el => dotsWrap.appendChild(el));

    function setActive(idx, fromUser = false) {
      current = (idx + images.length) % images.length;
      const { src, label } = images[current];

      mainImg.style.opacity = '0';
      setTimeout(() => {
        mainImg.src = src;
        mainImg.onload = () => { mainImg.style.opacity = '1'; mainImg.onload = null; };
      }, 120);

      if (mainLbl) {
        if (label) { mainLbl.textContent = label; mainLbl.classList.remove('hidden'); }
        else { mainLbl.classList.add('hidden'); }
      }

      thumbs.forEach(t => t.classList.remove('ring-[var(--brand-accent)]'));
      if (thumbs[current]) thumbs[current].classList.add('ring-[var(--brand-accent)]');

      if (dots.length) {
        dots.forEach(d => d.setAttribute('data-active', 'false'));
        if (dots[current]) dots[current].setAttribute('data-active', 'true');
      }

      const pre = new Image();
      pre.src = images[(current + 1) % images.length].src;

      if (fromUser) mainImg.setAttribute('alt', 'Project photo ' + (current + 1) + ' of ' + images.length);
    }

    thumbs.forEach((btn, idx) => {
      btn.addEventListener('click', () => setActive(idx, true));
      btn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setActive(idx, true); } });
    });

    const goNext = () => setActive(current + 1, true);
    const goPrev = () => setActive(current - 1, true);
    nextBtn && nextBtn.addEventListener('click', goNext);
    prevBtn && prevBtn.addEventListener('click', goPrev);

    let startX = null;
    mainImg.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, {passive:true});
    mainImg.addEventListener('touchend',   e => {
      if (startX === null) return;
      const dx = e.changedTouches[0].clientX - startX;
      if (Math.abs(dx) > 40) (dx < 0 ? goNext() : goPrev());
      startX = null;
    }, {passive:true});

    setActive(0, false);
  }

  /* =========================
     9) TOGGLE ciudades
     ========================= */
  function initToggleCities(){
    const btn = document.getElementById('toggle-cities');
    if (!btn) return;
    const extras = Array.from(document.querySelectorAll('.city-extra'));
    let expanded = false;
    btn.addEventListener('click', () => {
      expanded = !expanded;
      extras.forEach(el => el.classList.toggle('hidden', !expanded));
      btn.innerHTML = expanded
        ? 'Show fewer cities <i class="ph-bold ph-caret-up"></i>'
        : 'Show all cities <i class="ph-bold ph-caret-down"></i>';
    });
  }

  /* =========================
     10) Carrusel de reviews (autoplay + arrows)
     ========================= */
  function initReviewsCarousel(){
    const track = document.getElementById('rv-track');
    if (!track) return;
    const cards = Array.from(track.querySelectorAll('.rv-card'));
    if (!cards.length) return;

    let index = 0;
    let auto = null;
    let paused = false;

    const getOffsets = () => cards.map(c => c.offsetLeft);
    function goTo(i, behavior = 'smooth') {
      const offs = getOffsets();
      index = (i + cards.length) % cards.length;
      track.scrollTo({ left: offs[index], behavior });
    }
    function next() { goTo(index + 1); }
    function prev() { goTo(index - 1); }

    document.getElementById('rv-next')?.addEventListener('click', next);
    document.getElementById('rv-prev')?.addEventListener('click', prev);

    function startAutoplay() { stopAutoplay(); auto = setInterval(() => { if (!paused) next(); }, 3500); }
    function stopAutoplay()  { if (auto) clearInterval(auto); }

    track.addEventListener('mouseenter', () => paused = true);
    track.addEventListener('mouseleave', () => paused = false);
    track.addEventListener('touchstart', () => paused = true, { passive: true });
    track.addEventListener('touchend',   () => paused = false);

    window.addEventListener('resize', () => {
      const offs = getOffsets();
      track.scrollTo({ left: offs[index], behavior: 'instant' });
    });

    goTo(0, 'instant');
    startAutoplay();
  }

  /* =========================
     11) Sticky navbar y menú móvil
     ========================= */
  function initStickyNavbar(){
    const mainNavbar = document.getElementById('main-navbar');
    const headerAboveNav = mainNavbar ? mainNavbar.previousElementSibling : null;
    let initialOffset = 0;

    function calculateInitialOffset() {
      if (headerAboveNav) initialOffset = headerAboveNav.offsetTop + headerAboveNav.offsetHeight;
      else if (mainNavbar) initialOffset = mainNavbar.offsetTop;
    }
    function handleStickyNavbar() {
      if (window.innerWidth < 768 || !mainNavbar) {
        if(mainNavbar) mainNavbar.classList.remove('sticky-nav');
        document.body.style.paddingTop = '0px';
        return;
      }
      if (window.pageYOffset > initialOffset) {
        if(!mainNavbar.classList.contains('sticky-nav')){
          document.body.style.paddingTop = mainNavbar.offsetHeight + 'px';
          mainNavbar.classList.add('sticky-nav');
        }
      } else {
        if(mainNavbar.classList.contains('sticky-nav')){
          mainNavbar.classList.remove('sticky-nav');
          document.body.style.paddingTop = '0px';
        }
      }
    }
    window.addEventListener('load', () => { calculateInitialOffset(); handleStickyNavbar(); });
    window.addEventListener('scroll', handleStickyNavbar);
    window.addEventListener('resize', () => { calculateInitialOffset(); handleStickyNavbar(); });
  }

  function initMobileMenu(){
    const openMobileMenuBtn = document.getElementById('openMobileMenu');
    const mobileMenu = document.getElementById('mobileMenu');
    if (openMobileMenuBtn && mobileMenu) {
      openMobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('active'); });
      mobileMenu.querySelectorAll('.mobile-menu-link').forEach(link => {
        link.addEventListener('click', () => { mobileMenu.classList.remove('active'); });
      });
    }
  }

  /* =========================
     12) INIT (DOMContentLoaded)
     ========================= */
  document.addEventListener('DOMContentLoaded', function() {
    // AOS si está disponible
    if (window.AOS && typeof AOS.init === 'function') {
      AOS.init({ once: true });
    }

// Modal WhatsApp Lead Capture
    const waModal = document.getElementById('whatsappLeadModal');
    const waModalContent = document.getElementById('whatsappLeadModalContent');
    // CONNECT NEW SIDE BUTTON:
    const openWaDesktop = document.getElementById('openWhatsappLeadModalDesktop'); 
    // We remove the mobile floating button we previously used to avoid conflicts,
    // but keep this line for logic consistency. If you have a different mobile button, update here.
    const openWaMobile  = document.getElementById('openWhatsappLeadModalMobile'); 
    const closeWa       = document.getElementById('closeWhatsappLeadModal');
    const waForm        = document.getElementById('whatsapp-lead-form');

    // Initialization for animation
    if (waModal && waModalContent) {
        waModalContent.style.transform = 'translateY(100%)';
        waModal.classList.add('initial-hidden');
    }
    
    // Modal Open/Close Functions
    function openWaModal() {
        if (!waModal || !waModalContent) return;
        waModal.classList.remove('hidden', 'initial-hidden');
        setTimeout(() => {
            waModal.classList.remove('opacity-0');
            waModalContent.style.transform = window.innerWidth >= 640 ? 'translateY(0%)' : 'translateY(0)';
        }, 50);
        if (window.lucide && typeof window.lucide.createIcons === 'function') {
           window.lucide.createIcons();
        }
    }
    
    function closeWaModal() {
        if (!waModal || !waModalContent) return;
        waModalContent.style.transform = window.innerWidth >= 640 ? 'translateY(0%)' : 'translateY(100%)';
        waModal.classList.add('opacity-0');
        setTimeout(() => { waModal.classList.add('hidden', 'initial-hidden'); }, 300);
    }


    // Assign Events
    openWaDesktop?.addEventListener('click', openWaModal);
    openWaMobile ?.addEventListener('click', openWaModal); // (if you decide to use a mobile button later)
    closeWa      ?.addEventListener('click', closeWaModal);
    waModal?.addEventListener('click', (e) => { 
        if (e.target === waModal) closeWaModal(); 
    });


    // Modal Agenda
    const agendaModal = document.getElementById('agendaModal');
    const agendaModalContent = document.getElementById('agendaModalContent');
    if (agendaModal && agendaModalContent) {
      agendaModal.classList.add('initial-hidden');
      agendaModalContent.style.transform = 'translateX(100%)';
    }
    const openAgendaModalDesktop = document.getElementById('openAgendaModalDesktop');
    const openAgendaModalMobile  = document.getElementById('openAgendaModalMobile'); 
    const closeAgendaModal       = document.getElementById('closeAgendaModal');

    openAgendaModalDesktop?.addEventListener('click', () => openModal(agendaModal, agendaModalContent));
    openAgendaModalMobile ?.addEventListener('click', () => openModal(agendaModal, agendaModalContent));
    closeAgendaModal      ?.addEventListener('click', () => closeModal(agendaModal, agendaModalContent));
    agendaModal?.addEventListener('click', (e) => { if (e.target === agendaModal) closeModal(agendaModal, agendaModalContent); });

    // INICIO: CÓDIGO AÑADIDO PARA TELÉFONO
    const phoneInputs = document.querySelectorAll('input[name="phone"]');
    phoneInputs.forEach(input => {
      input.addEventListener('input', () => formatPhoneNumber(input));
    });

    // HORARIOS/ESTADO (avanzado + simple)
    renderTZLabel();
    renderHoursGrid();
    updateLiveStatus();
    if (enableBookingGlobal) {
      updateBusinessStatusSimple();
      renderFullScheduleSimple();
    }
    setInterval(() => { renderHoursGrid(); updateLiveStatus(); if (enableBookingGlobal) updateBusinessStatusSimple(); }, 60*1000);

    // Formularios
    const contactForm = document.getElementById('contact-form');
    contactForm?.addEventListener('submit', (e) => {
      e.preventDefault();
      processFormSubmission(contactForm, document.getElementById('form-message'));
    });
    const modalContactForm = document.getElementById('modal-contact-form');
    modalContactForm?.addEventListener('submit', (e) => {
      e.preventDefault();
      processFormSubmission(modalContactForm, document.getElementById('modal-form-message'), () => {
        setTimeout(() => closeModal(agendaModal, agendaModalContent), 2000);
      });
    });

    // Galería
    initMainGallery();

    // Toggle ciudades
    initToggleCities();

    // Carrusel reviews
    initReviewsCarousel();

    // Sticky + menú móvil
    initStickyNavbar();
    initMobileMenu();

    // Lucide (si existe)
    if (window.lucide && typeof window.lucide.createIcons === 'function') {
      window.lucide.createIcons();
    }
  });

})();
</script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Inicializa Lucide
    if (window.lucide?.createIcons) lucide.createIcons();

    const openBtn  = document.getElementById('openMobileMenu');
    const closeBtn = document.getElementById('closeMobileMenu');
    const menu     = document.getElementById('mobileMenu');

    const openMenu = () => { menu.classList.remove('hidden'); document.body.classList.add('overflow-hidden'); };
    const closeMenu = () => { menu.classList.add('hidden'); document.body.classList.remove('overflow-hidden'); };

    openBtn?.addEventListener('click', openMenu);
    closeBtn?.addEventListener('click', closeMenu);

    // Cierra al tocar enlaces del menú
    menu?.querySelectorAll('.mobile-menu-link').forEach(a => a.addEventListener('click', closeMenu));
  });
  
  document.addEventListener('DOMContentLoaded', function() {

    // ⛔ Lista de extensiones de dominio (TLDs) que NO quieres permitir.
    const BLOCKED_DOMAINS = [
        'ru', 'tk', 'cn', 'co', 've', 'su', 'gq', 'cf', 'ml', 'pw', 'ws', 'in', 'br',
    'xyz', 'icu', 'top', 'site', 'online', 'bid', 'win', 'loan', 'trade', 'review',
    'link', 'click', 'download', 'club', 'pro', 'wang', 'shop', 'world', 'app',
    'science', 'date', 'party', 
        // Agrega otros TLDs aquí, en minúsculas.
    ];
    
    // --- UTILITIES ---

    /**
     * @param {string} email El valor del campo de email.
     * @param {string[]} blockedDomains Lista de TLDs a bloquear.
     * @returns {string|null} Mensaje de error si la validación falla, o null si es válido.
     */
    function validateCustomEmail(email, blockedDomains) {
        // Expresión Regular (RegEx) para un formato básico (a@b.c)
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 

        // 1. Validación de formato estándar (por ejemplo, si falta el .com)
        if (!regex.test(email)) {
            return "❌ Incorrect Fomat: Must be name@company.com";
        }

        // 2. Validación de extensión (TLD) bloqueada
        const parts = email.split('.');
        if (parts.length > 1) {
            const tld = parts[parts.length - 1]; 
            
            if (blockedDomains.includes(tld)) {
                return `⛔ The Domain ".${tld}" is not valid`;
            }
        }

        return null; // El email es válido
    }

    /**
     * Asigna un mensaje de error visual al campo de email.
     * @param {HTMLElement} input El campo de email.
     * @param {string|null} message El mensaje de error (o null para limpiar).
     */
    function displayInputError(input, message) {
        let errorEl = input.nextElementSibling; // Busca el span de error que creamos
        
        // Si no existe, lo crea dinámicamente
        if (!errorEl || !errorEl.classList.contains('email-error-message')) {
            errorEl = document.createElement('span');
            errorEl.className = 'email-error-message block mt-1 text-sm font-semibold text-red-600';
            input.parentNode.insertBefore(errorEl, input.nextElementSibling);
        }

        if (message) {
            errorEl.textContent = message;
            errorEl.classList.remove('hidden');
            input.classList.add('border-red-500', 'ring-red-500'); // Resaltar el campo
            input.classList.remove('focus:ring-[var(--brand-accent)]');
        } else {
            errorEl.classList.add('hidden');
            input.classList.remove('border-red-500', 'ring-red-500');
            input.classList.add('focus:ring-[var(--brand-accent)]'); // Restaurar el estilo de foco
        }
    }


    // --- INICIALIZACIÓN ---
    
    // Selecciona TODOS los formularios con la clase .js-lead-form (principal, modal, popup)
    const forms = document.querySelectorAll('.js-lead-form'); 

    forms.forEach(form => {
        const emailInput = form.querySelector('input[name="email"]');
        const formMessage = form.querySelector('#form-message');
        
        if (!emailInput) return; 

        // 🟢 EVENTO 1: Validación Inmediata (al perder el foco del campo)
        emailInput.addEventListener('blur', function() {
            const emailValue = emailInput.value.trim().toLowerCase();
            const error = validateCustomEmail(emailValue, BLOCKED_DOMAINS);
            
            displayInputError(emailInput, error);
        });

        // 🟢 EVENTO 2: Validación Final (al intentar enviar el formulario)
        form.addEventListener('submit', function(e) {
            
            // Limpiar mensaje genérico de servidor anterior
            if (formMessage) {
                formMessage.classList.add('hidden');
                formMessage.classList.remove('text-green-600', 'text-red-600');
            }

            const emailValue = emailInput.value.trim().toLowerCase();
            const validationError = validateCustomEmail(emailValue, BLOCKED_DOMAINS);

            if (validationError) {
                e.preventDefault(); // Detener el envío
                
                // Mostrar error localizado en el campo
                displayInputError(emailInput, validationError);
                
                // Mostrar error global en la sección de mensajes del formulario (para móvil o si el error de campo es difícil de ver)
                if (formMessage) {
                    formMessage.textContent = "🛑 Please correct the email field before submitting.";
                    formMessage.classList.remove('hidden');
                    formMessage.classList.add('text-red-600');
                }

                emailInput.focus();
                return false; 
            }
            
            // Si es válido, limpiar cualquier error visual residual.
            displayInputError(emailInput, null);

            // Si llegamos aquí, se permite que el proceso de envío de formulario original (CRM fetch) continúe.
        });
    });

    // Esta función debe existir en tu código, ya que tu HTML la llama en un formulario. 
    // Si no está definida, los formularios del modal/popup fallarán.
    if (typeof window.processFormSubmission !== 'function') {
        window.processFormSubmission = function(formElement, messageElement, onSuccessCallback) {
            // (Tu lógica original de 'fetch' al CRM debe estar aquí, o en el script que reemplazaremos)
            // Ya que no tengo el fetch aquí, simulo el éxito. 
            // Deja que el código original en tu archivo se encargue de esto, no lo redefinas aquí.
        };
    }
});
// REEMPLAZA LA FUNCIÓN ANTIGUA CON ESTA
async function processFormSubmission(formElement, messageElement, onSuccessCallback) {
    if (!formElement || !messageElement) return;
    
    // Muestra un mensaje de "Enviando..."
    messageElement.textContent = 'Sending...';
    messageElement.className = 'mt-4 text-center text-sm font-semibold text-brand-primary';
    messageElement.classList.remove('hidden');

    try {
        const formData = new FormData(formElement);
        const data = Object.fromEntries(formData.entries());

        // Normaliza los nombres de los campos si es necesario
        if (data.full_name && !data.name) data.name = data.full_name;
        if (data.phone_number && !data.phone) data.phone = data.phone_number;
        if (data.service_type && !data.service) data.service = data.service_type;

        const response = await fetch('submit_lead.php', { // Asumimos que submit_lead.php está en la misma carpeta
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        const result = await response.json();

        if (!response.ok || result.status !== 'success') {
            throw new Error(result.message || `Server Error: ${response.status}`);
        }

        // --- ¡AQUÍ ESTÁ LA MAGIA! ---
        // Si el envío fue exitoso, preparamos y ejecutamos la redirección.
        messageElement.textContent = 'Success! Redirecting...';
        messageElement.classList.replace('text-brand-primary', 'text-green-600');
        
        const params = new URLSearchParams({
            name: data.name || '',
            service: data.service || '',
        });
        
        // Espera un segundo para que el usuario vea el mensaje de éxito y luego redirige.
        setTimeout(() => {
            window.location.href = `thank-you.php?${params.toString()}`;
        }, 1000);

        // Llama a cualquier función adicional si es necesario (como cerrar un modal)
        if (onSuccessCallback) onSuccessCallback();

    } catch (error) {
        messageElement.textContent = error.message;
        messageElement.classList.replace('text-brand-primary', 'text-red-600');
    }
}
</script>


<script>
(function() {
    // === CONFIGS de WhatsApp (Ajusta estos valores) ===
    const WA_NUMBER = '<?php echo WHATSAPP_NUMBER_CLICK; ?>'; 
    // Mensaje que aparecerá en el chat de WhatsApp. [NAME] será reemplazado.
    const WA_MESSAGE = 'Hello, my name is [NAME] and I am contacting you for a quote from the <?php echo BUSINESS_NAME; ?> website.'; 
    // URL donde se envía el lead (Debe ser la ruta a tu submit_lead.php)
    const SUBMIT_URL = '/submit_lead.php'; // <--- ¡IMPORTANTE! Verifica que esta ruta es correcta.

    // === ELEMENTOS DEL MODAL ===
    const waModal = document.getElementById('whatsappLeadModal');
    const waModalContent = document.getElementById('whatsappLeadModalContent');
    const openWaDesktop = document.getElementById('openWhatsappLeadModalDesktop'); 
    const closeWa = document.getElementById('closeWhatsappLeadModal');
    const waForm = document.getElementById('whatsapp-lead-form');
    const waFormMessage = document.getElementById('wa-form-message');
    
    // --- Funciones de Apertura/Cierre para MODAL CENTRADO ---
    function openWaModal() {
        if (!waModal || !waModalContent) return;
        
        waModal.classList.remove('hidden', 'initial-hidden', 'opacity-0');
        
        setTimeout(() => {
            waModal.classList.remove('opacity-0'); 
            waModalContent.classList.remove('scale-95', 'opacity-0'); 
        }, 50);

        if (window.lucide && typeof window.lucide.createIcons === 'function') {
           window.lucide.createIcons();
        }
    }
    
    function closeWaModal() {
        if (!waModal || !waModalContent) return;

        waModal.classList.add('opacity-0');
        waModalContent.classList.add('scale-95', 'opacity-0');
        
        setTimeout(() => {
            waModal.classList.add('hidden', 'initial-hidden');
            // Resetear el formulario y mensajes al cerrar
            waForm.reset();
            waFormMessage.classList.add('hidden');
        }, 300);
    }
    
    // --- Función de Envío y Redirección (Lógica de FETCH Corregida) ---
    async function handleFormSubmit(e) { /* desactivado: se usa envío nativo del formulario */ } catch(e) {}

                
                // ÉXITO: Datos guardados. Proceder a WhatsApp.
                const name = submittedData.name || 'Client';
                const msg = WA_MESSAGE.replace('[NAME]', encodeURIComponent(name));
                const whatsappURL = `https://wa.me/1${WA_NUMBER}?text=${encodeURIComponent(msg)}`;
                
                waFormMessage.textContent = '✅ Datos guardados. Abriendo chat de WhatsApp...';
                
                setTimeout(() => {
                    closeWaModal(); 
                    window.open(whatsappURL, '_blank'); 
                }, 1000);

            } else {
                // FALLO: El servidor devolvió éxito: false o un error HTTP
                waFormMessage.textContent = '❌ Error al guardar datos: ' + (result.message || 'Inténtalo de nuevo.');
                waFormMessage.classList.add('text-red-500');
            }
        } catch (error) {
            // FALLO: Error de red o en el proceso de fetch
            console.error('Fetch Error:', error);
            waFormMessage.textContent = '❌ Error de conexión. ¿Está la ruta "submit_lead.php" correcta?';
            waFormMessage.classList.add('text-red-500');
        } finally {
            submitButton.disabled = false;
        }
    }

    // --- ASIGNACIÓN DE EVENTOS ---
    document.addEventListener('DOMContentLoaded', function() {
        // Inicialización de estado y clases
        if (waModal && waModalContent) {
             waModalContent.classList.add('scale-95', 'opacity-0');
             waModal.classList.add('initial-hidden', 'opacity-0'); 
        }

        // Conectamos los eventos
        openWaDesktop?.addEventListener('click', openWaModal);
        closeWa?.addEventListener('click', closeWaModal);
        waModal?.addEventListener('click', (e) => { 
            if (e.target === waModal) closeWaModal(); 
        });

        // Conectamos el envío del formulario al nuevo manejador
        // (desactivado) waForm?.addEventListener("submit", handleFormSubmit);
    });

})();

// Asume que tus formularios tienen la clase .js-lead-form
document.querySelectorAll('.js-lead-form').forEach(form => {
    form.addEventListener('submit', async function(e) {
        // Si prefieres validación nativa, hazla aquí. Para forzar AJAX:
        e.preventDefault();

        const formMessage = form.querySelector('.form-message') || null;

        // preparas FormData
        const fd = new FormData(form);
        try {
            const resp = await fetch(form.action || window.location.href, {
                method: (form.method || 'POST').toUpperCase(),
                body: fd,
                credentials: 'same-origin',
                redirect: 'follow', // sigue 302 internamente
                headers: {
                    // opcional: indicar que aceptamos json
                    'Accept': 'application/json'
                }
            });

            // Si el servidor devolvió un 3xx y fetch siguió redirección, resp.url puede ser la final
            if (resp.ok) {
                // 1) Si la respuesta es JSON con redirect
                const contentType = resp.headers.get('content-type') || '';
                if (contentType.includes('application/json')) {
                    const data = await resp.json();
                    if (data && data.redirect) {
                        window.location.href = data.redirect;
                        return;
                    }
                    // fallback: si success true pero sin redirect, redirigimos manualmente
                    if (data && data.success) {
                        window.location.href = 'thank-you.php';
                        return;
                    }
                }

                // 2) Si no JSON, pero fetch siguió una 302 a thank-you, resp.url contendrá la URL final
                if (resp.url && resp.url.includes('thank')) {
                    window.location.href = resp.url;
                    return;
                }

                // 3) Fallback: redirigir manualmente al thank-you con el origin si existe
                const origin = fd.get('form_origin') || '';
                window.location.href = 'thank-you.php' + (origin ? ('?from='+encodeURIComponent(origin)) : '');
                return;
            } else {
                // http status >= 400
                const txt = await resp.text().catch(()=>null);
                if (formMessage) {
                    formMessage.classList.remove('hidden');
                    formMessage.textContent = 'Ocurrió un error al enviar: ' + (txt || resp.statusText);
                } else {
                    console.error('Error al enviar form:', resp.status, resp.statusText, txt);
                }
            }
        } catch (err) {
            console.error('Fetch error:', err);
            if (formMessage) {
                formMessage.classList.remove('hidden');
                formMessage.textContent = 'Error de red. Intenta nuevamente.';
            }
        }
    });
});

</script>
<script>
(function () {
  // === Elements ===
  const waModal        = document.getElementById('whatsappLeadModal');
  const waModalContent = document.getElementById('whatsappLeadModalContent');
  const openWaDesktop  = document.getElementById('openWhatsappLeadModalDesktop');
  const openWaMobile   = document.getElementById('openWhatsappLeadModalMobile');
  const closeWa        = document.getElementById('closeWhatsappLeadModal');
  const waForm         = document.getElementById('whatsapp-lead-form');

  // === Open / Close (only modal behavior) ===
  function openWaModal() {
    if (!waModal || !waModalContent) return;
    waModal.classList.remove('hidden', 'initial-hidden', 'opacity-0');
    setTimeout(() => {
      waModal.classList.remove('opacity-0');
      waModalContent.classList.remove('scale-95', 'opacity-0');
    }, 50);
    if (window.lucide && typeof window.lucide.createIcons === 'function') {
      window.lucide.createIcons();
    }
  }

  function closeWaModal() {
    if (!waModal || !waModalContent) return;
    waModal.classList.add('opacity-0');
    waModalContent.classList.add('scale-95', 'opacity-0');
    setTimeout(() => {
      waModal.classList.add('hidden', 'initial-hidden');
      // reset simple (sin mensajes)
      try { document.getElementById('whatsapp-lead-form')?.reset(); } catch(e){}
    }, 300);
  }

  // === Listeners ===
  openWaDesktop && openWaDesktop.addEventListener('click', (e) => { e.preventDefault(); openWaModal(); });
  openWaMobile  && openWaMobile.addEventListener('click',  (e) => { e.preventDefault(); openWaModal(); });
  closeWa       && closeWa.addEventListener('click',       (e) => { e.preventDefault(); closeWaModal(); });
  waModal       && waModal.addEventListener('click', (e) => {
    if (e.target === e.currentTarget) closeWaModal();
  });

  // === Force native submit to submit_whastsapp.php (no fetch, no extras) ===
  if (waForm) {
    const clone = waForm.cloneNode(true);
    clone.action = 'submit_whastsapp.php';
    clone.method = 'post';
    waForm.replaceWith(clone);
  }
})();
</script>

</body>
</html>