import React from "react";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";

export const AmozProject = () => {
  return (
    <div className="dark min-h-screen bg-background">
      <Navigation />
      
      {/* Hero Section */}
      <section className="pt-24 pb-16 bg-background relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
        <div className="container mx-auto px-6 lg:px-8 relative">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="flex items-center gap-2 mb-6">
                <Badge className="bg-[#E5195E]/10 text-[#E5195E] border border-[#E5195E]/20 font-manrope">
                  <Brain className="w-4 h-4 mr-2" />
                  AI Social Commerce Case Study
                </Badge>
              </div>
              
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
                Amoz Platform
              </h1>
              
              <p className="text-xl text-muted-foreground mb-8 font-manrope">
                AI-Powered Social Commerce Platform - Merging social networking and e-commerce with AI-driven recommendations and influencer monetization capabilities
              </p>

              {/* Tech Stack */}
              <div className="flex flex-wrap gap-2 mb-8">
                {["React Native", "Next.js", "Node.js", "PostgreSQL", "TensorFlow", "AWS"].map((tech) => (
                  <Badge key={tech} variant="outline" className="border-white/20 text-white font-manrope">
                    {tech}
                  </Badge>
                ))}
              </div>

              {/* Key Metrics */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
                  <Calendar className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">6 months</div>
                  <div className="text-xs text-muted-foreground font-manrope">Duration</div>
                </div>
                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
                  <Users className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">8 experts</div>
                  <div className="text-xs text-muted-foreground font-manrope">Team Size</div>
                </div>
                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
                  <Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">iOS/Android/Web</div>
                  <div className="text-xs text-muted-foreground font-manrope">Platforms</div>
                </div>
                <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
                  <DollarSign className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">$1.2M</div>
                  <div className="text-xs text-muted-foreground font-manrope">Q1 Transactions</div>
                </div>
              </div>

              {/* Key Achievements */}
              <div className="space-y-3 mb-8">
                <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Key Achievements:</h3>
                {[
                  "Onboarded 5,000+ merchants in first 2 months post-launch",
                  "AI recommendation engine achieved 28% increase in user engagement",
                  "Processed $1.2M in transactions within first quarter",
                  "Built unified social + shopping platform with AI-driven personalization"
                ].map((achievement, index) => (
                  <div key={index} className="flex items-center gap-3">
                    <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                    <span className="text-muted-foreground font-manrope">{achievement}</span>
                  </div>
                ))}
              </div>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4">
                <Button 
                  size="lg"
                  className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
                  onClick={() => navigateTo('/start-a-project')}
                >
                  Build Your AI Commerce Platform
                  <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={() => navigateTo('/case-studies')}
                >
                  View More Cases
                </Button>
              </div>
            </div>

            <div className="relative">
              <div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
                <ImageWithFallback 
                  src="/images/amoz-platform-mockup.jpg"
                  alt="Amoz AI-Powered Social Commerce Platform"
                  className="w-full h-full object-cover rounded-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Executive Summary */}
      <section className="py-16 bg-card/30">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold text-white mb-6 font-manrope">Executive Summary</h2>
            <p className="text-lg text-muted-foreground leading-relaxed font-manrope mb-6">
              Amoz merges social networking and e-commerce into a single platform, enabling influencers, small businesses, and users to connect, showcase products, and transact seamlessly. AI-driven recommendations enhance product discovery, while built-in messaging and content creation tools drive community engagement.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed font-manrope">
              The comprehensive platform bridges the gap between content and transactions, integrating influencer marketing, live product showcases, and frictionless purchasing to create the preferred shopping experience for younger demographics seeking social commerce solutions.
            </p>
          </div>
        </div>
      </section>

      {/* Project Overview */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
            
            <div className="grid md:grid-cols-3 gap-8">
              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-6">
                  <Target className="w-8 h-8 text-[#E5195E] mb-4" />
                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Background & Context</h3>
                  <p className="text-muted-foreground font-manrope">
                    Social commerce is rapidly becoming the preferred shopping experience for younger demographics, but existing solutions often split content and transactions across multiple apps. Amoz bridges this gap with a unified social + shopping platform, integrating influencer marketing, live product showcases, and frictionless purchasing.
                  </p>
                </CardContent>
              </Card>

              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-6">
                  <Users className="w-8 h-8 text-[#E5195E] mb-4" />
                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Target Audience</h3>
                  <p className="text-muted-foreground font-manrope">
                    Influencers & content creators looking to monetize their audience, small-to-medium online merchants seeking social selling platforms, and young consumers seeking social shopping experiences with integrated content discovery and purchasing capabilities.
                  </p>
                </CardContent>
              </Card>

              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-6">
                  <TrendingUp className="w-8 h-8 text-[#E5195E] mb-4" />
                  <h3 className="text-xl font-semibold text-white mb-3 font-manrope">Business Objectives</h3>
                  <p className="text-muted-foreground font-manrope">
                    Create a mobile-first platform combining content and commerce, provide AI-driven personalized product recommendations, enable secure, fast, and user-friendly checkout experience, and offer built-in tools for influencers to monetize their audience effectively.
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Project Scope */}
      <section className="py-16 bg-card/30">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
            
            <div className="grid md:grid-cols-2 gap-12">
              <div>
                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
                <div className="space-y-4">
                  {[
                    "AI-Powered Product Recommendations based on browsing, social interactions, and purchase history",
                    "Influencer Storefronts allowing creators to sell directly via profiles",
                    "Live Product Showcases with integrated purchase options",
                    "In-App Messaging for buyer-seller and community engagement",
                    "Secure Payments with Stripe and multiple local payment gateways",
                    "Order Tracking with push notifications and delivery updates"
                  ].map((feature, index) => (
                    <div key={index} className="flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10">
                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
                      <span className="text-muted-foreground font-manrope text-sm">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Requirements</h3>
                <div className="space-y-4">
                  {[
                    "Scalable microservices backend",
                    "Real-time chat and live streaming capability",
                    "AI/ML integration for recommendation algorithms",
                    "Payment gateway compliance with PCI DSS standards",
                    "AWS-based cloud infrastructure for hosting and media storage"
                  ].map((requirement, index) => (
                    <div key={index} className="flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10">
                      <Shield className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
                      <span className="text-muted-foreground font-manrope text-sm">{requirement}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Challenges & Solution Architecture */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
            
            <div className="grid md:grid-cols-2 gap-12 mb-16">
              <div>
                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
                <div className="space-y-4">
                  {[
                    "Balancing performance with heavy image/video content",
                    "Building a real-time recommendation system with low latency",
                    "Implementing seamless live shopping experiences without lag"
                  ].map((challenge, index) => (
                    <div key={index} className="flex items-start gap-3">
                      <AlertCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
                      <span className="text-muted-foreground font-manrope">{challenge}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Project Management Challenges</h3>
                <div className="space-y-4">
                  {[
                    "Coordinating between AI, frontend, and payment teams",
                    "Managing content moderation for a social platform",
                    "Handling rapid feature iterations while maintaining stability"
                  ].map((challenge, index) => (
                    <div key={index} className="flex items-start gap-3">
                      <AlertCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" />
                      <span className="text-muted-foreground font-manrope">{challenge}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="bg-card/50 p-8 rounded-xl border border-white/10">
              <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Architecture</h3>
              <div className="grid md:grid-cols-2 gap-8">
                <div>
                  <h4 className="text-lg font-semibold text-white mb-4 font-manrope">Technology Stack</h4>
                  <div className="space-y-3">
                    {[
                      { label: "Frontend", value: "React Native, Next.js" },
                      { label: "Backend", value: "Node.js, Express.js" },
                      { label: "Database", value: "PostgreSQL, Redis" },
                      { label: "AI/ML", value: "TensorFlow for recommendation engine" },
                      { label: "Payments", value: "Stripe Payments" },
                      { label: "Infrastructure", value: "AWS S3, Firebase Cloud Messaging" }
                    ].map((item, index) => (
                      <div key={index} className="flex justify-between items-center p-3 bg-background/50 rounded-lg border border-white/10">
                        <span className="text-muted-foreground font-manrope">{item.label}:</span>
                        <span className="text-white font-medium font-manrope text-sm">{item.value}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div>
                  <h4 className="text-lg font-semibold text-white mb-4 font-manrope">Architecture Highlights</h4>
                  <div className="space-y-3">
                    {[
                      "Hybrid cloud deployment leveraging AWS EC2, S3, and CloudFront for media delivery",
                      "AI microservice for recommendations and personalization",
                      "Event-driven architecture using Redis Pub/Sub for real-time updates",
                      "Multi-tier security with encryption at rest and in transit",
                      "Optimized media compression pipeline for faster load times"
                    ].map((highlight, index) => (
                      <div key={index} className="flex items-center gap-3">
                        <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                        <span className="text-muted-foreground text-sm font-manrope">{highlight}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Development Process */}
      <section className="py-16 bg-card/30">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
            
            <div className="mb-12">
              <div className="text-center mb-8">
                <p className="text-lg text-muted-foreground font-manrope">
                  <strong>Agile</strong> (2-week sprints) with feature prioritization with merchant and influencer input, weekly demos for stakeholders, continuous integration with automated deployments to staging
                </p>
              </div>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {[
                  { 
                    phase: "Discovery & Planning", 
                    duration: "3 weeks",
                    description: "Market analysis of social commerce trends, AI recommendation system design, payment integration planning"
                  },
                  { 
                    phase: "Design & Prototyping", 
                    duration: "5 weeks",
                    description: "Wireframes for influencer storefronts & live shopping pages, AI model training on sample product datasets"
                  },
                  { 
                    phase: "Core Development", 
                    duration: "10 weeks",
                    description: "Social feed & product catalog integration, influencer tools & storefronts, recommendation engine integration"
                  },
                  { 
                    phase: "Live Shopping & Messaging", 
                    duration: "5 weeks",
                    description: "Real-time video streaming module, in-app chat and engagement features"
                  },
                  { 
                    phase: "Testing & Optimization", 
                    duration: "3 weeks",
                    description: "Load & stress testing for peak events, AI accuracy tuning"
                  },
                  { 
                    phase: "Launch & Scaling", 
                    duration: "2 weeks",
                    description: "Beta rollout to select merchants & influencers, marketing support and onboarding sessions"
                  }
                ].map((item, index) => (
                  <Card key={index} className="bg-background/50 border-white/10">
                    <CardContent className="p-6">
                      <div className="flex items-center justify-between mb-3">
                        <div className="w-8 h-8 bg-[#E5195E] rounded-full flex items-center justify-center text-white font-bold text-sm font-manrope">
                          {index + 1}
                        </div>
                        <Badge variant="outline" className="border-[#E5195E]/30 text-[#E5195E] font-manrope">
                          {item.duration}
                        </Badge>
                      </div>
                      <h3 className="text-lg font-semibold text-white mb-2 font-manrope">{item.phase}</h3>
                      <p className="text-sm text-muted-foreground font-manrope">{item.description}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Key Features */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
              {[
                {
                  icon: TrendingUp,
                  title: "Social Feed",
                  description: "Curated content from influencers & merchants"
                },
                {
                  icon: Brain,
                  title: "Personalized Recommendations",
                  description: "AI-driven product suggestions"
                },
                {
                  icon: Play,
                  title: "Live Shopping",
                  description: "Real-time events with integrated checkout"
                },
                {
                  icon: MessageCircle,
                  title: "Direct Messaging",
                  description: "Buyer-seller communication within the app"
                },
                {
                  icon: CreditCard,
                  title: "Multi-Channel Payments",
                  description: "Stripe, local wallets, and COD options"
                },
                {
                  icon: ShoppingBag,
                  title: "Influencer Storefronts",
                  description: "Creator-driven product showcases and sales"
                }
              ].map((feature, index) => (
                <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
                  <CardContent className="p-6 text-center">
                    <feature.icon className="w-8 h-8 text-[#E5195E] mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-white mb-3 font-manrope">{feature.title}</h3>
                    <p className="text-muted-foreground text-sm font-manrope">{feature.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Results & Impact */}
      <section className="py-16 bg-card/30">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
              {[
                { label: "Merchant Onboarding", value: "5,000+", icon: Users, desc: "first 2 months" },
                { label: "Engagement Increase", value: "28%", icon: TrendingUp, desc: "AI recommendations" },
                { label: "Q1 Transactions", value: "$1.2M", icon: DollarSign, desc: "processed" },
                { label: "AI Response Time", value: "180ms", icon: Zap, desc: "average" }
              ].map((metric, index) => (
                <Card key={index} className="bg-background/50 border-white/10 text-center">
                  <CardContent className="p-6">
                    <metric.icon className="w-8 h-8 text-[#E5195E] mx-auto mb-3" />
                    <div className="text-2xl font-bold text-white mb-1 font-manrope">{metric.value}</div>
                    <div className="text-muted-foreground text-sm font-manrope">{metric.label}</div>
                    <div className="text-xs text-muted-foreground font-manrope">{metric.desc}</div>
                  </CardContent>
                </Card>
              ))}
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              <div>
                <h3 className="text-xl font-semibold text-white mb-4 font-manrope">Business Impact</h3>
                <ul className="space-y-3">
                  {[
                    "28% higher engagement from personalized recommendations",
                    "Increased merchant sales through influencer storefronts",
                    "Faster product discovery and higher repeat purchase rates"
                  ].map((impact, index) => (
                    <li key={index} className="flex items-center gap-3">
                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                      <span className="text-muted-foreground font-manrope">{impact}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-white mb-4 font-manrope">Technical Performance</h3>
                <ul className="space-y-3">
                  {[
                    "Average AI recommendation response time: 180ms",
                    "Live stream latency: < 2 seconds",
                    "99.9% uptime in first 90 days"
                  ].map((performance, index) => (
                    <li key={index} className="flex items-center gap-3">
                      <Check className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                      <span className="text-muted-foreground font-manrope">{performance}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Lessons Learned */}
      <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 font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
            
            <div className="grid md:grid-cols-2 gap-8">
              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">What Worked Well</h3>
                  <ul className="space-y-2">
                    {[
                      "AI-first design approach improved engagement from day one",
                      "Early influencer partnerships boosted platform credibility"
                    ].map((item, index) => (
                      <li key={index} className="flex items-center gap-3">
                        <Check className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
                        <span className="text-muted-foreground font-manrope">{item}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>

              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Key Learnings</h3>
                  <ul className="space-y-2">
                    {[
                      "Live shopping events require extensive pre-launch testing",
                      "Merchant onboarding must include content quality training"
                    ].map((item, index) => (
                      <li key={index} className="flex items-center gap-3">
                        <TrendingUp className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
                        <span className="text-muted-foreground font-manrope">{item}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Client Testimonial */}
      <section className="py-16 bg-card/30">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <div className="flex justify-center mb-6">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="w-6 h-6 text-[#E5195E] fill-current" />
              ))}
            </div>
            <blockquote className="text-xl md:text-2xl text-white mb-6 font-manrope italic">
              "WDI understood the vision for Amoz perfectly — merging social and commerce in a seamless experience. The AI recommendations have been a game changer for engagement and sales."
            </blockquote>
            <div className="text-muted-foreground font-manrope">
              <div className="font-semibold text-white">Founders, Amoz</div>
              <div>Social Commerce Platform Client</div>
            </div>
          </div>
        </div>
      </section>

      {/* Future Roadmap */}
      <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 font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
            
            <div className="grid md:grid-cols-2 gap-8">
              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Next 6 Months</h3>
                  <ul className="space-y-2">
                    {[
                      "AI-driven influencer matching for merchants",
                      "Multi-language support for broader market reach"
                    ].map((feature, index) => (
                      <li key={index} className="flex items-center gap-3">
                        <Clock className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
                        <span className="text-muted-foreground font-manrope">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>

              <Card className="bg-card/50 border-white/10">
                <CardContent className="p-6">
                  <h3 className="text-lg font-semibold text-white mb-4 font-manrope">Next 12 Months</h3>
                  <ul className="space-y-2">
                    {[
                      "Augmented reality (AR) product previews",
                      "Cross-border merchant onboarding and international payment integration"
                    ].map((vision, index) => (
                      <li key={index} className="flex items-center gap-3">
                        <Target className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
                        <span className="text-muted-foreground font-manrope">{vision}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-gradient-to-r from-[#E5195E]/10 via-background to-[#E5195E]/10">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6 font-manrope">
              Ready to Build Your AI Commerce Platform?
            </h2>
            <p className="text-lg text-muted-foreground mb-8 font-manrope">
              Create innovative social commerce solutions that merge AI-powered recommendations with seamless shopping experiences for the next generation of consumers.
            </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 px-8 py-3 font-manrope"
                onClick={() => navigateTo('/start-a-project')}
              >
                Start Your Project
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
              <Button 
                size="lg"
                variant="outline"
                className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
                onClick={() => navigateTo('/case-studies')}
              >
                View More Cases
              </Button>
            </div>
          </div>
        </div>
      </section>

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