<template>
  <div>
    <!--<div v-html="etiquetteGuideContent.content" class="mx-auto history-section"></div>-->
    <v-card min-height="650" flat>
      <v-card-text class="pb-0 mb-0 px-0">
        <v-container class="pb-0 mb-0">
          <v-col cols="12" sm="6" class="mx-auto px-0">
            <div
              class="d-none d-sm-block py-12 my-12 py-sm-0 my-sm-0 px-10 px-sm-0"
            >
              <p
                class="font-weight-regular shipping-delivery-heading text-uppercase primary--text pb-4 pt-12 mt-12"
              >ORDER PROCESSING TIMES</p>
              <v-simple-table class="shipping-delivery-table">
                <template v-slot:default>
                  <thead>
                    <tr class="primary">
                      <th class="white--text text-center text-uppercase px-0">
                        <v-menu open-on-hover bottom offset-y class="shipping-delivery-table-menu">
                          <template v-slot:activator="{ on, attrs }">
                            <v-btn
                              color="white"
                              class="shipping-delivery-button"
                              dark
                              v-bind="attrs"
                              v-on="on"
                              text
                            >TECHNIQUES</v-btn>
                          </template>
                          <v-list class="mt-2 white">
                            <v-col class="shipping-delivery-table-menu">
                              <div>
                                <h5
                                  class="text-uppercase font-weight-regular primary--text py-1"
                                >Engraving</h5>
                              </div>
                              <div>
                                <h5
                                  class="text-uppercase font-weight-regular primary--text py-1"
                                >Thermography</h5>
                              </div>
                              <div>
                                <h5
                                  class="text-uppercase font-weight-regular primary--text py-1"
                                >Letterpress</h5>
                              </div>
                              <div>
                                <h5
                                  class="text-uppercase font-weight-regular primary--text py-1"
                                >Flat Print</h5>
                              </div>
                              <div>
                                <h5
                                  class="text-uppercase font-weight-regular primary--text py-1"
                                >Boarding & Edge Treatments</h5>
                              </div>
                              <div class="pt-3">
                                <p
                                  class="primary--text fontsize-14 body-font pt-2"
                                >Our Handcrafted products customized by you and for you.</p>
                              </div>
                            </v-col>
                          </v-list>
                        </v-menu>
                      </th>
                      <th class="white--text text-center text-uppercase px-0">
                        <v-menu open-on-hover bottom offset-y>
                          <template v-slot:activator="{ on, attrs }">
                            <v-btn
                              color="white"
                              class="shipping-delivery-button"
                              dark
                              v-bind="attrs"
                              v-on="on"
                              text
                            >TYPE</v-btn>
                          </template>
                          <v-list class="mt-2 white">
                            <v-col class="shipping-delivery-table-menu">
                              <div>
                                <h5 class="text-uppercase font-weight-regular primary--text">Boxed</h5>
                                <p
                                  class="primary--text fontsize-14 body-font pt-2"
                                >Our pre-made stationary line that can be shipped immediately to you.</p>
                              </div>
                              <div class="pt-3 white">
                                <h5
                                  class="text-uppercase font-weight-regular primary--text"
                                >Personalized</h5>
                                <p
                                  class="primary--text fontsize-14 body-font pt-2"
                                >Our Handcrafted products customized by you and for you.</p>
                              </div>
                            </v-col>
                          </v-list>
                        </v-menu>
                      </th>
                      <th class="white--text text-center text-uppercase px-0">
                        <v-menu open-on-hover bottom offset-y>
                          <template v-slot:activator="{ on, attrs }">
                            <v-btn
                              color="white"
                              class="shipping-delivery-button"
                              dark
                              v-bind="attrs"
                              v-on="on"
                              text
                            >DAYS</v-btn>
                          </template>

                          <v-list class="mt-2">
                            <v-col class="shipping-delivery-table-menu white">
                              <div>
                                <p
                                  class="primary--text fontsize-14 body-font pt-2"
                                >The number of days it will take us to process your order from start to finish.</p>
                              </div>
                              <div class="pt-3 white">
                                <p
                                  class="primary--text fontsize-14 body-font pt-2"
                                >Processing time does not include the time it will take to ship orders once it leaves our workshop.</p>
                              </div>
                            </v-col>
                          </v-list>
                        </v-menu>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="item in orderProcessingTime" :key="item.name">
                      <td class="primary--text text-center">{{ item.techniques }}</td>
                      <td class="primary--text text-center">{{ item.type }}</td>
                      <td class="primary--text text-center">{{ item.days }}</td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
            </div>
            <!----------------------Mobile view----------------------------------------->
            <div class="d-sm-none px-10 py-12">
              <p
                class="font-weight-regular  text-uppercase primary--text pb-4 shipping-delivery-heading"
              >ORDER PROCESSING TIMES</p>
              <v-simple-table class="shipping-delivery-mobile-table mt-12">
                <template v-slot:default>
                  <thead>
                    <tr class="primary">
                      <th
                        :class="techniquesMenu ?'background-mauve-CCB7FF':'primary'"
                        class="white--text text-center text-uppercase px-0"
                      >
                        <v-row
                          align="center"
                          class="mx-0 px-3"
                          v-show="techniquesMenu"
                          @click="techniquesMenu = false"
                        >
                          <v-col class="pa-0">
                            <span class="white--text float-left fontsize-18 text-uppercase">TECH</span>
                          </v-col>
                          <v-col cols="3" class="pa-0">
                            <v-icon color="white">mdi mdi-minus</v-icon>
                          </v-col>
                        </v-row>
                        <v-row
                          align="center"
                          class="mx-0 px-3"
                          v-show="!techniquesMenu"
                          @click="(techniquesMenu = true) && (daysMenu = false)"
                        >
                          <v-col class="pa-0">
                            <span class="white--text float-left fontsize-18 text-uppercase">TECH</span>
                          </v-col>
                          <v-col cols="3" class="pa-0">
                            <v-icon color="white">mdi mdi-plus</v-icon>
                          </v-col>
                        </v-row>
                      </th>
                      <th
                        :class="daysMenu ?'background-mauve-CCB7FF':'primary'"
                        class="white--text text-center text-uppercase px-0"
                      >
                        <v-row
                          align="center"
                          class="mx-0 px-3"
                          v-show="daysMenu"
                          @click="daysMenu = false"
                        >
                          <v-col cols="3" class="pa-0">
                            <v-icon color="white">mdi mdi-minus</v-icon>
                          </v-col>
                          <v-col class="pa-0">
                            <span class="white--text float-right fontsize-18 text-uppercase">Days</span>
                          </v-col>
                        </v-row>
                        <v-row
                          align="center"
                          class="mx-0 px-3"
                          v-show="!daysMenu"
                          @click="(daysMenu= true) && (techniquesMenu = false)"
                        >
                          <v-col cols="3" class="pa-0">
                            <v-icon color="white">mdi mdi-plus</v-icon>
                          </v-col>
                          <v-col class="pa-0">
                            <span class="white--text float-right fontsize-18 text-uppercase">Days</span>
                          </v-col>
                        </v-row>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-show="techniquesMenu && !daysMenu">
                      <td colspan="2">
                        <v-list class="mt-4">
                          <v-col>
                            <div>
                              <h4
                                class="text-uppercase font-weight-regular primary--text py-1"
                              >Engraving</h4>
                            </div>
                            <div>
                              <h4
                                class="text-uppercase font-weight-regular primary--text py-1"
                              >Thermography</h4>
                            </div>
                            <div>
                              <h4
                                class="text-uppercase font-weight-regular primary--text py-1"
                              >Letterpress</h4>
                            </div>
                            <div>
                              <h4
                                class="text-uppercase font-weight-regular primary--text py-1"
                              >Flat Print</h4>
                            </div>
                            <div>
                              <h4
                                class="text-uppercase font-weight-regular primary--text py-1"
                              >Boarding & Edge Treatments</h4>
                            </div>
                            <div class="pt-3">
                              <p
                                class="primary--text fontsize-14 body-font pt-2"
                              >Our Handcrafted products customized by you and for you.</p>
                            </div>
                          </v-col>
                        </v-list>
                      </td>
                    </tr>
                    <tr v-show="!techniquesMenu && daysMenu">
                      <td colspan="2">
                        <v-list class="mt-4">
                          <v-col>
                            <div>
                              <p
                                class="primary--text fontsize-14 body-font pt-2"
                              >The number of days it will take us to process your order from start to finish.</p>
                            </div>
                            <div class="pt-3">
                              <p
                                class="primary--text fontsize-14 body-font pt-2"
                              >Processing time does not include the time it will take to ship orders once it leaves our workshop.</p>
                            </div>
                          </v-col>
                        </v-list>
                      </td>
                    </tr>
                    <tr
                      v-show="!techniquesMenu && !daysMenu"
                      v-for="item in orderProcessingTimeMobile"
                      :key="item.name"
                    >
                      <td class="primary--text text-center">{{ item.techniques }}</td>
                      <td class="primary--text text-center">{{ item.days }}</td>
                    </tr>
                  </tbody>
                </template>
              </v-simple-table>
              <div class="py-6">
                <p
                  class="font-italic primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                >All items except Boxed are Personalized items which are subject to longer processing times.</p>
              </div>
            </div>
            <!--------------------------------------------------------------------------->
            <div class="d-none d-sm-block pa-0">
              <div class="py-12 my-12 py-sm-0 my-sm-0 py-md-0 my-md-0 px-10 px-sm-0 px-md-0">
                <p
                  class="text-uppercase shipping-delivery-heading font-weight-regular primary--text pt-12 mt-12 mt-sm-3 mt-md-3"
                >Can I still place an order?</p>
                <p
                  class="primary--text pb-12 mb-12 pb-sm-0 mb-sm-0 pb-md-0 fontsize-16 ls-n016 line-height-18pt regular-font"
                >Yes, we encourage you to place orders on Crane.com during this time, knowing that your deliveries may be delayed depending on your selection of printing process.</p>
              </div>
              <div class="py-12 my-12 py-sm-0 my-sm-0 py-md-0 my-md-0 px-10 px-sm-0 px-md-0">
                <p
                  class="text-uppercase font-weight-regular primary--text pt-12 mt-12 mt-sm-3 mt-md-3 shipping-delivery-heading"
                >When will you charge my credit card?</p>
                <p
                  class="primary--text pb-12 mb-12 pb-sm-0 mb-sm-0 pb-md-0 mb-md-0 fontsize-16 ls-n016 line-height-18pt regular-font"
                >Our payment process is automated, and your credit card will be charged at the time of placing your order. We understand that with significant delays in processing times, things may change and you may wish to make changes to your order. Our Customer Service team will be happy to assist you with any adjustments. Please email us at customerservice@crane.com.</p>
              </div>
            </div>
            <!-----------------------Mobile view------------------------------------------>
            <div class="d-sm-none">
              <v-row class="background-mauve">
                <v-col class="py-12 my-3 px-10">
                  <p
                    class="text-uppercase font-weight-regular primary--text shipping-delivery-heading"
                  >Can I still place an order?</p>
                  <p
                    class="primary--text fontsize-16 ls-n016 line-height-18pt body-font"
                  >Yes, we encourage you to place orders on Crane.com during this time, knowing that your deliveries may be delayed depending on your selection of printing process.</p>
                  <p
                    class="text-uppercase font-weight-regular primary--text pb-4 pt-12 shipping-delivery-heading"
                  >When will you charge my credit card?</p>
                  <p
                    class="primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                  >Our payment process is automated, and your credit card will be charged at the time of placing your order. We understand that with significant delays in processing times, things may change and you may wish to make changes to your order. Our Customer Service team will be happy to assist you with any adjustments. Please email us at customerservice@crane.com.</p>
                </v-col>
              </v-row>
            </div>
            <!----------------------------------------------------------------------------->
          </v-col>
          <v-col cols="12" sm="10" md="10" class="mx-auto px-0 d-none d-sm-block">
            <div class="py-12 my-12 px-10 px-sm-0 px-md-0">
              <p
                class="font-weight-regular text-uppercase primary--text pt-12 mt-12 shipping-delivery-heading"
              >UPS GrOUND SHIPPING TIMES</p>

              <v-divider class="primary mb-4"></v-divider>
              <v-card tile flat class="pa-12">
                <v-img :src="mapImage" min-height="415"></v-img>
              </v-card>
              <v-col align="center" class="d-flex justify-space-around pb-0 pt-12">
                <v-menu open-on-hover top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-row
                      align="center"
                      v-bind="attrs"
                      v-on="on"
                      class="shipping-delivery-days-button"
                    >
                      <v-col cols="3" class="pa-0 shipping-delivery-square"></v-col>
                      <v-col class="pa-0">
                        <span class="primary--text regular-font fontsize-12">1 DAY</span>
                      </v-col>
                    </v-row>
                  </template>

                  <v-list class="shipping-delivery-days-list pt-0">
                    <v-row align="center">
                      <v-col cols="3" class="pt-0">
                        <div class="shipping-delivery-square"></div>
                      </v-col>
                      <v-col class="pt-0">
                        <span class="primary--text pl-3 regular-font fontsize-12">1 DAY</span>
                      </v-col>
                    </v-row>

                    <v-list-item v-for="(item, index) in OneDay" :key="index">
                      <v-list-item-title class="py-0 primary--text word-break regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
                <v-menu open-on-hover top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-row
                      align="center"
                      v-bind="attrs"
                      v-on="on"
                      class="shipping-delivery-days-button"
                    >
                      <v-col
                        cols="3"
                        class="pa-0 shipping-delivery-day-two shipping-delivery-square"
                      ></v-col>
                      <v-divider color="primary--text" vertical></v-divider>
                      <v-col class="pa-0">
                        <span class="primary--text regular-font fontsize-12">2 DAYS</span>
                      </v-col>
                    </v-row>
                  </template>

                  <v-list class="shipping-delivery-days-list pt-0">
                    <v-row align="center">
                      <v-col cols="3" class="pt-0">
                        <div class="shipping-delivery-day-two shipping-delivery-square"></div>
                      </v-col>
                      <v-col class="pt-0">
                        <span class="primary--text pl-3 regular-font fontsize-12">2 DAYS</span>
                      </v-col>
                    </v-row>
                    <v-list-item v-for="(item, index) in twoDays" :key="index">
                      <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
                <v-menu open-on-hover top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-row
                      align="center"
                      v-bind="attrs"
                      v-on="on"
                      class="shipping-delivery-days-button"
                    >
                      <v-col
                        cols="3"
                        class="pa-0 shipping-delivery-square shipping-delivery-day-three"
                      ></v-col>
                      <v-divider color="primary--text" vertical></v-divider>
                      <v-col class="pa-0">
                        <span class="primary--text regular-font fontsize-12">3 DAYS</span>
                      </v-col>
                    </v-row>
                  </template>

                  <v-list class="shipping-delivery-days-list pt-0">
                    <v-row align="center">
                      <v-col cols="3" class="pt-0">
                        <div class="shipping-delivery-square shipping-delivery-day-three"></div>
                      </v-col>
                      <v-col class="pt-0">
                        <span class="primary--text pl-3 regular-font fontsize-12">3 DAYS</span>
                      </v-col>
                    </v-row>
                    <v-list-item v-for="(item, index) in threeDays" :key="index">
                      <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
                <v-menu open-on-hover top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-row
                      align="center"
                      v-bind="attrs"
                      v-on="on"
                      class="shipping-delivery-days-button"
                    >
                      <v-col
                        cols="3"
                        class="pa-0 shipping-delivery-square shipping-delivery-day-four"
                      ></v-col>
                      <v-divider color="primary--text" vertical></v-divider>
                      <v-col class="pa-0">
                        <span class="primary--text regular-font fontsize-12">4 DAYS</span>
                      </v-col>
                    </v-row>
                  </template>

                  <v-list class="shipping-delivery-days-list pt-0">
                    <v-row align="center">
                      <v-col cols="3" class="pt-0">
                        <div class="shipping-delivery-square shipping-delivery-day-four"></div>
                      </v-col>
                      <v-col class="pt-0">
                        <span class="primary--text pl-3 regular-font fontsize-12">4 DAYS</span>
                      </v-col>
                    </v-row>
                    <v-list-item v-for="(item, index) in fourDays" :key="index">
                      <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
                <v-menu open-on-hover top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-row
                      align="center"
                      v-bind="attrs"
                      v-on="on"
                      class="shipping-delivery-days-button"
                    >
                      <v-col
                        cols="3"
                        class="pa-0 shipping-delivery-square shipping-delivery-day-five"
                      ></v-col>
                      <v-divider color="primary--text" vertical></v-divider>
                      <v-col class="pa-0">
                        <span class="primary--text regular-font fontsize-12">5 DAYS</span>
                      </v-col>
                    </v-row>
                  </template>

                  <v-list class="shipping-delivery-days-list pt-0">
                    <v-row align="center">
                      <v-col cols="3" class="pt-0">
                        <div class="shipping-delivery-square shipping-delivery-day-five"></div>
                      </v-col>
                      <v-col class="pt-0">
                        <span class="primary--text pl-3 regular-font fontsize-12">5 DAYS</span>
                      </v-col>
                    </v-row>
                    <v-list-item v-for="(item, index) in fiveDays" :key="index">
                      <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
                <v-menu open-on-hover top>
                  <template v-slot:activator="{ on, attrs }">
                    <v-row
                      align="center"
                      v-bind="attrs"
                      v-on="on"
                      class="shipping-delivery-days-button"
                    >
                      <v-col
                        cols="3"
                        class="pa-0 shipping-delivery-square shipping-delivery-day-six"
                      ></v-col>
                      <v-divider color="primary--text" vertical></v-divider>
                      <v-col class="pa-0">
                        <span class="primary--text regular-font fontsize-12">6 DAYS</span>
                      </v-col>
                    </v-row>
                  </template>

                  <v-list class="shipping-delivery-days-list pt-0">
                    <v-row align="center">
                      <v-col cols="3" class="pt-0">
                        <div class="shipping-delivery-day-six-inside"></div>
                      </v-col>
                      <v-col class="pt-0">
                        <span class="primary--text pl-3 regular-font fontsize-12">6 DAYS</span>
                      </v-col>
                    </v-row>
                    <v-list-item v-for="(item, index) in sixDays" :key="index">
                      <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
              </v-col>
              <v-divider class="primary my-7"></v-divider>
              <v-col class="background-mauve pa-12">
                <div class="pa-12 mx-12">
                  <p
                    class="font-italic text-uppercase font-weight-regular primary--text shipping-delivery-heading"
                  >IMPORTANT</p>
                  <p
                    class="font-italic primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                  >Please refer to the map above for UPS transit times. Ground shipping within the US can take between 2 and 6 days.</p>
                  <p
                    class="font-italic primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                  >Note that some orders cannot be shipped via UPS and will be sent out via USPS. Our stationery products ship from Massachusetts.</p>
                  <p
                    class="font-italic primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                  >*Some states fall into two UPS shipping regions, please review carefully.</p>
                </div>
              </v-col>
            </div>
          </v-col>
          <!---------------------------------Mobile view----------------------------------->
          <v-col class="d-sm-none py-12 my-3 px-8">
            <h1
              class="font-weight-regular fontsize-28 text-uppercase primary--text pb-4 ls-n028 line-height-36"
            >UPS GROUND SHIPPING TIMES</h1>

            <v-divider class="primary mb-4"></v-divider>
            <v-card tile flat>
              <v-img :src="mapImage" min-height="435" position="right center"></v-img>
            </v-card>
            <v-col align="center" class="d-flex justify-space-between pt-12">
              <v-menu v-model="dayOneMenu" top>
                <template v-slot:activator="{ on, attrs }">
                  <v-row
                    align="center"
                    v-bind="attrs"
                    v-on="on"
                    class="shipping-delivery-days-button-mobileview"
                    @click="dayOneMenu = true"
                  >
                    <v-col cols="3" class="pa-0 shipping-delivery-square">
                      <v-icon color="white" class="pt-1">mdi mdi-plus</v-icon>
                    </v-col>
                    <v-col class="pa-0">
                      <span class="primary--text regular-font fontsize-12">1 DAY</span>
                    </v-col>
                  </v-row>
                </template>

                <v-list class="shipping-delivery-days-list pt-0">
                  <v-row align="center">
                    <v-col cols="3" class="pt-0">
                      <div class="shipping-delivery-square">
                        <v-icon
                          color="white"
                          @click="dayOneMenu = false"
                          class="pl-1 pt-1"
                        >mdi mdi-minus</v-icon>
                      </div>
                    </v-col>
                    <v-col class="pt-0">
                      <span class="primary--text pl-3 regular-font fontsize-12">1 DAY</span>
                    </v-col>
                  </v-row>

                  <v-list-item
                    @click="dayTwoMenu = false"
                    v-for="(item, index) in OneDay"
                    :key="index"
                  >
                    <v-list-item-title class="py-0 primary--text word-break regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
              <v-menu v-model="dayTwoMenu" top>
                <template v-slot:activator="{ on, attrs }">
                  <v-row
                    align="center"
                    v-bind="attrs"
                    v-on="on"
                    class="shipping-delivery-days-button-mobileview"
                    @click="dayTwoMenu = true"
                  >
                    <v-col cols="3" class="pa-0 shipping-delivery-square shipping-delivery-day-two">
                      <v-icon color="white" class="pt-1">mdi mdi-plus</v-icon>
                    </v-col>
                    <v-divider color="primary--text" vertical></v-divider>
                    <v-col class="pa-0">
                      <span class="primary--text regular-font fontsize-12">2 DAYS</span>
                    </v-col>
                  </v-row>
                </template>

                <v-list class="shipping-delivery-days-list pt-0">
                  <v-row align="center">
                    <v-col cols="3" class="pt-0">
                      <div class="shipping-delivery-square shipping-delivery-day-two">
                        <v-icon
                          color="white"
                          @click="dayTwoMenu = false"
                          class="pl-1 pt-1"
                        >mdi mdi-minus</v-icon>
                      </div>
                    </v-col>
                    <v-col class="pt-0">
                      <span class="primary--text pl-3 regular-font fontsize-12">2 DAYS</span>
                    </v-col>
                  </v-row>
                  <v-list-item
                    @click="dayTwoMenu = false"
                    v-for="(item, index) in twoDays"
                    :key="index"
                  >
                    <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-col>
            <v-divider class="primary my-12"></v-divider>
            <v-card tile flat>
              <v-img :src="mapImage" min-height="435"></v-img>
            </v-card>
            <v-col align="center" class="d-flex justify-space-between pt-12">
              <v-menu v-model="dayThreeMenu" top>
                <template v-slot:activator="{ on, attrs }">
                  <v-row
                    align="center"
                    v-bind="attrs"
                    v-on="on"
                    class="shipping-delivery-days-button-mobileview"
                    @click="dayThreeMenu = true"
                  >
                    <v-col
                      cols="3"
                      class="pa-0 shipping-delivery-square shipping-delivery-day-three"
                    >
                      <v-icon color="white" class="pt-1">mdi mdi-plus</v-icon>
                    </v-col>
                    <v-divider color="primary--text" vertical></v-divider>
                    <v-col class="pa-0">
                      <span class="primary--text regular-font fontsize-12">3 DAYS</span>
                    </v-col>
                  </v-row>
                </template>

                <v-list class="shipping-delivery-days-list pt-0">
                  <v-row align="center">
                    <v-col cols="3" class="pt-0">
                      <div class="shipping-delivery-square shipping-delivery-day-three">
                        <v-icon
                          color="white"
                          @click="dayThreeMenu = false"
                          class="pl-1 pt-1"
                        >mdi mdi-minus</v-icon>
                      </div>
                    </v-col>
                    <v-col class="pt-0">
                      <span class="primary--text pl-3 regular-font fontsize-12">3 DAYS</span>
                    </v-col>
                  </v-row>

                  <v-list-item v-for="(item, index) in threeDays" :key="index">
                    <v-list-item-title class="py-0 primary--text word-break regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
              <v-menu v-model="dayFourMenu" top>
                <template v-slot:activator="{ on, attrs }">
                  <v-row
                    align="center"
                    v-bind="attrs"
                    v-on="on"
                    class="shipping-delivery-days-button-mobileview"
                    @click="dayFourMenu = true"
                  >
                    <v-col
                      cols="3"
                      class="pa-0 shipping-delivery-square shipping-delivery-day-four"
                    >
                      <v-icon color="white" class="pt-1">mdi mdi-plus</v-icon>
                    </v-col>
                    <v-divider color="primary--text" vertical></v-divider>
                    <v-col class="pa-0">
                      <span class="primary--text regular-font fontsize-12">4 DAYS</span>
                    </v-col>
                  </v-row>
                </template>

                <v-list class="shipping-delivery-days-list pt-0">
                  <v-row align="center">
                    <v-col cols="3" class="pt-0">
                      <div class="shipping-delivery-square shipping-delivery-day-four">
                        <v-icon
                          color="white"
                          @click="dayFourMenu = false"
                          class="pl-1 pt-1"
                        >mdi mdi-minus</v-icon>
                      </div>
                    </v-col>
                    <v-col class="pt-0">
                      <span class="primary--text pl-3 regular-font fontsize-12">4 DAYS</span>
                    </v-col>
                  </v-row>
                  <v-list-item
                    @click="dayFourMenu = false"
                    v-for="(item, index) in fourDays"
                    :key="index"
                  >
                    <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-col>
            <v-divider class="primary my-12"></v-divider>
            <v-card tile flat>
              <v-img :src="mapImage" min-height="435" position="left center"></v-img>
            </v-card>
            <v-col align="center" class="d-flex justify-space-between pt-12">
              <v-menu v-model="dayFiveMenu" top>
                <template v-slot:activator="{ on, attrs }">
                  <v-row
                    align="center"
                    v-bind="attrs"
                    v-on="on"
                    class="shipping-delivery-days-button-mobileview"
                    @click="dayFiveMenu = true"
                  >
                    <v-col
                      cols="3"
                      class="pa-0 shipping-delivery-square shipping-delivery-day-five"
                    >
                      <v-icon color="white" class="pt-1">mdi mdi-plus</v-icon>
                    </v-col>
                    <v-divider color="primary--text" vertical></v-divider>
                    <v-col class="pa-0">
                      <span class="primary--text regular-font fontsize-12">5 DAYs</span>
                    </v-col>
                  </v-row>
                </template>

                <v-list class="shipping-delivery-days-list pt-0">
                  <v-row align="center">
                    <v-col cols="3" class="pt-0">
                      <div class="shipping-delivery-square shipping-delivery-day-five">
                        <v-icon
                          color="white"
                          @click="dayFiveMenu = false"
                          class="pl-1 pt-1"
                        >mdi mdi-minus</v-icon>
                      </div>
                    </v-col>
                    <v-col class="pt-0">
                      <span class="primary--text pl-3 regular-font fontsize-12">5 DAYS</span>
                    </v-col>
                  </v-row>

                  <v-list-item
                    @click="dayFiveMenu = false"
                    v-for="(item, index) in fiveDays"
                    :key="index"
                  >
                    <v-list-item-title class="py-0 primary--text word-break regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
              <v-menu v-model="daySixMenu" top>
                <template v-slot:activator="{ on, attrs }">
                  <v-row
                    align="center"
                    v-bind="attrs"
                    v-on="on"
                    class="shipping-delivery-days-button-mobileview"
                    @click="daySixMenu = true"
                  >
                    <v-col cols="3" class="pa-0 shipping-delivery-square shipping-delivery-day-six">
                      <v-icon color="primary" class="pt-1">mdi mdi-plus</v-icon>
                    </v-col>
                    <v-divider color="primary--text" vertical></v-divider>
                    <v-col class="pa-0">
                      <span class="primary--text regular-font fontsize-12">6 DAYS</span>
                    </v-col>
                  </v-row>
                </template>

                <v-list class="shipping-delivery-days-list pt-0">
                  <v-row align="center">
                    <v-col cols="3" class="pt-0">
                      <div
                        class="shipping-delivery-square shipping-delivery-day-six shipping-delivery-day-six-inside"
                      >
                        <v-icon
                          color="primary"
                          @click="daySixMenu = false"
                          class="pl-1 pt-1"
                        >mdi mdi-minus</v-icon>
                      </div>
                    </v-col>
                    <v-col class="pt-0">
                      <span class="primary--text pl-3 regular-font fontsize-12">6 DAYS</span>
                    </v-col>
                  </v-row>
                  <v-list-item
                    @click="daySixMenu = false"
                    v-for="(item, index) in sixDays"
                    :key="index"
                  >
                    <v-list-item-title class="py-0 primary--text regular-font fontsize-12">{{ item.title }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-col>
          </v-col>
          <!------------------------------------------------------------------------------->
          <!----------------------------------Mobile view---------------------------------->
          <v-row class="d-sm-none">
            <v-col class="background-mauve pa-12">
              <div class="py-12 my-12">
                <p
                  class="font-italic pt-12 mt-12 text-uppercase font-weight-regular primary--text shipping-delivery-heading"
                >IMPORTANT</p>
                <p
                  class="font-italic primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                >Please refer to the map above for UPS transit times. Ground shipping within the US can take between 2 and 6 days.</p>
                <p
                  class="font-italic primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                >Note that some orders cannot be shipped via UPS and will be sent out via USPS. Our stationery products ship from Massachusetts.</p>
                <p
                  class="font-italic pb-12 mb-12 primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
                >*Some states fall into two UPS shipping regions, please review carefully.</p>
              </div>
            </v-col>
          </v-row>
          <!--------------------------------------------------------------------------------->
          <v-col cols="12" sm="6" md="6" class="mx-auto px-8 py-12 my-12 mt-md-5">
            <div class="py-6 mt-4 mt-md-0">
              <p
                class="font-weight-regular text-uppercase primary--text shipping-delivery-heading"
              >Expedited Shipping for Personalized Orders</p>
              <p
                class="primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
              >Please note that personalized orders have a processing time of 3-8 business days (see above). Once the order is complete it will be shipped by chosen expedited method - overnight or 2-day air.</p>
            </div>
            <div class="py-6">
              <p
                class="text-uppercase font-weight-regular primary--text pb-4 regular-font"
              >International OrderS</p>
              <p
                class="primary--text fontsize-16 ls-n016 line-height-18pt regular-font"
              >We currently only ship to the United States, including Alaska, Hawaii, Puerto Rico as well as to Canada.</p>
            </div>
            <div class="py-6 mb-6 mb-md-12">
              <p
                class="text-uppercase font-weight-regular primary--text pb-4 regular-font"
              >Duties and TaxeS</p>
              <p
                class="primary--text fontsize-16 ls-n016 line-height-18pt regular-font pb-md-4"
              >Almost all shipments crossing international borders are subject to the assessment of duties and taxes imposed by the importing country’s government. Duties and taxes, if imposed, are due when your order is delivered.</p>
            </div>
          </v-col>
        </v-container>
        <v-row class="pt-sm-12 mt-sm-12 px-sm-12 mx-sm-12 px-md-12 mx-md-12">
          <v-col
            cols="12"
            sm="4"
            md="4"
            class="text-center primary py-7 d-flex flex-column px-12 px-sm-6 px-md-6"
          >
            <h3
              class="text-uppercase fontcolor-mauve-CCB7FF pt-2 fontsize-16 ls-n03 whyteTmin10-font"
            >About us</h3>
            <p
              class="pa-md-12 my-12 fontcolor-mauve-CCB7FF mx-5 mx-sm-0 mx-md-0 regular-font fontsize-16 ls-n03 line-height-18pt"
            >When you reflect upon your past, it's easy to see how inidividual moments aligned to lead you to where you are now.</p>
            <v-hover v-slot:default="{ hover }">
              <router-link
                :class="hover ? 'white--text' : 'fontcolor-mauve-CCB7FF '"
                to
                @click.native="routeToPage('CategoryPage')"
                class="ls-n009 text-decoration-none d-flex flex-row mx-5 mx-sm-0 mx-md-0 shipping-delivery-route-link align-center justify-center"
              >
                <span
                  class="text-uppercase fontsize-16 regular-font line-height-18pt homepage-content"
                >Learn More</span>
                <v-spacer></v-spacer>
                <!--<v-icon
                  class="ml-7 pb-1"
                  :class="hover ? 'white--text' : 'fontcolor-mauve-CCB7FF'"
                >mdi-arrow-right</v-icon>-->
                  <div class="shipping-delivery-route-link ml-7 pl-12" :class="hover?'shipping-delivery-right-hover-icon': 'shipping-delivery-right-mauve-icon'" ></div> 
              </router-link>
            </v-hover>
          </v-col>

          <v-col
            cols="12"
            sm="4"
            md="4"
            class="text-center background-mauve py-7 d-flex flex-column px-12 px-sm-6 px-md-6"
          >
            <h3
              class="text-uppercase primary--text pt-2 fontsize-16 ls-n03 whyteTmin10-font"
            >craftsmanship</h3>
            <p
              class="pa-md-12 primary--text my-sm-auto my-md-auto fontsize-16 ls-n03 line-height-18pt my-12 mx-5 mx-sm-0 mx-md-0 regular-font"
            >Various printing techniques can add personality to your correspondence.</p>
            <v-hover v-slot:default="{ hover }">
              <router-link
                :class="hover ? 'white--text' : 'primary--text'"
                to
                @click.native="routeToPage('CategoryPage')"
                class="ls-n009 text-decoration-none d-flex flex-row mx-5 mx-sm-0 mx-md-0 shipping-delivery-route-link align-center justify-center"
              >
                <span class="text-uppercase fontsize-16 regular-font homepage-content">Learn More</span>
                <v-spacer></v-spacer>
                <!--<v-icon
                  class="ml-7 pb-1"
                  :class="hover ? 'white--text' : 'primary--text'"
                >mdi-arrow-right</v-icon>-->
                  <div class="shipping-delivery-route-link ml-7 pl-12" :class="hover?'shipping-delivery-right-hover-icon': 'shipping-delivery-right-icon'" ></div> 
              </router-link>
            </v-hover>
          </v-col>
          <v-col
            cols="12"
            sm="4"
            md="4"
            class="text-center primary py-7 d-flex flex-column px-12 px-sm-6 px-md-6"
          >
            <h3
              class="text-uppercase fontcolor-mauve-CCB7FF pt-2 fontsize-16 ls-n03 whyteTmin10-font"
            >our papers</h3>
            <p
              class="pa-md-12 my-sm-auto my-md-auto my-12 fontsize-16 regular-font ls-n03 line-height-18pt fontcolor-mauve-CCB7FF mx-5 mx-sm-0 mx-md-0"
            >Crane's high quality paper is made from cotton for premium softness and texture.</p>
            <v-hover v-slot:default="{ hover }">
              <router-link
                :class="hover ? 'white--text' : 'fontcolor-mauve-CCB7FF '"
                to
                @click.native="routeToPage('CategoryPage')"
                class="ls-n009 text-decoration-none d-flex flex-row mx-5 mx-sm-0 mx-md-0 shipping-delivery-route-link align-center justify-center"
              >
                <span
                  class="text-uppercase fontsize-16 regular-font line-height-18pt homepage-content"
                >Learn More</span>
                <v-spacer></v-spacer>
                <!--<v-icon
                  class="ml-7 pb-1"
                  :class="hover ? 'white--text' : 'fontcolor-mauve-CCB7FF'"
                >mdi-arrow-right</v-icon>-->
                  <div class="shipping-delivery-route-link ml-7 pl-12" :class="hover?'shipping-delivery-right-hover-icon': 'shipping-delivery-right-mauve-icon'" ></div> 
              </router-link>
            </v-hover>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <PostScriptBlog />
    <FooterComponent />
  </div>
</template>
<script>
const baseUrl = process.env.VUE_APP_BASE_URL;

import PostScriptBlog from "@/components/retailer/home/PostScriptBlog";
import FooterComponent from "@/components/layout/footer/FooterComponent";
import { goToCategoryPageRouting } from "@/services/util.service";
export default {
  name: "ShippingDeliveryCms",
  components: {
    PostScriptBlog,
    FooterComponent
  },
  computed: {
    etiquetteGuideContent: function() {
      return this.$store.state.block.one;
    },
   
    canonical: function() {
      return this.$route.meta.canonical;
    }
  },
  data: () => ({
    dayOneMenu: false,
    dayTwoMenu: false,
    dayThreeMenu: false,
    dayFourMenu: false,
    dayFiveMenu: false,
    daySixMenu: false,
    techniquesMenu: false,
    daysMenu: false,
    mapImage: require("@/assets/Shipping_Map_@2x.png"),
    items: [
      { title: "Click Me" },
      { title: "Click Me" },
      { title: "Click Me" },
      { title: "Click Me 2" }
    ],
    OneDay: [
      { title: "Connecticut" },
      { title: "Delaware" },
      { title: "Massachusetts" },
      { title: "Maine" },
      { title: "New Jersey" },
      { title: "New York" },
      { title: "*Pennsylvania" },
      { title: "Rhode Island" },
      { title: "Vermont" }
    ],
    twoDays: [
      { title: "District of Columbia" },
      { title: "*Maine" },
      { title: "Maryland" },
      { title: "*Pennsylvania" },
      { title: "Virginia" },
      { title: "Ohio" },
      { title: "West Virginia" }
    ],
    threeDays: [
      { title: "Alabama" },
      { title: "Georgia" },
      { title: "lllinois" },
      { title: "Indiana" },
      { title: "lowa" },
      { title: "Kentucky" },
      { title: "Michigan" },
      { title: "Minnesota" },
      { title: "*Missouri" },
      { title: "North Carolina" },
      { title: "South Carolina" },
      { title: "Tennessee" },
      { title: "Wisconsin" }
    ],
    fourDays: [
      { title: "Arizona" },
      { title: "*Colorado" },
      { title: "Florida" },
      { title: "Kansas" },
      { title: "Louisiana" },
      { title: "Missouri" },
      { title: "Montana" },
      { title: "Nebraska" },
      { title: "North Dakota" },
      { title: "Oklahoma" },
      { title: "South Dakota" },
      { title: "*Texas" }
    ],
    fiveDays: [
      { title: "Alaska" },
      { title: "Arizona" },
      { title: "California" },
      { title: "*Colorado" },
      { title: "*Idaho" },
      { title: "Montana" },
      { title: "Nevada" },
      { title: "New Mexico" },
      { title: "Oregan" },
      { title: "Puerto Rico" },
      { title: "*Texas" },
      { title: "Utah" },
      { title: "Washington" },
      { title: "Wyoming" }
    ],
    sixDays: [{ title: "Hawali" }, { title: "*Idaho" }, { title: "*Oregon" }],
    orderProcessingTime: [
      {
        techniques: "All",
        type: "Boxed",
        days: "2-3"
      },
      {
        techniques: "Selected",
        type: "Personalized Sympathy",
        days: "4-6"
      },
      {
        techniques: "Letterpress",
        type: "Personalized",
        days: "10-12"
      },
      {
        techniques: "Engraving",
        type: "Personalized",
        days: "10-12"
      },
      {
        techniques: "Thermography",
        type: "Personalized",
        days: "7-9"
      },
      {
        techniques: "Border & Edges",
        type: "Personalized",
        days: "10-12"
      },
       {
        techniques: "Foil",
        type: "Personalized",
        days: "5-7"
      }
    ],
    orderProcessingTimeMobile: [
      {
        techniques: "Boxed",
        days: "2-3"
      },
      {
        techniques: "Personalized Sympathy",
        days: "4-6"
      },
      {
        techniques: "Personalized",
        days: "10-12"
      },
      {
        techniques: "Engraving",
        days: "10-12"
      },
      {
        techniques: "Thermography",
        days: "7-9"
      },
      {
        techniques: "Border & Edges",
        days: "10-12"
      },
       {
        techniques: "Foil",
        days: "5-7"
      }
    ]
  }),
  metaInfo() {
        return {
             link: [
                {rel: 'canonical', href:`${this.canonical ? window.location.href.split('?')[0] : baseUrl }`}
            ] 
        }
  },
  methods: {
    routeToPage(pageName) {
      if (pageName == "CategoryPage") {
        let vm = this;
        goToCategoryPageRouting(vm, {n:"Stationery",id:10});
      }
    }
  },

  created() {
    // this.$store.dispatch("block/fetchEtiquetteGuide", this.blockId);
  }
};
</script>
<style src="./shipping_delivery.scss" lang="scss"  /> 