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, Shield, Check, Star, TrendingUp, Heart, Bell, MapPin, User, Clock, Target, Zap, Database, Globe, Lock, Activity, AlertCircle } from "lucide-react";
import { navigateTo } from "../App";
// import simplitendImage from "figma:asset/b921f42de70695ee319496c3c3eee9a961c5297b.png";

const simplitendImage = "https://via.placeholder.com/600x600.png?text=SimpliTend+App+Image";

export const SimpliTendProject = () => {
  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">
                  <Heart className="w-4 h-4 mr-2" />
                  Healthcare Technology Case Study
                </Badge>
              </div>
              
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
                SimpliTend App
              </h1>
              
              <p className="text-xl text-muted-foreground mb-8 font-manrope">
                Independence Plus Peace of Mind: Caregiver–Patient Connected Mobile Platform for Enhanced Safety and Communication
              </p>

              {/* Tech Stack */}
              <div className="flex flex-wrap gap-2 mb-8">
                {["React Native", "Node.js", "MongoDB", "AWS Cloud"].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">10 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">9 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">
                  <Heart className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">Healthcare</div>
                  <div className="text-xs text-muted-foreground font-manrope">Industry</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>
                {[
                  "3-tier SKU system for different demographics (Junior, Adult, Senior)",
                  "Persistent, tamper-proof patient app experience",
                  "Fully secure caregiver–patient synchronization",
                  "Comprehensive geofence and alert system"
                ].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 Healthcare 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">
                <img 
                  src={simplitendImage} 
                  alt="SimpliTend 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">
              The <strong>SimpliTend App</strong> bridges the gap between caregivers and individuals needing assistance by delivering a simplified, secure mobile environment for patients and a connected, monitoring tool for caregivers. Designed for safety and ease-of-use, it addresses challenges such as spam blocking, navigation assistance, medication reminders, and emergency contact alerts.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed font-manrope">
              With a dual-application system — one for patients and one for caregivers — SimpliTend ensures safety, independence, and real-time communication for older adults, individuals with early-stage dementia, and their support networks.
            </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">
                    Millions of older adults and individuals with cognitive impairments face barriers to using smartphones safely, while caregivers struggle to stay updated on their wellbeing. SimpliTend addresses these challenges with a dual-application system ensuring safety, independence, and real-time communication.
                  </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">
                    Older adults with early signs of dementia, adults with autism, caregivers (family members, professionals, volunteers), and secondary markets including working parents wanting child safety and families of independent but aging parents.
                  </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">
                    Provide simplified UI/UX for patients to minimize errors and confusion, enable caregivers to monitor activities and receive real-time alerts, offer tiered subscription plans for different use cases, and ensure secure data handling with role-based access.
                  </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">Patient App Features</h3>
                <div className="space-y-4">
                  {[
                    "Simplified home screen (Call, Text, Voicemail, Photos, Direction to Home, Help, Apps)",
                    "Spam blocking for calls, SMS, and browser links",
                    "Medication and appointment reminders",
                    "Geofencing with travel-based temporary zones",
                    "Emergency contact (ICE) calling"
                  ].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">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-white mb-6 font-manrope">Caregiver App Features</h3>
                <div className="space-y-4">
                  {[
                    "Real-time notifications for key events (medication, geofence breach, emergency calls)",
                    "Status view for location, device health, unread messages",
                    "Multi-patient support",
                    "Secure login and data sync"
                  ].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">{feature}</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">
                  {[
                    "Designing a persistent app that cannot be unintentionally closed or uninstalled by patients",
                    "Synchronizing multi-patient data securely across devices",
                    "Maintaining usability for low-vision and low-tech users"
                  ].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 feedback from diverse caregiver groups",
                    "Adapting feature sets for different SKU models (Junior, Adult, Senior)",
                    "Extensive testing across multiple Android and iOS devices for accessibility"
                  ].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" },
                      { label: "Database", value: "MongoDB (secure cloud + local storage)" },
                      { label: "Hosting", value: "AWS" },
                      { label: "Authentication", value: "JWT with caregiver–patient pairing PIN" }
                    ].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">{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">
                    {[
                      "Dual-app design (separate patient & caregiver apps) for tailored functionality",
                      "Event-driven alerting system with geofence triggers",
                      "Local-first configuration to prevent operational downtime",
                      "Strong accessibility compliance (large fonts, high contrast, labeled icons)"
                    ].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> with 2-week sprints, early user testing with target caregiver–patient pairs, iterative refinement based on live scenario trials
                </p>
              </div>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {[
                  { 
                    phase: "Discovery & Planning", 
                    duration: "3 weeks",
                    description: "Market research, caregiver interviews, feature prioritization"
                  },
                  { 
                    phase: "Design & Prototyping", 
                    duration: "4 weeks",
                    description: "Accessibility-first UI, caregiver dashboard mockups"
                  },
                  { 
                    phase: "Core Development", 
                    duration: "8 weeks",
                    description: "Patient simplified UI, caregiver alert system, pairing workflow"
                  },
                  { 
                    phase: "Feature Expansion", 
                    duration: "6 weeks",
                    description: "Geofence, medication reminders, ICE integration"
                  },
                  { 
                    phase: "Testing & Optimization", 
                    duration: "4 weeks",
                    description: "Accessibility compliance, multi-device validation"
                  },
                  { 
                    phase: "Deployment & Training", 
                    duration: "3 weeks",
                    description: "App store launch, caregiver onboarding"
                  }
                ].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: User,
                  title: "Tiered SKUs",
                  description: "SimpliTend Junior for child safety tracking, Adult for mild support needs, and Senior for full support suite with ICE and advanced restrictions."
                },
                {
                  icon: Bell,
                  title: "Alerts & Notifications",
                  description: "Geofence exit/entry, medication reminders & refills, low battery warnings, and emergency contact activations."
                },
                {
                  icon: Shield,
                  title: "Secure Caregiver Access",
                  description: "Multi-patient dashboard, role-based permissions, and PIN verification pairing for enhanced security."
                },
                {
                  icon: MapPin,
                  title: "Geofencing System",
                  description: "Dynamic temporary address handling with smart zone management for enhanced safety monitoring."
                },
                {
                  icon: Lock,
                  title: "Persistent App Operation",
                  description: "Tamper-proof patient app with OS-level resilience measures to prevent accidental closure or uninstallation."
                },
                {
                  icon: Activity,
                  title: "Health Monitoring",
                  description: "Medication tracking, appointment reminders, and comprehensive health status monitoring for caregivers."
                }
              ].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: "SKU Versions", value: "3", icon: User },
                { label: "App Operation", value: "100%", icon: Shield },
                { label: "Spam Reduction", value: "80%", icon: Lock },
                { label: "Caregiver Awareness", value: "Real-time", icon: Bell }
              ].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>
                  </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">Technical Achievements</h3>
                <ul className="space-y-3">
                  {[
                    "Built a geofence system with dynamic temporary address handling",
                    "Designed an uncloseable patient app with OS-level resilience measures",
                    "Implemented secure caregiver–patient linking with unique PINs per pairing"
                  ].map((achievement, 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">{achievement}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div>
                <h3 className="text-xl font-semibold text-white mb-4 font-manrope">Business Value</h3>
                <ul className="space-y-3">
                  {[
                    "3 SKU versions launched for different audiences",
                    "100% persistent app operation in testing environments",
                    "80% reduction in spam/scam contact for patient devices",
                    "Real-time caregiver awareness of patient safety and activities"
                  ].map((value, 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">{value}</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">
                    {[
                      "Accessibility-first design improved adoption by low-tech users",
                      "Separate patient and caregiver apps simplified user experiences"
                    ].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">
                    {[
                      "SKU flexibility enables broader market reach",
                      "Real-world caregiver trials are essential for feature prioritization"
                    ].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">
              "SimpliTend gives my mother the independence she wants while ensuring I know she's safe. The interface is so simple that she uses it without frustration, and I get notified immediately if something is wrong."
            </blockquote>
            <div className="text-muted-foreground font-manrope">
              <div className="font-semibold text-white">Family Caregiver</div>
              <div>Beta User</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">Phase 2 (6 Months)</h3>
                  <ul className="space-y-2">
                    {[
                      "Premium caregiver features (history reports, analytics)",
                      "Integration with wearable health devices"
                    ].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">Phase 3 (12 Months)</h3>
                  <ul className="space-y-2">
                    {[
                      "AI-driven predictive alerts",
                      "Voice assistant 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 Healthcare Solution?
            </h2>
            <p className="text-lg text-muted-foreground mb-8 font-manrope">
              Create innovative healthcare applications that bridge the gap between patients and caregivers with secure, accessible technology.
            </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>
  );
};