import { ImageWithFallback } from './figma/ImageWithFallback';
import { FooterBrand } from './FooterBrand';
import { FooterNavigation } from './FooterNavigation';
import { FooterBottom } from './FooterBottom';

interface FooterProps {
  onHomeClick?: () => void;
  onMelbourneClick?: () => void;
  onPassesClick?: () => void;
  onSignInClick?: () => void;
  onAttractionsClick?: () => void;
  onBlogsClick?: () => void;
  onHowItWorksClick?: () => void;
  onFAQClick?: () => void;
  onPrivacyPolicyClick?: () => void;
  onAboutUsClick?: () => void;
  onContactUsClick?: () => void;
  currentPage?: string;
}

export function Footer({ 
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onSignInClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onContactUsClick,
  currentPage 
}: FooterProps) {
  return (
    <>
      {/* Footer with Nature Background */}
      <footer className="relative text-white overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0 z-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1920&h=1080&fit=crop&q=80"
            alt="Beautiful mountain landscape with lake and forest - travel destination"
            className="w-full h-full object-cover"
          />
          
          {/* Enhanced White Gradient Overlay at Top */}
          <div className="absolute top-0 left-0 right-0 h-48 bg-gradient-to-b from-white via-white/95 via-white/80 via-white/60 via-white/40 to-transparent z-10" />
          
          {/* Additional Smooth Transition Layer */}
          <div className="absolute top-0 left-0 right-0 h-24 bg-gradient-to-b from-white via-white/90 to-white/70 z-10" />
          
          {/* Dark overlay for text readability */}
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/70 z-20" />
          
          {/* Additional atmospheric effects */}
          <div className="absolute inset-0 z-15">
            <div className="absolute top-1/3 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
            <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-primary/10 rounded-full blur-3xl" />
          </div>
        </div>

        {/* Content Overlay */}
        <div className="relative z-30 py-24">
          <div className="container mx-auto px-4">
            {/* Footer Content Grid */}
            <div className="w-full mt-48 bg-primary/10 backdrop-blur-lg rounded-[10px] border border-white/10 p-12">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16">
              {/* Logo and Description - Left Side */}
              <FooterBrand />

              {/* Navigation Links - Center to Right */}
              <FooterNavigation 
                onHomeClick={onHomeClick}
                onMelbourneClick={onMelbourneClick}
                onPassesClick={onPassesClick}
                onSignInClick={onSignInClick}
                onAttractionsClick={onAttractionsClick}
                onBlogsClick={onBlogsClick}
                onHowItWorksClick={onHowItWorksClick}
                onFAQClick={onFAQClick}
                onPrivacyPolicyClick={onPrivacyPolicyClick}
                onAboutUsClick={onAboutUsClick}
                onContactUsClick={onContactUsClick}
                currentPage={currentPage}
              />
            </div>

              {/* Bottom Section - Copyright, Legal Links, and Social Icons */}
              <FooterBottom onPrivacyPolicyClick={onPrivacyPolicyClick} />
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}