import type { Metadata } from 'next'
import Gallery from '@/components/Gallery'
import PageCover from '@/components/PageCover'
import Reveal from '@/components/Reveal'
import VideoBlock from '@/components/VideoBlock'
import { gallery } from '@/lib/data'

export const metadata: Metadata = {
  title: 'Képek és videók',
  description:
    'Fotók és videók Böszörményi Kovács Zsolt esküvői ceremóniamester munkáiról.',
  alternates: { canonical: '/galeria' },
}

const videos = [
  { id: 'TobxL9gnXlA', label: 'Ha megnéznétek egy esküvőn, munka közben:' },
  { id: 'LLJ-3lo0xMQ', label: 'Ha belenéznétek egy általam vezetett szertartásba:' },
  { id: 'lrTvX2C0Km8', label: 'Angol-magyar referenciavideó friss esküvői felvételekkel:' },
  { id: 'N1aFqfbDWkU', label: 'Ha szeretnétek, ez a dal a ti esküvőtökön is megszólalhat élőben!' },
]

export default function GaleriaPage() {
  return (
    <>
      <PageCover image="/images/zsoltiacm_galeria_banner.png" title="Képek és videók" />

      <section
        className="site-section bg-image"
        style={{ backgroundImage: "url('/images/zsoltiacm_galeria_hatter.png')" }}
      >
        <div className="layer-40" style={{ position: 'absolute', inset: 0 }} />
        <div className="container section-inner">
          <Reveal>
            <div className="site-section-heading text-center">
              <h2>Videók</h2>
            </div>
          </Reveal>

          {videos.map((v) => (
            <Reveal key={v.id}>
              <h3 className="text-center" style={{ marginBottom: 20 }}>
                {v.label}
              </h3>
              <VideoBlock videoId={v.id} poster="/images/zsoltiacm_video.jpg" label={v.label} />
            </Reveal>
          ))}

          <Reveal>
            <div className="site-section-heading text-center">
              <h2>Képek</h2>
            </div>
          </Reveal>
          <Gallery items={gallery} />
        </div>
      </section>
    </>
  )
}