<template>
	<section class="relative">
        <div class="container mx-auto px-4">
          <div class="items-center flex flex-wrap">
            <div class="w-full md:w-4/12 ml-auto mr-auto px-4">
              <img alt="..." class="max-w-full rounded-lg shadow-lg" :src="require(`@/assets/img/landing/clinic/herb.png`)"/>
            </div>
            <div class="w-full md:w-7/12 ml-auto mr-auto px-4">
              <div class="md:pr-12">
                <div class="text-pink-medium p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full">
                  <i class="fas fa-rocket text-xl"></i>
                </div>
                <h3 class="text-xl font-semibold">Special Asian herbal formulations handed down through four generations are used for the effective treatment of :</h3>
                <ul class="list-none mt-6">
                  <li class="py-2" v-for="item in treatments" :key="item.id">
                    <div class="flex items-center">
                      <div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-medium mr-3"><i :class="item.fontawesome"></i></span></div>
                      <div><h4 class="text-dark-grey">{{ item.name }}</h4></div>
                    </div>
                  </li>
                </ul>
				        <p class="mt-4 text-lg leading-relaxed text-dark-grey">These herbal medicines can be combined with acupuncture for THE BEST results.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
	    <section class="pb-20 bg-light-grey -mt-24">
        <div class="container mx-auto px-4">
          <div class="flex flex-wrap items-center mt-32">
            <div class="w-full md:w-7/12 px-4 mr-auto ml-auto">
              <div class="text-medium-grey p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-light-grey">
                <i class="fas fa-user-friends text-xl"></i>
              </div>
              <h3 class="text-3xl mb-2 font-semibold leading-normal">About Herbal Tea</h3>
              <Collapse :items="faq"></Collapse>
            </div>
            <div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
              <div class="relative flex flex-col min-w-0 break-words w-full mb-6 rounded-lg">
                <img alt="..." :src="require(`@/assets/img/landing/clinic/cup.png`)" class="max-w-full "/>
              </div>
            </div>
          </div>
        </div>
      </section>
</template>

<script>
import Collapse from "@/components/utils/Collapse.vue";
import AOS from "aos";

export default {
  name: "HerbalMedicine",
  data() {
    return {
		treatments: [
			{ id: '0', name: 'ANTI DIABETIC', fontawesome: 'fas fa-fingerprint'},
			{ id: '1', name: 'COLD / FLU', fontawesome: 'fab fa-html5' },
			{ id: '2', name: 'CONSTIPATION', fontawesome: 'far fa-paper-plane' },
			{ id: '3', name: 'SKIN PROBLEMS', fontawesome: 'fas fa-fingerprint' },
			{ id: '4', name: 'DEPRESSION / ANXIETY', fontawesome: 'fab fa-html5' },
			{ id: '5', name: 'HEADACHES / MIGRAINES', fontawesome: 'far fa-paper-plane' },
			{ id: '6', name: 'EAR INFECTION / SINUS INFECTION', fontawesome: 'fas fa-fingerprint' },
			{ id: '7', name: 'BLADDER INFECTION / YEAST INFECTION', fontawesome: 'fab fa-html5' },
			{ id: '8', name: 'INDIGESTION / HEARTBURN / ACID REFLUX', fontawesome: 'far fa-paper-plane' },
		],
		faq: [
			{ id: '01', title: 'I have a cold, can I continue to drink my Herbal Tea?', answer: 'Usually, you do not have to worry unless you have a high fever. However, we do recommend that you consult with your doctor.' },
			{ id: '02', title: 'What should I do if I have an upset stomach or diarrhea?', answer: 'You should stop the Herbal Tea and ask your doctor to see if it was due to the Herbal Tea or not. If your upset stomach is due to other reasons, there are specific Herbal Teas that may help your stomach problem, so as your doctor.' },
			{ id: '03', title: 'I am taking a prescription drug, is it okay to drink Herbal Tea during the same period?', answer: 'Yes. We recommend that you drink your Herbal Tea 1-2 hours before or after you take your prescription drug.' },
			{ id: '04', title: 'Are there any foods that I should avoid while taking Herbal Tea?', answer: 'No. If there are, your doctor would have told you.' },
			{ id: '05', title: 'How should I store my Herbal Tea?', answer: 'You should keep your Herbal Tea in the refrigerator. Heat it up to room temperature before you drink.' },
			{ id: '06', title: 'My doctor recommended that I start to drink my Herbal Tea as soon as possible. What should I do if I wait a while?', answer: 'It is best to take your Herbal Tea as soon as you get them. However, if you can’t, you can keep them in your refrigerator up to one month.' },
			{ id: '07', title: 'Why did my acupuncturist recommend herbs?', answer: 'Herbs can be a powerful adjunct to acupuncture care. They are used to strengthen, build and support the body or to clear it of excess problems like a cold, fever or acute pain. Your practitioner may suggest starting with herbs and then adding acupuncture to your treatment in the future. This is suggested to build up your internal strength so you can receive the full benefits acupuncture has to offer.' },
		]
    }
  },
  mounted() {
	AOS.init();
  },
  components: {
    Collapse,
  },
};
</script>
