e-tib.com/components/blocks/HeroSection.tsx

'use client';

import React from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { Badge, Container, Heading } from '@/components/ui';
import { Button } from '@/components/ui/Button';

export interface HeroSectionProps {
  title: string;
  badge?: string;
  subtitle?: string;
  backgroundImage?: any;
  alignment?: 'left' | 'center';
  ctaLabel?: string;
  ctaHref?: string;
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: { 
    opacity: 1, 
    y: 0, 
    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] } 
  },
};

export const HeroSection: React.FC<HeroSectionProps> = (props) => {
  const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
  const bgSrc = backgroundImage?.sizes?.card?.url || backgroundImage?.url;

  return (
    <section
      className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
    >
      {bgSrc && (
        <motion.div 
          className="absolute inset-0 z-0"
          initial={{ scale: 1.05, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 1.5, ease: "easeOut" }}
        >
          <Image
            src={bgSrc}
            alt={title || 'Hero Background'}
            fill
            className="object-cover opacity-30 md:opacity-40"
            style={{
              objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
            }}
            sizes="100vw"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
        </motion.div>
      )}
      <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
        <motion.div 
          className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          {badge && (
            <motion.div variants={itemVariants}>
              <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                {badge}
              </Badge>
            </motion.div>
          )}
          <motion.div variants={itemVariants}>
            <Heading level={1} className="text-white mb-4 md:mb-8">
              {title}
            </Heading>
          </motion.div>
          {subtitle && (
            <motion.div variants={itemVariants}>
              <p className="text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl">
                {subtitle}
              </p>
            </motion.div>
          )}
          {ctaLabel && ctaHref && (
            <motion.div variants={itemVariants} className="mt-8">
              <Button
                href={ctaHref}
                variant="accent"
                size="lg"
              >
                {ctaLabel}
                <span className="ml-3 transition-transform group-hover/btn:translate-x-2">
                  &rarr;
                </span>
              </Button>
            </motion.div>
          )}
        </motion.div>
      </Container>
    </section>
  );
};