{% extends "base.html" %}
{% import "macros/image.html" as image %}

{% block content %}

{# ───────── Carousel ───────── #}
<div id="x-corp-carousel" class="carousel slide hero-slide" data-ride="carousel">
  <ol class="carousel-indicators">
    {% for slide in section.extra.slides %}
      <li data-target="#x-corp-carousel"
          data-slide-to="{{ loop.index0 }}"
          class="{% if loop.first %}active{% endif %}"></li>
    {% endfor %}
  </ol>
  <div class="carousel-inner" role="listbox">
    {% for slide in section.extra.slides %}
      <div class="item{% if loop.first %} active{% endif %}">
        {{ image::render(src=slide.image, width=1920, alt=slide.alt) }}
        <div class="carousel-caption">
          <p>{{ slide.heading }}</p>
        </div>
      </div>
    {% endfor %}
  </div>
  <a class="left carousel-control" href="#x-corp-carousel" role="button" data-slide="prev">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#x-corp-carousel" role="button" data-slide="next">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
    <span class="sr-only">Next</span>
  </a>
</div>

{# ───────── News (loaded from content/news.md) ───────── #}
{% set news_page = get_page(path="news.md") %}
<section class="ptb-100" id="aktuelles">
  <div class="container">
    {{ news_page.content | safe }}
  </div>
</section>

{# ───────── About columns ───────── #}
<section class="ptb-100">
  <div class="container">
    <div class="row">
      {% for col in section.extra.about_columns %}
        <div class="col-md-6">{{ col.text | markdown(inline=false) | safe }}</div>
      {% endfor %}
    </div>
  </div>
</section>

{# ───────── Service grid ───────── #}
<section class="ptb-100 bg-gray">
  <div class="container">
    <h2 class="text-center">Unsere Leistungen</h2>
    <div class="row">
      {% for card in section.extra.service_cards %}
        <div class="col-md-4 col-sm-6">
          <a href="{{ card.url }}" class="service-card">
            {{ image::render(src=card.image, width=600, alt=card.title) }}
            <h3>{{ card.title }}</h3>
            <p>{{ card.description }}</p>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

{# ───────── Team preview ───────── #}
{% if section.extra.team_preview %}
<section class="ptb-100">
  <div class="container">
    <h2 class="text-center">Unser Team</h2>
    <div class="row">
      {% for member in section.extra.team_preview %}
        <div class="col-md-4 col-sm-6 text-center">
          <a href="{{ member.url }}">
            {{ image::render(src=member.image, width=400, alt=member.name) }}
            <h4>{{ member.name }}</h4>
            <p>{{ member.position }}</p>
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{# Notfall block intentionally skipped — was `published: false` in Grav. #}

{# ───────── Map ───────── #}
{# Map shortcode added in Task 20; left as a placeholder comment here. #}
{# {{ map() }} #}

{% endblock %}