{# templates/landing.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Onirisys - La communauté des rêveurs{% endblock %}

{% block body %}

<!-- HERO SECTION -->
<section class="relative flex flex-col items-center justify-center h-screen px-4 section-bg-primary overflow-hidden">
  <div class="relative z-10 flex flex-col items-center">
    <h1 class="text-5xl font-bold mb-4 animated-title">
      <span style="color: var(--accent-primary);">Onirisys</span>
    </h1>

    <p class="max-w-xl text-center text-lg mb-8 animated-title">
      La première communauté mondiale dédiée au partage et à l'exploration collective des rêves.
    </p>

    <a href="{{ path('app_login') }}" class="btn-primary px-6 py-3 rounded-md">
      Rejoindre la communauté
    </a>
  </div>

  <div id="hero-animation-container" class="absolute top-0 left-0 w-full h-full z-0 opacity-20" {{
    stimulus_controller('three-hero') }}>
  </div>
</section>

<!-- SECTION PRÉSENTATION DU GLOBE -->
<section class="py-16 px-4 section-bg-secondary">
  <div class="max-w-5xl mx-auto text-center">
    <h2 class="text-3xl font-semibold mb-8">Explore les rêves du monde entier</h2>
    <p class="max-w-2xl mx-auto mb-10 text-lg text-text-secondary">
      Plonge dans l'inconscient collectif grâce à notre globe interactif. Découvre, partage et connecte-toi avec les
      rêves des autres membres, partout sur Terre.
    </p>

    {# Nouveau conteneur parent relatif POUR LE CONTRÔLEUR #}
    <div class="relative" data-controller="dream-globe">
      {# Le conteneur du globe a maintenant un target Stimulus #}
      <div id="dream-globe-container" 
           class="h-[500px] w-full rounded-lg shadow-lg overflow-hidden relative"
           data-dream-globe-target="container"
      >
        {# Le script de données target reste attaché au contrôleur via le target jsonData #}
        <script type="application/json" data-dream-globe-target="jsonData">
            {{ dreamsForGlobe|json_encode|raw }}
        </script>
        
        {# Ici, Stimulus et Three.js afficheront le globe interactif #}
        {# Optionnel : Placeholder ou message pendant le chargement #}
        {# <div class="absolute inset-0 flex items-center justify-center text-text-secondary">Chargement du globe...</div> #}
      </div>

      {# Le bouton est maintenant un descendant du contrôleur, l'action fonctionnera #}
      <button 
        class="absolute top-2 right-2 z-[1000] p-1.5 bg-black bg-opacity-40 rounded text-white hover:bg-opacity-60 transition-colors duration-200 fullscreen-button"
        title="Plein écran"
        data-action="click->dream-globe#toggleFullscreen"
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m4.5 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
        </svg>
      </button>
    </div>
  </div>
</section>

<!-- SECTION INVITATION À PARTAGER LES RÊVES -->
<section class="py-16 px-4 section-bg-primary">
  <div class="max-w-3xl mx-auto text-center">
    <h2 class="text-3xl font-semibold mb-6">Partage tes rêves, enrichis la communauté</h2>
    <p class="text-lg mb-8 text-text-secondary">
      Enregistre tes rêves dans un espace personnel sécurisé, explore des rêves similaires et fais partie d'une aventure
      introspective et collective.
    </p>

    <a href="{{ path('app_login') }}" class="btn-secondary px-6 py-3 rounded-md">
      Commencer maintenant
    </a>
  </div>
</section>

<!-- SECTION NEWSLETTER -->
<section id="subscribe" class="py-16 px-4 section-bg-secondary">
  <div class="max-w-2xl mx-auto text-center mb-10">
    <h2 class="text-2xl font-bold mb-4">Newsletter Onirisys</h2>
    <p class="text-text-secondary">
      Reçois des histoires fascinantes, des insights exclusifs et les dernières nouvelles de la communauté mondiale des
      rêveurs.
    </p>
  </div>

  <div class="max-w-md mx-auto" x-data="newsletterForm()">
    <form @submit.prevent="submitForm()" data-subscribe-url="{{ path('app_newsletter_subscribe') }}">

      <input type="email" required placeholder="Ton email..." x-model="email" :disabled="submitting"
        class="mb-4 w-full rounded border px-4 py-2">

      <button type="submit" :disabled="submitting" class="btn-primary w-full px-6 py-3 rounded-md">
        S'inscrire
      </button>
    </form>
  </div>
</section>

<!-- FOOTER -->
<footer class="py-8 px-4 text-center footer-bg">
  <p class="text-text-secondary">© {{ "now"|date("Y") }} Onirisys.ai - Tous droits réservés.</p>
  <p class="mt-2">
    <a href="#" class="mx-2 hover:underline">Mentions légales</a>
    <a href="{{ path('app_legal_privacy_policy') }}" class="mx-2 hover:underline">Confidentialité</a>
    <a href="#" class="mx-2 hover:underline">Contact</a>
  </p>
</footer>

{% endblock %}