{#
/**
 * @file
 * Theme override for Service node.
 */
#}
<article{{ attributes.addClass('node', 'node--service') }}>
  <div class="py-16 lg:py-24 bg-white dark:bg-slate-900 transition-colors">
    <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
      <!-- Back Link and Edit Button -->
      <div class="mb-8 flex items-center justify-between">
        <a href="{{ lang_path('/services') }}" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
          </svg>
          {{ 'Back to Services'|t }}
        </a>
        {% if can_edit %}
          <a href="{{ path('entity.node.edit_form', {'node': node.id}) }}" class="inline-flex items-center px-4 py-2 bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-700 rounded-lg transition-colors text-sm font-medium">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
            </svg>
            {{ 'Edit'|t }}
          </a>
        {% endif %}
      </div>

      <!-- Service Header -->
      <header class="mb-12">
        <div class="flex items-center gap-4 mb-6">
          <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm font-medium rounded-full">
            {{ 'Service'|t }}
          </span>
        </div>
        <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">{{ label }}</h1>
      </header>

      {# Image #}
      {% if node.field_service_image.entity %}
        <div class="mb-12 rounded-2xl overflow-hidden shadow-lg">
          {{ responsive_image(node.field_service_image.entity.fileuri, 'service', node.label, 'w-full h-auto object-cover') }}
        </div>
      {% endif %}

      {# Description (short intro) #}
      {% if content.field_service_description %}
        <div class="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">
          {{ content.field_service_description }}
        </div>
      {% endif %}

      {# Body (main content) #}
      {% if content.field_service_body %}
        <div class="prose prose-lg dark:prose-invert max-w-none">
          {{ content.field_service_body }}
        </div>
      {% endif %}

      <!-- Share Section -->
      <footer class="mt-16 pt-8 border-t border-gray-200 dark:border-slate-700">
        <div class="flex items-center justify-between">
          <span class="text-gray-500 dark:text-gray-400 text-sm">{{ 'Share this service'|t }}</span>
          <div class="flex items-center gap-4">
            <a href="https://twitter.com/intent/tweet?url={{ url('<current>')|url_encode }}&text={{ label|url_encode }}" target="_blank" rel="noopener" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-gray-400 hover:bg-blue-500 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ url('<current>')|url_encode }}" target="_blank" rel="noopener" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-gray-400 hover:bg-blue-600 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
            </a>
            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url('<current>')|url_encode }}&title={{ label|url_encode }}" target="_blank" rel="noopener" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-gray-400 hover:bg-blue-700 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </a>
          </div>
        </div>
      </footer>
    </div>
  </div>
</article>

<!-- Other Services Section -->
{% if other_services|length > 0 %}
<section class="py-16 lg:py-24 bg-gray-50 dark:bg-slate-800 transition-colors">
  <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">{{ 'Other Services'|t }}</h2>
      <p class="text-gray-600 dark:text-gray-300">{{ 'Explore more of our services'|t }}</p>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for service in other_services %}
        <article class="bg-white dark:bg-slate-900 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow group">
          <!-- Image -->
          <a href="{{ service.url }}" class="block relative aspect-video overflow-hidden">
            {% if service.image_uri %}
              {{ responsive_image(service.image_uri, 'service', service.image_alt ?: service.title, 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-105') }}
            {% elseif service.image_url %}
              <img src="{{ service.image_url }}" alt="{{ service.image_alt ?: service.title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
            {% else %}
              <div class="w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                <svg class="w-16 h-16 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
              </div>
            {% endif %}
            <!-- Badge -->
            <div class="absolute top-4 left-4">
              <span class="px-3 py-1 bg-white/90 dark:bg-slate-800/90 text-gray-900 dark:text-white text-xs font-medium rounded-full">
                {{ 'Service'|t }}
              </span>
            </div>
          </a>

          <!-- Content -->
          <div class="p-6">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3 line-clamp-2">
              <a href="{{ service.url }}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                {{ service.title }}
              </a>
            </h3>
            {% if service.description %}
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3">
                {{ service.description|striptags|slice(0, 150) }}{% if service.description|length > 150 %}...{% endif %}
              </p>
            {% endif %}
            <a href="{{ service.url }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium text-sm hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
              {{ 'Learn more'|t }}
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
              </svg>
            </a>
          </div>
        </article>
      {% endfor %}
    </div>

    <!-- View All Link -->
    <div class="text-center mt-16">
      <a href="{{ lang_path('/services') }}" class="inline-flex items-center justify-center px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full transition-colors">
        {{ 'View All Services'|t }}
        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
        </svg>
      </a>
    </div>
  </div>
</section>
{% endif %}
