import React from 'react'
import type { Metadata } from 'next'
import { getContentSync } from '@/lib/content'
import { AboutCompanySection } from '@/components/sections/other/about-company-section'

export async function generateMetadata(): Promise<Metadata> {
  const content = getContentSync()
  const meta = content.meta.pages.about
  return {
    title: meta.title,
    description: meta.description,
  }
}

export default function AboutPage() {
  const content = getContentSync()
  const about = content.pages.about as {
    heading: string
    description: string
    title: string
    subtitle: string
    bio: string
    vision: string
    philosophyHeading: string
    outro: string
  }

  const imageLogo = content.images?.logo
    ? { src: content.images.logo, alt: content.meta.siteName }
    : undefined
  const imageOffice = {
    src: '/assets/about-us/f97a15aa-cf15-4508-ae5d-d3e5211b433e.png',
    alt: 'نمای دفتر مستر دکور',
  }

  return (
    <main className="min-h-screen">
      <AboutCompanySection
        mainHeading={about.heading}
        description={about.description}
        title={about.title}
        subtitle={about.subtitle}
        bio={about.bio}
        vision={about.vision}
        philosophyHeading={about.philosophyHeading}
        outro={about.outro}
        imageLogo={imageLogo}
        imageOffice={imageOffice}
      />
    </main>
  )
}