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

<section class="hero">
  <div class="hero-wrap">
    <div class="hero-left">
      <div class="badges">
        <span class="badge">Professional</span>
        <span class="badge">Compassionate</span>
        <span class="badge">Confidential</span>
      </div>

      <h1 class="h1" style="margin-top:10px">Professional Home Care &amp; Nursing Services You Can Trust</h1>
      <p class="p">
        Holistic Caregiver Services Ltd delivers safe, high-quality care at home — supporting dignity,
        independence, and peace of mind for families.
      </p>

      <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
        <a class="btn btn-accent btn-sm" href="{% url 'website:care_request_step1' %}">Request Home 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">Chat on WhatsApp</a>
        <a class="btn btn-ghost" href="{% url 'website:services' %}">Explore Services</a>
      </div>

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

      <div class="chips">
        <span class="chip">Elderly &amp; Companion Care</span>
        <span class="chip">Post-hospital Recovery</span>
        <span class="chip">Personal Care Assistance</span>
        <span class="chip">Palliative Support</span>
      </div>
    </div>

    <div class="hero-right">
      <div class="kpi">
        <div class="ico">🩺</div>
        <div>
          <div class="t">Qualified care team</div>
          <div class="d">Trained nurses and caregivers with strong ethical standards.</div>
        </div>
      </div>

      <div class="kpi">
        <div class="ico">🛡️</div>
        <div>
          <div class="t">Safety &amp; confidentiality</div>
          <div class="d">Client privacy, responsible communication, and safe care delivery.</div>
        </div>
      </div>

      <div class="kpi">
        <div class="ico">📞</div>
        <div>
          <div class="t">Fast response</div>
          <div class="d">Speak with a care coordinator. Prompt support for families.</div>
        </div>
      </div>

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

<section class="section">
  <div class="card">
    <h2 class="h2">Welcome to Holistic Caregiver Services Ltd</h2>
    <p class="p">
      We are a trusted provider of professional home care and nursing services, committed to delivering compassionate,
      safe, and high-quality care in the comfort of our clients’ homes. We support individuals and families with
      personalized care that promotes dignity, independence, and overall well-being.
    </p>
  </div>
</section>

<section class="section">
  <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap">
    <div>
      <h2 class="h2">Key Services</h2>
      <p class="p">Clear, supportive services designed around client safety and comfort.</p>
    </div>
    <a class="btn" href="{% url 'website:services' %}">View all services</a>
  </div>

  <div class="grid grid-3" style="margin-top:12px">
    {% for s in services %}
      <div class="card hover">
        <div class="service-media" style="margin-bottom:12px">
  <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">Personalized care support</div>
          </div>
        </div>
        <div class="sep"></div>
        <p class="p">{{ s.short_description }}</p>
      </div>
    {% empty %}
      <div class="card">
        Add featured services in <b>Admin → Services</b>. Tick <b>is_featured</b> to show them here.
      </div>
    {% endfor %}
  </div>
</section>

<section class="section">
  <div class="card">
    <h2 class="h2">Why Choose Us</h2>
    <div class="grid grid-2" style="margin-top:12px">
      <div class="card soft card-tight">
        <div class="card-title">
          <div class="icon">✅</div>
          <h3 class="h3">Vetted caregivers</h3>
        </div>
        <p class="p">Care delivered by qualified, ethical, and well-supervised staff.</p>
      </div>
      <div class="card soft card-tight">
        <div class="card-title">
          <div class="icon">🧩</div>
          <h3 class="h3">Client-centered plans</h3>
        </div>
        <p class="p">Tailored support aligned with comfort, culture, and preferences.</p>
      </div>
      <div class="card soft card-tight">
        <div class="card-title">
          <div class="icon">🔒</div>
          <h3 class="h3">Confidential &amp; safe</h3>
        </div>
        <p class="p">Privacy-first communication and safety-focused care delivery.</p>
      </div>
      <div class="card soft card-tight">
        <div class="card-title">
          <div class="icon">📍</div>
          <h3 class="h3">Reliable coordination</h3>
        </div>
        <p class="p">Clear updates, monitoring, and responsive support for families.</p>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap">
    <div>
      <h2 class="h2">Testimonials</h2>
      <p class="p">Feedback focused on care quality and compassion.</p>
    </div>
    <a class="btn" href="{% url 'website:testimonials' %}">All testimonials</a>
  </div>

  <div class="grid grid-3" style="margin-top:12px">
    {% for t in testimonials %}
      <div class="card hover">
        <p class="p" style="margin:0 0 12px">“{{ t.content }}”</p>
        <div style="font-weight:900">{{ t.name|default:"Anonymous" }}</div>
        <div class="small">{{ t.relation }}</div>
      </div>
    {% empty %}
      <div class="card">Add testimonials in <b>Admin → Testimonials</b>.</div>
    {% endfor %}
  </div>
</section>

{% endblock %}