import React from 'react';
import ScrollReveal from './ScrollReveal';

interface PageHeroProps {
  title: string;
  subtitle: string;
  image?: string;
}

const PageHero = ({ 
  title, 
  subtitle, 
  image = "https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" 
}: PageHeroProps) => {
  return (
    <section className="relative py-32 bg-gray-900 overflow-hidden">
      {/* Background with subtle animation */}
      <div className="absolute inset-0 opacity-40 animate-[pulse_15s_infinite]">
        <img 
          src={image} 
          alt={title}
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-gray-900 via-gray-900/80 to-gray-950"></div>
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center z-10">
        <ScrollReveal animation="fade-in-up">
          <h1 className="text-5xl md:text-7xl font-black text-white leading-tight mb-8 tracking-tighter font-sans">
            {title}
          </h1>
        </ScrollReveal>
        
        <ScrollReveal animation="fade-in-up" delay={200}>
          <div className="flex items-center justify-center space-x-4 mb-8">
            <div className="w-12 h-1 bg-amber-600 rounded-full"></div>
            <p className="text-xl md:text-2xl text-amber-500 font-bold uppercase tracking-[0.3em] font-sans">
              {subtitle}
            </p>
            <div className="w-12 h-1 bg-amber-600 rounded-full"></div>
          </div>
        </ScrollReveal>

        <ScrollReveal animation="fade-in-up" delay={400}>
          <div className="inline-flex items-center space-x-2 text-xs font-black text-gray-500 uppercase tracking-widest bg-white/5 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 font-sans">
            <span>Anasayfa</span>
            <span className="text-amber-600">/</span>
            <span className="text-white">{title}</span>
          </div>
        </ScrollReveal>
      </div>

      {/* Accent decoration */}
      <div className="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent opacity-10"></div>
    </section>
  );
};

export default PageHero;