<template>
  <v-container fluid class="pa-0">
    <v-sheet
      class="hero-section d-flex align-center justify-center text-center pa-8"
    >
      <div>
        <v-img
          :src="logo"
          alt="Don Confiao"
          max-width="180"
          class="mx-auto mb-4"
        />
        <h1 class="text-h4 font-weight-bold text-white mb-2">
          Don Confiao te atiende
        </h1>
        <p class="text-subtitle-1 font-italic font-weight-bold text-white">
          Economía solidaria, mercado justo, alimentación sana
        </p>
      </div>
    </v-sheet>

    <v-container class="py-6">
      <v-row>
        <v-col cols="12" md="4">
          <v-card class="h-100" elevation="2">
            <v-card-item>
              <template #prepend>
                <v-icon color="green" size="48">mdi-hand-heart</v-icon>
              </template>
              <v-card-title class="font-weight-bold">Nuestra Tienda</v-card-title>
            </v-card-item>
            <v-card-text>
              Hacer parte de la tienda la ilusión. Participando de esta tienda le apuestas a la economía solidaria, al mercado justo, a la alimentación sana, al campesinado colombiano y a un mundo mejor.
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="12" md="4">
          <v-card class="h-100" elevation="2">
            <v-card-item>
              <template #prepend>
                <v-icon color="orange-darken-2" size="48">mdi-progress-wrench</v-icon>
              </template>
              <v-card-title class="font-weight-bold">En Desarrollo</v-card-title>
            </v-card-item>
            <v-card-text>
              Don Confiao apenas está entendiendo cómo funciona esta tienda y por ahora <ResaltedText>solo puede atender las compras de contado</ResaltedText>, ya sea en efectivo o consignación.
              <v-alert type="warning" class="mt-3" density="compact">
                Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual
              </v-alert>
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="12" md="4">
          <v-card class="h-100" elevation="2">
            <v-card-item>
              <template #prepend>
                <v-icon color="blue" size="48">mdi-store</v-icon>
              </template>
              <v-card-title class="font-weight-bold">Catálogo</v-card-title>
            </v-card-item>
            <v-card-text>
              Explora nuestro catálogo de productos disponibles. Encuentra todo lo que necesitas y arma tu pedido fácilmente.
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>

      <v-row class="mt-4">
        <v-col cols="12" class="text-center">
          <h2 class="text-h5 font-weight-bold mb-4">¿Qué deseas hacer?</h2>
          <div class="d-flex flex-wrap justify-center ga-4">
            <v-btn
              :to="{ path: 'comprar' }"
              color="green"
              size="x-large"
              prepend-icon="mdi-cart"
              variant="elevated"
              class="px-8"
            >
              Ir a Comprar
            </v-btn>
            <v-btn
              :to="{ path: 'catalog' }"
              color="primary"
              size="x-large"
              prepend-icon="mdi-store"
              variant="elevated"
              class="px-8"
            >
              Ver Catálogo
            </v-btn>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-container>
</template>

<script setup>
import ResaltedText from '@/components/ResaltedText.vue'
import logo from '@/assets/logo.png'
</script>

<style scoped>
.hero-section {
  min-height: 320px;
  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 30%, #E65100 100%) !important;
  color: white;
}
</style>
