<script setup>
import avatar1 from '@/assets/img/avatar-1.png'
import avatar2 from '@/assets/img/avatar-1.png'
import avatar3 from '@/assets/img/avatar-1.png'
import avatar4 from '@/assets/img/avatar-1.png'
import eCommerce2 from '@/assets/img/avatar-1.png'
import pages1 from '@/assets/img/avatar-1.png'
import pages2 from '@/assets/img/avatar-1.png'
import pages3 from '@/assets/img/avatar-1.png'
import pages5 from '@/assets/img/avatar-1.png'
import pages6 from '@/assets/img/avatar-1.png'
import { ref } from 'vue'

const avatars = [
  avatar1,
  avatar2,
  avatar3,
  avatar4,
]

const isCardDetailsVisible = ref(false)
</script>

<template>
  <v-row>
    <v-col
      sm="6"
      cols="12"
      style="padding-right: 6px;"
    >
      <v-card>
        <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
          <div class="ma-auto pa-5">
            <v-img
              width="137"
              height="176"
              :src="eCommerce2"
            />
          </div>

          <v-divider :vertical="$vuetify.display.mdAndUp" />

          <div>
            <v-card-item>
              <v-card-title>Apple iPhone 11 Pro</v-card-title>
            </v-card-item>

            <v-card-text>
              Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
            </v-card-text>

            <v-card-text class="text-subtitle-1">
              <span>Price :</span> <span class="font-weight-medium">$899</span>
            </v-card-text>

            <v-card-actions class="justify-space-between">
              <v-btn>
                <v-icon icon="mdi-cart" />
                <span class="ms-2">Add to cart</span>
              </v-btn>

              <v-btn
                color="secondary"
                icon="mdi-share-variant"
              />
            </v-card-actions>
          </div>
        </div>
      </v-card>
    </v-col>

    <!-- 👉 Stump town Roasters. -->
    <v-col
      sm="6"
      cols="12"
      style="padding-left: 6px;"
    >
      <v-card>
        <div class="d-flex flex-column-reverse flex-md-row">
          <div>
            <v-card-item>
              <v-card-title>Stumptown Roasters</v-card-title>
            </v-card-item>

            <v-card-text class="d-flex align-center flex-wrap text-body-1">
              <v-rating
                :model-value="5"
                readonly
                class="me-3"
                density="compact"
              />
              <span>5 Star | 98 reviews</span>
            </v-card-text>

            <v-card-text style="padding-top: 23px;">
              Before there was a United States of America, because how are you supposed to build.
            </v-card-text>

            <v-card-actions>
              <v-btn>Location</v-btn>
              <v-btn>Reviews</v-btn>
            </v-card-actions>
          </div>

          <div class="ma-auto pa-5">
            <v-img
              :width="176"
              :src="pages5"
              class="rounded"
            />
          </div>
        </div>
      </v-card>
    </v-col>


    <!-- 👉 Lifetime Membership -->
    <v-col
      md="12"
      lg="12"
      cols="12"
      class="pt-0"
    >
      <v-card>
        <v-row no-gutters>
          <v-col
            cols="12"
            sm="8"
            md="12"
            lg="7"
            order="2"
            order-lg="1"
          >
            <v-card-item>
              <v-card-title>Lifetime Membership</v-card-title>
            </v-card-item>

            <v-card-text>
              Here, I focus on a range of items and features that we use in life without giving them a second thought such as Coca Cola, body muscles and holding ones own breath. Though, most of these notes are not fundamentally necessary, they are such that you can use them for a good laugh, at a drinks party or for picking up women or men.
            </v-card-text>

            <v-card-text>
              <v-divider />
            </v-card-text>

            <v-card-text class="d-flex justify-center">
              <div class="me-auto pe-4">
                <p class="d-flex align-center mb-6">
                  <v-icon
                    color="primary"
                    icon="mdi-lock-open-outline"
                  />
                  <span class="ms-3">Full Access</span>
                </p>

                <p class="d-flex align-center mb-0">
                  <v-icon
                    color="primary"
                    icon="mdi-account-group"
                  />
                  <span class="ms-3">15 Members</span>
                </p>
              </div>

              <v-divider
                v-if="$vuetify.display.smAndUp"
                vertical
                inset
              />

              <div class="ms-auto ps-4">
                <p class="d-flex align-center mb-6">
                  <v-icon
                    color="primary"
                    icon="mdi-star-outline"
                  />
                  <span class="ms-3">Access all Features</span>
                </p>

                <p class="d-flex align-center mb-0">
                  <v-icon
                    color="primary"
                    icon="mdi-chart-pie"
                  />
                  <span class="ms-3">Lifetime Free Update</span>
                </p>
              </div>
            </v-card-text>
          </v-col>
        </v-row>
      </v-card>
    </v-col>

    <!-- 👉 Influencing The Influencer -->
    <v-col
      cols="12"
      lg="4"
      md="6"
      class="pt-0"
      style="padding-right: 6px;"
    >
      <v-card title="Influencing The Influencer" style="height: 300px;">
        <v-card-text>
          Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in touch.
        </v-card-text>

        <v-card-text class="pt-0">
          If you're in the market for new desktops, notebooks, or PDAs, there are a myriad of choices. Here's a rundown of some of the best systems available.
        </v-card-text>

        <v-card-actions>
          <v-btn>Read More</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>

    <!-- 👉 The Best Answers -->
    <v-col
      cols="12"
      lg="4"
      md="6"
      class="pt-0"
      style="padding: 0 6px;"
    >
      <v-card title="The Best Answers" style="height: 300px;">
        <v-card-text class="d-flex align-center flex-wrap">
          <v-rating
            :model-value="5"
            readonly
            density="compact"
            class="me-3"
          />
          <span class="text-subtitle-2">5 Star | 98 reviews</span>
        </v-card-text>

        <v-card-text>
          If you are looking for a new way to promote your business that won't cost you more money, maybe printing is one of the options you won't resist.
        </v-card-text>

        <v-card-text class="pt-0">
          become fast, easy and simple. If you want your promotional material to be an eye-catching
        </v-card-text>

        <v-card-actions>
          <v-btn>Location</v-btn>
          <v-btn>Reviews</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>

    <!-- 👉 Support -->
    <v-col
      cols="12"
      md="6"
      lg="4"
      class="pt-0"
      style="padding-left: 6px;"
    >
      <v-card class="text-center" style="height: 300px;">
        <v-card-text class="d-flex flex-column justify-center align-center">
          <v-avatar
            color="primary"
            variant="outlined"
            size="50"
            class="mb-4"
          >
            <v-icon
              size="2rem"
              icon="mdi-help-circle-outline"
            />
          </v-avatar>

          <h6 class="text-h6">
            Support
          </h6>
        </v-card-text>

        <v-card-text class="pt-0">
          <p>
            According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.
          </p>
        </v-card-text>

        <v-card-text class="justify-center">
          <v-btn variant="elevated">
            Contact Now
          </v-btn>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

<style lang="scss" scoped>
.avatar-center {
  position: absolute;
  border: 3px solid rgb(var(--v-theme-surface));
  inset-block-start: -2rem;
  inset-inline-start: 1rem;
}

// membership pricing
.member-pricing-bg {
  position: relative;
  background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
}

.membership-pricing {
  sup {
    inset-block-start: 9px;
  }
}
</style>