{{/* 
  Usage :
  {{< features-carousel title="Vos fonctionnalités clés" >}}
  {
    "features": [
      {
        "title": "Performance",
        "titleBtn": "Performance",
        "description": "Leverage Hugo's blazing-fast build times and optimized output.",
        "badge": "Performance",
        "badgeColor": "#2563eb",
        "image": "/images/feature-1.svg",
        "buttonText": "Learn More",
        "buttonLink": "/features/performance/",
        "features": "Sub-second page loads,Optimized assets,Minimal JavaScript,CDN-ready output",
        "imagePosition": "right"
      },
    ]
  }
  {{< /features-carousel >}}
*/}}

{{ $title := .Get "title" | default "" }}
{{ $data := .Inner | transform.Unmarshal }}
{{ $background_color := .Get "background-color" }}
<section id="features-carousel" class="section{{ if not $background_color }} bg-gray-50{{ end }}" {{ if $background_color }}style="background-color:{{ $background_color }};"{{ end }}>
  <div class="container">
    {{ if $title }}
      <h1 class="text-3xl font-bold mb-4 text-center">{{ $title }}</h1>
    {{ end }}
    <div class="features-carousel__nav"></div>
    <div class="features-carousel__slides">
      {{ range $i, $f := $data.features }}
        <div class="feature" data-title-btn="{{ $f.titleBtn }}">
          {{ partial "shortcodes/feature.html" (dict
            "title" $f.title
            "titleBtn" $f.titleBtn
            "description" $f.description
            "badge" $f.badge
            "badgeColor" $f.badgeColor
            "image" $f.image
            "buttonText" $f.buttonText
            "buttonLink" $f.buttonLink
            "features" $f.features
            "imagePosition" $f.imagePosition
          ) }}
        </div>
      {{ end }}
    </div>
  </div>
</section>
<script>
  (function() {
    const carousel = document.getElementById('features-carousel');
    if (!carousel) return;
    const slides = carousel.querySelectorAll('.feature');
    const nav = carousel.querySelector('.features-carousel__nav');
    let current = 0;

    slides.forEach((slide, i) => {
      const btn = document.createElement('button');
      btn.innerText = slide.dataset.titleBtn || `Feature ${i+1}`;
      btn.onclick = () => {
        current = i;
        showSlide(current);
      };
      nav.appendChild(btn);
    });

    function showSlide(idx) {
      slides.forEach((slide, i) => {
        slide.style.display = i === idx ? 'block' : 'none';
      });
      Array.from(nav.children).forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    showSlide(current);
  })();
</script>