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,
  DollarSign,
  Clock,
  Users,
  Target,
  Zap,
  Shield,
  CheckCircle,
  Star,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
import { EngagementModelsVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";

export const EngagementModels = () => {
  const models = [
    {
      icon: DollarSign,
      title: "Fixed Price Model",
      description:
        "Ideal for projects with well-defined requirements, scope, and deliverables. We agree on a fixed price and timeline upfront, ensuring budget predictability.",
      bestFor: [
        "MVPs",
        "Specific feature development",
        "Clear scope projects",
        "Smaller applications",
      ],
      benefits: [
        "Predictable costs",
        "Clearly defined deliverables",
        "Minimal financial risk",
      ],
      color: "from-blue-400 to-blue-600",
    },
    {
      icon: Clock,
      title: "Time & Material (T&M) Model",
      description:
        "Perfect for projects with evolving requirements, dynamic scope, or long-term development. You pay for the actual time and resources spent, offering maximum flexibility.",
      bestFor: [
        "Complex projects",
        "Agile development",
        "Ongoing support",
        "R&D initiatives",
      ],
      benefits: [
        "High flexibility for changes",
        "Transparent billing",
        "Adaptability to market shifts",
        "Continuous refinement",
      ],
      color: "from-green-400 to-green-600",
    },
    {
      icon: Users,
      title: "Dedicated Team Model",
      description:
        "Gain a fully integrated team of WDI professionals working exclusively on your project. You have direct control over the team, processes, and project direction, similar to an in-house extension.",
      bestFor: [
        "Long-term projects",
        "Ongoing product development",
        "Scaling existing teams",
        "Building robust, complex solutions",
      ],
      benefits: [
        "Full control",
        "Seamless integration",
        "Undivided attention",
        "Access to diverse skill sets",
        "Cost-efficiency",
      ],
      color: "from-[#E5195E] to-[#FF6B9D]",
    },
  ];

  const comparisonFeatures = [
    {
      feature: "Budget Predictability",
      fixedPrice: "High",
      timeAndMaterial: "Medium",
      dedicatedTeam: "Medium-High",
    },
    {
      feature: "Flexibility for Changes",
      fixedPrice: "Low",
      timeAndMaterial: "High",
      dedicatedTeam: "High",
    },
    {
      feature: "Direct Team Control",
      fixedPrice: "Low",
      timeAndMaterial: "Medium",
      dedicatedTeam: "High",
    },
    {
      feature: "Best for Long-term Projects",
      fixedPrice: "Low",
      timeAndMaterial: "Medium",
      dedicatedTeam: "High",
    },
    {
      feature: "Quick Start",
      fixedPrice: "High",
      timeAndMaterial: "Medium",
      dedicatedTeam: "Medium",
    },
  ];

  const heroBanner =[
    {
    category: "Engagement Options",
    title: "Flexible Engagement Models",
    description: "Choose from our flexible engagement models designed to fit your project needs, budget, and timeline. From fixed-price projects to dedicated teams, find the perfect collaboration approach.",
    primaryCTA: {
      text: "Explore Models",
      href: "/start-a-project",
      icon: Target
    },
    secondaryCTA: {
      text: "Get Consultation",
      href: "/hire-talent",
      icon: Users
    }
  },
  ]

  const testimonials = [
    {
      quote:
        "The Time & Material model was perfect for our evolving startup needs. We could adapt quickly while maintaining transparent costs throughout the development process.",
      author: "Sarah Kim",
      role: "Founder, StartupFlow",
      rating: 5,
    },
    {
      quote:
        "Fixed Price model gave us exactly what we needed - predictable costs and clear deliverables for our MVP launch. WDI delivered on time and within budget.",
      author: "Michael Rodriguez",
      role: "Product Manager, TechVision",
      rating: 5,
    },
  ];

  return (
    <div className="dark min-h-screen bg-background">
      <Navigation />

        <Helmet>
        {/* Page Title and Meta Description */}
        <title>Engagement Models | Flexible Software Development Options</title>
        <meta
          name="description"
          content="Explore WDI’s flexible software engagement models. Choose the right approach for your goals, timeline, and budget, from startups to enterprises."
        />

        {/* Canonical Link */}
       <link rel="canonical" href="https://www.wdipl.com/engagement-models" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Engagement Models | Flexible Software Development Options" />
        <meta
          property="og:description"
          content="Explore WDI’s flexible software engagement models. Choose the right approach for your goals, timeline, and budget, from startups to enterprises."
        />
        <meta property="og:url" content="https://www.wdipl.com/services" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Twitter Card Tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Engagement Models | Flexible Software Development Options" />
        <meta
          name="twitter:description"
          content="Explore WDI’s flexible software engagement models. Choose the right approach for your goals, timeline, and budget, from startups to enterprises."
        />
        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Social Profiles (using JSON-LD Schema) */}
        <script type="application/ld+json">
          {`
                              {
                                "@context": "https://schema.org",
                                "@type": "Organization",
                                "name": "WDI",
                                "url": "https://www.wdipl.com",
                                "sameAs": [
                                  "https://www.facebook.com/wdideas",
                                  "https://www.linkedin.com/in/website-developers-india/",
                                  "https://www.instagram.com/wdipl/"
                                ]
                              }
                            `}
        </script>
      </Helmet>
      {/* Hero Section */}
      <HireTalentHeroBanner
        vectorComponent={EngagementModelsVector}
        category={heroBanner[0].category}
        title={heroBanner[0].title}
        description={heroBanner[0].description}
        primaryCTA={heroBanner[0].primaryCTA}
        secondaryCTA={heroBanner[0].secondaryCTA}
      />

      {/* Introduction */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <p className="text-lg text-muted-foreground leading-relaxed">
              That's why we offer a range of flexible engagement models designed
              to provide optimal value, transparency, and control. Whether you
              have a clearly defined scope or need an agile approach, we have a
              model to suit your needs.
            </p>
          </div>
        </div>
      </section>

      {/* Core Engagement Models */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              Our Core Engagement Models
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Flexible approaches designed to meet your specific project needs
              and goals
            </p>
          </div>

          <div className="space-y-8">
            {models.map((model, index) => (
              <Card
                key={index}
                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
              >
                <CardContent className="p-8">
                  <div className="grid lg:grid-cols-3 gap-8 items-start">
                    {/* Model Overview */}
                    <div className="lg:col-span-2">
                      <div className="flex items-center gap-4 mb-6">
                        <div
                          className={`w-12 h-12 rounded-xl bg-gradient-to-br ${model.color} flex items-center justify-center`}
                        >
                          <model.icon className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-2xl font-bold text-white group-hover:text-[#E5195E] transition-colors duration-300">
                          {model.title}
                        </h3>
                      </div>

                      <p className="text-muted-foreground mb-6 leading-relaxed">
                        {model.description}
                      </p>

                      <div className="grid md:grid-cols-2 gap-6">
                        <div>
                          <h4 className="text-white font-semibold mb-3">
                            Best For:
                          </h4>
                          <ul className="space-y-2">
                            {model.bestFor.map((item, itemIndex) => (
                              <li
                                key={itemIndex}
                                className="flex items-center gap-2"
                              >
                                <CheckCircle className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
                                <span className="text-muted-foreground text-sm">
                                  {item}
                                </span>
                              </li>
                            ))}
                          </ul>
                        </div>

                        <div>
                          <h4 className="text-white font-semibold mb-3">
                            Benefits:
                          </h4>
                          <ul className="space-y-2">
                            {model.benefits.map((benefit, benefitIndex) => (
                              <li
                                key={benefitIndex}
                                className="flex items-center gap-2"
                              >
                                <Target className="w-4 h-4 text-[#E5195E] flex-shrink-0" />
                                <span className="text-muted-foreground text-sm">
                                  {benefit}
                                </span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    </div>

                    {/* CTA */}
                    <div className="flex justify-center lg:justify-end">
                      <Button
                        className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
                        onClick={() => navigateTo("/start-a-project")}
                      >
                        Learn More
                        <ArrowRight className="ml-2 w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison Table */}
      <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              Model Comparison
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Compare our engagement models to find the perfect fit for your
              project
            </p>
          </div>

          <div className="max-w-4xl mx-auto">
            <Card className="bg-background/50 border-white/10 overflow-hidden">
              <CardContent className="p-0">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-white/10">
                        <th className="text-left p-6 text-white font-semibold">
                          Feature
                        </th>
                        <th className="text-center p-6 text-white font-semibold">
                          Fixed Price
                        </th>
                        <th className="text-center p-6 text-white font-semibold">
                          Time & Material
                        </th>
                        <th className="text-center p-6 text-white font-semibold">
                          Dedicated Team
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {comparisonFeatures.map((feature, index) => (
                        <tr
                          key={index}
                          className="border-b border-white/5 hover:bg-white/5"
                        >
                          <td className="p-6 text-muted-foreground">
                            {feature.feature}
                          </td>
                          <td className="p-6 text-center">
                            <Badge
                              variant="outline"
                              className={`border-blue-500/30 text-blue-400 ${feature.fixedPrice === "High"
                                  ? "bg-blue-500/10"
                                  : feature.fixedPrice === "Medium"
                                    ? "bg-yellow-500/10"
                                    : "bg-red-500/10"
                                }`}
                            >
                              {feature.fixedPrice}
                            </Badge>
                          </td>
                          <td className="p-6 text-center">
                            <Badge
                              variant="outline"
                              className={`border-green-500/30 text-green-400 ${feature.timeAndMaterial === "High"
                                  ? "bg-green-500/10"
                                  : feature.timeAndMaterial === "Medium"
                                    ? "bg-yellow-500/10"
                                    : "bg-red-500/10"
                                }`}
                            >
                              {feature.timeAndMaterial}
                            </Badge>
                          </td>
                          <td className="p-6 text-center">
                            <Badge
                              variant="outline"
                              className={`border-[#E5195E]/30 text-[#E5195E] ${feature.dedicatedTeam === "High"
                                  ? "bg-[#E5195E]/10"
                                  : feature.dedicatedTeam.includes("Medium")
                                    ? "bg-yellow-500/10"
                                    : "bg-red-500/10"
                                }`}
                            >
                              {feature.dedicatedTeam}
                            </Badge>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Choosing the Right Model */}
      <section className="py-16 bg-background">
        <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 mb-6 text-white">
              Choosing the Right Model
            </h2>
            <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
              Our experts will consult with you to analyze your project's
              specific needs, objectives, budget, and desired level of control
              to recommend the most suitable engagement model for optimal
              success.
            </p>

            <Card className="bg-card/50 border-white/10 text-left">
              <CardContent className="p-8">
                <div className="grid md:grid-cols-3 gap-8">
                  <div className="text-center">
                    <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center mx-auto mb-4">
                      <Target className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="text-white font-semibold mb-2">
                      Project Analysis
                    </h3>
                    <p className="text-muted-foreground text-sm">
                      We assess your requirements, scope, and timeline
                    </p>
                  </div>

                  <div className="text-center">
                    <div className="w-16 h-16 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center mx-auto mb-4">
                      <Users className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="text-white font-semibold mb-2">
                      Expert Consultation
                    </h3>
                    <p className="text-muted-foreground text-sm">
                      Our team provides personalized recommendations
                    </p>
                  </div>

                  <div className="text-center">
                    <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E] to-[#FF6B9D] flex items-center justify-center mx-auto mb-4">
                      <Zap className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="text-white font-semibold mb-2">
                      Optimal Success
                    </h3>
                    <p className="text-muted-foreground text-sm">
                      Achieve your goals with the perfect model
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      {/* <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              Client Success Stories
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Real results from clients who chose the right engagement model
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-background/50 border-white/10">
                <CardContent className="p-8">
                  <div className="flex gap-1 mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                    ))}
                  </div>
                  
                  <p className="text-muted-foreground mb-6 leading-relaxed italic">
                    "{testimonial.quote}"
                  </p>
                  
                  <div className="border-t border-white/10 pt-6">
                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
                    <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section> */}

      {/* CTA Section */}
      <section className="py-16 bg-background">
        <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 mb-6 text-white">
              Ready to Find Your Perfect Model?
            </h2>
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              Let our experts help you choose the engagement model that best
              fits your project needs and goals.
            </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"
                onClick={() => navigateTo("/start-a-project")}
              >
                Start Your Consultation
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white/20 text-white hover:bg-white/10"
              >
                Compare Models
              </Button>
            </div>
          </div>
        </div>
      </section>

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