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, Monitor, Check, Star, TrendingUp, Factory, Shield, Zap, Settings, Target, AlertCircle, Clock, Database, Wifi, BarChart3, Bell, Activity, Wrench, Brain } from "lucide-react";
import { useNavigate } from "react-router-dom";
// import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png";

const vib360Image = "https://via.placeholder.com/600x600.png?text=VIB360+Platform+Image";

export const VIB360Project = () => {
  const navigate = useNavigate();
  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">
                  <Activity className="w-4 h-4 mr-2" />
                  Industrial IoT Case Study
                </Badge>
              </div>
              
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
                VIB360 Platform
              </h1>
              
              <p className="text-xl text-muted-foreground mb-8 font-manrope">
                Industrial IoT Vibration Monitoring & Predictive Maintenance Platform - AI-enabled solution for real-time monitoring and operational efficiency
              </p>

              {/* Tech Stack */}
              <div className="flex flex-wrap gap-2 mb-8">
                {["React.js", "React Native", "Node.js", "PostgreSQL", "InfluxDB", "TensorFlow", "AWS IoT"].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">8 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">
                  <Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">Web/Android/iOS</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">
                  <TrendingUp className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
                  <div className="text-lg font-bold text-white font-manrope">92%</div>
                  <div className="text-xs text-muted-foreground font-manrope">AI Accuracy</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>
                {[
                  "Deployed across 15 industrial sites in first phase",
                  "Achieved 92% accuracy in predicting bearing and motor faults",
                  "Reduced unplanned downtime by 27% in pilot plants",
                  "Built comprehensive AI-enabled predictive maintenance platform"
                ].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={() => navigate('/start-a-project')}
                >
                  Build Your IoT 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={() => navigate('/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={vib360Image} 
                  alt="VIB360 Industrial IoT Vibration Monitoring 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">
              VIB360 enables industrial operators to monitor vibration levels in real time, detect early signs of mechanical failure, and schedule maintenance proactively. The platform integrates IoT sensor hardware with cloud-based analytics, delivering actionable insights directly to technicians and management.
            </p>
            <p className="text-lg text-muted-foreground leading-relaxed font-manrope">
              The comprehensive solution addresses unplanned equipment failures that can lead to massive operational losses by continuously monitoring vibration signatures, identifying anomalies, and predicting failures before they happen across manufacturing, mining, and energy industries.
            </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">
                    Unplanned equipment failures can lead to massive operational losses in industries such as manufacturing, mining, and energy. Traditional maintenance schedules are often inefficient, either wasting resources on unnecessary checks or missing early fault signs. VIB360 addresses this by continuously monitoring vibration signatures, identifying anomalies, and predicting failures before they happen.
                  </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">
                    Plant maintenance managers responsible for equipment upkeep, reliability engineers focused on preventing failures, and industrial operations supervisors overseeing production efficiency and equipment performance monitoring.
                  </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">
                    Enable real-time vibration monitoring with minimal installation overhead, provide predictive analytics to reduce downtime and maintenance costs, deliver a scalable platform that can integrate with existing SCADA and ERP systems, and ensure secure remote access to sensor data for distributed teams.
                  </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">
                  {[
                    "Real-Time Vibration Monitoring with threshold-based alerts",
                    "Predictive Maintenance Dashboard with AI-driven failure forecasts",
                    "Multi-Sensor Support for motors, pumps, compressors, and turbines",
                    "Mobile App for Field Technicians with push notifications and offline data sync",
                    "Customizable Alert Rules and maintenance scheduling",
                    "Integration API for SCADA/ERP connectivity"
                  ].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">
                  {[
                    "BLE & Wi-Fi connectivity for IoT devices",
                    "Time-series database for high-frequency sensor data storage",
                    "AI anomaly detection engine trained on vibration datasets",
                    "Secure cloud communication (TLS 1.3 encryption)",
                    "Mobile offline mode for sites with poor connectivity"
                  ].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">
                  {[
                    "Handling high-volume vibration data without latency",
                    "Training AI models on limited historical fault data",
                    "Ensuring sensor accuracy in harsh industrial conditions"
                  ].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 sensor hardware deployment with software rollouts",
                    "Managing change adoption in traditional maintenance workflows",
                    "Aligning development timelines with client's phased deployment strategy"
                  ].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: "Hardware Integration", value: "IoT vibration sensors (BLE & Wi-Fi enabled)" },
                      { label: "Frontend", value: "React.js, React Native" },
                      { label: "Backend", value: "Node.js, Express.js" },
                      { label: "Database", value: "PostgreSQL, InfluxDB (time-series data)" },
                      { label: "AI/ML", value: "TensorFlow for anomaly detection & predictive analytics" },
                      { label: "Cloud Services", value: "AWS IoT Core, AWS Lambda, S3, CloudWatch" }
                    ].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">
                    {[
                      "AWS IoT Core for device-to-cloud communication",
                      "InfluxDB for storing high-frequency time-series vibration data",
                      "AI microservice for anomaly detection and fault prediction",
                      "React.js web dashboard with real-time visualizations",
                      "React Native mobile app for technician workflows",
                      "Event-driven architecture with AWS Lambda for alert processing"
                    ].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 sprint reviews with hardware + software teams, field testing after each major release, iterative model retraining with new sensor data
                </p>
              </div>
              
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {[
                  { 
                    phase: "Discovery & Planning", 
                    duration: "3 weeks",
                    description: "Hardware-software integration feasibility, AI model baseline setup"
                  },
                  { 
                    phase: "Design & Prototyping", 
                    duration: "5 weeks",
                    description: "Sensor data visualization mockups, mobile UI/UX for technician workflows"
                  },
                  { 
                    phase: "Core Platform Development", 
                    duration: "12 weeks",
                    description: "Sensor connectivity modules, time-series data ingestion pipeline, web dashboard core features"
                  },
                  { 
                    phase: "AI & Analytics Module", 
                    duration: "6 weeks",
                    description: "Model training & tuning, predictive maintenance alerts"
                  },
                  { 
                    phase: "Integration & Testing", 
                    duration: "5 weeks",
                    description: "SCADA/ERP integration APIs, field testing in pilot plants"
                  },
                  { 
                    phase: "Deployment & Training", 
                    duration: "3 weeks",
                    description: "Rollout to initial sites, staff training & documentation"
                  }
                ].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: BarChart3,
                  title: "Live Vibration Graphs",
                  description: "Real-time sensor readings displayed in dashboards"
                },
                {
                  icon: Brain,
                  title: "Fault Prediction",
                  description: "Early detection of mechanical issues with confidence scores"
                },
                {
                  icon: Wrench,
                  title: "Maintenance Scheduling",
                  description: "Automated work orders based on AI insights"
                },
                {
                  icon: Bell,
                  title: "Multi-Device Alerts",
                  description: "Email, SMS, and push notifications"
                },
                {
                  icon: Database,
                  title: "Data Export",
                  description: "CSV, PDF, and API access for further analysis"
                },
                {
                  icon: Wifi,
                  title: "IoT Connectivity",
                  description: "BLE & Wi-Fi enabled vibration sensor integration"
                }
              ].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: "Site Deployments", value: "15", icon: Factory, desc: "industrial sites" },
                { label: "AI Accuracy", value: "92%", icon: Brain, desc: "fault prediction" },
                { label: "Downtime Reduction", value: "27%", icon: TrendingUp, desc: "first 3 months" },
                { label: "Data Latency", value: "<2s", icon: Zap, desc: "sensor to dashboard" }
              ].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">
                  {[
                    "27% downtime reduction in first 3 months",
                    "15% cost savings in maintenance budgets",
                    "Increased maintenance team efficiency with targeted inspections"
                  ].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">
                  {[
                    "Data ingestion latency: < 2 seconds from sensor to dashboard",
                    "AI fault prediction accuracy: 92%",
                    "99.9% platform uptime since 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">
                    {[
                      "Parallel hardware and software development accelerated delivery",
                      "Continuous AI retraining improved prediction accuracy over time"
                    ].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">
                    {[
                      "On-site calibration is critical to sensor performance",
                      "Edge processing could further reduce cloud costs in future phases"
                    ].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">
              "With VIB360, we've transformed our maintenance strategy from reactive to proactive. The accuracy of fault predictions and the ease of use for our technicians have been game changers."
            </blockquote>
            <div className="text-muted-foreground font-manrope">
              <div className="font-semibold text-white">Maintenance Director</div>
              <div>Industrial Manufacturing 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">
                    {[
                      "Edge AI integration for on-device anomaly detection",
                      "Expanded sensor compatibility (temperature, pressure)"
                    ].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">
                    {[
                      "Multi-site centralized monitoring for enterprise clients",
                      "Predictive spare parts inventory management"
                    ].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 Industrial IoT Solution?
            </h2>
            <p className="text-lg text-muted-foreground mb-8 font-manrope">
              Create advanced predictive maintenance platforms with AI-enabled vibration monitoring and real-time analytics for industrial excellence.
            </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={() => navigate('/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={() => navigate('/case-studies')}
              >
                View More Cases
              </Button>
            </div>
          </div>
        </div>
      </section>

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