{% extends 'base.html' %}
{% load static %}

{% block title %}Open Cloud Native Services Hub{% endblock %}

{% block content %}
<section class="section section-hero bg-primary-subtle">
  <div class="section-wrapper container mx-auto position-relative">
    <div class="section-hero-mask"></div>
    <div class="px-3 px-lg-0 pt-80 pb-120 position-relative">
      <header class="section-hero__header">
        <h1 class="section-h1 fs-40 fs-lg-64">Servala - Open Cloud Native Service Hub</h1>
        <div class="section-hero__desc">
          <p>Unlock the Power of Cloud Native Applications.</p>
          <p>Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.</p>
        </div>
        <div>
          <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:service_list' %}" role="button">Discover
            Services</a>
        </div>
      </header>
    </div>
  </div>
</section>

<section class="section">
  <div class="container mx-auto px-20 px-lg-0 pt-80 pb-40">
    <div class="">
      <header class="section__header w-100 d-flex justify-content-between align-items-center">
        <div class="section__header-text">
          <h2 class="section__header-h2">Services</h2>
          <div class="section__desc">
            <p>Explore all available Services on Servala, with new ones added regularly.</p>
          </div>
        </div>
        <div class="d-none d-lg-block">
          <a class="section__header-link" href="{% url 'services:service_list' %}">See All</a>
        </div>
      </header>
      <div class="section__grid">
        <div class="row">
          {% for service in featured_services %}
            <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
              <div class="card h-100 d-flex flex-column clickable-card" 
                   onclick="cardClicked(event, '{{ service.get_absolute_url }}')">
                <div class="card__content d-flex flex-column flex-grow-1">
                  <div class="card__header">
                    <div class="d-flex align-items-start" style="height: 100px; margin-bottom: 1rem;">
                      <div class="me-3 d-flex align-items-center" style="height: 100%;">
                        <a href="{{ service.get_absolute_url }}" class="clickable-link">
                          <img src="{{ service.logo.url }}" 
                               alt="{{ service.name }}" 
                               style="max-height: 100px; max-width: 250px; object-fit: contain;">
                        </a>
                      </div>
                    </div>
                    <h3 class="card__title">
                      <a href="{{ service.get_absolute_url }}" class="text-decoration-none clickable-link">{{ service.name }}</a>
                    </h3>
                    {% for category in service.categories.all|slice:":1" %}
                      <p class="card__subtitle">{{ category.name }}</p>
                    {% endfor %}
                  </div>
                  <div class="card__desc flex-grow-1">
                    <p>{{ service.description|safe|truncatewords:15 }}</p>
                  </div>
                </div>
              </div>
            </div>
          {% empty %}
          <div class="col-12">
            <p class="text-center">No featured services available at the moment.</p>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="page-action d-lg-none">
        <a class="btn btn-outline-primary btn-lg w-100" href="{% url 'services:service_list' %}" role="button">See All</a>
      </div>
    </div>
  </div>
</section>
<section class="section">
  <div class="container mx-auto px-20 px-lg-0 pt-40 pb-40">
    <div class="">
      <header class="section__header w-100 d-flex justify-content-between align-items-center">
        <div class="section__header-text">
          <h2 class="section__header-h2">Cloud Providers</h2>
          <div class="section__desc">
            <p>Explore all available Cloud Providers on Servala, with new ones added regularly.</p>
          </div>
        </div>
        <div class="d-none d-lg-block">
          <a class="section__header-link" href="{% url 'services:provider_list' %}">See All</a>
        </div>
      </header>
      <div class="section__grid">
        <div class="row">
          {% for provider in featured_providers %}
            <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
              <div class="card h-100 d-flex flex-column clickable-card" 
                   onclick="cardClicked(event, '{{ provider.get_absolute_url }}')">
                <div class="card__content d-flex flex-column flex-grow-1">
                  <div class="card__header">
                    <div class="d-flex align-items-start" style="height: 100px; margin-bottom: 1rem;">
                      <div class="me-3 d-flex align-items-center" style="height: 100%;">
                        <a href="{{ provider.get_absolute_url }}" class="clickable-link">
                          <img src="{{ provider.logo.url }}" 
                               alt="{{ provider.name }}" 
                               style="max-height: 100px; max-width: 250px; object-fit: contain;">
                        </a>
                      </div>
                    </div>
                    <h3 class="card__title">
                      <a href="{{ provider.get_absolute_url }}" class="text-decoration-none clickable-link">{{ provider.name }}</a>
                    </h3>
                  </div>
                  <div class="card__desc flex-grow-1">
                    <p>{{ provider.description|safe|truncatewords:15 }}</p>
                  </div>
                </div>
              </div>
            </div>
          {% empty %}
            <div class="col-12">
              <p class="text-center">No featured provider available at the moment.</p>
            </div>
          {% endfor %}
        </div>
      </div>
      <div class="page-action d-lg-none">
        <a class="btn btn-outline-primary btn-lg w-100" href="{% url 'services:provider_list' %}" role="button">See All</a>
      </div>
    </div>
  </div>
</section>
<section class="section">
  <div class="container mx-auto px-20 px-lg-0 pt-40 pb-80">
    <div class="">
      <header class="section__header w-100 d-flex justify-content-between align-items-center">
        <div class="section__header-text">
          <h2 class="section__header-h2">Consulting Partners</h2>
          <div class="section__desc">
            <p>Explore all available Consulting Partners on Servala, with new ones added regularly.</p>
          </div>
        </div>
        <div class="d-none d-lg-block">
          <a class="section__header-link" href="{% url 'services:partner_list' %}">See All</a>
        </div>
      </header>
      <div class="section__grid">
        <div class="row">
          {% for partner in featured_partners %}
            <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
              <div class="card h-100 d-flex flex-column clickable-card" 
                   onclick="cardClicked(event, '{{ partner.get_absolute_url }}')">
                <div class="card__content d-flex flex-column flex-grow-1">
                  <div class="card__header">
                    <div class="d-flex align-items-start" style="height: 100px; margin-bottom: 1rem;">
                      <div class="me-3 d-flex align-items-center" style="height: 100%;">
                        <a href="{{ partner.get_absolute_url }}" class="clickable-link">
                          <img src="{{ partner.logo.url }}" 
                               alt="{{ partner.name }}" 
                               style="max-height: 100px; max-width: 250px; object-fit: contain;">
                        </a>
                      </div>
                    </div>
                    <h3 class="card__title">
                      <a href="{{ partner.get_absolute_url }}" class="text-decoration-none clickable-link">{{ partner.name }}</a>
                    </h3>
                  </div>
                  <div class="card__desc flex-grow-1">
                    <p>{{ partner.description|safe|truncatewords:15 }}</p>
                  </div>
                </div>
              </div>
            </div>
          {% empty %}
            <div class="col-12">
              <p class="text-center">No featured partner available at the moment.</p>
            </div>
          {% endfor %}
        </div>
      </div>
      <div class="page-action d-lg-none">
        <a class="btn btn-outline-primary btn-lg w-100" href="{% url 'services:partner_list' %}" role="button">See All</a>
      </div>
    </div>
  </div>
</section>
<section class="section bg-primary-subtle">
  <div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
    <div class="row">
      <div class="col-12 col-lg-4 mb-30 mb-lg-0">
        <div class="section-logo mx-auto">
          <img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Servala Icon Logo">
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <header class="section-primary__header">
          <h2 class="section-h1 fs-40 fs-lg-60">Servala - Open Cloud Native Service Hub</h2>
          <div class="section-primary__desc">
            <p>Servala connects businesses, developers, and cloud service providers on one unique hub with secure, scalable, and easy-to-use cloud-native services.</p>
            <p>Discover:</p>
          </div>
          <div>
            <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:service_list' %}" role="button">Services</a>
            <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:provider_list' %}" role="button">Cloud Providers</a>
            <a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0 w-100 w-md-auto" href="{% url 'services:partner_list' %}" role="button">Consulting Partners</a>
          </div>
        </header>
      </div>
    </div>
  </div>
</section>
<section class="section">
  <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
    <header class="section__header text-center mb-30">
      <h2 class="section-heading-h2 fs-40 fs-lg-64">Frequenty Asked Questions</h2>
      <div class="section__desc fw-medium fs-20 w-lg-40 mx-auto">
        <p>Still need more information? Read our FAQ or contact us to learn more about the Servala.</p>
      </div>
    </header>
    <div x-data="{ open: null }" class="section__faq">
      {% for faq in websitefaqs %}
      <div class="section__faq-item">
        <div class="faq-item__header">
          <button @click="open === {{ faq.id }} ? open = null : open = {{ faq.id }}"
            class="faq-item__button w-100 d-flex justify-content-between align-items-center px-0" type="button">
            <span class="faq-item__title fw-semibold mb-0">{{ faq.question }}</span>
            <div class="faq-icon">
              <svg width="16" height="16" class="svg-icon transition-all duration-200"
                :class="{'svg-active rotate-180': open === 0 }" viewBox="0 0 16 16" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M1.64592 4.64592C1.69236 4.59935 1.74754 4.56241 1.80828 4.5372C1.86903 4.512 1.93415 4.49902 1.99992 4.49902C2.06568 4.49902 2.13081 4.512 2.19155 4.5372C2.2523 4.56241 2.30747 4.59935 2.35392 4.64592L7.99992 10.2929L13.6459 4.64592C13.6924 4.59943 13.7476 4.56255 13.8083 4.53739C13.8691 4.51223 13.9342 4.49929 13.9999 4.49929C14.0657 4.49929 14.1308 4.51223 14.1915 4.53739C14.2522 4.56255 14.3074 4.59943 14.3539 4.64592C14.4004 4.6924 14.4373 4.74759 14.4624 4.80833C14.4876 4.86907 14.5005 4.93417 14.5005 4.99992C14.5005 5.06566 14.4876 5.13076 14.4624 5.1915C14.4373 5.25224 14.4004 5.30743 14.3539 5.35392L8.35392 11.3539C8.30747 11.4005 8.2523 11.4374 8.19155 11.4626C8.1308 11.4878 8.06568 11.5008 7.99992 11.5008C7.93415 11.5008 7.86903 11.4878 7.80828 11.4626C7.74754 11.4374 7.69236 11.4005 7.64592 11.3539L1.64592 5.35392C1.59935 5.30747 1.56241 5.2523 1.5372 5.19155C1.512 5.13081 1.49902 5.06568 1.49902 4.99992C1.49902 4.93415 1.512 4.86903 1.5372 4.80828C1.56241 4.74754 1.59935 4.69236 1.64592 4.64592Z"
                  fill="#3C4043" />
              </svg>
            </div>
          </button>
        </div>
        <div x-cloak x-show="open === {{ faq.id }}" class="pt-2" x-collapse>
          <p class="faq-description lh-base">{{ faq.answer|safe }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}