{% 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 => res.json())
  .then(data => {
    testimonials = data;
    showTestimonial(0);
    setInterval(nextTestimonial, 8000);
  });

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 %}