import React from 'react';
import { 
  ArrowRight, 
  Clock, 
  FileText, 
  Lightbulb, 
  Users, 
  Code2, 
  Smartphone,
  Building2,
  Heart,
  ShoppingCart,
  GraduationCap,
  Briefcase,
  Cpu,
  Utensils,
  MapPin,
  Scale,
  Leaf,
  Music,
  MessageCircle,
  Truck,
  Star as StarIcon,
  Church,
  Shield,
  Database,
  Zap
} from 'lucide-react';
import { Navigation } from '@/components/Navigation';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Footer } from '@/components/Footer';
import { useNavigate } from 'react-router-dom';

interface CaseStudyComingSoonProps {
  projectTitle?: string;
  industry?: string;
  subtitle?: string;
  expectedLaunch?: string;
  description?: string;
  services?: string[];
  technologies?: string[];
}

export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
  projectTitle,
  industry = "Technology",
  subtitle,
  expectedLaunch = "Q2 2024",
  description,
  services = [],
  technologies = []
}) => {
  const getIndustryIcon = (industry: string) => {
    const icons = {
      "Technology": Smartphone,
      "E-commerce": ShoppingCart,
      "Education": GraduationCap,
      "FinTech": Building2,
      "Entertainment": Music,
      "Real Estate": Building2,
      "IoT": Cpu,
      "Healthcare": Heart,
      "Social Media": MessageCircle,
      "Government": Shield,
      "Automotive": Building2,
      "Food & Beverage": Utensils,
      "Agriculture": Leaf,
      "Enterprise Software": Database,
      "Travel": MapPin,
      "Legal": Scale,
      "Logistics": Truck,
      "Wellness": StarIcon,
      "Religious": Church,
      "HR Tech": Briefcase
    };
    return icons[industry as keyof typeof icons] || Building2;
  };

  const navigate = useNavigate();

  const IconComponent = getIndustryIcon(industry);

  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      
      {/* Hero Section */}
      <section className="pt-24 pb-16 bg-background relative overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-5">
          <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(229,25,94,0.1)_50%,transparent_75%)] bg-[length:60px_60px]" />
        </div>
        
        <div className="container mx-auto px-6 lg:px-8 relative">
          <div className="max-w-4xl mx-auto text-center">
            {/* Coming Soon Badge */}
            <div className="flex items-center justify-center gap-2 mb-6">
              <Clock className="w-5 h-5 text-[#E5195E]" />
              <Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E] font-manrope">
                Case Study Coming Soon
              </Badge>
            </div>

            {/* Project Title */}
            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent font-manrope">
              {projectTitle}
            </h1>

            {/* Subtitle */}
            {subtitle && (
              <p className="text-xl md:text-2xl text-white/80 mb-8 font-manrope">
                {subtitle}
              </p>
            )}

            {/* Industry Badge */}
            <div className="flex items-center justify-center gap-2 mb-8">
              <Badge 
                variant="outline" 
                className="bg-white/5 border-white/20 text-white font-manrope px-4 py-2"
              >
                <IconComponent className="w-4 h-4 mr-2" />
                {industry}
              </Badge>
            </div>

            {/* Description */}
            {description ? (
              <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
                {description}
              </p>
            ) : (
              <p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
                We're currently working on documenting this exciting project case study. 
                Our team is gathering comprehensive insights, results, and learnings to share with you soon.
              </p>
            )}

            {/* Expected Launch */}
            <div className="flex items-center justify-center gap-6 text-sm text-muted-foreground font-manrope mb-8">
              <div className="flex items-center gap-2">
                <Clock className="w-4 h-4 text-[#E5195E]" />
                <span>Expected: {expectedLaunch}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What to Expect Section */}
      <section className="py-16 bg-card/30 border-y border-white/10">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white font-manrope">
              What to Expect
            </h2>
            <p className="text-lg text-muted-foreground font-manrope">
              This case study will provide detailed insights into our development process, challenges overcome, and results achieved.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {/* Development Process */}
            <Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
                  <Code2 className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-bold text-white mb-3 font-manrope">
                  Development Journey
                </h3>
                <p className="text-muted-foreground font-manrope">
                  Detailed breakdown of our technical approach, architecture decisions, and development methodology.
                </p>
              </CardContent>
            </Card>

            {/* Challenges & Solutions */}
            <Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
                  <Lightbulb className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-bold text-white mb-3 font-manrope">
                  Challenges & Solutions
                </h3>
                <p className="text-muted-foreground font-manrope">
                  Key obstacles encountered during development and innovative solutions implemented by our team.
                </p>
              </CardContent>
            </Card>

            {/* Results & Impact */}
            <Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
                  <Users className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-bold text-white mb-3 font-manrope">
                  Results & Impact
                </h3>
                <p className="text-muted-foreground font-manrope">
                  Measurable outcomes, user feedback, and business impact achieved through our solution.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Project Preview Section */}
      {(services.length > 0 || technologies.length > 0) && (
        <section className="py-16 bg-background">
          <div className="container mx-auto px-6 lg:px-8">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center text-white font-manrope">
                Project Overview
              </h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {/* Services */}
                {services.length > 0 && (
                  <Card className="bg-card/50 backdrop-blur-sm border-white/10">
                    <CardContent className="p-6">
                      <h3 className="text-xl font-bold text-white mb-4 font-manrope">
                        Services Provided
                      </h3>
                      <div className="flex flex-wrap gap-2">
                        {services.map((service, index) => (
                          <Badge 
                            key={index}
                            variant="outline" 
                            className="bg-white/5 border-white/20 text-white font-manrope"
                          >
                            {service}
                          </Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                )}

                {/* Technologies */}
                {technologies.length > 0 && (
                  <Card className="bg-card/50 backdrop-blur-sm border-white/10">
                    <CardContent className="p-6">
                      <h3 className="text-xl font-bold text-white mb-4 font-manrope">
                        Technologies Used
                      </h3>
                      <div className="flex flex-wrap gap-2">
                        {technologies.map((tech, index) => (
                          <Badge 
                            key={index}
                            variant="outline" 
                            className="bg-[#E5195E]/10 border-[#E5195E]/30 text-[#E5195E] font-manrope"
                          >
                            {tech}
                          </Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* Progress Indicator */}
      <section className="py-16 bg-card/30 border-y border-white/10">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-2xl mx-auto text-center">
            <h2 className="text-2xl font-bold mb-8 text-white font-manrope">
              Documentation Progress
            </h2>
            
            {/* Progress Bar */}
            <div className="mb-8">
              <div className="flex justify-between text-sm text-muted-foreground mb-2 font-manrope">
                <span>Research & Analysis</span>
                <span>75%</span>
              </div>
              <div className="w-full bg-white/10 rounded-full h-2">
                <div className="bg-[#E5195E] h-2 rounded-full w-3/4 transition-all duration-300"></div>
              </div>
            </div>

            <p className="text-muted-foreground mb-8 font-manrope">
              Our team is currently gathering detailed project insights, conducting stakeholder interviews, 
              and preparing comprehensive documentation to showcase this project's journey and impact.
            </p>

            {/* Subscribe for Updates */}
            <Card className="bg-card/50 backdrop-blur-sm border-white/10 p-6">
              <h3 className="text-lg font-bold text-white mb-4 font-manrope">
                Get Notified When Published
              </h3>
              <p className="text-sm text-muted-foreground mb-4 font-manrope">
                Join our mailing list to be the first to know when this case study goes live.
              </p>
              <Button 
                onClick={() => navigate('/contact-us')}
                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
              >
                Notify Me
                <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </Card>
          </div>
        </div>
      </section>

      {/* Explore Other Case Studies */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white font-manrope">
              Explore Our Published Case Studies
            </h2>
            <p className="text-lg text-muted-foreground mb-8 font-manrope">
              While you wait for this case study, discover other successful projects we've completed for our clients.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button 
                size="lg"
                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
                onClick={() => navigate('/case-studies')}
              >
                View All Case Studies
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
              <Button 
                size="lg"
                variant="outline"
                className="border-white/20 text-white hover:bg-white/10 font-manrope"
                onClick={() => navigate('/start-a-project')}
              >
                Start Your Project
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* <Footer /> */}
    </div>
  );
};



export default CaseStudyComingSoon;