<template>
  <div :class="{'bg-dark': isDark}" class="q-py-xl">
    <!-- Container principale -->
    <div class="q-px-md sm:q-px-lg md:q-px-xl">
      <div class="row justify-center">
        <div class="col-12 col-md-10 col-lg-8 text-center q-pb-lg">
          <div class="text-indigo-4 text-body2 text-weight-bold">{{ description }}</div>
          <div :class="{'text-white': isDark}" class="text-h4 text-weight-bold q-mt-sm q-mb-md">
            {{ title }}
          </div>
          <div :class="{'text-grey-4': isDark, 'text-grey-2': isDark}" class="text-subtitle1">
            {{ subtitle }}
          </div>
        </div>
      </div>

      <!-- Griglia delle features -->
      <div class="row justify-center q-mt-lg">
        <div class="col-12 col-lg-10">
          <div class="row q-col-gutter-xl">
            <div
              v-for="feature in features"
              :key="feature.name"
              class="col-12 col-sm-6"
            >
              <q-card flat class="bg-transparent">
                <q-card-section horizontal>
                  <!-- Icona circolare -->
                  <div class="self-start q-mt-xs q-mr-md">
                    <q-avatar v-if="feature.icon" size="40px" color="indigo-5" text-color="white" rounded>
                      <q-icon :name="feature.icon" />
                    </q-avatar>
                  </div>

                  <div>
                    <q-card-section class="p-none">
                      <div :class="{'text-white': isDark}" class="text-subtitle2 text-weight-medium">
                        {{ feature.name }}
                      </div>
                    </q-card-section>
                    <q-card-section class="q-pt-none">
                      <div :class="{'text-grey-4': isDark, 'text-grey-2': isDark}" class="text-body2">
                        {{ feature.description }}
                      </div>
                    </q-card-section>
                  </div>
                </q-card-section>
              </q-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" src="./FeaturesSection.ts"></script>

<style lang="scss" scoped>
@import './FeaturesSection.scss';
</style>
