<template>
  <section class="bg-blue-100 py-28" id="scroll-container">
    <div class="container max-w-7xl">
      <div class="mb-16">
        <h2
          class="
            text-center text-[42px]
            md:text-6xl
            text-gray-300
            mb-3
            font-semibold
          "
        >
          {{ content["need_something_header_" + $i18n.locale] }}
        </h2>
        <p class="text-xl font-medium text-center text-blue-300">
          {{ content["need_something_subtitle_" + $i18n.locale] }}
        </p>
      </div>
      <div class="relative flex flex-col gap-16">
        <HorizontalStepper />
        <DoubleCard
          :title="$t('steps.1.header')"
          :subtitle="$t('steps.1.subtitle')"
          :content="$t('steps.1.content')"
          img="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/steps-1.svg"
          :ctaText="$t('steps.1.cta_text')"
          :ctaLink="route('register')"
        />
        <DoubleCard
          :title="$t('steps.2.header')"
          :subtitle="$t('steps.2.subtitle')"
          :content="$t('steps.2.content')"
          img="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/steps-2.png"
          :ctaText="$t('steps.2.cta_text')"
          :ctaLink="route('register')"
          invert
        />
        <DoubleCard
          :title="$t('steps.3.header')"
          :subtitle="$t('steps.3.subtitle')"
          :content="$t('steps.3.content')"
          img="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/steps-3.svg"
          :ctaText="$t('steps.3.cta_text')"
          :ctaLink="route('register')"
        />
        <DoubleCard
          :title="$t('steps.4.header')"
          :subtitle="$t('steps.4.subtitle')"
          img="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/steps-4.svg"
          :ctaText="$t('steps.4.cta_text')"
          :ctaLink="route('register')"
          invert
        />
      </div>
    </div>
  </section>
</template>

<script>
import DoubleCard from "./DoubleCard.vue";
import HorizontalStepper from "./HorizontalStepper.vue";
export default {
  props: {
    content: {
      type: Object,
      required: true,
    },
  },
  components: {
    DoubleCard,
    HorizontalStepper,
  },
};
</script>
