KLC-Learners-Portal-Frontend-Figmamake/src/components/HeroSection.tsx

import React from 'react';
import { Button } from './ui/button';
import { ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import heroBannerImage from 'figma:asset/1bb9c22c86c0892d4716564b7135835f04869298.png';

interface HeroSectionProps {
  showAnnouncementBar?: boolean;
  announcementText?: string;
  announcementCTA?: string;
  title?: string;
  subtitle?: string;
  ctaText?: string;
  onAnnouncementClick?: () => void;
  onCTAClick?: () => void;
  showFeatures?: boolean;
}

export function HeroSection({
  showAnnouncementBar = true,
  announcementText = "Join Our Upcoming Leadership Webinars - Transform Your Leadership Journey",
  announcementCTA = "Enroll Now",
  title = "Empowering Future-Ready Leaders",
  subtitle = "Build confidence, agility, and clarity for today's complex challenges.",
  ctaText = "Build Your Leadership Pipeline",
  onAnnouncementClick,
  onCTAClick,
  showFeatures = true
}: HeroSectionProps) {
  
  const handleAnnouncementClick = () => {
    if (onAnnouncementClick) {
      onAnnouncementClick();
    } else {
      window.location.href = '/webinars?view=individual';
    }
  };

  const handleCTAClick = () => {
    if (onCTAClick) {
      onCTAClick();
    } else {
      window.location.href = '/dashboard?view=individual';
    }
  };

  return (
    <div className="relative w-full">
      {/* Top Announcement Bar */}
      {showAnnouncementBar && (
        <div className="bg-[#F8C301] text-[#26231A] py-3 px-4">
          <div className="container mx-auto px-4 lg:px-8">
            <div className="flex items-center justify-center gap-4 text-center">
              <span className="text-base font-medium">
                {announcementText}
              </span>
              <Button
                onClick={handleAnnouncementClick}
                variant="ghost"
                size="sm"
                className="text-[#26231A] hover:bg-[#26231A]/10 font-medium text-base h-auto py-1 px-3"
              >
                {announcementCTA}
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Main Hero Section */}
      <div className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0 z-0">
          <ImageWithFallback
            src={heroBannerImage}
            alt="Leadership workshop with diverse team members collaborating with colorful sticky notes on a wall"
            className="w-full h-full object-cover"
          />
          {/* Overlay for better text readability */}
          <div className="absolute inset-0 bg-black/40"></div>
        </div>

        {/* Hero Content */}
        <div className="relative z-10 container mx-auto px-4 lg:px-8 pt-20 pb-32">
          <div className="max-w-4xl">
            <div className="text-white space-y-8">
              {/* Main Heading */}
              <h1 className="text-5xl lg:text-6xl font-bold leading-tight">
                {title}
              </h1>

              {/* Subtext */}
              <p className="text-xl lg:text-2xl text-white/90 leading-relaxed max-w-2xl">
                {subtitle}
              </p>

              {/* CTA Button */}
              <div className="pt-4">
                <Button
                  onClick={handleCTAClick}
                  size="lg"
                  className="bg-[#04045B] hover:bg-[#04045B]/90 text-white text-lg px-8 py-4 min-h-[60px] font-medium"
                >
                  {ctaText}
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Feature Navigation */}
        {showFeatures && (
          <div className="absolute bottom-0 left-0 right-0 z-10">
            <div className="container mx-auto px-4 lg:px-8">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
                {/* Feature 01 */}
                <div className="text-white space-y-4">
                  <div className="flex items-center gap-4">
                    <div className="text-[#F8C301] text-xl font-bold">01</div>
                    <div className="h-px bg-[#F8C301] flex-1"></div>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold mb-2">Leadership Is Learning. We Teach It Right.</h3>
                    <p className="text-white/80 text-base leading-relaxed">
                      Master proven methodologies and frameworks that transform managers into exceptional leaders.
                    </p>
                  </div>
                </div>

                {/* Feature 02 */}
                <div className="text-white space-y-4">
                  <div className="flex items-center gap-4">
                    <div className="text-[#F8C301] text-xl font-bold">02</div>
                    <div className="h-px bg-[#F8C301] flex-1"></div>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold mb-2">Turn Managers Into Impactful Leaders</h3>
                    <p className="text-white/80 text-base leading-relaxed">
                      Develop strategic thinking, emotional intelligence, and decision-making capabilities.
                    </p>
                  </div>
                </div>

                {/* Feature 03 */}
                <div className="text-white space-y-4">
                  <div className="flex items-center gap-4">
                    <div className="text-[#F8C301] text-xl font-bold">03</div>
                    <div className="h-px bg-[#F8C301] flex-1"></div>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold mb-2">Struggling with Managerial Gaps?</h3>
                    <p className="text-white/80 text-base leading-relaxed">
                      Bridge the gap between individual contribution and effective team leadership.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Navigation Controls */}
            <div className="absolute bottom-6 right-6 flex items-center gap-2">
              <Button
                variant="ghost"
                size="icon"
                className="w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 text-white border border-white/20"
                aria-label="Previous slide"
              >
                <ChevronLeft className="h-5 w-5" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 text-white border border-white/20"
                aria-label="Next slide"
              >
                <ChevronRight className="h-5 w-5" />
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}