<?php require_once 'db/business_config.php'; ?>
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Share Your Experience | <?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'; ?>

<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">
<script src="https://unpkg.com/lucide@latest"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

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

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

<style>
  .hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)), url('img/bg01.webp');
    background-size: cover;
    background-position: center;
  }
</style>
</head>
<body class="bg-white">

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

<section class="hero-bg px-6 py-16 md:py-24">
  <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
    
    <div class="text-center md:text-left text-white">
      <div class="flex justify-center md:justify-start mb-8">
        <img src="img/BusinessLogo.webp" alt="FlowClean Cleaning Services Logo" class="h-16 bg-white/90 p-2 rounded-lg shadow-md">
      </div>
      
      <div class="inline-flex items-center justify-center gap-3 px-4 py-2 rounded-xl bg-black/40 text-[var(--brand-secondary)] font-extrabold shadow-lg mb-6 ring-1 ring-white/20">
        <i data-lucide="sparkles" class="w-5 h-5"></i>
        <span class="tracking-wider">Thank You For Your Trust</span>
      </div>

      <h1 class="font-black uppercase leading-tight">
        <span class="block text-4xl sm:text-4xl">PLEASE SHARE</span>
        <span class="block text-4xl sm:text-6xl text-[var(--brand-secondary)]"> YOUR EXPERIENCE</span>
      </h1>
      
      <p class="mt-4 text-lg text-white/90 max-w-lg mx-auto md:mx-0">
        <b>Loved our service?</b> Your 2-minute review helps our local business grow and guides others to a service they can trust.
      </p>
    </div>

    <div class="bg-white rounded-2xl shadow-2xl p-8 text-[var(--brand-primary)]">
      <h2 class="text-2xl font-extrabold text-center">Leave A Review In 60 Seconds</h2>
      <p class="text-center text-sm text-gray-600 mb-6">Choose Your Preferred Platform Below</p>
      
      <div class="space-y-4">
        <a href="https://google.com/search?q=FlowClean+Reviews" target="_blank" rel="noopener" class="w-full bg-red-600 text-white font-extrabold text-lg uppercase py-4 rounded-lg shadow-lg hover:brightness-110 transition-transform active:scale-95 flex items-center justify-center gap-3">
          <i data-lucide="star" class="w-5 h-5"></i>
          <span>REVIEW ON GOOGLE</span>
        </a>
        <a href="https://facebook.com/FlowClean/reviews" target="_blank" rel="noopener" class="w-full bg-blue-600 text-white font-extrabold text-lg uppercase py-4 rounded-lg shadow-lg hover:brightness-110 transition-transform active:scale-95 flex items-center justify-center gap-3">
          <i data-lucide="thumbs-up" class="w-5 h-5"></i>
          <span>REVIEW ON FACEBOOK</span>
        </a>
        <a href="https://yelp.com/biz/FlowClean" target="_blank" rel="noopener" class="w-full bg-gray-800 text-white font-extrabold text-lg uppercase py-4 rounded-lg shadow-lg hover:brightness-110 transition-transform active:scale-95 flex items-center justify-center gap-3">
            <i data-lucide="message-square" class="w-5 h-5"></i>
          <span>REVIEW ON YELP</span>
        </a>
      </div>

      <div class="mt-6 text-center">
        <p class="text-sm font-bold text-gray-700">Your Feedback Makes All The Difference!</p>
      </div>
    </div>
  </div>
</section>

<section id="why-it-matters"
           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">
        A Small Action, A Big Impact
      </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">Your Voice, Our Motivation</span>
        <span class="block text-[var(--brand-secondary)] text-4xl sm:text-5xl md:text-6xl">How Your Review Helps</span>
      </h2>

      <p class="max-w-3xl mx-auto mt-6 text-lg text-white/90">
        More than just stars, your feedback shapes our service and helps your neighbors make confident decisions. Here’s the difference you make.
      </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)]" 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">
          <i data-lucide="clock" class="w-10 h-10 text-[var(--brand-primary)]"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">It Takes 2 Minutes</h3>
        <p>Quickly share what you liked about our service on your favorite platform.</p>
      </div>

      <div class="text-center p-6 rounded-2xl shadow-lg bg-white text-[var(--brand-primary)]" 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">
          <i data-lucide="users" class="w-10 h-10 text-[var(--brand-primary)]"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">You Help A Neighbor</h3>
        <p>Your honest experience helps others in the community choose a reliable service.</p>
      </div>

      <div class="text-center p-6 rounded-2xl shadow-lg bg-white text-[var(--brand-primary)]" 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">
          <i data-lucide="clipboard-check" class="w-10 h-10 text-[var(--brand-primary)]"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">You Guide Our Team</h3>
        <p>Positive feedback motivates our team and helps us know what we're doing right.</p>
      </div>

      <div class="text-center p-6 rounded-2xl shadow-lg bg-white text-[var(--brand-primary)]" 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">
          <i data-lucide="rocket" class="w-10 h-10 text-[var(--brand-primary)]"></i>
        </div>
        <h3 class="font-extrabold tracking-wide text-xl mb-3">You Fuel Our Growth</h3>
        <p>As a local business, your reviews are essential for us to grow and serve more people.</p>
      </div>
    </div>
  </div>
</section>

  <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">
        Join Our Wall Of
      </span>
      <span class="block text-[var(--brand-accent)] text-4xl sm:text-5xl md:text-6xl">
        Happy Customers
      </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>

</section>

     <section id="final-cta" class="relative z-[30] isolate bg-black 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 text-center">
    <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">
      Ready To Help Us?
    </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 Share Your Story?</span>
      <span class="block text-[var(--brand-secondary)] text-4xl sm:text-5xl md:text-6xl">Pick Your Favorite Platform</span>
    </h2>

    <p class="max-w-3xl mt-6 text-lg md:text-xl text-white/90 mx-auto">
      We truly appreciate you taking a moment to share your experience. Click one of the buttons below to get started.
    </p>

    <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
      <a href="https://google.com/search?q=FlowClean+Reviews" target="_blank" rel="noopener" class="group flex flex-col items-center justify-center gap-2 px-8 py-5 rounded-2xl font-extrabold text-white bg-red-600/90 hover:bg-red-600 shadow-lg transition text-center">
        <i data-lucide="star" class="w-8 h-8"></i>
        <span>Leave a Review on<br><b>Google</b></span>
      </a>
      <a href="https://facebook.com/FlowClean/reviews" target="_blank" rel="noopener" class="group flex flex-col items-center justify-center gap-2 px-8 py-5 rounded-2xl font-extrabold text-white bg-blue-600/90 hover:bg-blue-600 shadow-lg transition text-center">
        <i data-lucide="thumbs-up" class="w-8 h-8"></i>
        <span>Leave a Review on<br><b>Facebook</b></span>
      </a>
      <a href="https://yelp.com/biz/FlowClean" target="_blank" rel="noopener" class="group flex flex-col items-center justify-center gap-2 px-8 py-5 rounded-2xl font-extrabold text-white bg-gray-800/90 hover:bg-gray-800 shadow-lg transition text-center sm:col-span-2 lg:col-span-1">
        <i data-lucide="message-square" class="w-8 h-8"></i>
        <span>Leave a Review on<br><b>Yelp</b></span>
      </a>
    </div>

    <div class="mt-12 flex flex-wrap gap-3 text-sm justify-center">
      <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> Honest Feedback Is Valued
      </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> It's Quick & Easy
      </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> You Support A Local Business
      </span>
    </div>
  </div>
</section>

<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>
      </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>

<script>
(() => {
  /* =========================
     1) CONFIG desde PHP
     ========================= */
  const BUSINESS_TZ = "UTC";

(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(); 
        });

        // Conectamos el envío del formulario al botón CTA en el pie de página
        // (desactivado) waForm?.addEventListener("submit", handleFormSubmit);
    });

})();
    
  // 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;
    el.textContent = 'Times shown in business time';
  }

  /* =========================
     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í.
        };
    }
});

// 1. Obtener los valores a personalizar
// 'data' es la variable que debería contener los datos del formulario después de serializarlos.
const clientName = data.name || ''; 
const clientService = data.service || ''; 

// 2. Codificar los parámetros en la URL
const params = new URLSearchParams({
    name: clientName,
    service: clientService,
    // Puedes añadir más campos aquí
});

// 3. Redirigir a la página de gracias con los parámetros
window.location.href = `thank-you.php?${params.toString()}`;

// Fin de la redirección
</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);
    });

})();
</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>