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 { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import { EngagementModelsVector } from "@/components/vectors";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";

export const EngagementModels = () => {
  const navigate = useNavigate();
  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 AI‑driven flexible engagement models designed to fit your project needs, budget, and timeline. From fixed‑price projects to dedicated teams, find the perfect collaboration approach for your web and mobile development.",
      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 AI‑driven engagement approaches designed to meet your specific project needs and goals in web and mobile development.
            </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={() => navigate("/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 AI‑driven engagement models to find the perfect fit for your web and mobile development 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 AI‑driven experts will consult with you to analyze your project’s specific needs, objectives, budget, and desired level of control, then recommend the most suitable engagement model for optimal web and mobile development 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 AI‑driven experts help you choose the engagement model that best fits your web and mobile development 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={() => navigate("/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>
  );
};