import React from 'react'
import type { FDCtaBannerBlock as FDCtaBannerBlockProps } from '@/payload-types'

const bgMap: Record<string, {
  section: string; heading: string; sub: string
  primaryBtn: string; secondaryBtn: string
}> = {
  yellow: {
    section:      'bg-fd-yellow',
    heading:      'text-fd-navy',
    sub:          'text-fd-navy/70',
    primaryBtn:   'bg-fd-navy hover:bg-fd-navy/90 text-white',
    secondaryBtn: 'border-2 border-fd-navy text-fd-navy hover:bg-fd-navy/10',
  },
  navy: {
    section:      'bg-fd-navy',
    heading:      'text-fd-yellow',
    sub:          'text-white/70',
    primaryBtn:   'bg-fd-yellow hover:bg-fd-yellow/90 text-fd-navy',
    secondaryBtn: 'border-2 border-white text-white hover:bg-white/10',
  },
  gray: {
    section:      'bg-fd-gray-light dark:bg-fd-navy',
    heading:      'text-fd-navy dark:text-fd-yellow',
    sub:          'text-fd-navy/70 dark:text-white/70',
    primaryBtn:   'bg-fd-navy hover:bg-fd-navy/90 text-white dark:bg-fd-yellow dark:hover:bg-fd-yellow/90 dark:text-fd-navy',
    secondaryBtn: 'border-2 border-fd-navy text-fd-navy hover:bg-fd-navy/10 dark:border-white dark:text-white dark:hover:bg-white/10',
  },
  white: {
    section:      'bg-white dark:bg-fd-navy',
    heading:      'text-fd-navy dark:text-fd-yellow',
    sub:          'text-fd-navy/70 dark:text-white/70',
    primaryBtn:   'bg-fd-navy hover:bg-fd-navy/90 text-white dark:bg-fd-yellow dark:hover:bg-fd-yellow/90 dark:text-fd-navy',
    secondaryBtn: 'border-2 border-fd-navy text-fd-navy hover:bg-fd-navy/10 dark:border-white dark:text-white dark:hover:bg-white/10',
  },
}

const sizeMap: Record<string, { py: string; heading: string; sub: string }> = {
  small:  { py: 'py-10 md:py-14',              heading: 'text-fd-h2',   sub: 'text-fd-body' },
  medium: { py: 'py-14 md:py-20 lg:py-[80px]', heading: 'text-fd-h1',   sub: 'text-fd-body-lg' },
  large:  { py: 'py-16 md:py-24 lg:py-[99px]', heading: 'text-fd-display', sub: 'text-fd-body-lg' },
}

export const FDCtaBannerBlockComponent: React.FC<FDCtaBannerBlockProps> = ({
  heading,
  subheading,
  ctaText,
  ctaLink = '/kontakt',
  secondaryCtaText,
  secondaryCtaLink,
  sectionBackground = 'yellow',
  alignment = 'center',
  size = 'medium',
  anchorId,
}) => {
  const theme    = bgMap[sectionBackground ?? 'yellow'] || bgMap.yellow
  const sizing   = sizeMap[size ?? 'medium'] || sizeMap.medium
  const isCenter = alignment === 'center'

  return (
    <section id={anchorId || undefined} className={`w-full ${sizing.py} ${theme.section}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8">
        <div className={`flex flex-col gap-6 md:gap-8 items-center text-center min-[820px]:${isCenter ? 'items-center text-center' : 'items-start text-left'} max-w-[800px] ${isCenter ? 'mx-auto' : ''}`}>

          <div className={`flex flex-col gap-3 items-center min-[820px]:${isCenter ? 'items-center' : 'items-start'}`}>
            <h2 className={`font-joey-heavy leading-tight ${sizing.heading} ${theme.heading}`}>
              {heading}
            </h2>
            {subheading && (
              <p className={`font-joey leading-relaxed ${sizing.sub} ${theme.sub}`}>
                {subheading}
              </p>
            )}
          </div>

          {(ctaText || secondaryCtaText) && (
            <div className={`flex flex-col sm:flex-row gap-4 w-full sm:w-auto ${isCenter ? 'justify-center' : ''}`}>
              {ctaText && (
                <a
                  href={ctaLink || '#'}
                  className={`inline-flex items-center justify-center px-8 py-3 rounded-full font-joey-bold text-fd-btn transition-colors w-full sm:w-auto ${theme.primaryBtn}`}
                >
                  {ctaText}
                </a>
              )}
              {secondaryCtaText && secondaryCtaLink && (
                <a
                  href={secondaryCtaLink}
                  className={`inline-flex items-center justify-center px-8 py-3 rounded-full font-joey-bold text-fd-btn transition-colors w-full sm:w-auto ${theme.secondaryBtn}`}
                >
                  {secondaryCtaText}
                </a>
              )}
            </div>
          )}

        </div>
      </div>
    </section>
  )
}