import type { Metadata } from 'next'
import Link from 'next/link'
import Article from '@/components/Article'
import PageCover from '@/components/PageCover'
import Reveal from '@/components/Reveal'

export const metadata: Metadata = {
  title: 'Blog — Esküvői tudnivalók',
  description:
    'Esküvői tudnivalók, tanácsok és tapasztalatok Böszörményi Kovács Zsolt ceremóniamestertől.',
  alternates: { canonical: '/blog' },
}

const posts = [
  {
    href: '/eskuvoi_helyszinek',
    title: 'Esküvői helyszínek',
    date: '2017.10.19',
    lead: 'Ha minden esküvői-lakodalmi helyszín, ahol eddig ceremóniamesterként dolgoztam tökéletesen alkalmasnak bizonyult volna erre a feladatra, ez az írás nem született volna meg, de ez nincs így, ezért tapasztalataim alapján néhány tanácsot adnék e kérdésben. Konkrét vendéglátó helyeket, rendezvényházakat természetesen nem említek, de minden megállapítás...',
  },
  {
    href: '/eskuvoi_dj',
    title: 'Miért lehet jó választás az esküvői DJ?',
    date: '2017.09.21',
    lead: 'Mindenekelőtt: nem vagyok sem zenekar-, sem DJ-párti, mindkét felállásban remek lagzikon vettem részt. Lassan húsz éve zenélek különböző (nem esküvői) együttesekben ütőhangszeresként és olykor énekesként, de lemezlovasok mellett is kongásként. Ismerem, szeretem mindkét "oldalt", mindkét világot, ám az esküvői DJ munkája sokak számára nem kellően...',
  },
]

export default function BlogPage() {
  return (
    <>
      <PageCover
        image="/images/blog/zsoltiacm_blog_banner.png"
        title="BLOG-ESKÜVŐI TUDNIVALÓK ZSOLTITÓL, A CM-TŐL"
        center
      />

      <section className="site-section">
        <div className="container">
          <Reveal>
            <Article name="blog" />
          </Reveal>

          <div className="grid-2" style={{ marginTop: '3rem' }}>
            {posts.map((post) => (
              <Reveal key={post.href}>
                <Link href={post.href}>
                  <h2>
                    <b>{post.title}</b>
                  </h2>
                </Link>
                <p>
                  <i>{post.date}</i>
                </p>
                <p>{post.lead}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  )
}