<template>
  <section id="about" class="bg-[#fff] py-20 md:py-28">
    <div class="max-w-7xl mx-auto px-4 grid items-start gap-12 lg:grid-cols-2">
      <div>
        <img
          src="/images/mucahit-uslu.webp"
          alt="Mücahit Uslu - Müco Mutfak ve Kahve"
          class="w-full md:w-2/5 lg:w-full h-full max-h-[768px] rounded-bl-4xl rounded-tr-4xl object-cover mx-auto"
        />
      </div>

      <div class="md:pl-8">
        <p class="mb-4 text-sm font-medium text-highlight">
          {{ t("Who we are") }}
        </p>

        <h2
          class="text-2xl sm:text-5xl font-bold tracking-tight text-dark md:mb-6"
        >
          {{ t("About") }}
        </h2>

        <div
          class="markdown mb-6 max-w-xl text-dark/80 [&_p]:mb-4 [&_p:last-child]:mb-0 [&_strong]:font-bold [&_em]:italic"
          v-html="overviewHtml"
        />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import MarkdownIt from "markdown-it";

const { t } = useI18n();

const md = new MarkdownIt({
  html: false, // raw HTML kapalı → XSS protection
  breaks: false,
  linkify: true,
});

const overviewHtml = computed(() => {
  const value = t("Overview Text");
  if (!value) return "";
  return md.render(value);
});
</script>
