import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { HireTalentHeroBanner } from "../components/HireTalentHeroBanner";
import { FAQSection } from "../components/FAQSection";
import { AppSuccessMetrics } from "../components/AppSuccessMetrics";
import { StepsIllustrated } from "../components/StepsIllustrated";
import { CarouselTestimonials } from "../components/CarouselTestimonials";
import { ResourceCards } from "../components/ResourceCards";
import { SplitCallToAction } from "../components/SplitCallToAction";
import { TechStackVisualization } from "../components/vectors/TechStackVisualization";
import { Layers, Users, Code, CheckCircle, Star, Award, Clock, TrendingUp } from "lucide-react";

const hireSaaSProductDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire SaaS Product Engineering Developers",
    description: "Build scalable Software-as-a-Service platforms with our expert developers. We specialize in multi-tenant architecture, subscription management, and enterprise-grade SaaS solutions.",
    primaryCTA: {
      text: "Hire SaaS Developers",
      href: "/contact-us",
      icon: Layers
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // SaaS Product specific metrics
  metrics: [
    {
      value: "150+",
      label: "SaaS Platforms Built",
      description: "Successfully launched products"
    },
    {
      value: "99.5%",
      label: "Platform Uptime",
      description: "Enterprise-grade reliability"
    },
    {
      value: "10M+",
      label: "Users Supported",
      description: "Across all SaaS platforms"
    },
    {
      value: "5x",
      label: "Faster Time-to-Market",
      description: "With proven frameworks"
    }
  ],

  // SaaS Product development process
  process: {
    title: "Our SaaS Product Development Process",
    subtitle: "From MVP to enterprise-scale platform",
    steps: [
      {
        number: "01",
        title: "SaaS Architecture & Planning",
        description: "Design scalable multi-tenant architecture with subscription management and enterprise features.",
        icon: <Layers className="w-8 h-8" />,
        details: [
          "Multi-tenant architecture design",
          "Subscription and billing strategy",
          "Scalability and performance planning",
          "Security and compliance framework"
        ]
      },
      {
        number: "02", 
        title: "MVP Development & Testing",
        description: "Build and validate your SaaS MVP with core features and user feedback integration.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "Core feature development",
          "User authentication and management",
          "Basic subscription handling",
          "Analytics and monitoring setup"
        ]
      },
      {
        number: "03",
        title: "Feature Enhancement & Scaling",
        description: "Expand functionality, optimize performance, and prepare for enterprise customers.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Advanced feature development",
          "Performance optimization",
          "Enterprise integrations",
          "Advanced analytics and reporting"
        ]
      },
      {
        number: "04",
        title: "Enterprise Launch & Growth",
        description: "Deploy enterprise-ready platform with advanced security, compliance, and support systems.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Enterprise security implementation",
          "Compliance certifications",
          "Customer success tools",
          "Continuous optimization"
        ]
      }
    ]
  },

  // SaaS Product focused FAQs
  faqs: [
    {
      question: "What makes SaaS development different from regular web applications?",
      answer: "SaaS development requires multi-tenant architecture, subscription management, advanced security, compliance features, and scalability to serve thousands of users. We build platforms that can grow from startup to enterprise scale."
    },
    {
      question: "How do you handle multi-tenant architecture and data isolation?",
      answer: "We implement secure multi-tenant architecture with proper data isolation using database-level separation or schema-based isolation. Each tenant's data is completely secure and isolated while maintaining optimal performance and cost efficiency."
    },
    {
      question: "Can you integrate subscription billing and payment processing?",
      answer: "Yes, we integrate with leading payment platforms like Stripe, PayPal, and others to handle subscription billing, recurring payments, usage-based billing, and complex pricing models including freemium, tiered, and enterprise plans."
    },
    {
      question: "How do you ensure SaaS platform security and compliance?",
      answer: "We implement enterprise-grade security including encryption, SSO, RBAC, audit trails, and compliance with standards like SOC 2, GDPR, HIPAA, and industry-specific regulations. Security is built into every layer of the platform."
    },
    {
      question: "What technologies do you use for SaaS development?",
      answer: "We use modern cloud-native technologies including React/Vue.js, Node.js, Python, microservices architecture, Docker/Kubernetes, AWS/Azure/GCP, and databases optimized for multi-tenant applications."
    },
    {
      question: "How do you handle scaling and performance optimization?",
      answer: "We design SaaS platforms with horizontal scalability using microservices, auto-scaling infrastructure, CDNs, caching strategies, and database optimization to handle growing user bases and increasing data volumes efficiently."
    }
  ]
};

export function HireSaaSProductDevelopers() {
  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      
      {/* Hero Section with TechStackVisualization */}
      <HireTalentHeroBanner
        vectorComponent={TechStackVisualization}
        category={hireSaaSProductDevelopersData.heroBanner.category}
        title={hireSaaSProductDevelopersData.heroBanner.title}
        description={hireSaaSProductDevelopersData.heroBanner.description}
        primaryCTA={hireSaaSProductDevelopersData.heroBanner.primaryCTA}
        secondaryCTA={hireSaaSProductDevelopersData.heroBanner.secondaryCTA}
      />

      {/* Success Metrics */}
      {/* <section>
        <AppSuccessMetrics metrics={hireSaaSProductDevelopersData.metrics} />
      </section> */}

      {/* Development Process */}
      <section>
        <StepsIllustrated 
          title={hireSaaSProductDevelopersData.process.title}
          subtitle={hireSaaSProductDevelopersData.process.subtitle}
          steps={hireSaaSProductDevelopersData.process.steps}
        />
      </section>

      {/* Client Testimonials */}
      <section>
        <CarouselTestimonials />
      </section>

      {/* FAQ Section */}
      <section>
        <FAQSection 
          title="SaaS Product Development FAQs"
          subtitle="Everything you need to know about hiring SaaS product developers"
          faqs={hireSaaSProductDevelopersData.faqs}
        />
      </section>

      {/* Resources */}
      <section>
        <ResourceCards />
      </section>

      {/* Call to Action */}
      <section>
        <SplitCallToAction />
      </section>

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