<template>
  <v-sheet class="py-9">
    <v-card-title>
      <gear height="50" />
    </v-card-title>
    <v-card variant="text">
      <v-card-title class="px-0">
        <h5 class="text-h6 text-primary font-weight-medium">
          CHECKOUT OUR NEW
        </h5>
      </v-card-title>

      <v-sheet class="d-flex justify-space-between flex-column flex-md-row">
        <div style="max-width: 700px">
          <v-card-title class="pa-0">
            <h4 class="text-h4">Latest Professional Lighting</h4>
          </v-card-title>

          <v-card-subtitle class="pa-0 mt-2">
            <p class="text-wrap text-body-1">
              We provide a wide range of indoor and outdoor lighting products,
              project design and supervision services in relation to technical
              and architectural lighting, and lighting control area.
            </p>
          </v-card-subtitle>
        </div>

        <v-tabs v-model="tab" class="w-100 my-9 my-md-0">
          <v-tab
            v-for="(tab, index) in tabs"
            :key="index"
            class="rounded-xl"
            style="border: 1px solid #2d5284"
            :value="tab"
            selected-class="tab_active"
            >{{ tab }}</v-tab
          >
        </v-tabs>
      </v-sheet>
      <v-window v-model="tab" class="py-9">
        <v-window-item v-for="tab in tabs" :key="tab" :value="tab">
          <v-sheet class="d-flex justify-space-between">
            <v-row class="ma-0">
              <v-col cols="12" md="4" v-for="n in 3" :key="n">
                <v-card variant="text" width="100%" class="pa-0">
                  <div style="height: 350px">
                    <v-img
                      height="100%"
                      src="@/assets/products/lighting.png"
                    ></v-img>
                  </div>
                  <v-card-title class="text-center mt-2"
                    ><h5>Lighting Management Systems</h5></v-card-title
                  >
                </v-card>
              </v-col>
            </v-row>
          </v-sheet>
        </v-window-item>
      </v-window>
    </v-card>
  </v-sheet>
</template>

<script setup>
import gear from "@/core/components/decorations/gear";
import { ref } from "vue";
const tab = ref(null);

const tabs = ["All", "lighting", "Automation"];
</script>

<style scoped>
.tab_active {
  background-color: #2d5284;
  border: none !important;
  color: white;
}
</style>
<style>
.v-slide-group__content {
  gap: 20px;
  justify-content: end;
}
</style>
