{% assign service = site.data.services[page.service_key] %}

{% include head.html %}
{% include header.html %}
{% include disclaimer-banner.html %}
{% include script.html %}

<!-- Offer Page Start -->
<div class="container-xxl py-5" id="offer">
  <section id="Offer" class="container-xxl py-5">
    <div class="container" data-aos="fade-up">
        <div class="row g-5 align-items-end mb-5">
          <div class="col-lg-10 wow fadeInUp" data-wow-delay="0.1s">
            <div class="border-start border-5 border-primary ps-4">
              <h6 class="text-body text-uppercase mb-2">{{service.category}}</h6>
              <h1 class="display-12 mb-0">
                {{service.hero.h1}}
              </h1>
            </div>
          </div>
        </div>
		<div class="row g-5 mb-5">
			<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
				{% for paragraph in service.description %}
					<p>{{ paragraph }}</p>
				{% endfor %}
			</div>

			<div class="col-lg-6 wow fadeInUp center" data-wow-delay="0.5s">
				<div class="position-relative overflow-hidden " style="min-height: 300px">
					<img 
						class="img-fluid"
						src="{{service.image}}"
						alt="{{service.name}}"
						style="object-fit: cover"
					/>
				</div>

				<div class="border-top mt-4 pt-4">
				  <div class="row g-4">
					{% for trust in service.trust_points %}
					{% assign delay = forloop.index0 | times: 0.2 | append: 's' %}
						<div class="col-sm-4 d-flex wow fadeIn" data-wow-delay="{{ delay }}">
							<i class="fa {{ trust.icon }} fa-2x text-primary flex-shrink-0 me-3"></i>
							<h6 class="mb-0">{{ trust.title }}</h6>
						</div>
					{% endfor %}
				  </div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-xxl py-5" id="offer">
  <div class="row g-4 justify-content-center">
  {% if page.show_tank_calculator == true %}
	{% include galico-tank-water-heater-advisor.html %}
	
  {% else %}
	
  {% for item in service.cards %}
  <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="{{ item.delay }}">
    <div class="service-item bg-light overflow-hidden h-100">
      <img 
        class="img-fluid" 
        src="/assets/img/{{ item.image }}"
        alt="{{ item.alt | default: item.title }}"
      >
      <div class="service-text position-relative text-center h-100 p-4">
        <h2 class="mb-3">{{ item.title }}</h2>
        <p>{{ item.description }}</p>
        <!-- Calendly Button (Relies on GLOBAL assets) -->
        <a 
          href="#" 
          onclick="Calendly.initPopupWidget({url: '{{ item.calendly_url }}'}); return false;"
          class="btn btn-primary py-3 px-5"
          aria-label="Book {{ item.title }}"
        >
          {{ item.cta }}
        </a>
        <!-- 
        Optional: Uncomment later if adding Google Forms toggle
        {% if item.button_type == "google-forms" %}
        <a href="{{ item.form_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary py-3 px-5">
          Request a Quote
        </a>
        {% endif %}
        -->
      </div>
    </div>
  </div>
  {% endfor %}
  {% endif %}
  </div>
</div>

<!-- Reviews Section -->
{% assign all_testimonials = site.data.testimonials | default: empty %}
{% assign service_testimonials = all_testimonials | where: "services", page.service_key %}

{% if service_testimonials.size > 0 %}
<section class="py-5 bg-white">
  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-lg-8 col-md-10">
        <h3 class="text-center mb-4">What Our Customers Say</h3>
        
        {% for testimonial in service_testimonials %}
        <div class="border rounded p-4 mb-4 shadow-sm">
		  {% if testimonial.image %}
          <div class="text-center mt-3">
            <img src="{{ '/assets/img/testimonials/' | relative_url }}{{ testimonial.image }}" alt="{{ testimonial.name }}" style="width: 120px; height: 120px; object-fit: cover;">
          </div>
          {% endif %}
          <div class="d-flex align-items-center justify-content-center mb-3 flex-wrap">
            <div class="me-3" aria-label="{{ testimonial.rating }} out of 5 stars" role="img">
              {% for i in (1..5) %}
                {% assign half_threshold = i | minus: 0.5 %}
                {% if testimonial.rating >= i %}
                  <i class="bi bi-star-fill text-warning" aria-hidden="true"></i>
                {% elsif testimonial.rating >= half_threshold %}
                  <i class="bi bi-star-half text-warning" aria-hidden="true"></i>
                {% else %}
                  <i class="bi bi-star text-warning" aria-hidden="true"></i>
                {% endif %}
              {% endfor %}
            </div>
            <small class="text-muted"><b>{{ testimonial.name }}</b> from {{ testimonial.location }}</small>
          </div>
          <p class="text-center mb-0 fst-italic">"{{ testimonial.text }}"</p>
        </div>
        {% endfor %}
        
      </div>
    </div>
  </div>
</section>
{% endif %}

<!-- Offer Page End -->
{% include footer.html %}
  </body>
</html>