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

<section class="section">
  <div class="card">
    <div class="badges">
      <span class="badge">Enquiries</span>
      <span class="badge">Confidential</span>
      <span class="badge">Fast response</span>
    </div>
    <h1 class="h1" style="margin-top:10px">Contact Us</h1>
<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>
    <p class="p">
      Get in touch to discuss care needs, partnerships, event medical coverage, or caregiver recruitment.
      We respond promptly and confidentially.
    </p>
  </div>
</section>

<section class="section">
  <div class="grid grid-2">
    <div class="card">
      <div class="card-title">
        <div class="icon">☎️</div>
        <div>
          <h2 class="h2" style="margin:0">Direct Contact</h2>
          <div class="small">Speak with a care coordinator</div>
        </div>
      </div>

      <div class="sep"></div>

      <div class="grid" style="gap:10px">
        <div class="card soft card-tight">
          <div class="small"><b>Phone</b></div>
          <div style="font-weight:900;font-size:18px">{{ SITE_PHONE }}</div>
        </div>
        <div class="card soft card-tight">
          <div class="small"><b>Email</b></div>
          <div style="font-weight:900;font-size:18px">{{ SITE_EMAIL }}</div>
        </div>
        <div class="card soft card-tight">
          <div class="small"><b>Office hours</b></div>
          <div style="font-weight:900">{{ SITE_OFFICE_HOURS }}</div>
        </div>
        <div class="card soft card-tight">
          <div class="small"><b>Coverage</b></div>
          <div style="font-weight:900">{{ SITE_COVERAGE }}</div>
        </div>
      </div>

      <div class="sep"></div>

      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a class="btn btn-accent" href="https://wa.me/{{ SITE_WHATSAPP }}?text=Hello%20Holistic%20Caregiver%20Services%20Ltd%2C%20I%20want%20to%20request%20care." target="_blank">Chat on WhatsApp</a>
        <a class="btn btn-primary" href="tel:{{ SITE_PHONE|cut:' ' }}">Call Now</a>
        <a class="btn" href="{% url 'website:services' %}">View services</a>
      </div>

      <div class="sep"></div>

      <div class="notice">
        Non-emergency notice: If this is an emergency, please call your local emergency services immediately.
      </div>

      <div class="sep"></div>

      <div>
        <div class="card-title">
          <div class="icon">📍</div>
          <div>
            <h3 class="h3" style="margin:0">Map</h3>
            <div class="small">Paste your Google Maps embed iframe here</div>
          </div>
        </div>
        <div class="sep"></div>
        <div class="card soft" style="border-style:dashed">
          <div class="small">Map placeholder (designer can update)</div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="service-media" style="margin-bottom:12px">
  <img class="ph" src="{% static "website/img/services/home_nursing_photo.jpg" %}" alt="Care">
  <img class="ill" src="{% static "website/img/services/home_nursing_illustration.svg" %}" alt="Care">
</div>
<div class="card-title">
        <div class="icon">📝</div>
        <div>
          <h2 class="h2" style="margin:0">Enquiry Form</h2>
          <div class="small">Tell us what you need. We’ll respond promptly.</div>
        </div>
      </div>

      <div class="sep"></div>

      <form method="post">
        {% csrf_token %}
        {% for field in form %}
          <label class="label">{{ field.label }}</label>
          {{ field }}
          {% for error in field.errors %}<div class="help" style="color:#b91c1c;font-weight:800">{{ error }}</div>{% endfor %}
        {% endfor %}

        <div class="sep"></div>

        <div style="display:flex;gap:10px;flex-wrap:wrap">
          <button class="btn btn-accent" type="submit">Send Enquiry</button>
          <a class="btn" href="https://wa.me/{{ SITE_WHATSAPP }}?text=Hello%20Holistic%20Caregiver%20Services%20Ltd%2C%20I%20want%20to%20make%20an%20enquiry." target="_blank">Quick WhatsApp</a>
        </div>

        <div class="help" style="margin-top:10px">
          We do not exaggerate medical claims. Services are delivered professionally, ethically, and confidentially.
        </div>
      </form>
    </div>
  </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>