import React from 'react';
import { Badge } from './ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { navigateTo } from './Router';
import { CheckCircle, ArrowRight, Clock, Users, Star } from 'lucide-react';

// Service Card Component
export function ServiceCard({ service }) {
  const IconComponent = service.icon;
  
  return (
    <Card className="border hover:shadow-lg transition-all duration-300 group h-full" style={{ backgroundColor: 'var(--color-bg-white)', borderColor: 'var(--color-border)' }}>
      <CardHeader className="pb-4">
        <div className="w-16 h-16 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform" style={{ backgroundColor: 'var(--color-primary)' }}>
          <IconComponent className="w-8 h-8 text-white" />
        </div>
        <CardTitle className="text-h4 mb-3">{service.title}</CardTitle>
        <p className="text-body text-muted leading-relaxed">{service.description}</p>
      </CardHeader>
      
      <CardContent className="pt-0">
        <div className="space-y-4">
          <div>
            <h4 className="text-subhead mb-3">Key Features:</h4>
            <div className="space-y-2">
              {service.features.map((feature, index) => (
                <div key={index} className="flex items-start gap-2">
                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                  <span className="text-small text-muted">{feature}</span>
                </div>
              ))}
            </div>
          </div>
          
          <div className="pt-4 border-t" style={{ borderColor: 'var(--color-border)' }}>
            <p className="text-small text-primary">
              <strong>Outcome:</strong> {service.outcome}
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

// Theme Card Component
export function ThemeCard({ theme }) {
  const IconComponent = theme.icon;
  
  return (
    <Card className="border hover:shadow-md transition-all duration-300 text-center group" style={{ backgroundColor: 'var(--color-bg-white)', borderColor: 'var(--color-border)' }}>
      <CardContent className="p-6">
        <div className={`w-16 h-16 rounded-xl bg-gradient-to-r ${theme.color} flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform`}>
          <IconComponent className="w-8 h-8 text-white" />
        </div>
        <h3 className="text-subhead mb-2">{theme.title}</h3>
        <p className="text-small text-muted">{theme.description}</p>
      </CardContent>
    </Card>
  );
}

// Program Card Component
export function ProgramCard({ program }) {
  return (
    <Card className="border hover:shadow-lg transition-all duration-300 h-full" style={{ backgroundColor: 'var(--color-bg-white)', borderColor: 'var(--color-border)' }}>
      <CardHeader className="pb-4">
        <div className="flex items-center gap-3 mb-4">
          <Badge className="text-small px-3 py-1" style={{ backgroundColor: 'var(--color-primary)', color: 'white' }}>
            {program.level}
          </Badge>
          <Badge variant="outline" className="text-small px-3 py-1">
            {program.format}
          </Badge>
        </div>
        
        <CardTitle className="text-h4 mb-3">{program.title}</CardTitle>
        <p className="text-body text-muted leading-relaxed">{program.description}</p>
      </CardHeader>
      
      <CardContent className="pt-0">
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4 text-small">
            <div className="flex items-center gap-2">
              <Clock className="w-4 h-4 text-primary" />
              <span>{program.duration}</span>
            </div>
            <div className="flex items-center gap-2">
              <Users className="w-4 h-4 text-primary" />
              <span>{program.participants}</span>
            </div>
          </div>
          
          <div>
            <h4 className="text-subhead mb-3">Program Highlights:</h4>
            <div className="space-y-2">
              {program.highlights.map((highlight, index) => (
                <div key={index} className="flex items-start gap-2">
                  <CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
                  <span className="text-small text-muted">{highlight}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

// Enhanced Feature Card Component for Platform Features
export function FeatureCard({ feature }) {
  const IconComponent = feature.icon;
  
  return (
    <Card className="border border-gray-200 hover:border-primary/30 transition-all duration-300 shadow-sm hover:shadow-lg group h-full" style={{ backgroundColor: 'var(--color-bg-white)' }}>
      <CardContent className="p-8">
        {/* Feature Header */}
        <div className="flex items-start gap-4 mb-6">
          <div 
            className="w-14 h-14 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 flex-shrink-0"
            style={{ backgroundColor: 'rgba(4, 4, 91, 0.08)' }}
          >
            <IconComponent className="w-7 h-7 text-primary" />
          </div>
          <div className="flex-1">
            <h3 className="text-h4 mb-3 text-black">{feature.title}</h3>
            <p className="text-body text-muted leading-relaxed">{feature.description}</p>
          </div>
        </div>

        {/* Feature List */}
        <div className="space-y-3">
          {feature.features.map((item, itemIndex) => (
            <div key={itemIndex} className="flex items-center gap-3">
              <div 
                className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
                style={{ backgroundColor: 'var(--color-accent)' }}
              >
                <CheckCircle className="w-3 h-3 text-white" />
              </div>
              <span className="text-body text-muted">{item}</span>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// Case Study Card Component
export function CaseStudyCard({ caseStudy }) {
  return (
    <Card className="border hover:shadow-lg transition-all duration-300 overflow-hidden group" style={{ backgroundColor: 'var(--color-bg-white)', borderColor: 'var(--color-border)' }}>
      <div className="relative h-48">
        <ImageWithFallback
          src={caseStudy.image}
          alt={caseStudy.title}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        />
        <div className="absolute top-4 left-4">
          <Badge className="text-small px-3 py-1" style={{ backgroundColor: 'var(--color-accent)', color: 'var(--color-black)' }}>
            {caseStudy.industry}
          </Badge>
        </div>
      </div>
      
      <CardContent className="p-6">
        <h3 className="text-h4 mb-3">{caseStudy.title}</h3>
        
        <div className="space-y-4">
          <div>
            <h4 className="text-subhead mb-2">Challenge:</h4>
            <p className="text-small text-muted">{caseStudy.challenge}</p>
          </div>
          
          <div>
            <h4 className="text-subhead mb-2">Solution:</h4>
            <p className="text-small text-muted">{caseStudy.solution}</p>
          </div>
          
          <div>
            <h4 className="text-subhead mb-2">Results:</h4>
            <div className="space-y-2">
              {caseStudy.results.map((result, index) => (
                <div key={index} className="flex items-start gap-2">
                  <Star className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
                  <span className="text-small text-muted">{result}</span>
                </div>
              ))}
            </div>
          </div>
          
          <div className="flex items-center gap-4 pt-2 text-small">
            <span className="flex items-center gap-1">
              <Clock className="w-4 h-4 text-primary" />
              {caseStudy.duration}
            </span>
            <span className="flex items-center gap-1">
              <Users className="w-4 h-4 text-primary" />
              {caseStudy.participants} participants
            </span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

// Sticky Tabs Component
export function StickyTabs({ pillars, activeTab, onTabClick, isSticky }) {
  return (
    <div className={`bg-white border-b transition-all duration-300 ${isSticky ? 'fixed top-20 left-0 right-0 z-40 shadow-md' : 'relative'}`} style={{ borderColor: 'var(--color-border)' }}>
      <nav className="section-margin-x mx-auto" aria-label="Section navigation">
        {/* Mobile: compact dropdown */}
        <div className="md:hidden py-3">
          <label htmlFor="section-select" className="sr-only">Select section</label>
          <select
            id="section-select"
            className="w-full border rounded-lg p-3 bg-white text-body focus-ring"
            value={activeTab}
            onChange={(e) => onTabClick(e.target.value)}
            aria-controls="page-sections"
          >
            {pillars.map((pillar) => (
              <option key={pillar.id} value={pillar.id}>{pillar.title}</option>
            ))}
          </select>
        </div>
      </nav>
    </div>
  );
}