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 WebcastCTABanner() {
  return (
    <section className="relative h-[700px] overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <ImageWithFallback
          src="https://images.unsplash.com/photo-1712903276180-eda90d32c182?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2aXJ0dWFsJTIwd2ViaW5hciUyMG9ubGluZSUyMG1lZXRpbmclMjBkaWdpdGFsJTIwcHJlc2VudGF0aW9ufGVufDF8fHx8MTc1NjEzMDY1MHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
          alt="Virtual webinar and online meeting digital presentation"
          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="Join Our Webcasts" variant="white" />

          {/* Main Headline */}
          <h2 
            className="text-h2-white mb-8"
          >
            Want to host your own webcast? 
            <span 
              className="italic"
              style={{ color: 'var(--color-brand-accent)' }}
            >
              {" "}Partner with us{" "}
            </span>
            to share your expertise with our community.
          </h2>

          {/* CTA Button - Updated to redirect to contact page */}
          <PrimaryCTAButton 
            text="Propose a Webcast"
            onClick={() => navigateTo('/contact?topic=webcast')}
            ariaLabel="Propose a webcast partnership with KLC"
            className="cta-banner-yellow"
          />

          {/* Supporting Text */}
          <p 
            className="text-body-white mt-6 opacity-90"
          >
            Share your leadership insights with our engaged community through expert-led webcasts and interactive sessions.
          </p>
        </div>
      </div>
    </section>
  );
}