Wdipl-react/pages/SeezunProject.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 { AlertTriangle, ArrowRight, Bell, Calendar, CheckCircle, Cloud, Code, Cpu, Database, ExternalLink, Globe, Home, Image, Leaf, List, Mic, Palette, Repeat, Ruler, Scan, Server, Share2, ShieldCheck, ShoppingBag, Smartphone, Sparkles, Split, Star, Target, TestTube, Users, Zap } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../components/ui/button";
import seezunImage from "../src/images/seezun.webp";
import seezunLogo from "../src/images/seezun-logo.png";

const projectData = {
  hero: {
    title: "Seezun: Your Seasonal Fashion & Lifestyle Hub",
    subtitle: "Rent, Buy, or Sell South Asian Clothing",
    subtitleTwo: "Discover a new way to update your wardrobe, rent, buy, or sell both new and preloved South Asian outfits on Seezun. Enjoy simple, seamless exchanges for every style and every occasion.",
    imageUrl: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center",
    imageAlt: "Seezun App Showcase"
  },
  details: {
    technologies: [
      { name: "React Native", icon: <Smartphone className="w-4 h-4" /> },
      { name: "ReactJs", icon: <Globe className="w-4 h-4" /> },
      { name: "Laravel", icon: <Server className="w-4 h-4" /> },
      { name: "MySQL", icon: <Database className="w-4 h-4" /> },
      { name: "AWS", icon: <Cloud className="w-4 h-4" /> }
    ],
    industries: ["Eccomerce", "Retail Technology", "Fashion & Lifestyle"],
    duration: "7 Months, Aug 2023 – Feb 2024",
    teamSize: "4 developers, 2 designers, 1 QA, 1 PM",
    platforms: ["Android", "iOS", "Admin Web Portal"]
  },
  achievements: [
    { label: "Active Users", value: "50K+", description: "Fashion enthusiasts connected" },
    { label: "Sustainability Impact", value: "+85%", description: "Reduction in fashion waste" },
    { label: "Transaction Growth", value: "+200%", description: "Monthly marketplace activity" }
  ],
  executiveSummary: {
    content: "Seezun reimagines the South Asian clothing market with a customer-driven platform connecting buyers, sellers, and renters. By analyzing preferences, trends, and inventory, Seezun offers a seamless, tailored shopping experience, making fashion accessible, sustainable, and affordable."
  },
  businessObjectives: [
    "Launch seasonal style collections curated by fashion experts for every occasion",
    "Build a diverse vendor marketplace with trusted sellers, secure checkout, and live order tracking",
    "Develop a vendor self-service hub with easy onboarding, tagging, and detailed sales insights",
    "Deliver a seamless shopping experience combining tradition, convenience, and community trust"
  ],

  coreFeatures: [
    {
      title: "Rental Marketplace",
      description:
        "Rent premium South Asian clothing for special occasions, making high-quality fashion both accessible and affordable.",
      icon: <ShoppingBag className="w-6 h-6" />
    },
    {
      title: "Buy & Sell Platform",
      description:
        "Shop new and pre-loved clothing from trusted sellers, with secure payment processing for a safe experience.",
      icon: <Repeat className="w-6 h-6" />
    },
    {
      title: "Sustainable Fashion Focus",
      description:
        "Champion circular fashion by encouraging garment reuse and extending lifespan within the community.",
      icon: <Leaf className="w-6 h-6" />
    },
    {
      title: "Authentic South Asian Styles",
      description:
        "Discover curated collections blending traditional and contemporary South Asian clothing and accessories.",
      icon: <Sparkles className="w-6 h-6" />
    },
    {
      title: "Size & Fit Matching",
      description:
        "Advanced size recommendation system that helps customers find the perfect fit effortlessly.",
      icon: <Ruler className="w-6 h-6" />
    },
    {
      title: "Community Reviews",
      description:
        "Reliable ratings and detailed feedback from verified buyers and renters, fostering trust and informed choices.",
      icon: <Star className="w-6 h-6" />
    }
  ],
  developmentPhases: [
    {
      phase: "Approach",
      duration: "Ongoing",
      description: "Agile methodology with 2-week sprints ensuring flexibility and rapid iteration.",
      icon: <Repeat className="w-5 h-5" />,
    },
    {
      phase: "Collaboration",
      duration: "Throughout project",
      description: "Seamless teamwork using Slack, Jira, and Figma for communication and design collaboration.",
      icon: <Users className="w-5 h-5" />,
    },
    {
      phase: "Testing",
      duration: "Parallel with development",
      description: "Automated unit and integration testing, with cross-device verification via Firebase Test Lab.",
      icon: <TestTube className="w-5 h-5" />,
    },
    {
      phase: "Security",
      duration: "Continuous",
      description: "Payment PCI DSS compliance and end-to-end encryption for sensitive data handling.",
      icon: <ShieldCheck className="w-5 h-5" />,
    },
    {
      phase: "Testing & QA",
      duration: "1 week",
      description: "Comprehensive testing, bug fixes, and performance optimization",
      icon: <CheckCircle className="w-5 h-5" />
    }
  ],
  resultsMetrics: [
    { label: "App Downloads", value: "12K+", description: "Within 3 months of launch" },
    { label: "Conversion Rate", value: "68%", description: "From lookbook view to product page" },
    { label: "Repeat Purchases", value: "40%", description: "Within first 60 days" },
    { label: "Session Duration", value: "7.5 min", description: "Average time per session" },
    { label: "Vendor Satisfaction", value: "4.6/5", description: "Average vendor rating" },
  ],
  technicalAchievements: [
    "Built seasonal tagging & curation system for automated campaigns",
    "Reduced image load time by 53% using AWS CloudFront caching",
    "Payment gateway integration with automatic vendor revenue split",
  ],
  futureRoadmap: [
    {
      phase: "Phase 2",
      features: ["AI-powered shopping list suggestions", "Store discount tracking integration", "Recipe-based automatic list generation"]
    },
    {
      phase: "Phase 3",
      features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery and eCommerce platforms"]
    }
  ],
};


export const SeezunProject = () => {
  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={seezunImage}
        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-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="Access to premium South Asian fashion is often limited by high costs, low availability, and the lack of trusted rental or resale options. This platform bridges that gap by making luxury ethnic wear accessible, affordable, and sustainable for all."
              borderColor="border-accent/20"
              hoverColor="accent"
            />

            <PortfolioProjectOverview
              icon={<Users className="w-8 h-8 text-blue-400" />}
              title="Target Audience"
              description="Fashion-conscious individuals and South Asian communities seeking affordable access to premium traditional and contemporary clothing through renting, buying, or selling."
              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" />,
            title: "Technical Challenges",
            description: "Building a real-time AI recommendation engine within MVP timelines, implementing split-payment workflows across multiple vendors, and optimizing media-heavy seasonal lookbooks for mobile.",
          },
          {
            icon: <Split className="w-6 h-6" />,
            title: "Project Management Challenges",
            description: "Coordinating between fashion consultants, AI developers, and backend engineers, while managing seasonal content updates without downtime.",
          },
        ]}

        technologyStack={[
          { icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: React native (mobile), React.js (Webapp)" },
          { icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Laravel (PHP) with modular microservices" },
          { icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MySQL" },
          { icon: <Cloud className="w-5 h-5 text-accent" />, label: "Cloud: AWS EC2, CloudFront, S3 (for media)" },
        ]}
        highlights={[
          { text: "Premium South Asian clothing rentals for every occasion" },
          { text: "Secure buy & sell platform for new and pre-loved fashion" },
          { text: "Sustainable circular fashion promoting garment reuse" },
          { text: "Advanced size matching with authentic community reviews" },
        ]}
      />

      {/* Development Process */}
      <PortfolioDevelopmentProcess
        title="Development Process & Methodology"
        subtitle=""
        phases={projectData.developmentPhases}
      />

      {/* Results & Impact */}
      <PortfolioResultsImpact
        title="Results & Business Impact"
        subtitle="The platform has revolutionized access to South Asian fashion by driving higher rental engagement, boosting resale transactions, expanding vendor participation, and promoting sustainable wardrobe practices across the community."
        metrics={projectData.resultsMetrics}
        achievements={projectData.technicalAchievements}
      />

      {/* Lessons Learned */}
      <PortfolioLessonsSection
        title="Lessons Learned"
        description="Key insights and learnings from the RanOutOf development journey."
        workedTitle="What Worked Well"
        workedIcon={<CheckCircle className="w-6 h-6" />}
        workedColor="#22c55e" // Tailwind green-500
        workedLessons={[
          "Seamless Rentals and Bargaining Feature",
          "Seasonal lookbooks increased browsing time and purchase intent",
          "Vendor self-management tools reduced admin workload",
        ]}
        improveTitle="Areas for Improvement"
        improveIcon={<ArrowRight className="w-6 h-6" />}
        improveColor="#eab308" // Tailwind yellow-500
        improveLessons={[
          "More robust A/B testing for recommendation algorithms",
          "Expand seasonal tagging into hyperlocal weather-based recommendations",
        ]}
      />

      {/* 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={seezunLogo}
        alt="Seezun Logo"
        rating={5}
        testimonial="“WDI delivered a cutting-edge, scalable platform that exceeded expectations. Their AI integration and vendor management tools gave us a strong advantage in the fashion-tech market. Their expertise and responsiveness made them a trusted partner throughout the project.”"
        clientName="Urmila"
        clientRole=" Product Manager, Seezun"
      />

      {/* 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 Your Fashion Marketplace?
            </h2>
            <p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
              Let's create a sustainable fashion platform together. From concept to launch, we'll help you build a marketplace that revolutionizes how people shop, rent, and sell clothing.
            </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>
  );
};