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

'use client';

import React from 'react';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { m, LazyMotion, domAnimation } 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] as const } 
  },
};

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

  return (
    <section
      className={`relative min-h-[35vh] md:min-h-[50vh] flex items-center pt-28 pb-10 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
    >
      {bgSrc && (
        <m.div 
          key={`hero-bg-${pathname}`}
          className="absolute inset-0 z-0"
          initial={{ scale: 1.05, opacity: 1 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ duration: 1.5, ease: "easeOut" }}
        >
          <Image
            src={bgSrc}
            alt={title || 'Hero Background'}
            fill
            className="object-cover filter contrast-110 saturate-110 brightness-95"
            style={{
              objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
            }}
            sizes="100vw"
            priority
          />
          {/* Cinematic Color Grading Overlay */}
          <div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />
          
          {/* Dramatic Vignette & Fade to content */}
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
          <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent z-[3]" />
          
          {/* Top Fade for Header Navigation Readability */}
          <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
        </m.div>
      )}
      <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
        <m.div 
          key={`hero-content-${pathname}`}
          className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          {badge && (
            <m.div variants={itemVariants}>
              <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                {badge}
              </Badge>
            </m.div>
          )}
          <m.div variants={itemVariants}>
            <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
              {title}
            </Heading>
          </m.div>
          {subtitle && (
            <m.div variants={itemVariants}>
              <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                {subtitle}
              </p>
            </m.div>
          )}
          {ctaLabel && ctaHref && (
            <m.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
              <Button
                href={ctaHref}
                variant="accent"
                size="lg"
              >
                {ctaLabel}
                <span className="ml-3 transition-transform group-hover/btn:translate-x-2">
                  &rarr;
                </span>
              </Button>
            </m.div>
          )}
        </m.div>
      </Container>
    </section>
  );
};