---
import Layout from '@layouts/Layout.astro'
import AboutHero from '@components/about/AboutHero.astro'
import Contacts from '@components/about/ContactCTA.astro'
import { pb } from '@lib/pocketbase';
import type { AboutData } from '@globalInterfaces';

const title = 'Обо мне | Redi - Веб-разработчик'
const description = 'Узнайте больше обо мне, Redi - веб-разработчике. Мой профессиональный опыт, биография и увлечение современными веб-технологиями.'

// Получаем данные из коллекции about
let aboutData: AboutData | null = null;
try {
  const response = await pb.collection('about').getFirstListItem('isActive = true');
  aboutData = {
    id: response.id,
    collectionId: response.collectionId,
    title: response.title,
    description: response.description,
    professional_experience: response.prof_exp,
    skills: response.skills || [],
    contact_title: response.contact_title,
    contact_description: response.contact_description,
    whatsapp_link: response.whatsapp_link,
    email: response.email,
    image: response.image,
    alt_text: response.alt_text,
    isActive: response.isActive,
  };
} catch (error) {
  console.error('Ошибка при получении данных из коллекции about:', error);
  // В случае ошибки, можно использовать заглушку или перенаправить
  aboutData = null;
}
---

<Layout title={title} description={description} canonicalLink="/about">
  <main class="max-w-3xl mx-auto my-12 px-4 sm:px-6 lg:px-0 space-y-16">
    {aboutData && (
      <>
        <AboutHero aboutData={aboutData} />
        <Contacts aboutData={aboutData} />
      </>
    )}
  </main>
</Layout>