import { fetchAboutCompanyData } from '@/services/crescent-group.service';
import React from 'react';

interface AboutData {
  title: string;
  description: string;
}

export default async function Page() {
  let aboutCompanyData: AboutData | null = null;

  try {
    const response = await fetchAboutCompanyData(
      '736a28c9-3e27-490f-9ff9-7ffa9f18e38c'
    );
    aboutCompanyData = response?.pagedata ?? null;
  } catch (error) {
    console.error('Error fetching about company data:', error);
  }

  if (!aboutCompanyData) return null;

  return (
    <section className="mx-auto max-w-6xl  md:px-5  lg:pb-12">
      <div className="grid gap-8 lg:gap-12 items-start">
        <div className="space-y-6 text-justify">
          <h2 className="text-[26px] md:text-4xl font-light tracking-tight text-gray-800">
            {aboutCompanyData.title}
          </h2>
          <div
            className="prose max-w-none text-[17px] text-gray-700 leading-relaxed"
            dangerouslySetInnerHTML={{
              __html: aboutCompanyData.description,
            }}
          />
        </div>
      </div>
    </section>
  );
}