'use client'

import { motion } from 'framer-motion'
import { Button } from '../ui/Button'
import { cn } from '@/lib/utils'

interface HeroBlockProps {
  block: Record<string, unknown>
}

export function HeroBlock({ block }: HeroBlockProps) {
  const headline = (block.headline as string) || (block.title as string) || ''
  const subheadline = (block.subline as string) || (block.subheadline as string) || (block.subtitle as string) || ''
  const backgroundMedia = block.backgroundImage as Record<string, unknown> | undefined
  const backgroundUrl = backgroundMedia?.url as string | undefined
  const ctaLabel = (block.ctaLabel as string) || (block.buttonText as string) || ''
  const ctaLink = (block.ctaLink as string) || (block.buttonLink as string) || ''
  const overlayStyle = (block.overlayStyle as string) || 'dark'
  const alignment = (block.alignment as string) || 'center'
  const fullHeight = block.fullHeight !== false

  const isDark = overlayStyle === 'dark'

  return (
    <section
      className={cn(
        'relative w-full bg-cover bg-center bg-fixed',
        fullHeight ? 'h-screen' : 'h-[60vh] min-h-[500px]'
      )}
      style={{
        backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : undefined,
        backgroundColor: !backgroundUrl ? '#111' : undefined,
      }}
    >
      {/* Overlay */}
      <div
        className={cn(
          'absolute inset-0',
          isDark ? 'bg-dark/60' : 'bg-light/60'
        )}
      />

      {/* Content */}
      <div className="absolute inset-0 flex items-center">
        <div
          className={cn(
            'w-full px-4',
            alignment === 'center' ? 'text-center mx-auto max-w-5xl' : 'text-left pl-[5%] md:pl-[8%] max-w-[65%] md:max-w-[55%]'
          )}
        >
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
          >
            {/* Title */}
            <h1
              className={cn(
                'font-heading font-bold mb-[50px]',
                'text-[1.8em] sm:text-[2.5em] md:text-[3.5em] lg:text-[4em] tracking-[5px] sm:tracking-[8px] md:tracking-[10px] leading-[1.3]',
                isDark ? 'text-white' : 'text-dark'
              )}
            >
              {headline}
            </h1>

            {/* Subtitle */}
            {subheadline && (
              <p
                className={cn(
                  'text-[1em] md:text-[1.2em] tracking-[2px] mb-5',
                  isDark ? 'text-gray-light' : 'text-gray'
                )}
              >
                {subheadline}
              </p>
            )}

            {/* CTA */}
            {ctaLabel && ctaLink && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4, duration: 0.6 }}
                className="mt-10"
              >
                <Button
                  href={ctaLink}
                  variant={isDark ? 'ghost-light' : 'ghost'}
                  size="large"
                >
                  {ctaLabel}
                </Button>
              </motion.div>
            )}
          </motion.div>
        </div>
      </div>

      {/* Scroll Indicator */}
      {fullHeight && (
        <motion.a
          href="#content"
          className={cn(
            'absolute bottom-[30px] left-1/2 -translate-x-1/2',
            'text-[40px] transition-colors duration-500 border-none',
            isDark ? 'text-white/50 hover:text-white' : 'text-dark/50 hover:text-dark'
          )}
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 1, duration: 0.6 }}
        >
          <span className="block animate-bounce">&#8595;</span>
        </motion.a>
      )}
    </section>
  )
}
