<template>
  <section class="py-12 px-4 text-center" v-if="id == 'home'">
    <h2 class="text-4xl leading-tight mb-6 font-bold font-heading uppercase">
      {{ main.title }}
    </h2>
    <div
      v-if="main.content"
      class="mb-6 text-gray-700"
      v-html="main.content"
    ></div>
    <div class="flex flex-wrap items-center -mx-4 mb-6">
      <div
        v-for="(feature, index) in features"
        :key="index"
        class="lg:w-1/3 mt-5 lg:mt-0 feature px-4 text-center"
      >
        <div v-if="index == 1">
          <div class="w-1/2 lg:w-full lg:h-full mx-auto px-2 order-1">
            <g-image :src="feature.svg" :alt="feature.title" />
          </div>
        </div>

        <div v-else>
          <span v-if="index !== 4" class="img-border"></span>
          <h5 class="capitalize">
            {{ feature.title }}
          </h5>
          <div v-html="feature.content" class="text-gray-700"></div>
        </div>
      </div>
    </div>
    <div class="mx-auto mt-20" v-if="main.btn">
      <g-link
        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
        :to="main.link"
        >{{ main.btn }}
      </g-link>
      <g-link
        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
        :to="main.link2"
        >{{ main.btn2 }}</g-link
      >
      <g-link
        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
        :to="main.link3"
        >{{ main.btn3 }}</g-link
      >
      <!-- <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div> -->
    </div>
  </section>

  <section class="py-12 px-4" v-else>
    <h2 class="text-4xl text-center mb-12 font-normal font-heading">
      {{ main.title }}
    </h2>
    <p
      v-if="main.subtitle"
      class="mb-6 text-2xl text-center font-ligh text-gray-800"
    >
      {{ main.subtitle }}
    </p>
    <div class="flex flex-wrap -mx-4 mb-6">
      <div
        v-for="feature in features"
        :key="feature.id"
        class="lg:w-1/2 px-4 mb-6 text-center"
      >
        <g-image
          class="w-1/3 mx-auto"
          v-if="feature.svg"
          :src="feature.svg.src"
          :alt="feature.svg"
        ></g-image>
        <h2 class="text-3xl mt-5 mb-3 font-normal font-heading">
          {{ feature.title }}
        </h2>
        <div
          v-html="feature.content"
          class="text-lg text-gray-700 leading-relaxed"
        ></div>
      </div>
    </div>
    <div class="text-center" v-if="main.btn">
      <g-link
        class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
        :to="main.link"
        >{{ main.btn }}</g-link
      >
      <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div>
    </div>
  </section>
</template>

<script>
export default {
  props: ["id", "main", "features"],
};
</script>

<style scoped>
.img-border {
  display: block;
  width: 50px;
  margin: auto;
  height: 5px;
  background: linear-gradient(to right, #b8a5e9, #2e3192);
}

.border-wrap {
  max-width: 250px;
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, #b8a5e9, #23256e);
  padding: 3px;
  border-radius: 20px;
}

.module {
  width: 245px;
  background: #252e6e;
  color: white;
  text-align: center;
  border-radius: 20px;
}
.feature {
  max-height: 315px !important;
}
</style>