Wdipl-react/pages/WokaProject.tsx

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 {
  Activity,
  AlertTriangle,
  ArrowRight,
  BarChart,
  Bell,
  Brain,
  CheckCircle,
  Cloud,
  CloudCog,
  Code,
  Cpu,
  Database,
  ExternalLink,
  Film,
  Gamepad,
  Globe,
  Home,
  List,
  Mic,
  Palette,
  PlayCircle,
  RefreshCcw,
  Repeat,
  Scan,
  Server,
  Share2,
  ShieldCheck,
  Smartphone,
  Split,
  Target,
  TestTube,
  Users,
  Zap
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../components/ui/button";
import wokaImage from "../src/images/woka-side-award.webp";
import wokaLogo from "../src/images/woka-logo.png";

// Project data

const projectData = {
  hero: {
    title: "Woka - Changing the Way Kids Learn and Play",
    subtitle: "Animated Shows, Video Games, and Web Series for Kids",
    subtitleTwo: "Transform learning into an exciting adventure. Offering a wide range of animated content, interactive video games, and engaging web series, every feature is crafted to inspire and educate children through playful experiences.",
    imageUrl: wokaImage,
    imageAlt: "Woka App Showcase"
  },
  details: {
    technologies: [
      { name: "Swift (iOS)", icon: <Smartphone className="w-4 h-4" /> },
      { name: "Kotlin (Android)", icon: <Smartphone className="w-4 h-4" /> },
      { name: "Node.js", icon: <Server className="w-4 h-4" /> },
      { name: "MongoDB", icon: <Database className="w-4 h-4" /> },
      { name: "AWS", icon: <Cloud className="w-4 h-4" /> },
      { name: "Firebase Analytics", icon: <BarChart className="w-4 h-4" /> }
    ],
    industries: ["Edtech", "Entertainment"],
    duration: "6 months, November 2023 – April 2024",
    teamSize: "4 Mobile Developers, 1 Backend Developer, 1 Designer, 1 QA Engineer, 1 PM",
    platforms: ["iOS", "Android"]
  },

  achievements: [
    {
      label: "Reduced App Load Time",
      value: "47%",
      description: "Faster startup enhancing user experience",
    },
    {
      label: "Crash-Free Sessions",
      value: "99.8%",
      description: "Ensured app stability and reliability",
    },
    {
      label: "Active Young Learners",
      value: "100K+",
      description: "Kids engaged in learning activities",
    },
    {
      label: "User Retention",
      value: "+300%",
      description: "Increase in daily active users",
    },
    {
      label: "Parent Satisfaction",
      value: "95%",
      description: "Parents recommend Woka",
    },
  ],
  executiveSummary: {
    content: "Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly."
  },
  businessObjectives: [
    "Redevelop app natively for optimized performance",
    "Update UI/UX to match modern design standards",
    "Ensure backend stability and reduce downtime",
    "Implement monitoring & analytics for continuous improvement"
  ],
  coreFeatures: [
    {
      title: "Animated Learning Content",
      description: "Engaging animated shows that make learning fun and memorable for kids of all ages.",
      icon: <Film className="w-6 h-6" /> // 🎬 Animated shows icon
    },
    {
      title: "Interactive Video Games",
      description: "Educational games that combine entertainment with learning objectives and skill development.",
      icon: <Gamepad className="w-6 h-6" /> // 🎮 Game icon
    },
    {
      title: "Educational Web Series",
      description: "Structured learning content delivered through engaging episodic format.",
      icon: <PlayCircle className="w-6 h-6" /> // ▶️ Video/Web series icon
    },
    {
      title: "Safe Learning Environment",
      description: "Child-friendly platform with robust safety measures and parental controls.",
      icon: <ShieldCheck className="w-6 h-6" /> // 🛡️ Safety icon
    },
    {
      title: "Progress Tracking",
      description: "Comprehensive analytics for parents and educators to monitor learning progress.",
      icon: <BarChart className="w-6 h-6" /> // 📊 Analytics icon
    },
    {
      title: "Multi-Device Compatibility",
      description: "Seamless experience across tablets, smartphones, and computers.",
      icon: <Smartphone className="w-6 h-6" /> // 📱 Devices icon
    }
  ],
  developmentPhases: [
    {
      phase: "Approach & Planning",
      duration: "Ongoing",
      description: "Agile methodology with phased module redevelopment to ensure smooth migration and feature parity.",
      icon: <Repeat className="w-5 h-5" /> // 🔁 Agile / iterative process
    },
    {
      phase: "Sprints",
      duration: "2-week cycles",
      description: "Feature parity milestones achieved in each sprint to maintain continuity and user experience.",
      icon: <Activity className="w-5 h-5" /> // ⚡ Sprint cycles icon
    },
    {
      phase: "Testing",
      duration: "Throughout development",
      description: "Unit, integration, and device lab testing to ensure stability and performance across all modules.",
      icon: <TestTube className="w-5 h-5" /> // 🧪 Testing icon
    },
    {
      phase: "Deployment",
      duration: "Phased release",
      description: "App Store & Play Store releases with feature toggles for controlled rollout.",
      icon: <CloudCog className="w-5 h-5" /> // ☁️ Deployment icon
    },
    {
      phase: "Testing & QA",
      duration: "1 week",
      description: "Comprehensive testing, bug fixes, and performance optimization",
      icon: <CheckCircle className="w-5 h-5" />
    }
  ],
  resultsMetrics: [
    { label: "Load Time", value: "<1.5s", description: "95% of screens load quickly" },
    { label: "Crash-free Sessions", value: "99.9%", description: "Industry-leading stability" },
    { label: "Feature Adoption", value: "70%", description: "Users adopt recurring lists" },
    { label: "User Satisfaction", value: "4.8/5", description: "Average app store rating" },
    { label: "Daily Active Users", value: "85%", description: "Strong user engagement" },
    { label: "Learning Progress Accuracy", value: "92%", description: "Smart tracking precision" }
  ],
  technicalAchievements: [
    "Migrated from hybrid to native with zero data loss",
    "Implemented CDN-based media delivery for faster load times",
    "Added modular codebase for easier maintenance and feature rollout",
  ],
  futureRoadmap: [
    {
      phase: "Next 6 Months",
      features: [
        "Dark mode support",
        "Advanced search & filters for events",
        "In-app community chat"
      ]
    },
    {
      phase: "Next 12 Months",
      features: [
        "AI-powered event recommendations",
        "Multi-language support",
        "Gamification with rewards system"
      ]
    }
  ]
};


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

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

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

      {/* Executive Summary */}
      <PortfolioExecutiveSummary
        content={projectData.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-8">
              Project Overview
            </h2>
            <p className="text-xl text-muted-foreground leading-relaxed">
              Woka, an education-focused platform, faced stability issues, outdated components, and limitations in scaling. WDI was engaged to rebuild the app natively for iOS and Android, enhance backend systems, and implement a sustainable maintenance framework.
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-12">
            <PortfolioProjectOverview
              icon={<Globe className="w-8 h-8 text-accent" />}
              title="Background & Context"
              description="Access to engaging educational content for children is often limited or inconsistent. Woka was created to provide a safe, interactive, and mobile-first learning platform, combining animated shows, educational games, and structured lessons to enhance learning outcomes and parent engagement."
              borderColor="border-accent/20"
              hoverColor="accent"
            />

            <PortfolioProjectOverview
              icon={<Users className="w-8 h-8 text-blue-400" />}
              title="Target Audience"
              description="Learners, parents, and educators seeking accessible educational content and resources. Users actively engage with interactive lessons, school activities, and collaborative learning communities. A mobile-first audience that values seamless performance, personalized learning, and real-time progress tracking."
              borderColor="border-blue-400/20"
              hoverColor="blue-400"
            />

            <PortfolioProjectOverview
              icon={<Target className="w-8 h-8 text-green-400" />}
              title="Business Objectives"
              points={projectData.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 household grocery management with smart automation and collaboration."
        features={projectData.coreFeatures}
      />

      {/* Challenges & Solution Architecture */}
      <PortfolioChallengeSolution
        challenges={[
          {
            icon: <Cpu className="w-6 h-6 text-accent" />,
            title: "Technical Challenges",
            description: "Migrating from hybrid codebase to fully native apps without disrupting user base, retaining existing user data and preferences, and optimizing image-heavy event feed for mobile performance."
          },
          {
            icon: <Split className="w-6 h-6 text-accent" />,
            title: "Project Management Challenges",
            description: "Coordinating phased rollout to avoid downtime and maintaining feature parity across platforms."
          }
        ]}

        technologyStack={[
          { icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: Native Swift (iOS), Kotlin (Android)" },
          { icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Node.js, Express" },
          { icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MongoDB" },
          { icon: <Cloud className="w-5 h-5 text-accent" />, label: "Hosting: AWS EC2 + S3" },
          { icon: <Activity className="w-5 h-5 text-accent" />, label: "Monitoring: Firebase, AWS CloudWatch" }
        ]}

        highlights={[
          { text: "Performance Boost: Reduced API latency, improved app loading speed by 47%, crash-free sessions up to 99.8%." },
          { text: "Modern UI Experience: Introduced updated design components, typography, and improved navigation flow." },
          { text: "Real-Time Updates: Instant event & feed updates using socket connections." },
          { text: "Monitoring & Analytics: Integrated Firebase for crash reporting, user behavior tracking, and retention analysis." }
        ]}


      />

      {/* Development Process */}
      <PortfolioDevelopmentProcess
        title="Development Process & Methodology"
        subtitle="Woka follows an Agile development methodology with phased module redevelopment, 2-week sprints, and iterative testing, ensuring smooth migration, feature parity, and high-quality user experience."
        phases={projectData.developmentPhases}
      />

      {/* Results & Impact */}
      <PortfolioResultsImpact
        title="Results & Impact"
        subtitle="Woka demonstrates significant improvements in performance, user engagement, and learning outcomes. Key indicators include faster app load times, high crash-free sessions, strong feature adoption, and increased user satisfaction." metrics={projectData.resultsMetrics}
        achievements={projectData.technicalAchievements}
      />

      {/* Lessons Learned */}
      <PortfolioLessonsSection
        title="Lessons Learned"
        description="Key insights and learnings from the Woka development journey."
        workedTitle="What Worked Well"
        workedIcon={<CheckCircle className="w-6 h-6" />}
        workedColor="#22c55e" // Tailwind green-500
        workedLessons={[
          "Phased rollout reduced risk and allowed faster feedback cycles",
          "Incremental feature release helped identify issues early",
          "Continuous collaboration between teams accelerated development speed",
        ]}
        improveTitle="Areas for Improvement"
        improveIcon={<ArrowRight className="w-6 h-6" />}
        improveColor="#eab308" // Tailwind yellow-500
        improveLessons={[
          "Earlier user beta testing to fine-tune event feed experience",
          "More structured feedback channels for faster iteration",
          "Enhanced onboarding tutorials to reduce user confusion",
        ]}
      />

      {/* Future Roadmap */}
      <PortfolioRoadmapSection
        title="Future Roadmap"
        description="Planned enhancements and features to further revolutionize grocery management apps."
        roadmapItems={projectData.futureRoadmap}
        icon={<ArrowRight className="w-5 h-5" />}
      />

      {/* Client Testimonial */}
      <PortfolioTestimonial
        logo={wokaLogo}
        alt="RanOutOf Logo"
        rating={5}
        testimonial="“The WDI team transformed our app from slow and outdated to fast, reliable, and modern. Our users love the new experience, and the performance gains have been tremendous.”"
        clientName="Akarsh K Hebbar"
        clientRole="CEO, Woka"
      />

      {/* 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 Transform Children's Learning Experience?
            </h2>
            <p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
              Let's create an educational platform that makes learning fun and engaging. From concept to launch, we'll help you build a platform that inspires children to learn and grow.
            </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"
              >
                Start Your Project
                <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"
              >
                View More Case Studies
                <ExternalLink className="w-5 h-5 ml-2" />
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

    </div>
  );
};