<template>
  <q-page class="bg-white q-ma-md q-pa-md">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-gradient-to-r from-emerald-50 to-blue-50">
      <div class="absolute inset-0 bg-gradient-to-b from-emerald-100 to-blue-50"></div>
      <div class="container mx-auto px-4 py-16 md:py-24 relative z-10">
        <div class="flex flex-col md:flex-row items-center justify-center">
          <div class="md:w-1/2 mb-10 md:mb-0">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 leading-tight mb-4">
              Nutriben - Sentiero Natura
            </h1>
            <p class="text-h6 text-center text-gray-700 max-w-lg mb-6">
              Corsi di Naturopatia
            </p>
            <div class="mt-4 flex flex-wrap gap-4 justify-center">
              <q-btn color="positive" label="Iscriviti ora" class="px-6 py-3 rounded-md transform hover:scale-105 transition-all duration-300" />
              <q-btn outline color="positive" label="Scopri i corsi" class="px-6 py-3 rounded-md" />
            </div>
          </div>
          <div class="md:w-1/2 flex justify-center q-mt-lg">
            <img src="images/nutriben-logo.png" width="300" height="300" />
          </div>
        </div>
      </div>
    </section>

    <!-- Courses Section -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900">I Nostri Corsi</h2>
          <p class="mt-4 text-lg text-gray-600">
            Offriamo corsi completi e certificati per diventare professionisti nel campo della naturopatia.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div v-for="(course, index) in courses" :key="index" class="bg-white rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-900">{{ course.title }}</h3>
              <p class="mt-2 text-gray-600">{{ course.description }}</p>
              <div class="mt-4 pt-4 border-t border-gray-200 flex justify-between text-sm">
                <span class="text-gray-500">Durata: {{ course.duration }}</span>
                <span class="font-semibold text-emerald-600">{{ course.price }}</span>
              </div>
            </div>
            <div class="bg-emerald-50 px-6 py-4">
              <button class="text-emerald-600 font-medium hover:text-emerald-800 transition-colors duration-300">
                Scopri di più →
              </button>
            </div>
          </div>
        </div>

        <div class="mt-16 text-center">
          <q-btn color="positive" label="Visualizza tutti i corsi" class="px-6 py-3 rounded-md" />
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-emerald-600 text-white">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold">Pronto per iniziare il tuo viaggio nella naturopatia?</h2>
        <p class="mt-4 text-xl opacity-90 max-w-2xl mx-auto">
          Unisciti ai nostri corsi oggi e trasforma la tua passione per il benessere in una carriera significativa.
        </p>
        <div class="mt-8">
          <q-btn color="white" text-color="positive" label="Iscriviti ora" class="px-8 py-4 rounded-md hover:bg-gray-100 transition-colors duration-300" />
        </div>
      </div>
    </section>
  </q-page>
</template>

<script lang="ts" src="./home.ts">
</script>
<style lang="scss" scoped>
  @import './home.scss';
</style>

