'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';

interface HeroSectionProps {
  program: {
    title: string;
    subtitle: string;
    description: string;
    heroImage: string;
    color: string;
    icon: React.ReactNode;
  };
}

export const HeroSection: React.FC<HeroSectionProps> = ({ program }) => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <section className="relative min-h-[85vh] flex items-center overflow-hidden">
      {/* Parallax Background */}
      <div 
        className="absolute inset-0 bg-cover bg-center bg-fixed"
        style={{ 
          backgroundImage: `url('${program.heroImage}')`,
          transform: `translateY(${scrollY * 0.5}px)`
        }}
      />
      <div className="absolute inset-0 bg-gradient-to-br from-black/70 via-black/60 to-black/70" />
      
      {/* Animated Gradient Overlay */}
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-shimmer" />
      
      {/* Content */}
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 w-full">
        {/* Breadcrumb */}
        <Link 
          href="/#what-we-do"
          className="inline-flex items-center text-white/90 hover:text-white mb-8 group transition-all duration-300"
        >
          <svg className="w-5 h-5 mr-2 transform group-hover:-translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          <span className="text-sm font-medium">Back to Programs</span>
        </Link>
        
        {/* Program Badge */}
        <div className="inline-flex items-center gap-3 mb-6 px-6 py-3 bg-white/10 backdrop-blur-md rounded-full border border-white/20 shadow-lg">
          <div className={`text-white ${program.color.replace('from-', 'text-').replace('to-', '')}`}>
            {program.icon}
          </div>
          <span className="text-sm font-semibold text-white">Program Overview</span>
        </div>
        
        {/* Title Section */}
        <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
          {program.title}
        </h1>
        <p className="text-2xl md:text-3xl text-white/95 mb-6 font-light">
          {program.subtitle}
        </p>
        <p className="text-lg md:text-xl text-white/80 max-w-3xl leading-relaxed">
          {program.description}
        </p>
      </div>

      {/* Scroll Indicator */}
      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 animate-bounce">
        <svg className="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
        </svg>
      </div>
    </section>
  );
};