import PortfolioChallengeSolution from "@/components/portfolio/PortfolioChallengeSolution";
import { PortfolioCoreFeatures } from "@/components/portfolio/PortfolioCoreFeatures";
import { PortfolioDevelopmentProcess } from "@/components/portfolio/PortfolioDevelopmentProcess";
import { PortfolioExecutiveSummary } from "@/components/portfolio/PortfolioExecutiveSummary";
import { PortfolioHero } from "@/components/portfolio/PortfolioHero";
import PortfolioLessonsSection from "@/components/portfolio/PortfolioLessonsSection";
import { PortfolioProjectDetails } from "@/components/portfolio/PortfolioProjectDetails";
import { PortfolioProjectOverview } from "@/components/portfolio/PortfolioProjectOverview";
import { PortfolioResultsImpact } from "@/components/portfolio/PortfolioResultsImpact";
import PortfolioRoadmapSection from "@/components/portfolio/PortfolioRoadmapSection";
import PortfolioTestimonial from "@/components/portfolio/PortfolioTestimonial";
import { motion } from "framer-motion";
import {
  AlertTriangle,
  ArrowRight,
  Bell,
  Brain,
  Calendar,
  CheckCircle,
  Cloud,
  Code,
  Database,
  ExternalLink,
  Globe,
  Gift,
  QrCode,
  MessageCircle,
  Palette,
  RefreshCcw,
  Scan,
  Server,
  Share2,
  Smartphone,
  Star,
  Target,
  Users,
  Zap,
  Wallet,
  TrendingUp,
  Shield,
  Clock,
  BarChart3
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../components/ui/button";
import goodTimesLogo from "../src/images/good-times-logo.webp";

// GoodTimes Project Data
const goodTimesData = {
  hero: {
    title: "GoodTimes: Social Event Discovery & Referral Platform",
    subtitle: "An innovative mobile platform designed to help users discover social events, manage attendance seamlessly, and earn rewards through referrals, built to drive user engagement and simplify event organizer operations.",
    imageUrl: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=600&fit=crop&crop=center",
    imageAlt: "GoodTimes social event discovery app showcasing event listings and social features"
  },
  details: {
    technologies: [
      { name: "Flutter", icon: <Smartphone className="w-4 h-4" /> },
      { name: "Laravel", icon: <Server className="w-4 h-4" /> },
      { name: "MySQL", icon: <Database className="w-4 h-4" /> },
      { name: "OneSignal", icon: <Bell className="w-4 h-4" /> }
    ],
    industries: ["Social Media", "Event Management", "Entertainment"],
    duration: "Ongoing (initial build completed in 4 months)",
    teamSize: "5 Developers, 2 Designers, 1 PM, 1 QA, 1 Business Analyst",
    platforms: ["iOS", "Android", "Web Admin Panel"]
  },
  achievements: [
    { label: "Early Access Users", value: "15K+", description: "Successfully onboarded" },
    { label: "RSVP Engagement", value: "70%", description: "Toggle interaction rate" },
    { label: "User Retention", value: "78%", description: "30-day retention rate" }
  ],
  executiveSummary: {
    content: "GoodTimes is a dynamic social event discovery platform designed to connect event-goers with organizers through innovative referral programs, gamified user engagement, and streamlined event management. Engineered for scalability and optimized user experience, GoodTimes revolutionizes how people find, participate in, and host social events, while fostering sustainable revenue through viral referral mechanics."
  },
  businessObjectives: [
    "Enable users to discover and RSVP to events with ease",
    "Reward users for referrals and active engagement",
    "Provide planners with tools to list events and track attendance",
    "Integrate a scalable wallet and payment structure",
    "Launch in the UK market, scale across Europe"
  ],
  coreFeatures: [
    {
      title: "Multi-role App Access",
      description: "Distinct experiences for Customers and Event Planners with tailored interfaces",
      icon: <Users className="w-6 h-6" />
    },
    {
      title: "Referral + Wallet Engine",
      description: "Share QR/referral codes and track earnings with integrated wallet system",
      icon: <Gift className="w-6 h-6" />
    },
    {
      title: "Event Calendar Engine",
      description: "Advanced filtering by genre, location, date, and interest with visual calendar",
      icon: <Calendar className="w-6 h-6" />
    },
    {
      title: "RSVP & Reminder System",
      description: "In-app toggle, calendar sync, fire/exclusive event labels with smart notifications",
      icon: <Bell className="w-6 h-6" />
    },
    {
      title: "Content Management",
      description: "Comprehensive blogs, FAQs, About, and Contact modules with CMS integration",
      icon: <MessageCircle className="w-6 h-6" />
    },
    {
      title: "Rating & Review Engine",
      description: "Post-event feedback system visible to all users for community trust",
      icon: <Star className="w-6 h-6" />
    }
  ],
  developmentPhases: [
    {
      phase: "Discovery & Planning",
      duration: "2 weeks",
      description: "User journeys, event lifecycle modeling, tech recommendations",
      icon: <Target className="w-5 h-5" />
    },
    {
      phase: "UI/UX Design",
      duration: "3 weeks",
      description: "Wireframing, onboarding flow mockups, calendar UX",
      icon: <Palette className="w-5 h-5" />
    },
    {
      phase: "Core Development",
      duration: "8 weeks",
      description: "Flutter builds, backend API, wallet logic, event logic",
      icon: <Code className="w-5 h-5" />
    },
    {
      phase: "Testing & QA",
      duration: "3 weeks",
      description: "Multi-role testing, referral validation, UI regression",
      icon: <CheckCircle className="w-5 h-5" />
    },
    {
      phase: "Deployment & Support",
      duration: "1 week",
      description: "App Store/Play Store submission, admin access handover",
      icon: <Cloud className="w-5 h-5" />
    },
    {
      phase: "Enhancements Phase II",
      duration: "Ongoing",
      description: "Blogs, contact features, event grouping, exclusive badges",
      icon: <Zap className="w-5 h-5" />
    }
  ],
  resultsMetrics: [
    { label: "Google Play Rating", value: "4.7★", description: "User satisfaction score" },
    { label: "API Response Time", value: "120ms", description: "Average response time" },
    { label: "Monthly Growth", value: "+22%", description: "User growth rate" },
    { label: "Referral Contribution", value: "35%", description: "New user acquisition" },
    { label: "Session Time Increase", value: "+28%", description: "Due to social features" },
    { label: "Event Attendance", value: "2x", description: "Planner reported increase" }
  ],
  technicalAchievements: [
    "Subscription logic with freeze/forfeit tracking system",
    "Referral engine with QR + WhatsApp API integration",
    "Optimized Flutter app: <10MB APK with lightning UI transitions",
    "Admin dashboard enabling full control over users and events",
    "Gamified event discovery with engagement-driven tags",
    "Smart calendar sync with one-tap RSVP functionality"
  ],
  futureRoadmap: [
    {
      phase: "Next 6 Months",
      features: [
        "Event media gallery integration",
        "AI-powered event recommendations",
        "Push analytics for social feature usage",
        "Performance dashboards for event organizers"
      ]
    },
    {
      phase: "12 Months",
      features: [
        "Marketplace for ticket sales",
        "User-level badges and community forums",
        "Event sponsor promotions",
        "Multi-language support for EU expansion"
      ]
    }
  ],
};

export const GoodTimesProject = () => {
  const navigate = useNavigate();
  
  return (
    <div className="dark min-h-screen bg-background">

      {/* Section 1: Hero with Heading, Subheading, and Image */}
      <PortfolioHero
        title={goodTimesData.hero.title}
        subtitle={goodTimesData.hero.subtitle}
        imageUrl={goodTimesData.hero.imageUrl}
        imageAlt={goodTimesData.hero.imageAlt}
      />

      {/* Section 2: Project Details */}
      <PortfolioProjectDetails
        details={goodTimesData.details}
        achievements={goodTimesData.achievements}
      />

      {/* Executive Summary */}
      <PortfolioExecutiveSummary
        content={goodTimesData.executiveSummary.content}
      />

      {/* Project Overview */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <div className="max-w-6xl mx-auto text-center mb-16">
            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
              Project Overview
            </h2>
          </div>

          <div className="grid lg:grid-cols-3 gap-12">
            <PortfolioProjectOverview
              icon={<Globe className="w-8 h-8 text-accent" />}
              title="Background & Context"
              description="Social event discovery and networking apps have grown significantly, especially among Gen-Z and millennials. GoodTimes aims to tap into this momentum by adding gamification (referrals, ratings, exclusive tags) and simplifying how users discover and commit to social events."
              borderColor="border-accent/20"
              hoverColor="accent"
            />

            <PortfolioProjectOverview
              icon={<Users className="w-8 h-8 text-blue-400" />}
              title="Target Audience"
              description="Socially active individuals aged 18–35 interested in networking, music, fitness, and local events. Event planners and venues are the second audience, seeking efficient tools to reach new audiences and manage registrations."
              borderColor="border-blue-400/20"
              hoverColor="blue-400"
            />

            <PortfolioProjectOverview
              icon={<Target className="w-8 h-8 text-green-400" />}
              title="Business Objectives"
              points={goodTimesData.businessObjectives}
              borderColor="border-green-400/20"
              hoverColor="green-400"
            />
          </div>
        </div>
      </section>

      {/* Core Features */}
      <PortfolioCoreFeatures
        title="Core Features & Functionality"
        subtitle="A comprehensive suite of tools designed to revolutionize social event discovery with gamification and seamless organizer workflows."
        features={goodTimesData.coreFeatures}
      />

      {/* Challenges & Solution Architecture */}
      <PortfolioChallengeSolution
        challenges={[
          {
            icon: <Users className="w-6 h-6 text-accent" />,
            title: "Multi-role Architecture",
            description: "Designing flexible user experiences for both Customers and Event Planners with tailored interfaces"
          },
          {
            icon: <Wallet className="w-6 h-6 text-accent" />,
            title: "Referral & Wallet Integration",
            description: "Creating seamless integration between referral tracking, wallet management, and payment systems"
          },
          {
            icon: <Calendar className="w-6 h-6 text-accent" />,
            title: "Real-time Event Management",
            description: "Synchronizing event calendars, RSVP systems, and notifications across multiple users"
          },
          {
            icon: <Share2 className="w-6 h-6 text-accent" />,
            title: "Social Integration",
            description: "Implementing WhatsApp sharing and social features while maintaining platform performance"
          }
        ]}
        technologyStack={[
          { icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: Flutter" },
          { icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Laravel" },
          { icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MySQL" },
          { icon: <Bell className="w-5 h-5 text-accent" />, label: "Notifications: OneSignal" },
        ]}
        highlights={[
          { text: "Modular architecture with independent APIs per role" },
          { text: "Event-based notification triggers for real-time updates" },
          { text: "Wallet referral logic separate from transaction layer" },
          { text: "Multi-tenancy admin view for role-based control" },
        ]}
      />

      {/* Development Process */}
      <PortfolioDevelopmentProcess
        title="Development Process & Methodology"
        subtitle="GoodTimes follows bi-weekly development cycles with backlog refinement, enabling reliable delivery and continuous progress. The agile methodology ensures timely completion while maintaining high quality through iterative development and regular feedback."
        phases={goodTimesData.developmentPhases}
      />

      {/* Results & Impact */}
      <PortfolioResultsImpact
        title="Results & Impact"
        subtitle="GoodTimes delivers comprehensive performance metrics showcasing its success in social event discovery and community engagement. The platform has transformed how users discover events and how organizers manage attendance."
        metrics={goodTimesData.resultsMetrics}
        achievements={goodTimesData.technicalAchievements}
        // businessImpact={[
        //   "Event planners reporting 2× more attendance via app",
        //   "Customer referrals contributing to 35% of new user base",
        //   "Exclusive/fire event tagging increased click-through by 62%",
        //   "Blogs and social group features drove in-app session time by 28%"
        // ]}
      />

      {/* Lessons Learned */}
      <PortfolioLessonsSection
        title="Lessons Learned"
        description="Key insights and learnings from the GoodTimes development journey that shaped our approach to social platform development."
        workedTitle="What Worked Well"
        workedIcon={<CheckCircle className="w-6 h-6" />}
        workedColor="#22c55e"
        workedLessons={[
          "Clear onboarding UX improved signup conversion by 37%",
          "Agile iteration helped manage enhancement requests efficiently",
          "In-app referral education improved share rates significantly"
        ]}
        improveTitle="Areas for Improvement"
        improveIcon={<AlertTriangle className="w-6 h-6" />}
        improveColor="#eab308"
        improveLessons={[
          "Subscription billing and wallet freeze logic were complex to align",
          "WhatsApp sharing setup needed special attention for API approvals",
          "Multi-role testing required more comprehensive initial planning"
        ]}
      />

      {/* Future Roadmap */}
      <PortfolioRoadmapSection
        title="Future Roadmap"
        description="Planned enhancements and features to build a vibrant event discovery ecosystem powered by AI, gamification, and community."
        roadmapItems={goodTimesData.futureRoadmap}
        icon={<TrendingUp className="w-5 h-5" />}
        // vision="Build a vibrant event discovery and engagement ecosystem powered by gamification, community, and seamless planning tools."
      />

      {/* Client Testimonial */}
      <PortfolioTestimonial
        logo={goodTimesLogo}
        alt="GoodTimes Logo"
        rating={5}
        testimonial="GoodTimes wouldn't be what it is without WDI's intuitive tech and top-notch planning. Their dedication to building for scale while also supporting daily product improvements is unmatched."
        clientName="Matthew Weightman"
        clientRole="Founder, GoodTimes"
      />

      {/* CTA Section */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-4xl mx-auto text-center"
          >
            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
              Ready to Launch Your Next Big Social Platform?
            </h2>
            <p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
              Partner with WDI to bring your vision to life with engaging gamification, vibrant community features, and scalable architecture. Build an app users will love.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                onClick={() => navigate('/contact-us')}
                className="bg-accent hover:bg-accent/90 text-accent-foreground"
              >
                Get in Touch with Our Experts
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={() => navigate('/case-studies')}
                className="border-accent/30 text-accent hover:bg-accent/10"
              >
                Explore Our Success Stories
                <ExternalLink className="w-5 h-5 ml-2" />
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

    </div>
  );
};