<script setup lang="ts"></script>
<template>
  <section class="bg-gradient-odd py-section">
    <div
      class="ceo-section container mx-auto flex flex-col items-center justify-between gap-y-10 px-4 lg:flex-row"
    >
      <div class="ceo-contnet w-full lg:w-1/2">
        <h2 class="dark-text-gradient mb-4 text-[40px] font-bold">
          {{ $t("ceo.title") }}
        </h2>
        <div class="text-primary flex flex-col gap-4 text-[18px]">
          <p>
            {{ $t("ceo.description1") }}
          </p>
          <p>
            {{ $t("ceo.description2") }}
          </p>
          <p>
            {{ $t("ceo.description3") }}
          </p>
          <p>
            {{ $t("ceo.description4") }}
          </p>
          <p>
            {{ $t("ceo.description5") }}
          </p>
          <p>
            {{ $t("ceo.description6") }}
          </p>
        </div>
      </div>
      <div class="-order-1 flex flex-col gap-4 lg:order-1">
        <div class="ceo-image bg-background w-full rounded-[16px]">
          <div class="mx-auto w-[292px]">
            <NuxtImg
              src="/images/about-img.png"
              class="block w-full"
              :width="223"
              :height="291"
              preset="default"
              alt="CEO: Mahmoud-Nabil"
            />
          </div>
        </div>
        <div
          class="ws-gradient-border mx-auto flex h-[48px] w-[340px] items-center justify-evenly sm:w-[400px]"
        >
          <h3>{{ $t("ceo.postion") }}</h3>
          <Separator
            orientation="vertical"
            class="bg-primary !h-[30px] w-[1px]"
          />
          <h3>{{ $t("ceo.name") }}</h3>
        </div>
      </div>
    </div>
  </section>
</template>
<style scoped></style>
