import type { Metadata } from 'next'
import Image from 'next/image'
import PageCover from '@/components/PageCover'
import { IconFacebook, IconGlobe, IconPhone } from '@/components/Icons'
import Reveal from '@/components/Reveal'
import TeamCardTouch from '@/components/TeamCardTouch'

export const metadata: Metadata = {
  title: 'Szolgáltatók',
  description: 'Esküvői szolgáltatók, akiket Böszörményi Kovács Zsolt jó szívvel ajánl.',
  alternates: { canonical: '/partnerek' },
}

type Provider = {
  name: string
  web?: { label: string; href: string }
  phone?: { label: string; href: string }
  facebook?: string
  note?: string
}

type Category = { title: string; image: string; providers: Provider[] }

const categories: Category[] = [
  {
    title: 'Videó',
    image: '/images/provider/zsoltiacm_szolgaltatok_video.jpg',
    providers: [
      {
        name: 'Orbán András',
        phone: { label: '+36 20 498 64 61', href: 'tel:+36204986461' },
        facebook: 'https://www.facebook.com/andras.orban.963',
      },
    ],
  },
  {
    title: 'Fotó',
    image: '/images/provider/zsoltiacm_szolgaltatok_foto.jpg',
    providers: [
      {
        name: 'Fátyol Anette',
        phone: { label: '+36 20 360 17 65', href: 'tel:+36203601765' },
        facebook: 'https://www.facebook.com/profile.php?id=100076495922117',
      },
      {
        name: 'Kovács Tibor',
        web: { label: 'kphoto.eu', href: 'https://www.kphoto.eu/' },
        phone: { label: '+36 70 378 75 11', href: 'tel:+36703787511' },
        facebook: 'https://www.facebook.com/tibor.kovacs.184',
      },
      {
        name: 'Dobó Fotó',
        web: { label: 'dobofoto.hu', href: 'https://dobofoto.hu/' },
        phone: { label: '+36 30 609 54 04', href: 'tel:+36306095404' },
      },
    ],
  },
  {
    title: 'Háttérzene',
    image: '/images/provider/zsoltiacm_szolgaltatok_hatterzene.jpg',
    providers: [
      {
        name: 'Bakos László',
        web: { label: 'blgitar.webnode.hu', href: 'https://blgitar.webnode.hu/' },
        facebook: 'https://www.facebook.com/blgitar/',
      },
    ],
  },
  {
    title: 'Dekoráció',
    image: '/images/provider/zsoltiacm_szolgaltatok_dekoracio.jpg',
    providers: [
      {
        name: 'Léna Dekoráció',
        phone: { label: '+36 20 532 3528', href: 'tel:+36205323528' },
        facebook: 'https://www.facebook.com/profile.php?id=100063740855599',
      },
      {
        name: 'Nácsa Dekor',
        phone: { label: '+36 20 472 1615', href: 'tel:+36204721615' },
        facebook: 'https://www.facebook.com/nacsa79',
      },
    ],
  },
  {
    title: 'Meghívó',
    image: '/images/provider/zsoltiacm_szolgaltatok_meghivo.jpg',
    providers: [
      {
        name: 'Násznaposok Meghívó Manufaktúra',
        facebook: 'https://www.facebook.com/Nasznaposok.Meghivo.Manufaktura',
      },
    ],
  },
  {
    title: 'Esküvői Dj',
    image: '/images/provider/zsoltiacm_szolgaltatok_dj.jpg',
    providers: [
      {
        name: 'Dj Maci (Szulyák Zoltán)',
        web: { label: 'djmaci.webnode.hu', href: 'https://djmaci.webnode.hu' },
        facebook: 'https://www.facebook.com/DjMaci-277548438939917/',
      },
      {
        name: 'DJ Nyenyeman',
        web: { label: 'nyenyeman.hu', href: 'https://nyenyeman.hu' },
        phone: { label: '+36 70 386 5414', href: 'tel:+36703865414' },
      },
    ],
  },
  {
    title: 'Zenekar',
    image: '/images/provider/zsoltiacm_szolgaltatok_zenekar.jpg',
    providers: [
      {
        name: 'Nightband',
        web: { label: 'nightband.hu', href: 'http://nightband.hu' },
        facebook: 'https://www.facebook.com/Night-Band-746603005367003/',
        note: 'Női énekessel, +DJ szolgáltatással!',
      },
      {
        name: 'Aurum Zenekar',
        web: { label: 'aurum-zenekar.hu', href: 'http://aurum-zenekar.hu' },
        facebook: 'https://www.facebook.com/Aurum-Zenekar-162886747070023/',
      },
    ],
  },
]

export default function PartnerekPage() {
  return (
    <>
      <PageCover
        image="/images/provider/zsoltiacm_szolgaltatok_banner.png"
        title="Szolgáltatók"
        subtitle={<p>ESKÜVŐI SZOLGÁLTATÓK, AKIKET JÓ SZÍVVEL TUDOK AJÁNLANI!</p>}
      />

      <section className="site-section">
        <div className="container">
          <div className="grid-4">
            {categories.map((cat) => (
              <Reveal key={cat.title}>
                <div className="text-center">
                  <h2 style={{ marginBottom: '1.5rem' }}>{cat.title}</h2>
                </div>
                <div className="team-member">
                  <Image src={cat.image} alt={cat.title} width={400} height={500} sizes="(max-width: 576px) 100vw, (max-width: 992px) 50vw, 25vw" />
                  <div className="text">
                    {cat.providers.map((p) => (
                      <div key={p.name}>
                        <h2>{p.name}</h2>
                        <p>
                          {p.web && (
                            <>
                              <a href={p.web.href} target="_blank" rel="noopener noreferrer">
                                <IconGlobe /> {p.web.label}
                              </a>
                              <br />
                            </>
                          )}
                          {p.phone && (
                            <>
                              <a href={p.phone.href}>
                                <IconPhone /> {p.phone.label}
                              </a>
                              <br />
                            </>
                          )}
                          {p.facebook && (
                            <a href={p.facebook} target="_blank" rel="noopener noreferrer" aria-label={`${p.name} Facebook`}>
                              <IconFacebook />
                            </a>
                          )}
                          {p.note && (
                            <>
                              <br />
                              <span>{p.note}</span>
                            </>
                          )}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <TeamCardTouch />
    </>
  )
}