{% extends "home/base_home.html" %}

{% block content %}
<!-- Hero Section -->
<section class="hero">
  <div>
    <h1>{{ t.home.hero_title }}</h1>
    <p>{{ t.home.hero_subtitle }}</p>

    <a href="#explore" class="cta-button">
      {{ t.home.hero_cta }}
    </a>

    <!-- Language Switcher -->
    <div class="lang-switcher">
      <a href="?lang=de">DE</a>
      <a href="?lang=en">EN</a>
      <a href="?lang=fr">FR</a>
    </div>
  </div>
</section>

<!-- Mission Section -->
<section id="explore" class="mission">
  <h2>{{ t.home.mission_title }}</h2>
  <p>{{ t.home.mission_desc }}</p>

  <div class="values-grid">
    {% for value in t.home.mission_values %}
    <div class="value-card">
      <h3>{{ value.icon }} {{ value.title }}</h3>
      <p>{{ value.text }}</p>
    </div>
    {% endfor %}
  </div>
</section>

{% if deployment.home.sections.testimonials %}
<!-- Testimonials -->
<section class="testimonials">
  <h2>{{ t.home.testimonials_title }}</h2>

  <div class="testimonial-slide" id="testimonial-container">
    <p id="testimonial-text"></p>
    <small id="testimonial-author"></small>
  </div>

  <div style="display: flex; justify-content: center; gap: 2rem; margin-top: 2rem;">
    <button onclick="prevTestimonial()">⬅️</button>
    <button onclick="nextTestimonial()">➡️</button>
  </div>
</section>
{% endif %}

{% if deployment.home.sections.crew %}
<!-- Character Preview -->
<section class="container">
  <h2 style="text-align: center;">{{ t.home.crew_preview_title }}</h2>
  <div style="text-align: center; margin: 2rem 0;">
    <a href="/crew" role="button">{{ t.home.crew_preview_button }}</a>
  </div>
</section>
{% endif %}

<!-- Access Section -->
<section class="container">
  <h2 style="text-align: center;">{{ t.home.access_title }}</h2>
  <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
    {% if deployment.features.rag_system %}
    <a href="/de/login" role="button">{{ t.home.access_rag }}</a>
    {% endif %}
    {% if deployment.features.document_search %}
    <a href="/de/login" role="button">{{ t.home.access_search }}</a>
    {% endif %}
    <a href="/hardware" role="button" class="outline">{{ t.home.access_hardware }}</a>
    <a href="/software" role="button" class="outline">{{ t.home.access_software }}</a>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
  let testimonials = [];
  let currentIndex = 0;

  fetch('/static/data/testimonials.{{ lang }}.json')
    .then(res => {
      if (!res.ok) throw new Error("Testimonials not found");
      return res.json();
    })
    .then(data => {
      testimonials = data;
      showTestimonial(0);
      setInterval(nextTestimonial, 8000);
    })
    .catch(err => {
      console.warn("Testimonials load failed for '{{ lang }}':", err);
      // Fallback to German
      if ("{{ lang }}" !== "de") {
        fetch('/static/data/testimonials.de.json')
          .then(res => res.json())
          .then(data => {
            testimonials = data;
            showTestimonial(0);
            setInterval(nextTestimonial, 8000);
          })
          .catch(e => console.error("Fallback testimonials failed:", e));
      }
    });

  function showTestimonial(index) {
    const t = testimonials[index];
    document.getElementById('testimonial-text').textContent = `"${t.message}"`;
    document.getElementById('testimonial-author').textContent = `– ${t.author}, ${t.role}`;
  }

  function nextTestimonial() {
    currentIndex = (currentIndex + 1) % testimonials.length;
    showTestimonial(currentIndex);
  }

  function prevTestimonial() {
    currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
    showTestimonial(currentIndex);
  }
</script>
{% endblock %}