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

interface InsightCard {
  id: number;
  title: string;
  description?: string;
  date: string;
  tags: string[];
  image: string;
}

const insightCards: InsightCard[] = [
  {
    id: 1,
    title: "The Evolving DNA of a Modern Leader",
    description: "Explore how leadership traits are shifting in the age of AI, remote work, and hyper-connectivity.",
    date: "25-05-2025",
    tags: ["Adaptability", "Strategic foresight"],
    image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=800&q=80"
  },
  {
    id: 2,
    title: "Strategic Leadership in Uncertain Times",
    date: "25-05-2025",
    tags: ["Strategy", "Decision Making"],
    image: "https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=800&q=80"
  },
  {
    id: 3,
    title: "Building High-Performance Teams",
    date: "25-05-2025",
    tags: ["Team Building", "Performance"],
    image: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=crop&w=800&q=80"
  }
];

// Insight Tag Component
function InsightTag({ text }: { text: string }) {
  return (
    <span
      className="px-3 py-1 text-sm font-medium rounded-full"
      style={{ 
        backgroundColor: 'var(--color-brand-accent)',
        color: 'var(--color-brand-black)'
      }}
    >
      {text}
    </span>
  );
}

// Arrow Icon Component
function ArrowIcon() {
  return (
    <div className="p-2 rounded-full transition-all duration-300 group-hover:bg-gray-100"
         style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
      <ArrowUpRight className="w-4 h-4" style={{ color: 'var(--color-brand-black)' }} />
    </div>
  );
}

// Calendar Icon Component
function CalendarIcon() {
  return (
    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
      <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
    </svg>
  );
}

// Explore All Button Component - Updated to redirect to articles page
function ExploreAllButton() {
  return (
    <PrimaryCTAButton 
      text="Explore All"
      onClick={() => navigateTo('/learning/articles')}
      ariaLabel="Explore all leadership insights and ideas"
      className="explore-all-cta-override"
    />
  );
}

// Large Insight Card Component
function LargeInsightCard({ card }: { card: InsightCard }) {
  return (
    <div className="relative h-[500px] rounded-xl overflow-hidden group cursor-pointer">
      {/* Background Image */}
      <div className="absolute inset-0 transition-transform duration-300 group-hover:scale-105">
        <ImageWithFallback 
          src={card.image}
          alt={card.title}
          className="w-full h-full object-cover"
        />
      </div>
      
      {/* White Content Box */}
      <div className="insight-card-white-box absolute bottom-6 left-6 right-6 bg-white rounded-xl p-6 shadow-lg transition-all duration-300 group-hover:shadow-xl">
        {/* Top section with tags and arrow */}
        <div className="insight-card-header flex items-start justify-between mb-4">
          <div className="insight-card-tags flex gap-2">
            {card.tags.map((tag, index) => (
              <InsightTag key={index} text={tag} />
            ))}
          </div>
          <ArrowIcon />
        </div>

        {/* Bottom section with content and date */}
        <div className="insight-card-footer">
          <div className="insight-card-text-content mb-4">
            <h3 className="insight-card-title text-xl font-bold mb-3 leading-tight"
                style={{ color: 'var(--color-brand-black)' }}>
              {card.title}
            </h3>
            {card.description && (
              <p className="insight-card-description text-gray-600 text-sm leading-relaxed">
                {card.description}
              </p>
            )}
          </div>
          
          <div className="insight-card-date flex items-center gap-2 text-gray-500">
            <CalendarIcon />
            <span className="insight-card-date-text text-sm font-medium">{card.date}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// Small Insight Card Component
function SmallInsightCard({ card }: { card: InsightCard }) {
  return (
    <div className="relative h-[235px] rounded-xl overflow-hidden group cursor-pointer">
      {/* Background Image */}
      <div className="absolute inset-0 transition-transform duration-300 group-hover:scale-105">
        <ImageWithFallback 
          src={card.image}
          alt={card.title}
          className="w-full h-full object-cover"
        />
      </div>
      
      {/* White Content Box */}
      <div className="insight-card-white-box absolute bottom-4 left-4 right-4 bg-white rounded-xl p-4 shadow-lg transition-all duration-300 group-hover:shadow-xl">
        {/* Top section with tags and arrow */}
        <div className="insight-card-header flex items-start justify-between mb-3">
          <div className="insight-card-tags flex gap-2">
            {card.tags.map((tag, index) => (
              <span
                key={index}
                className="px-2.5 py-1 text-xs font-medium rounded-full"
                style={{ 
                  backgroundColor: 'var(--color-brand-accent)',
                  color: 'var(--color-brand-black)'
                }}
              >
                {tag}
              </span>
            ))}
          </div>
          <div className="p-1.5 rounded-full transition-all duration-300 group-hover:bg-gray-100"
               style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}>
            <ArrowUpRight className="w-3.5 h-3.5" style={{ color: 'var(--color-brand-black)' }} />
          </div>
        </div>

        {/* Bottom section with content and date */}
        <div className="insight-card-footer">
          <div className="insight-card-text-content mb-3">
            <h3 className="insight-card-title text-base font-bold leading-tight"
                style={{ color: 'var(--color-brand-black)' }}>
              {card.title}
            </h3>
          </div>
          
          <div className="insight-card-date flex items-center gap-2 text-gray-500">
            <CalendarIcon />
            <span className="insight-card-date-text text-sm font-medium">{card.date}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export function InsightsSection() {
  return (
    <section 
      className="py-24"
      style={{ 
        backgroundColor: '#F7F7FD',
        paddingTop: '8.75rem',
        paddingBottom: '8.75rem'
      }}
    >
      <div className="max-w-7xl mx-auto section-margin-x">
        {/* Branded Tag */}
        <BrandedTag text="Leadership Insights" />

        <div className="insights-container">
          {/* Header */}
          <div className="insights-header flex flex-col lg:flex-row lg:items-center lg:justify-between mb-16 gap-8 text-center lg:text-left">
            <h2 
              className="insights-title text-3xl md:text-4xl lg:text-5xl font-bold leading-tight"
              style={{ color: 'var(--color-brand-black)' }}
            >
              Leadership Insights & Ideas
            </h2>
            <ExploreAllButton />
          </div>

          {/* Main Grid Layout */}
          <div className="insights-grid grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
            {/* Large Card - Takes full height on left */}
            <div className="lg:row-span-2">
              <LargeInsightCard card={insightCards[0]} />
            </div>
            
            {/* Small Cards - Stack on right */}
            <div className="flex flex-col gap-4 md:gap-6 lg:gap-8">
              <SmallInsightCard card={insightCards[1]} />
              <SmallInsightCard card={insightCards[2]} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}