import React from 'react'
import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { ChevronLeftIcon } from 'lucide-react'

type PageHeroProps = {
  title: string
  lead: string
  image: string
}

export function PageHero({ title, lead, image }: PageHeroProps) {
  return (
    <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
      {image && <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
      
      <div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
      
      <div
        className="absolute inset-0"
        style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.1) 70%)' }}
        aria-hidden="true"
      />
      
      <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
        <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
          <Link to="/" className="transition-colors hover:text-copper">
            صفحه اصلی
          </Link>
          <ChevronLeftIcon className="h-3.5 w-3.5" />
          <span className="text-copper">{title}</span>
        </nav>
        <motion.h1
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
          className="mt-5 max-w-[700px] text-hero font-bold text-ivory"
        >
          {title}
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.1, ease: [0.23, 1, 0.32, 1] }}
          className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65"
        >
          {lead}
        </motion.p>
        <div className="mt-8 h-px w-28 bg-copper" />
      </div>
    </section>
  )
}