{% extends "website/base.html" %}
{% load static %}
{% block content %}

<section class="section">
  <div class="card">
    <div class="badges">
      <span class="badge">Clinical support</span>
      <span class="badge">Compassionate care</span>
      <span class="badge">Home-based</span>
    </div>
    <h1 class="h1" style="margin-top:10px">Our Services</h1>
    <p class="p">
      We provide professional, client-centered home care tailored to each individual’s needs. Every service is delivered
      with dignity, safety, and clear communication for families.
    </p>
    <div class="view-toggle" style="margin-top:14px">
  <button id="viewPhoto" class="active" type="button">Photo view</button>
  <button id="viewIll" type="button">Illustration view</button>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
      <a class="btn btn-accent" href="{% url 'website:contact' %}">Request Care</a>
      <a class="btn btn-primary" href="https://wa.me/{{ SITE_WHATSAPP }}?text=Hello%20Holistic%20Caregiver%20Services%20Ltd%2C%20I%20want%20to%20request%20care." target="_blank">WhatsApp</a>
      <a class="btn" href="{% url 'website:care_process' %}">See care process</a>
    </div>
  </div>
</section>

<section class="section">
  <div class="grid grid-3">
    {% for s in services %}
      <div class="card hover">
        <div class="service-media">
          <img class="ph" src="{% static "website/img/services/" %}{{ s.service_key }}_photo.jpg" alt="{{ s.title }}">
          <img class="ill" src="{% static "website/img/services/" %}{{ s.service_key }}_illustration.svg" alt="{{ s.title }}">
        </div>
        <div class="card-title">
          <div class="icon">{{ s.icon }}</div>
          <div>
            <h3 class="h3">{{ s.title }}</h3>
            <div class="small">Professional support at home</div>
          </div>
        </div>

        <div class="sep"></div>
        <p class="p">{{ s.short_description }}</p>

        {% if s.who_its_for %}
          <div class="sep"></div>
          <div class="small"><b>Who it’s for:</b> {{ s.who_its_for }}</div>
        {% endif %}

        {% if s.benefits %}
          <div class="sep"></div>
          <div class="small"><b>Benefits:</b> {{ s.benefits }}</div>
        {% endif %}

        <div class="sep"></div>
        <div class="chips">
          <span class="chip">Safety-first</span>
          <span class="chip">Respect &amp; dignity</span>
          <span class="chip">Clear updates</span>
        </div>
      </div>
    {% empty %}
      <div class="card">
        Add services in <b>Admin → Services</b> to display them here.
      </div>
    {% endfor %}
  </div>
</section>

{% endblock %}


<script>
(function(){
  const body = document.body;
  const btnPhoto = document.getElementById('viewPhoto');
  const btnIll = document.getElementById('viewIll');

  function setMode(mode){
    if(mode === 'ill'){
      body.classList.add('show-illustrations');
      btnIll && btnIll.classList.add('active');
      btnPhoto && btnPhoto.classList.remove('active');
      localStorage.setItem('hc_view_mode','ill');
    } else {
      body.classList.remove('show-illustrations');
      btnPhoto && btnPhoto.classList.add('active');
      btnIll && btnIll.classList.remove('active');
      localStorage.setItem('hc_view_mode','photo');
    }
  }

  const saved = localStorage.getItem('hc_view_mode') || 'photo';
  setMode(saved);

  btnPhoto && btnPhoto.addEventListener('click', function(e){ e.preventDefault(); setMode('photo'); });
  btnIll && btnIll.addEventListener('click', function(e){ e.preventDefault(); setMode('ill'); });
})();
</script>