<?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>Thank You <?php echo BUSINESS_NAME; ?> | <?php echo PHONE_PRIMARY; ?></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" 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>

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

<style id="site-merge">
  /* Estilos del index.php original para mantener consistencia */
  .sticky-nav{
    position:fixed; top:0; width:100%; z-index:50;
    transition:all .3s ease-in-out;
  }
  .form-input{
    @apply w-full px-4 py-3 rounded-xl ring-1 ring-black/10 bg-white text-[var(--brand-primary)]
           placeholder-black/40 shadow-sm focus:outline-none focus:ring-2
           focus:ring-[var(--brand-accent)] transition;
  }
  @media (prefers-reduced-motion: reduce){
    #gallery-section *,
    #coverage-area *,
    [data-aos]{
      transition:none !important; animation:none !important;
    }
  }
  [data-aos]{opacity:1 !important; transform:none !important;}
  #gallery-section aside .max-h-\[520px\]::-webkit-scrollbar{ width:8px; }
  #gallery-section aside .max-h-\[520px\]::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.15); border-radius:20px; }
  #gallery-section aside .max-h-\[520px\]::-webkit-scrollbar-track{ background:transparent; }
  #current-status-display.is-open{
    background-image:linear-gradient(135deg,#059669,#065f46);
  }
  #current-status-display.is-closed{
    background-image:linear-gradient(135deg,#b91c1c,#7f1d1d);
  }
  #current-status-display.is-closed .state-dot,
  #current-status-display.is-closed .state-dot>span{
    background-color:#f87171 !important;
  }
  #hours-grid .is-today{
    outline:2px solid color-mix(in srgb, var(--brand-accent) 60%, transparent);
    background:color-mix(in srgb, var(--brand-secondary) 12%, white);
    border-radius:1rem;
  }
  #hours-grid>li{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.1rem; border-radius:1rem; background:#fff;
    box-shadow:0 1px 1px rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06);
  }
  #hours-grid>li .day{ font-weight:800; color:var(--brand-primary); }
  #hours-grid>li .range{ color:color-mix(in srgb, var(--brand-primary) 78%, #0000); font-weight:600; }
  :root{
    --accent: var(--brand-accent);
    --accent-ink: color-mix(in oklab, var(--brand-primary), black 12%);
    --accent-ink-weak: color-mix(in oklab, var(--brand-primary), black 35%);
    --chip-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  .cta-primary{
    background:linear-gradient(180deg,var(--accent) 0%, color-mix(in oklab, var(--accent), black 14%) 100%);
    color:var(--accent-ink);
    border:1px solid color-mix(in oklab, var(--accent), black 22%);
    box-shadow:0 12px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55);
    height:56px; border-radius:14px; letter-spacing:.02em;
  }
  .cta-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.6); }
  .cta-primary:active{ transform:translateY(0);    box-shadow:0 10px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45); }
  #altContactBar{
    background:linear-gradient(180deg,var(--brand-secondary) 0%, color-mix(in oklab, var(--brand-secondary), black 10%) 100%);
    border-top:1px solid rgba(0,0,0,.08);
  }
  #altContactBar .bar-title{
    font-size:.70rem; letter-spacing:.22em; text-transform:uppercase;
    font-weight:900; color:var(--accent-ink-weak);
  }
  #altContactBar .bar-note{
    font-size:.70rem; letter-spacing:.04em; color:var(--accent-ink-weak);
  }
  #altContactBar .contact-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem;
  }
  @media(max-width:639px){
    #altContactBar .contact-grid{ grid-template-columns:1fr; }
  }
  .contact-chip{
    background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px;
    padding:.9rem 1rem; box-shadow:var(--chip-shadow);
    display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:64px;
  }
  .contact-chip i{ font-size:1.15rem; color:var(--accent); }
  .contact-chip .k{
    font-weight:900; text-transform:uppercase; letter-spacing:.16em;
    font-size:.65rem; line-height:1; color:var(--accent-ink-weak);
  }
  .contact-chip .v{
    font-weight:800; letter-spacing:.02em; line-height:1.15;
    color:var(--accent-ink); white-space:nowrap;
  }
  .contact-chip .sub{
    font-weight:500; opacity:.7; font-size:.8rem; letter-spacing:.01em;
  }
</style>

</head>
<body>

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

<div id="wrapper">

<header class="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 justify-between">
      <div class="flex-shrink-0">
          <a href="index.php" 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>
      <a href="index.php" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg font-bold bg-brand-secondary text-brand-primary hover:brightness-110 transition">
        <i data-lucide="arrow-left" class="w-5 h-5"></i>
        <span>Back To Home</span>
      </a>
    </div>
  </div>
          <div class="h-1.5 w-full" style="background:#07162d"></div>
</header>

<main class="flex-grow">
    
<section class="py-24 md:py-32 px-6 bg-brand-light text-center">
  <div class="max-w-4xl mx-auto">
    <p class="inline-flex items-center gap-2 px-4 py-1.5 rounded-md bg-white/60 text-[var(--brand-accent)] uppercase 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)]"
       data-aos="fade-up" id="thank-you-badge"> 
      THANK YOU, [NAME]! YOUR MESSAGE HAS BEEN SENT! 
    </p>

    <h1 class="font-extrabold leading-tight mt-4" data-aos="fade-up" data-aos-delay="100">
      <span class="block text-4xl sm:text-5xl md:text-6xl text-[var(--brand-primary)]">
        You're One Step Closer
      </span>
      <span class="block text-3xl sm:text-4xl md:text-5xl text-[var(--brand-accent)]">
        To A Sparkling Clean Space
      </span>
    </h1>

    <p class="mt-6 text-lg text-gray-700 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
      Thanks for reaching out! A member of our expert team is now reviewing your request. We'll be in touch shortly via phone or email to provide your <b>free, no-obligation quote.</b>
    </p>
  </div>
</section>


<section 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.85), rgba(0, 0, 0, 0.7)), url('img/BG-Process.webp'');">
  <div class="absolute inset-0 bg-[rgba(4,13,26,0.78)]"></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" id="thank-you-badge">
        What Happens Now [NAME]?
      </p>
      <h2 class="mt-3 font-extrabold leading-tight text-white">
        <span class="block text-4xl sm:text-5xl">Your Path To A Fresh Start</span>
      </h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left max-w-5xl mx-auto">
      <div class="group rounded-2xl bg-white/15 backdrop-blur-md ring-1 ring-white/15 p-6 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"><i data-lucide="file-check-2" class="w-6 h-6 text-[var(--brand-secondary)]"></i></span>
        <div>
          <h4 class="font-extrabold tracking-wide text-white">Review</h4>
          <p class="mt-2 text-white/90">Our specialists analyze your cleaning needs to prepare the perfect plan.</p>
        </div>
      </div>
      <div class="group rounded-2xl bg-white/15 backdrop-blur-md ring-1 ring-white/15 p-6 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"><i data-lucide="phone-call" class="w-6 h-6 text-[var(--brand-secondary)]"></i></span>
        <div>
          <h4 class="font-extrabold tracking-wide text-white">Contact</h4>
          <p class="mt-2 text-white/90">We'll call or email you to confirm the details and answer any questions.</p>
        </div>
      </div>
      <div class="group rounded-2xl bg-white/15 backdrop-blur-md ring-1 ring-white/15 p-6 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"><i data-lucide="calendar-check" class="w-6 h-6 text-[var(--brand-secondary)]"></i></span>
        <div>
          <h4 class="font-extrabold tracking-wide text-white">Quote & Schedule</h4>
          <p class="mt-2 text-white/90">You receive a transparent quote. Once approved, we lock in your service date.</p>
        </div>
      </div>
    </div>

    <div class="mt-16 pt-10 border-t border-white/20">
      <h3 class="text-2xl font-extrabold text-white tracking-wide" id="thank-you-badge">[NAME] While You Wait, Get to Know Us</h3>
      <p class="mt-2 text-white/80 max-w-2xl mx-auto">Follow us to see our transformations, get brilliant cleaning tips, and catch exclusive offers!</p>
      <div class="mt-6 flex flex-wrap items-center justify-center gap-4">
        <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer" class="group inline-flex items-center justify-center gap-3 rounded-xl px-6 py-3 bg-white/10 hover:bg-white/20 ring-1 ring-white/15 transition-all text-white font-bold">
          <i data-lucide="facebook" class="w-5 h-5 text-white/90"></i>
          Facebook
        </a>
        <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer" class="group inline-flex items-center justify-center gap-3 rounded-xl px-6 py-3 bg-white/10 hover:bg-white/20 ring-1 ring-white/15 transition-all text-white font-bold">
          <i data-lucide="instagram" class="w-5 h-5 text-white/90"></i>
          Instagram
        </a>
        <a href="https://www.google.com/" target="_blank" rel="noopener noreferrer" class="group inline-flex items-center justify-center gap-3 rounded-xl px-6 py-3 bg-white/10 hover:bg-white/20 ring-1 ring-white/15 transition-all text-white font-bold">
          <i data-lucide="link-2" class="w-5 h-5 text-white/90"></i>
          TikTok
        </a>
      </div>
    </div>
  </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-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 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>
            

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

</div>

<script>
(() => {
  /* =========================
     1) Reviews Carousel (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();
  }

  /* =========================
     2) DOMContentLoaded Init
     ========================= */
  document.addEventListener('DOMContentLoaded', function() {
    // Init AOS if available
    if (window.AOS && typeof AOS.init === 'function') {
      AOS.init({ once: true });
    }

    // Init Reviews Carousel
    initReviewsCarousel();

    // Init Lucide Icons if available
    if (window.lucide && typeof window.lucide.createIcons === 'function') {
      window.lucide.createIcons();
    }
  });

})();

document.addEventListener('DOMContentLoaded', function() {
try {
  const urlParams = new URLSearchParams(window.location.search);
  const clientName = urlParams.get('name') || '';
  const firstName = clientName ? clientName.split(' ')[0].trim() : '';
  const FIRST = (firstName || 'VALUED CUSTOMER').toUpperCase();

  // Reemplaza cualquier ocurrencia de [NAME] en nodos de texto
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);
  const nodes = [];
  while (walker.nextNode()) nodes.push(walker.currentNode);
  nodes.forEach(n => {
    if (n.nodeValue && n.nodeValue.includes('[NAME]')) {
      n.nodeValue = n.nodeValue.replaceAll('[NAME]', FIRST);
    }
  });

  // Si quieres forzar el primer badge con el formato específico:
  const badgeEl = document.getElementById('thank-you-badge');
  if (badgeEl) {
    badgeEl.textContent = `THANK YOU, ${FIRST}! YOUR MESSAGE HAS BEEN SENT!`;
  }
} catch (err) {
  console.error('Personalization error:', err);
}
    
    // Re-ejecutar Lucide y AOS por si acaso
    if (window.lucide?.createIcons) {
        window.lucide.createIcons();
    }
    if (window.AOS?.init) {
        window.AOS.init({ once: true });
    }

    // Inicializar carrusel de reseñas en esta página también
    // (Copiado de la lógica de index.php para consistencia)
    (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 = setInterval(() => next(), 3500);

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

        document.getElementById('rv-next')?.addEventListener('click', next);
        document.getElementById('rv-prev')?.addEventListener('click', prev);
    })();
});
</script>

</body>
</html>