ocd-website/frontend/src/components/molecules/Hero.tsx

'use client';

import React from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';

interface HeroProps {
  title: string;
  subtitle: string;
  primaryButtonText: string;
  primaryButtonLink: string;
  secondaryButtonText?: string;
  secondaryButtonLink?: string;
  backgroundImageUrl?: string;
}

const Hero: React.FC<HeroProps> = ({
  title,
  subtitle,
  primaryButtonText,
  primaryButtonLink,
  secondaryButtonText,
  secondaryButtonLink,
  backgroundImageUrl,
}) => {
  // Animation variants
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5,
        ease: 'easeOut',
      },
    },
  };

  // Dynamic styles based on background image
  const bgStyle = backgroundImageUrl
    ? {
        backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url(${backgroundImageUrl})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }
    : {};

  // Default class for hero section (with or without bg image)
  const heroClass = backgroundImageUrl
    ? 'text-white'
    : 'hero-section';
  
  // Background style only for custom background images
  const backgroundStyle = backgroundImageUrl ? bgStyle : {};

  return (
    <section
      className={`py-20 md:py-32 ${heroClass}`}
      style={backgroundStyle}
      aria-labelledby="hero-title"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          className="max-w-3xl mx-auto text-center"
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          <motion.h1
            id="hero-title"
            className="hero-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6"
            variants={itemVariants}
          >
            {title}
          </motion.h1>
          
          <motion.p
            className={`text-xl md:text-2xl mb-8 ${
              backgroundImageUrl ? 'hero-subtitle-image' : 'hero-subtitle'
            }`}
            variants={itemVariants}
          >
            {subtitle}
          </motion.p>
          
          <motion.div
            className="flex flex-col sm:flex-row justify-center gap-4"
            variants={itemVariants}
          >
            <Link
              href={primaryButtonLink}
              className="btn-primary px-6 py-3 rounded-lg text-lg font-medium transition-colors duration-300 inline-block focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              {primaryButtonText}
            </Link>
            
            {secondaryButtonText && secondaryButtonLink && (
              <Link
                href={secondaryButtonLink}
                className="btn-secondary px-6 py-3 rounded-lg text-lg font-medium transition-colors duration-300 inline-block focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
              >
                {secondaryButtonText}
              </Link>
            )}
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export default Hero;