"use client";

import Image from "next/image";

interface InnerBannerProps {
    title: string;
    subtitle?: string;
    breadcrumbs?: { label: string; href?: string }[];
    backgroundImage?: string;
}

export default function InnerBanner({
    title,
    subtitle,
    breadcrumbs,
    backgroundImage = "/hero-image.jpg"
}: InnerBannerProps) {
    return (
        <div className="relative h-[450px] w-full overflow-hidden">
            {/* Background Image */}
            <div className="absolute inset-0">
                <Image
                    src={backgroundImage}
                    alt={`${title} - Sky and Soil Real Estate`}
                    fill
                    className="object-cover"
                    priority
                />
                {/* Overlay */}
                <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/30" />
            </div>

            {/* Content */}
            <div className="relative h-full max-w-7xl mx-auto px-6 flex flex-col justify-center">
                {/* Breadcrumbs */}
                {breadcrumbs && breadcrumbs.length > 0 && (
                    <nav className="mb-4">
                        <ol className="flex items-center gap-2 text-sm text-white/80">
                            {breadcrumbs.map((crumb, index) => (
                                <li key={index} className="flex items-center gap-2">
                                    {crumb.href ? (
                                        <a
                                            href={crumb.href}
                                            className="hover:text-white transition-colors"
                                        >
                                            {crumb.label}
                                        </a>
                                    ) : (
                                        <span className="text-white font-medium">{crumb.label}</span>
                                    )}
                                    {index < breadcrumbs.length - 1 && (
                                        <svg className="w-4 h-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                        </svg>
                                    )}
                                </li>
                            ))}
                        </ol>
                    </nav>
                )}

                {/* Title */}
                <h1 className="text-5xl md:text-6xl font-bold text-white mb-4 leading-tight">
                    {title}
                </h1>

                {/* Subtitle */}
                {subtitle && (
                    <p className="text-xl text-white/90 max-w-2xl">
                        {subtitle}
                    </p>
                )}

                {/* Decorative Line */}
                <div className="mt-6 w-24 h-1 bg-primary rounded-full" />
            </div>

            {/* Animated Particles */}
            <div className="absolute inset-0 pointer-events-none">
                {[
                    { left: 20, top: 30, delay: 0, duration: 3.5 },
                    { left: 60, top: 70, delay: 0.5, duration: 4 },
                    { left: 80, top: 20, delay: 1, duration: 3.2 },
                    { left: 40, top: 80, delay: 1.5, duration: 4.5 },
                    { left: 10, top: 50, delay: 2, duration: 3.8 },
                ].map((particle, i) => (
                    <div
                        key={i}
                        className="absolute w-2 h-2 bg-white/20 rounded-full animate-float"
                        style={{
                            left: `${particle.left}%`,
                            top: `${particle.top}%`,
                            animationDelay: `${particle.delay}s`,
                            animationDuration: `${particle.duration}s`,
                        }}
                    />
                ))}
            </div>

            <style jsx>{`
                @keyframes float {
                    0%, 100% {
                        transform: translateY(0) translateX(0);
                        opacity: 0;
                    }
                    50% {
                        opacity: 1;
                    }
                    100% {
                        transform: translateY(-100px) translateX(50px);
                        opacity: 0;
                    }
                }

                .animate-float {
                    animation: float linear infinite;
                }
            `}</style>
        </div>
    );
}