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,
  CheckCircle,
  Cloud,
  Code,
  Database,
  ExternalLink,
  Globe,
  Home,
  List,
  Mic,
  Palette,
  RefreshCcw,
  Scan,
  Server,
  Share2,
  Smartphone,
  Target,
  Users,
  Zap,
  TrendingUp,
  Shield,
  Clock,
  BarChart3,
  MessageSquare,
  Settings
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../components/ui/button";
import tcLogo from "../src/images/tc-logo.png";

// Traders Circuit Project Data
const tradersCircuitData = {
  hero: {
    title: "Traders Circuit – Stock Advisory & Trade Companion App",
    subtitle: "A mobile-first advisory platform offering curated trade calls, real-time updates, and portfolio tracking to empower everyday traders",
    imageUrl: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=800&h=600&fit=crop&crop=center",
    imageAlt: "Traders Circuit stock trading app showcasing real-time market data and trade insights"
  },
  details: {
    technologies: [
      { name: "Flutter", icon: <Smartphone className="w-4 h-4" /> },
      { name: "Firebase", icon: <Cloud className="w-4 h-4" /> },
      { name: "Laravel", icon: <Server className="w-4 h-4" /> },
      { name: "MySQL", icon: <Database className="w-4 h-4" /> }
    ],
    industries: ["Fintech", "Stock Market"],
    duration: "6 months, February 2024 – August 2024",
    teamSize: "5 developers, 2 designers, 1 PM",
    platforms: ["Android", "iOS", "Web based Admin dashboard"]
  },
  achievements: [
    { label: "Early Access Traders", value: "10K+", description: "Onboarded successfully" },
    { label: "App Store Compliance", value: "100%", description: "First submission success" },
    { label: "Screen Load Time", value: "<2s", description: "Across all devices" }
  ],
  executiveSummary: {
    content: "Traders Circuit is a mobile stock advisory platform designed to help Indian traders of all sizes and levels make informed, timely decisions based on high-quality research and structured trade insights. The app streamlines trade discovery, execution tracking, and performance analytics in a sleek, intuitive interface built with speed and user experience in mind."
  },
  businessObjectives: [
    "Create a real-time, intuitive stock advisory experience",
    "Timely and accurate notification delivery system",
    "Reach monthly subscription sign-ups in just one week of use",
    "Launch with 90% feature parity within 6 months"
  ],
  coreFeatures: [
    {
      title: "Branded Splash Screen",
      description: "Engaging splash screen featuring animated branding for a polished first impression",
      icon: <Settings className="w-6 h-6" />
    },
    {
      title: "Curated Trade Calls",
      description: "Expertly curated 'Swing Trades' and 'Cash Trades' call cards delivering timely investment insights",
      icon: <TrendingUp className="w-6 h-6" />
    },
    {
      title: "Real-Time Trade Updates",
      description: "Live trade updates and exited position tracking with comprehensive performance metrics",
      icon: <RefreshCcw className="w-6 h-6" />
    },
    {
      title: "Educational Read Sections",
      description: "Concise market bytes, key learnings, and educational content curated for users",
      icon: <MessageSquare className="w-6 h-6" />
    },
    {
      title: "Smart Notification System",
      description: "Intelligent notifications delivering trade alerts and market updates promptly",
      icon: <Bell className="w-6 h-6" />
    },
    {
      title: "Secure User Onboarding",
      description: "Seamless user registration and login powered by Firebase authentication",
      icon: <Shield className="w-6 h-6" />
    }
  ],
  developmentPhases: [
    {
      phase: "Discovery & Planning",
      duration: "3 weeks",
      description: "Market research, competitor benchmarking, feature roadmap",
      icon: <Target className="w-5 h-5" />
    },
    {
      phase: "Design & Prototyping",
      duration: "4 weeks",
      description: "Branding, UI mockups, user testing feedback loop",
      icon: <Palette className="w-5 h-5" />
    },
    {
      phase: "Core Development - Phase 1",
      duration: "6 weeks",
      description: "App architecture, authentication, splash, trade sections",
      icon: <Code className="w-5 h-5" />
    },
    {
      phase: "Content & Trade Modules - Phase 2",
      duration: "5 weeks",
      description: "Read section, exited trades, date-wise grouping, notifications",
      icon: <Zap className="w-5 h-5" />
    },
    {
      phase: "Admin CMS & Analytics",
      duration: "3 weeks",
      description: "Role-based access for call publishing and stats tracking",
      icon: <BarChart3 className="w-5 h-5" />
    },
    {
      phase: "Testing, QA & Deployment",
      duration: "3 weeks",
      description: "App store compliance, staging testing, final release",
      icon: <CheckCircle className="w-5 h-5" />
    }
  ],
  resultsMetrics: [
    { label: "App Installs", value: "10K+", description: "In beta with 4.6★ rating" },
    { label: "Daily Active Usage", value: "70%", description: "During market hours" },
    { label: "App Load Time", value: "1.8s", description: "Average load time" },
    { label: "Crash Rate", value: "<0.3%", description: "Industry leading" },
    { label: "Trader Retention", value: "68%", description: "After 30 days" },
    { label: "UI/UX Rating", value: "90%", description: "Rated as 'Excellent'" }
  ],
  technicalAchievements: [
    "Real-time exited call update system",
    "Date-wise trade grouping with auto-archival logic",
    "100% crash-free sessions on launch week",
    "Firebase-based CMS requiring no custom infra"
  ],
  futureRoadmap: [
    {
      phase: "Phase 2",
      features: [
        "Personalized dashboards",
        "Premium tier with exclusive trade rooms", 
        "WhatsApp-like alert groups for power users"
      ]
    },
    {
      phase: "Phase 3",
      features: [
        "Web version of dashboard",
        "Trade performance insights and leaderboards",
        "Community forum with expert sessions"
      ]
    }
  ],
};

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

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

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

      {/* Executive Summary */}
      <PortfolioExecutiveSummary
        content={tradersCircuitData.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="Stock trading in India has seen exponential growth, but quality advisory platforms are often expensive, inaccessible, or overly complex. Traders Circuit bridges this gap by offering simplified, actionable insights for cash and swing trades curated by domain experts."
              borderColor="border-accent/20"
              hoverColor="accent"
            />

            <PortfolioProjectOverview
              icon={<Users className="w-8 h-8 text-blue-400" />}
              title="Target Audience"
              description="Retail stock market traders in India (Age 22–45), interested in short- to mid-term equity investments and looking for expert-curated stock portfolio strategies."
              borderColor="border-blue-400/20"
              hoverColor="blue-400"
            />

            <PortfolioProjectOverview
              icon={<Target className="w-8 h-8 text-green-400" />}
              title="Business Objectives"
              points={tradersCircuitData.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 empower retail traders with expert insights and real-time market intelligence."
        features={tradersCircuitData.coreFeatures}
      />

      {/* Challenges & Solution Architecture */}
      <PortfolioChallengeSolution
        challenges={[
          {
            icon: <Zap className="w-6 h-6 text-accent" />,
            title: "Real-time Performance",
            description: "Optimizing data load and UI responsiveness for real-time market conditions"
          },
          {
            icon: <Bell className="w-6 h-6 text-accent" />,
            title: "Notification Delivery",
            description: "Managing push notifications and ensuring timely delivery for trade alerts"
          },
          {
            icon: <Shield className="w-6 h-6 text-accent" />,
            title: "Data Security",
            description: "Securing user data while keeping login friction low"
          },
          {
            icon: <Clock className="w-6 h-6 text-accent" />,
            title: "Timeline Management",
            description: "Tight 6-month timeline from design to launch"
          }
        ]}
        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: <Cloud className="w-5 h-5 text-accent" />, label: "Cloud: AWS" },
        ]}
        highlights={[
          { text: "Modular screen-wise Flutter components" },
          { text: "Secure API gateways for admin and user segregation" },
          { text: "Realtime listener-based updates for active trades" },
          { text: "Scalable admin content controls via Firebase Console" },
        ]}
      />

      {/* Development Process */}
      <PortfolioDevelopmentProcess
        title="Development Process & Methodology"
        subtitle="Traders Circuit follows an Agile development approach with weekly sprints and milestone-based planning. This ensures timely completion while maintaining high quality through iterative progress and continuous feedback."
        phases={tradersCircuitData.developmentPhases}
      />

      {/* Results & Impact */}
      <PortfolioResultsImpact
        title="Results & Impact"
        subtitle="Traders Circuit delivers comprehensive performance metrics showcasing its success in transforming stock trading advisory. Key indicators include high user engagement during market hours, excellent app store ratings, and industry-leading stability."
        metrics={tradersCircuitData.resultsMetrics}
        achievements={tradersCircuitData.technicalAchievements}
      />

      {/* Lessons Learned */}
      <PortfolioLessonsSection
        title="Lessons Learned"
        description="Key insights and learnings from the Traders Circuit development journey."
        workedTitle="What Worked Well"
        workedIcon={<CheckCircle className="w-6 h-6" />}
        workedColor="#22c55e"
        workedLessons={[
          "Weekly design-dev syncs prevented misalignments",
          "Animations added micro-interactions users loved",
          "Modular Flutter setup enabled easy refactoring"
        ]}
        improveTitle="Areas for Improvement"
        improveIcon={<AlertTriangle className="w-6 h-6" />}
        improveColor="#eab308"
        improveLessons={[
          "Content logic complexity was underestimated",
          "Future projects should prototype admin CMS earlier",
          "More onboarding tutorials needed for first-time users"
        ]}
      />

      {/* Future Roadmap */}
      <PortfolioRoadmapSection
        title="Future Roadmap"
        description="Planned enhancements and features to further revolutionize stock trading advisory platforms."
        roadmapItems={tradersCircuitData.futureRoadmap}
        icon={<TrendingUp className="w-5 h-5" />}
      />

      {/* Client Testimonial */}
      <PortfolioTestimonial
        logo={tcLogo}
        alt="Traders Circuit Logo"
        rating={5}
        testimonial="WDI has helped us bring our vision to life with a sleek, reliable, and user-loved app. Their understanding of the trading space and mobile-first design thinking really made a difference."
        clientName="Aashiq Gowda"
        clientRole="Director, Traders Circuit Pvt Ltd."
      />

      {/* 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">
              Looking to build your next stock or trading platform?
            </h2>
            <p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
              Get in touch with WDI to explore how we can turn your fintech vision into a functional, delightful app.
            </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"
              >
                Contact Us
                <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>
  );
};