import { PublicLayout } from '@/components/layout/public/public-layout';
import MagazineInfo from '@/components/shared/magazine-info';
import { Metadata } from 'next';
import { createHelpers } from '@/lib/trpc/server';
import PostContentRenderer from '@/components/tip-tap/tiptap-renderer/post-content-renderer';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const aboutContent = {
  title: 'Om Magasinet KBH',
  description: 'Korte fakta om Magasinet KBH + magasinets historie fra 2004 til i dag.',
  author: 'Magasinet KBH',
  created: new Date('2015-09-15T16:27:55+02:00'),
  modified: new Date('2025-06-11T10:29:07+02:00'),
  url: 'https://magasinetkbh.dk/about',
};

export async function generateMetadata(): Promise<Metadata> {
  return await buildMetadataFromContent(aboutContent);
}

export default async function AboutPage() {
  const helpers = await createHelpers();

  const { jsonLd } = await generateMetaTags(aboutContent);

  const [shortStory, history, practice, config] = await Promise.all([
    helpers.block.get.fetch({
      key: 'about-short-story'
    }),
    helpers.block.get.fetch({
      key: 'about-history'
    }),
    helpers.block.get.fetch({
      key: 'about-practice'
    }),
    helpers.siteConfig.values.fetch()
  ]);

  const data = [shortStory, history, practice];

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <section className='mx-auto flex w-full max-w-[1362px] grow flex-col items-center gap-8 p-3 md:p-[30px] xl:flex-row xl:items-start xl:gap-0 xl:border-x'>
        <div className='w-full space-y-6'>
          {data.map((item, index) => (
            <div
              className='flex flex-col not-last:border-b xl:flex-row'
              key={index}
            >
              <div className='w-68 shrink-0'>
                <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
                  {item?.title}
                </h2>
              </div>
              <div className='w-full'>
                <PostContentRenderer nodeContent={item?.content} />
              </div>
            </div>
          ))}
        </div>
        <MagazineInfo
          subscribersCount={config.facebookPageSubscribersTotal}
          newsletterCount={config.newsletterSubscribersTotal}
        />
      </section>
    </PublicLayout>
  );
}