KLC-Website-Frontend/src/components/CTABannerSection.tsx

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

interface CTABannerSectionProps {
  ctaSection?: {
    id: string;
    background_image_url: string;
    text: string;
    cta_text: string;
    cta_destination: string;
    description: string;
    landing_page_type: string;
    service_type: string | null;
  };
  isLoading?: boolean;
}

export function CTABannerSection({ ctaSection, isLoading }: CTABannerSectionProps) {
  if (isLoading) {
    return (
      <section className="relative h-[700px] overflow-hidden bg-gray-100 animate-pulse">
        <div className="absolute inset-0 bg-gray-200" />
        <div className="relative h-full flex items-center justify-end section-margin-x">
          <div className="bg-gray-300 rounded-lg p-16 max-w-2xl w-full h-96" />
        </div>
      </section>
    );
  }

  // If no CTA section data is available, don't render anything
  if (!ctaSection) {
    return null;
  }

  return (
    <section className="relative h-[700px] overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <ImageWithFallback
          src={ctaSection.background_image_url || "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="Background image for call to action section"
          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-4"
          >
            {ctaSection.text || "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>

          {/* Description */}
          {ctaSection.description && (
            <p 
              className="text-body-white mb-6 opacity-90"
            >
              {ctaSection.description}
            </p>
          )}

          {/* CTA Button */}
          <PrimaryCTAButton 
            text={ctaSection.cta_text || "Schedule a Consultation"}
            onClick={() => navigateTo(ctaSection.cta_destination || '/contact?topic=consulting')}
            ariaLabel="Schedule a consultation with our leadership experts"
            className="cta-banner-yellow"
          />
        </div>
      </div>
    </section>
  );
}