import { PublicLayout } from '@/components/layout/public/public-layout';
import { ArchiveItem } from '@/types/interfaces';
import Image from 'next/image';
import { Metadata } from 'next';
import { buildMetadataFromContent, generateMetaTags } from '@/lib/meta-tags/server';

const archiveContent = {
  title: 'bladarkiv',
  description: 'Korte fakta om Magasinet KBH + magasinets historie fra 2004 til i dag.',
  author: 'Magasinet KBH',
  created: new Date(),
  url: 'https://magasinetkbh.dk/arkiv',
};

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

const items: ArchiveItem[] = [
  {
    id: 57,
    title: 'Nummer 57',
    date: 'Oktober 2010',
    feature: 'Nordhavn',
    updates: ['StreetMekka', 'Krøyers Plads', 'Smaragden'],
    topFlop: 'Pilou Asbæk',
    plus: ['Smørrebrød', 'Mikael Bertelsen'],
    image: '/images/archive/forside57.jpg',
    pdf: '/images/archive/kbh_20101007.pdf'
  },
  {
    id: 56,
    title: 'Nummer 56',
    date: 'September 2010',
    feature: 'Genbrugskøbenhavn',
    updates: [
      'Sommerlyst',
      'Supercykelstier',
      'KU.BE',
      'Besøgscenter Hareskoven',
      'Aktivitetshus i Den Grønne Firkant'
    ],
    topFlop: 'Cykelchef Andreas Røhl',
    plus: [
      'Anders Lund Madsen',
      'Teater-guide',
      'Den grumme Frederiksstad',
      'Stadsarkitekt Tina Saaby'
    ],
    image: '/images/archive/forside57.jpg',
    pdf: '/images/archive/kbh_20101007.pdf'
  },
  {
    id: 55,
    title: 'Nummer 55',
    date: 'Juli/August 2010',
    feature: 'Refshaleøen',
    updates: [
      'Kalvebod Brygge II',
      'Havnegade',
      'Københavns befæstning',
      'taghave i Birkegade'
    ],
    topFlop: 'Tue West',
    plus: ['Postkort', 'København i tal o.m.a'],
    image: '/images/archive/forside57.jpg',
    pdf: '/images/archive/kbh_20101007.pdf'
  },
  {
    id: 54,
    title: 'Nummer 54',
    date: 'Juni 2010',
    feature: '7 nye broer',
    updates: [
      'Nørre Campus',
      '8-tallet i Ørestad',
      'Gårdhave i Studenterhuset'
    ],
    topFlop: 'Nicholas Kawamura',
    plus: [
      'Byens bedste asfalt-spots',
      '10 år med Øresundsbroen',
      'KBH i Malmø'
    ],
    image: '/images/archive/forside57.jpg',
    pdf: '/images/archive/kbh_20101007.pdf'
  },
  {
    id: 53,
    title: 'Nummer 53',
    date: 'Maj 2010',
    feature: 'Brug byen som træningscenter',
    updates: ['Kvæsthuskvarteret', 'Kick Start København', 'Marmormolen'],
    topFlop: 'HuskMitNavn',
    plus: ['Guide til Dublin', 'Husbåde i København', '10 forårstips o.m.a.'],
    image: '/images/archive/forside57.jpg',
    pdf: '/images/archive/kbh_20101007.pdf'
  }
];

export default async function ArchivePage() {
  const { jsonLd } = await generateMetaTags(archiveContent);

  return (
    <PublicLayout>
      {jsonLd && (
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c')
          }}
        />
      )}
      <section className='mx-auto w-full max-w-[1362px] grow p-3 md:p-[30px] xl:border-x'>
        <div className='w-full'>
          <div className='flex flex-col xl:flex-row'>
            <div className='w-68 shrink-0'>
              <h2 className='text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
                bladarkiv
              </h2>
            </div>
            <div className='w-full'>
              <h3 className='mt-1 mb-9 text-lg font-bold text-neutral-900'>
                Her kan du læse alle 57 printudgaver af Magasinet KBH, der udkom
                2005-2010.
              </h3>
              <div className='flex flex-col'>
                {items.map((item) => (
                  <div
                    key={item.id}
                    className='border-b border-b-neutral-400 py-9 first:border-t first:border-t-neutral-400'
                  >
                    <div className='flex flex-col gap-6 md:flex-row'>
                      <div>
                        <Image
                          src={item.image || ''}
                          alt={item.title || ''}
                          width={105}
                          height={135}
                        />
                      </div>
                      <div className='flex-1'>
                        <div className='w-full border-b border-b-neutral-200 pb-2 text-neutral-900'>
                          <h4 className='leading-none font-bold'>
                            {item.title}
                          </h4>
                          <p>{item.date}</p>
                        </div>
                        <ul className='mt-2.5 text-sm'>
                          <li className='grid grid-cols-[120px_1fr]'>
                            <span className='font-bold uppercase'>Feature</span>
                            <p>{item.feature}</p>
                          </li>
                          <li className='grid grid-cols-[120px_1fr]'>
                            <span className='font-bold uppercase'>Updates</span>
                            <p>{item.updates.join(', ')}</p>
                          </li>
                          <li className='grid grid-cols-[120px_1fr]'>
                            <span className='font-bold uppercase'>
                              Top+Flop
                            </span>
                            <p>{item.topFlop}</p>
                          </li>
                          <li className='grid grid-cols-[120px_1fr]'>
                            <span className='font-bold uppercase'>OG</span>
                            <p>{item.plus.join(', ')}</p>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}