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, MapPin, Shield, Navigation as NavigationIcon, Zap, Heart, Target, AlertCircle, Clock, UserCheck } from "lucide-react";
import { navigateTo } from "../App";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";

export const AmbleProject = () => {
  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">
                  <MapPin className="w-4 h-4 mr-2" />
                  Navigation App Case Study
                </Badge>
              </div>
              
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
                Amble App
              </h1>
              
              <p className="text-xl text-muted-foreground mb-8 font-manrope">
                Accessible Navigation & Community Engagement App - Making urban exploration easier and more inclusive for everyone
              </p>

              {/* Tech Stack */}
              <div className="flex flex-wrap gap-2 mb-8">
                {["React Native", "Node.js", "MongoDB", "Google Maps API", "Firebase Auth"].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">4 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">6 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">
                  <Smartphone className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">iOS/Android</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">
                  <Star className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">4.6★</div>
                  <div className="text-xs text-muted-foreground font-manrope">App Rating</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>
                {[
                  "Successfully launched the MVP on both iOS & Android within planned timeline",
                  "Integrated location-based recommendations and event listings",
                  "Achieved 4.6★ rating on initial release in app stores",
                  "Built comprehensive accessibility features for inclusive navigation"
                ].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 Navigation App
                  <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/amble-app-mockup.jpg"
                  alt="Amble Navigation App"
                  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">
              Amble is designed to make urban exploration easier and more inclusive. The platform offers curated walking routes, community event listings, and accessibility information for public places, enabling residents and tourists to discover and navigate cities effortlessly.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed font-manrope">
              The comprehensive mobile application bridges the gap between navigation tools that lack accessibility information and provides a community-driven platform for discovering local experiences within a single, user-friendly interface.
            </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">
                    Many city navigation tools lack accessibility information or curated local experiences. Amble fills this gap by offering inclusive route planning, community-driven recommendations, and event discovery features within a single mobile app.
                  </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">
                    City residents looking for events and walks, tourists exploring new cities, and people with mobility needs requiring accessibility data for inclusive urban navigation and community engagement.
                  </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">
                    Build an MVP with core walking route and event discovery features, include accessibility tags for public places and routes, enable social sharing of routes and events, and launch in select pilot cities with potential for rapid scaling.
                  </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">
                  {[
                    "Curated Walking Routes with distance, duration, and difficulty filters",
                    "Accessibility Information for public spaces and landmarks",
                    "Local Event Listings with date, location, and category filters",
                    "User Profiles for saving favorites and personalizing recommendations",
                    "Push Notifications for upcoming events or nearby attractions",
                    "Offline Mode for preloaded routes and maps"
                  ].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">
                  {[
                    "GPS-based real-time location tracking",
                    "Map rendering using Google Maps API",
                    "Cross-platform mobile support via React Native",
                    "Secure user authentication via Firebase",
                    "Cloud-based database with offline sync capabilities"
                  ].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">
                  {[
                    "Ensuring accurate GPS tracking in dense urban areas",
                    "Managing offline data sync for routes and events",
                    "Designing for accessibility compliance (WCAG standards)"
                  ].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 with local authorities for accessibility data",
                    "Gathering high-quality route content for launch cities",
                    "Delivering MVP within 4-month development window"
                  ].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" },
                      { label: "Backend", value: "Node.js, Express.js" },
                      { label: "Database", value: "MongoDB" },
                      { label: "Maps & Location", value: "Google Maps API" },
                      { label: "Authentication", value: "Firebase Authentication" },
                      { label: "Notifications", value: "Push Notifications" }
                    ].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">
                    {[
                      "React Native mobile app with modular feature components",
                      "Node.js backend with REST API for events, routes, and accessibility data",
                      "MongoDB database with geospatial indexing for location queries",
                      "Firebase Auth for secure, scalable authentication",
                      "Push notification service for engagement campaigns"
                    ].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> (weekly sprints) with weekly sprint planning, mid-sprint QA cycles for early bug detection, and client demos at the end of each sprint
                </p>
              </div>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {[
                  { 
                    phase: "Discovery & Planning", 
                    duration: "2 weeks",
                    description: "Feature prioritization, UI/UX wireframing, technical feasibility review"
                  },
                  { 
                    phase: "Design & Prototyping", 
                    duration: "3 weeks",
                    description: "Mobile UI design for both platforms, map interface prototypes"
                  },
                  { 
                    phase: "Core Development", 
                    duration: "6 weeks",
                    description: "Walking route module, event listing module, user authentication and profiles"
                  },
                  { 
                    phase: "Integration & Testing", 
                    duration: "4 weeks",
                    description: "Google Maps API integration, push notifications setup, offline mode implementation"
                  },
                  { 
                    phase: "Launch & Handover", 
                    duration: "1 week",
                    description: "App store submission, documentation and client training"
                  }
                ].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: NavigationIcon,
                  title: "Curated Routes",
                  description: "Localized walking routes with difficulty levels"
                },
                {
                  icon: Calendar,
                  title: "Events Module",
                  description: "Browse, filter, and save local events"
                },
                {
                  icon: Heart,
                  title: "Accessibility Data",
                  description: "Information on ramps, elevators, and accessible restrooms"
                },
                {
                  icon: Globe,
                  title: "Offline Maps",
                  description: "Preload maps and routes for low-connectivity situations"
                },
                {
                  icon: UserCheck,
                  title: "Personalization",
                  description: "Save favorites and receive tailored recommendations"
                },
                {
                  icon: Zap,
                  title: "Push Notifications",
                  description: "Stay updated on nearby events and attractions"
                }
              ].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-3 gap-6 mb-12">
              {[
                { label: "GPS Accuracy", value: "±6m", icon: MapPin, desc: "average accuracy" },
                { label: "API Response", value: "150ms", icon: Zap, desc: "average response time" },
                { label: "Platform Uptime", value: "99.9%", icon: Shield, desc: "first 3 months" }
              ].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">
                  {[
                    "Positive reception in pilot cities",
                    "Enhanced visibility for local events and businesses",
                    "Increased engagement via push notifications"
                  ].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 GPS accuracy: ±6 meters",
                    "API response time: 150ms average",
                    "99.9% uptime in first 3 months post-launch"
                  ].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">
                    {[
                      "Early UI/UX prototyping improved development speed",
                      "Using Firebase for authentication reduced backend complexity"
                    ].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">
                    {[
                      "Offline mode was more critical for adoption than anticipated",
                      "Partnering with local organizations improved accessibility data accuracy"
                    ].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 delivered exactly what we envisioned for Amble — an intuitive, inclusive navigation app. Their team understood our mission and translated it into a smooth, polished product that our users love."
            </blockquote>
            <div className="text-muted-foreground font-manrope">
              <div className="font-semibold text-white">Founder, Amble</div>
              <div>Navigation App 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">
                    {[
                      "Expand to 10 more cities",
                      "Add voice navigation for visually impaired users"
                    ].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">
                    {[
                      "Gamification features for walking challenges",
                      "Integration with public transit APIs"
                    ].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 Navigation App?
            </h2>
            <p className="text-lg text-muted-foreground mb-8 font-manrope">
              Create accessible, inclusive mobile applications that empower users to explore and navigate their world with confidence.
            </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>
  );
};