import { ArrowRight } from "lucide-react";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import { BrandedTag } from "./about/BrandedTag";
import { PrimaryCTAButton } from "./PrimaryCTAButton";
import { navigateTo } from "./Router";

export function CTABannerSection() {
  return (
    <section className="relative h-[700px] overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <ImageWithFallback
          src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
          alt="Professional team collaborating in modern office"
          className="w-full h-full object-cover"
        />
        
        {/* Subtle dark overlay for overall image */}
        <div className="absolute inset-0 bg-black/30" />
        
        {/* Gradient overlay for better text readability */}
        <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
      </div>

      {/* Content Container */}
      <div className="relative h-full flex items-center justify-end section-margin-x">
        {/* CTA Content Block */}
        <div 
          className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
          style={{ 
            backgroundColor: 'var(--color-brand-primary)'
          }}
        >
          {/* Branded Tag */}
          <BrandedTag text="Next Steps" variant="white" />

          {/* Main Headline */}
          <h2 
            className="text-h2-white mb-8"
          >
            Ready to transform your leadership? 
            <span 
              className="italic"
              style={{ color: 'var(--color-brand-accent)' }}
            >
              {" "}Get in touch{" "}
            </span>
            to start your development journey now.
          </h2>

          {/* CTA Button - Updated to redirect to contact page */}
          <PrimaryCTAButton 
            text="Schedule a Consultation"
            onClick={() => navigateTo('/contact?topic=consulting')}
            ariaLabel="Schedule a consultation with our leadership experts"
            className="cta-banner-yellow"
          />

          {/* Supporting Text */}
          <p 
            className="text-body-white mt-6 opacity-90"
          >
            Connect with our leadership experts to discuss your organization's specific development needs.
          </p>
        </div>
      </div>
    </section>
  );
}