<template>
  <q-page class="riso-homepage">
    <!-- Hero Section -->
    <!-- Hero Section con Slideshow -->
    <section class="hero-section">
      <!-- Background Slideshow -->
      <div class="hero-slideshow">
        <div
          v-for="(image, index) in heroImages"
          :key="index"
          class="hero-slide"
          :class="{ active: currentSlide === index }"
          :style="{ backgroundImage: `url(${image.src})` }"
        >
          <div class="hero-overlay"></div>
        </div>
      </div>

      <!-- Slideshow Indicators -->
      <div class="slideshow-indicators">
        <button
          v-for="(image, index) in heroImages"
          :key="index"
          class="indicator-dot"
          :class="{ active: currentSlide === index }"
          @click="goToSlide(index)"
          :aria-label="`Vai alla slide ${index + 1}`"
        ></button>
      </div>

      <!-- Hero Content -->
      <div class="hero-content">
        <q-img
          src="/images/logo.png"
          alt="RISO Logo"
          class="hero-logo"
          :ratio="1"
        />

        <h1 class="hero-title animate-fade-in">
          <span class="riso-text">RISO</span>
        </h1>

        <h2 class="hero-subtitle animate-fade-in-delay">
          Rete Italiana di Scambio Orizzontale
        </h2>

        <p class="hero-description animate-fade-in-delay-2">
          Una rete di comunità consapevoli, basata sul sostegno reciproco,<br />
          la fiducia, la condivisione e l'ascolto.
        </p>

        <div class="hero-actions animate-fade-in-delay-3">
          <q-btn
            v-if="!tools.isLogged()"
            label="Unisciti a RISO"
            :size="$q.platform.is.mobile ? 'lg' : 'xl'"
            color="primary"
            rounded
            unelevated
            class="cta-button"
            @click="scrollToRegistrazione"
          />
          <q-btn
            v-else
            label="ACCEDI"
            :size="$q.platform.is.mobile ? 'lg' : 'xl'"
            color="primary"
            rounded
            unelevated
            class="cta-button"
            @click="goToHome"
          />

          <q-btn
            label="Scopri di più"
            size="md"
            outline
            rounded
            class="secondary-button"
            @click="scrollToAbout"
          />
        </div>
      </div>
    </section>

    <!-- Cos'è RISO Section -->
    <section
      id="about"
      class="about-section"
    >
      <div class="contain_riso">
        <h2 class="section-title">
          <q-icon
            name="eco"
            size="md"
            class="title-icon"
          />
          Cos'è RISO?
        </h2>

        <div class="content-cards">
          <q-card
            class="info-card"
            flat
            bordered
          >
            <q-card-section class="card-icon-section">
              <div class="icon-circle">🫂</div>
            </q-card-section>
            <q-card-section>
              <div class="card-title">Una Rete di Comunità</div>
              <p class="card-text">
                RISO è una rete di comunità che vuole creare un nuovo mondo, attraverso
                l'incontro e la condivisione, con il sor<strong>RISO</strong> sulle
                labbra.
              </p>
            </q-card-section>
          </q-card>

          <q-card
            class="info-card"
            flat
            bordered
          >
            <q-card-section class="card-icon-section">
              <div class="icon-circle">🌾</div>
            </q-card-section>
            <q-card-section>
              <div class="card-title">Simbolo di Vita</div>
              <p class="card-text">
                Il RISO è fonte di vita, simbolo del ciclo della vita e del valore della
                terra. Una delle prime forme di scambio, una moneta basata su uno dei beni
                più preziosi.
              </p>
            </q-card-section>
          </q-card>

          <q-card
            class="info-card"
            flat
            bordered
          >
            <q-card-section class="card-icon-section">
              <div class="icon-circle">🤝</div>
            </q-card-section>
            <q-card-section>
              <div class="card-title">Decisioni Orizzontali</div>
              <p class="card-text">
                Il progetto è orizzontale: ogni decisione viene presa nei territori
                attraverso la condivisione e la partecipazione.
              </p>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </section>

    <!-- Il Sogno Section -->
    <section class="dream-section">
      <div class="contain_riso">
        <div class="dream-content">
          <div class="dream-text">
            <h2 class="section-title light">
              <q-icon
                name="auto_awesome"
                size="md"
                class="title-icon"
              />
              Il Sogno di RISO
            </h2>
            <p class="dream-description">
              Siamo una rete di comunità consapevoli, basata sul sostegno reciproco, la
              fiducia, la condivisione e l'ascolto. Coltiviamo terreno fertile per creare,
              in armonia con la natura, un mondo di collettività
              <strong>libere e autosufficienti</strong>, attraverso un circuito di scambio
              di esperienze umane, beni e servizi.
            </p>
            <div class="dream-highlight">
              <q-icon
                name="campaign"
                size="lg"
              />
              <div>
                <strong>Partecipa al cambiamento.</strong><br />
                RISO sei anche tu!
              </div>
            </div>
          </div>
          <div class="dream-image">
            <q-img
              src="/images/cerchio_riso.jpg"
              alt="Comunità RISO"
              class="rounded-image"
              ratio="1"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- Valori Section -->
    <section class="values-section">
      <div class="contain_riso">
        <h2 class="section-title">
          <q-icon
            name="favorite"
            size="md"
            class="title-icon"
          />
          I Nostri Valori
        </h2>

        <div class="values-grid">
          <div
            v-for="(value, index) in values"
            :key="index"
            class="value-item"
          >
            <div class="value-icon">{{ value.icon }}</div>
            <h3 class="value-title">{{ value.title }}</h3>
            <p class="value-text">{{ value.text }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Come Funziona Section -->
    <section class="how-it-works-section">
      <div class="contain_riso">
        <h2 class="section-title">
          <q-icon
            name="settings"
            size="md"
            class="title-icon"
          />
          Come Funziona
        </h2>

        <div class="steps-timeline">
          <div
            v-for="(step, index) in steps"
            :key="index"
            class="step-item"
          >
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3 class="step-title">{{ step.title }}</h3>
              <p class="step-text">{{ step.text }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Video Section - Aggiungi dopo la sezione "How it works" -->
    <section class="video-section">
      <div class="container">
        <h2 class="section-title">
          <q-icon
            name="play_circle"
            size="md"
            class="title-icon"
          />
          Guarda il Video di Presentazione
        </h2>

        <div class="video-container">
          <iframe
            width="100%"
            height="100%"
            src="https://rumble.com/embed/v5opfsn/?pub=46vc7z"
            title="Video presentazione Progetto RISO"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>

        <p class="video-description">
          Scopri come funziona il Progetto RISO e come puoi contribuire a creare
          un'economia più sostenibile e solidale nella tua comunità.
        </p>
      </div>
    </section>

    <!-- Comunità Territoriali Section -->
    <section class="communities-section">
      <div class="contain_riso">
        <h2 class="section-title">
          <q-icon
            name="groups"
            size="md"
            class="title-icon"
          />
          Comunità Territoriali
        </h2>

        <div class="communities-content">
          <p class="section-intro">
            Le colonne portanti di RISO sono le <strong>Comunità Territoriali</strong>.
            Ogni comunità ha pieno potere decisionale al suo interno, nel rispetto dei
            principi e delle finalità di RISO.
          </p>

          <div class="features-grid">
            <q-card
              class="feature-card"
              flat
            >
              <q-card-section>
                <div class="feature-icon">🏘️</div>
                <div class="feature-title">Autonomia Locale</div>
                <p class="feature-text">
                  Ogni comunità decide autonomamente, tessendo relazioni con i gruppi del
                  territorio.
                </p>
              </q-card-section>
            </q-card>

            <q-card
              class="feature-card"
              flat
            >
              <q-card-section>
                <div class="feature-icon">👥</div>
                <div class="feature-title">Facilitatori</div>
                <p class="feature-text">
                  Idealmente servirebbero almeno 3 facilitatori per comunità, scelti dai
                  membri per aiutare nella comunicazione e nel coordinamento.
                </p>
              </q-card-section>
            </q-card>

            <q-card
              class="feature-card"
              flat
            >
              <q-card-section>
                <div class="feature-icon">🔗</div>
                <div class="feature-title">Nodi Regionali</div>
                <p class="feature-text">
                  I facilitatori regionali supportano le comunità territoriali e
                  condividono iniziative.
                </p>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
    </section>

    <!-- RIS e Scambi Section -->
    <section class="ris-section">
      <div class="contain_riso">
        <h2 class="section-title">
          <q-icon
            name="currency_exchange"
            size="md"
            class="title-icon"
          />
          I Circuiti di Scambio e il RIS
        </h2>

        <div class="ris-content">
          <!-- Card principale cos'è il RIS -->
          <div class="ris-card-main">
            <q-card
              class="ris-info-card"
              flat
              bordered
            >
              <q-card-section class="ris-header">
                <div class="ris-icon">💰</div>
                <h3>Cos'è il RIS?</h3>
              </q-card-section>
              <q-card-section>
                <p class="ris-description">
                  Il <strong>RIS</strong> è l'unità di misura del valore dei beni e
                  servizi per lo scambio tra i membri di una comunità territoriale. È una
                  moneta complementare basata sulla <strong>fiducia reciproca</strong>
                  tra i membri della comunità.
                </p>
                <q-separator class="q-my-md" />
                <div class="ris-features">
                  <div class="ris-feature-item">
                    <q-icon
                      name="check_circle"
                      color="positive"
                    />
                    <span
                      >Parti da 0 RIS: ricevere = credito (+), offrire = debito (-)</span
                    >
                  </div>
                  <div class="ris-feature-item">
                    <q-icon
                      name="check_circle"
                      color="positive"
                    />
                    <span>Non si accumula: serve per far circolare beni e servizi</span>
                  </div>
                  <div class="ris-feature-item">
                    <q-icon
                      name="check_circle"
                      color="positive"
                    />
                    <span>Il bilancio totale della comunità è sempre zero</span>
                  </div>
                  <div class="ris-feature-item">
                    <q-icon
                      name="check_circle"
                      color="positive"
                    />
                    <span>Puoi combinarlo con Euro, baratto o dono</span>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>

          <!-- Limiti RIS -->
          <div class="ris-limits-section">
            <h3 class="subsection-title">📊 Limiti di Utilizzo</h3>
            <p class="limits-intro">
              Per garantire la circolazione equilibrata, esistono dei limiti al saldo RIS
              che ogni membro può avere:
            </p>

            <div class="limits-grid">
              <q-card
                class="limit-card"
                flat
                bordered
              >
                <q-card-section>
                  <div class="limit-icon">🏘️</div>
                  <h4 class="limit-title">Circuito Territoriale</h4>
                  <p class="limit-subtitle">(Provincia)</p>
                  <div class="limit-values">
                    <div class="limit-value negative">
                      <div class="limit-label">
                        Fiducia Concessa<br />(Limite negativo)
                      </div>
                      <div class="limit-number">-100 RIS</div>
                    </div>
                    <div class="limit-separator">↔️</div>
                    <div class="limit-value positive">
                      <div class="limit-label">
                        Massimo Accumulo<br />(Limite positivo)
                      </div>
                      <div class="limit-number">+200 RIS</div>
                    </div>
                  </div>
                </q-card-section>
              </q-card>

              <q-card
                class="limit-card"
                flat
                bordered
              >
                <q-card-section>
                  <div class="limit-icon">🇮🇹</div>
                  <h4 class="limit-title">Circuito Nazionale</h4>
                  <p class="limit-subtitle">(Tutta Italia)</p>
                  <div class="limit-values">
                    <div class="limit-value negative">
                      <div class="limit-label">
                        Fiducia Concessa<br />(Limite negativo)
                      </div>
                      <div class="limit-number">-200 RIS</div>
                    </div>
                    <div class="limit-separator">↔️</div>
                    <div class="limit-value positive">
                      <div class="limit-label">
                        Massimo Accumulo<br />(Limite positivo)
                      </div>
                      <div class="limit-number">+400 RIS</div>
                    </div>
                  </div>
                </q-card-section>
              </q-card>
            </div>

            <q-banner
              class="limits-note"
              rounded
            >
              <template v-slot:avatar>
                <q-icon
                  name="info"
                  color="primary"
                />
              </template>
              I limiti servono a evitare accumulo eccessivo e garantire che i RIS
              circolino continuamente nella comunità, mantenendo il bilancio totale a
              zero. Ogni comunita territoriale provinciale può decidere
              <strong>autonomamente di modificare</strong> i limiti all'occorrenza.
            </q-banner>
          </div>

          <!-- Esempio 1: Scambio circolare -->
          <div class="example-section">
            <h3 class="subsection-title">🔄 Esempio 1: Scambio Circolare</h3>
            <p class="example-intro">
              Vediamo come funzionano gli scambi in RIS con 3 persone che offrono e
              ricevono servizi dello stesso valore (10 RIS):
            </p>

            <q-card
              class="example-card"
              flat
              bordered
            >
              <q-card-section>
                <div class="example-steps">
                  <!-- Step 1 -->
                  <div class="example-step">
                    <div class="step-header">
                      <div class="step-badge">1</div>
                      <div class="step-title">
                        Mario riceve verdure da Laura e le invia 10 RIS (va a -10)
                      </div>
                    </div>
                    <div class="step-content">
                      <div class="transaction">
                        <div class="person">
                          <div class="person-name">👨 Mario</div>
                          <div class="balance negative">-10 RIS</div>
                          <div class="balance-detail">(0 -10) = -10</div>
                        </div>
                        <div class="arrow">→</div>
                        <div class="person">
                          <div class="person-name">👩 Laura</div>
                          <div class="balance positive">+10 RIS</div>
                          <div class="balance-detail">(0 +10) = +10</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <q-separator class="q-my-md" />

                  <!-- Step 2 -->
                  <div class="example-step">
                    <div class="step-header">
                      <div class="step-badge">2</div>
                      <div class="step-title">
                        Laura si fa riparare la bici da Paolo e gli invia 10 RIS, Laura
                        torna così a zero.
                      </div>
                    </div>
                    <div class="step-content">
                      <div class="transaction">
                        <div class="person">
                          <div class="person-name">👩 Laura</div>
                          <div class="balance neutral">0 RIS</div>
                          <div class="balance-detail">(+10 -10) = 0</div>
                        </div>
                        <div class="arrow">→</div>
                        <div class="person">
                          <div class="person-name">👨 Paolo</div>
                          <div class="balance positive">+10 RIS</div>
                          <div class="balance-detail">(+10 -10) = 0</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <q-separator class="q-my-md" />

                  <!-- Step 3 -->
                  <div class="example-step">
                    <div class="step-header">
                      <div class="step-badge">3</div>
                      <div class="step-title">
                        Paolo riceve del miele da Mario e gli invia 10 RIS.
                      </div>
                    </div>
                    <div class="step-content">
                      <div class="transaction">
                        <div class="person">
                          <div class="person-name">👨 Paolo</div>
                          <div class="balance neutral">0 RIS</div>
                          <div class="balance-detail">(+10 -10) = 0</div>
                        </div>
                        <div class="arrow">→</div>
                        <div class="person">
                          <div class="person-name">👨 Mario</div>
                          <div class="balance neutral">0 RIS</div>
                          <div class="balance-detail">(-10 +10) = 0</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- Risultato finale -->
                  <q-banner
                    class="example-result"
                    rounded
                  >
                    <template v-slot:avatar>
                      <q-icon
                        name="check_circle"
                        color="positive"
                        size="lg"
                      />
                    </template>
                    <div class="result-content">
                      <strong>Risultato finale:</strong> Tutti e tre tornano a
                      <strong>0 RIS</strong>, ma ciascuno ha ricevuto e offerto qualcosa
                      di valore! Il bilancio totale della comunità rimane sempre zero.
                    </div>
                  </q-banner>
                </div>
              </q-card-section>
            </q-card>
          </div>

          <!-- Esempio 2: Scambio misto -->
          <div class="example-section">
            <h3 class="subsection-title">💶 Esempio 2: Scambio Misto (RIS + Euro)</h3>
            <p class="example-intro">
              Puoi combinare RIS con Euro nella stessa transazione per ridurre
              gradualmente la dipendenza dalla moneta tradizionale:
            </p>

            <q-card
              class="example-card mixed"
              flat
              bordered
            >
              <q-card-section>
                <div class="mixed-example">
                  <div class="scenario">
                    <div class="scenario-title">
                      🥬 Scenario: Cassetta di verdure settimanale
                    </div>
                    <div class="scenario-desc">Valore totale: <strong>20€</strong></div>
                  </div>

                  <div class="mixed-options">
                    <!-- Opzione 1: Solo Euro -->
                    <div class="option">
                      <div class="option-label">❌ Economia tradizionale</div>
                      <div class="option-detail">
                        <div class="payment-item">100% Euro = <strong>20€</strong></div>
                        <div class="payment-item ris">
                          0% RIS = <strong>0 RIS</strong>
                        </div>
                      </div>
                    </div>

                    <div class="option-divider">VS</div>

                    <!-- Opzione 2: Misto -->
                    <div class="option highlighted">
                      <div class="option-label">✅ Scambio RISO</div>
                      <div class="option-detail">
                        <div class="payment-item">80% Euro = <strong>16€</strong></div>
                        <div class="payment-item ris">
                          20% RIS = <strong>4 RIS</strong>
                        </div>
                      </div>
                    </div>
                  </div>

                  <q-banner
                    class="mixed-benefit"
                    rounded
                  >
                    <template v-slot:avatar>
                      <q-icon
                        name="trending_down"
                        color="positive"
                        size="lg"
                      />
                    </template>
                    <div class="benefit-content">
                      <strong>Beneficio:</strong> Hai ridotto del 20% l'uso degli Euro,
                      sostenendo il produttore locale e rafforzando la comunità! Puoi
                      iniziare con percentuali basse (5-10%) e aumentare gradualmente man
                      mano che la fiducia nella comunità cresce.
                    </div>
                  </q-banner>
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section
      id="registrazione"
      class="cta-section"
    >
      <div class="contain_riso">
        <div class="cta-content">
          <h2 class="cta-title">Pronto a Fare Parte del Cambiamento?</h2>
          <p class="cta-subtitle">
            Unisciti alla comunità RISO e inizia a scambiare in modo sostenibile e
            solidale
          </p>

          <div class="cta-buttons">
            <q-btn
              label="Registrati a RISO"
              :size="$q.platform.is.mobile ? 'lg' : 'xl'"
              color="primary"
              rounded
              unelevated
              icon="person_add"
              class="cta-main-button"
              @click="goToApp"
            />
          </div>

          <!-- Info App -->
          <div class="app-features">
            <div class="feature-badge">
              <q-icon
                name="devices"
                size="md"
              />
              <div class="cta-feature-text">
                <strong>Multi-piattaforma</strong>
                <span>Chrome, Firefox, Safari, Android, iPhone, PC</span>
              </div>
            </div>

            <div class="feature-badge">
              <q-icon
                name="download"
                size="md"
              />
              <div class="cta-feature-text">
                <strong>Installazione facile</strong>
                <span>Senza passare dallo store, direttamente da riso.app</span>
              </div>
            </div>

            <div class="feature-badge">
              <q-icon
                name="volunteer_activism"
                size="md"
              />
              <div class="cta-feature-text">
                <strong>100% Gratuita</strong>
                <span>Open Source, nessuna pubblicità</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="riso-footer">
      <div class="contain_riso">
        <div class="footer-content">
          <div class="footer-section">
            <h4>Link Utili</h4>
            <ul class="footer-links">
              <li><a @click="scrollToAbout">Cos'è RISO</a></li>
              <li>
                <a
                  href="https://t.me/+pZ40VpmL1NhkZjE0"
                  target="_blank"
                >
                  🟢 Canale pubblico - PROGETTO RISO
                </a>
              </li>
              <li>
                <a
                  href="https://t.me/c/1565097581/3"
                  target="_blank"
                >
                  🔵 Gruppi territoriali - ELENCO
                </a>
              </li>
              <li>
                <a
                  href="https://riso.app/riso_gruppo"
                  target="_blank"
                >
                  🟠 Gruppo nazionale - RISO Italia
                </a>
              </li>
              <li>
                <a
                  href="https://sicrenacc.info/"
                  target="_blank"
                >
                  Si.cre.na.C.C - Sistema di Credito Naturale
                </a>
              </li>
            </ul>
          </div>
          <div class="footer-section">
            <h4>Menu</h4>
            <ul>
              <template
                v-for="(myitemmenu, ind) in static_data.routes"
                :key="ind"
              >
                <li v-if="myitemmenu.infooter && tools.visumenu(myitemmenu) && !myitemmenu.solotitle">
                  <router-link
                    :to="myitemmenu.path"
                    custom
                    v-slot="{ navigate }"
                  >
                    <span
                      class="footer_link"
                      @click="navigate"
                      @keypress.enter="navigate"
                      role="link"
                    >
                      <span v-if="myitemmenu.level_child > 0">&nbsp;&nbsp;&nbsp;</span>
                      {{ tools.getLabelByItem(myitemmenu) }}
                    </span>
                  </router-link>
                </li>
              </template>
            </ul>
          </div>
          <div class="footer-section">
            <h4>Contatti</h4>
            <ul class="footer-links">
              <li>
                👴
                <q-icon
                  name="telegram"
                  color="light-blue-7"
                  size="18px"
                  style="vertical-align: middle; margin-right: 4px"
                />
                <a href="https://t.me/surya1977">Surya</a>
              </li>
              <li>
                👩
                <q-icon
                  name="telegram"
                  color="light-blue-7"
                  size="18px"
                  style="vertical-align: middle; margin-right: 4px"
                />
                <a href="https://t.me/ElenaEspx">Elena</a>
              </li>
            </ul>
          </div>
        </div>

        <q-separator class="footer-separator" />

        <div class="footer-bottom">
          <p>{{ currentYear }} RISO - Rete Italiana di Scambio Orizzontale</p>
          <p class="footer-values">
            Comunità · Fiducia · Scambi Solidali · Sostenibilità
          </p>
        </div>
      </div>
    </footer>

    <!-- Floating Action Button per tornare su -->
    <q-page-sticky
      position="bottom-right"
      :offset="[18, 18]"
    >
      <q-btn
        v-show="showScrollTop"
        fab
        icon="keyboard_arrow_up"
        color="primary"
        @click="scrollToTop"
      />
    </q-page-sticky>
  </q-page>
</template>
<script lang="ts" src="./HomeRiso.ts"></script>
<style lang="scss" scoped>
@import './HomeRiso.scss';
</style>
