<template>
  <div class="overflow-hidden">
    <div class="pb-container mt-[40px]">
      <div class="rounded-xl px-[40px] text-center mb-1 max-w-[1280px] mx-auto" v-if="headerComponent">
        <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
        <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></p>
      </div>
      <div v-if="timelineComponent">
        <div class="mt-4">
          <div v-for="(data, index) in timelineComponent.data" class="flex flex-row">
            <div class="w-1/5 mr-[40px] relative">
              <h1 class="text-[24px] font-semibold text-navy-800 pr-5">{{ data.title }}</h1>
              <div class="w-[32px] h-[32px] flex items-center justify-center border-2 border-navy-100 rounded-full absolute right-[-17px] bg-white top-0">
                <p class="w-[16px] h-[16px] rounded-full bg-navy-600"></p>
              </div>
              <div class="h-full absolute right-[-2px]" style="background: repeating-linear-gradient(to bottom, transparent, transparent 10px, #A9B8C6 8px, #A9B8C6 20px); width: 2px;"></div>
            </div>
            <div class="w-4/5">
              <p v-if="data.group_title" class="text-[24px] mb-6 font-semibold text-navy-800">{{ data.group_title }}</p>
              <div
                  v-for="(line, index) in data.lines"
                  :key="index"
                  class="bg-pale-orange-100 p-6 mb-6 rounded-lg md:rounded-2xl"
              >
                <h4 class="text-xl font-semibold text-gray-900">{{ line.title }}</h4>
                <div class="all-unset ql-editor">
                  <p v-html="line.description"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from "vue";
import "quill/dist/quill.snow.css";

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);
const headerComponent = computed(() => {
  return section.value.components.find((component) => component.type === "header");
});
const timelineComponent = computed(() => {
  return section.value.components.find((component) => component.type === "timeline_items");
});

</script>