"use client";

import { motion } from "motion/react";
import { Briefcase, Clock, DollarSign, HardHat, Lightbulb } from "lucide-react";

const WorkModalitiesData = [
  {
    title: "Desenvolvimento por Demanda",
    value: "A partir de R$ 50/hora",
    idealFor:
      "Empresas que buscam otimização rápida, startups com necessidades urgentes ou projetos que exigem intervenção especializada e focada.",
    description:
      "Soluções ágeis e focadas para desafios específicos. Ideal para otimizar recursos e obter resultados rápidos sem compromissos de longo prazo. Sua visão, minha expertise, entregas pontuais.",
    icon: Clock,
    color: "blue",
  },
  {
    title: "Retainer Mensal",
    value: "Sob consulta (pacotes personalizados)",
    idealFor:
      "Negócios que valorizam estabilidade, crescimento planejado e acesso contínuo a um especialista dedicado para impulsionar sua inovação.",
    description:
      "Parceria estratégica para evolução contínua e suporte prioritário. Garanta acesso exclusivo à minha expertise para manutenção, novas funcionalidades e consultoria estratégica, com um compromisso de longo prazo que otimiza seu investimento.",
    icon: Briefcase,
    color: "green",
  },
  {
    title: "Consultoria Especializada",
    value: "Sob consulta (projetos de alto impacto)",
    idealFor:
      "Líderes de tecnologia e empresas visionárias que enfrentam gargalos técnicos ou buscam validação e aprimoramento de suas estratégias de desenvolvimento.",
    description:
      "Direcionamento estratégico e técnico para desafios complexos. Minha experiência em arquitetura de sistemas, IoT e otimização de performance é o diferencial para transformar suas ideias em soluções robustas e escaláveis. Ideal para quem busca excelência e inovação.",
    icon: Lightbulb,
    color: "purple",
  },
  {
    title: "Desenvolvimento Completo",
    value: "A partir de R$ 5.000 (investimento inicial)",
    idealFor:
      "Empreendedores e empresas que precisam de um parceiro para construir soluções digitais do zero, com a garantia de um produto de alta qualidade e impacto.",
    description:
      "Da concepção à entrega, seu projeto ganha vida com uma solução completa e personalizada. Garanto um processo transparente, com foco em performance, segurança e escalabilidade, para que você tenha um produto final que realmente se destaque no mercado.",
    icon: HardHat,
    color: "orange",
  },
  {
    title: "Projetos Fechados",
    value: "A partir de R$ 5.000 (soluções sob medida)",
    idealFor:
      "Clientes com necessidades claras e orçamentos específicos, que buscam uma entrega eficiente e sem surpresas para projetos de médio porte.",
    description:
      "Soluções com escopo e prazo definidos para resultados previsíveis. Ideal para quem busca agilidade e clareza no investimento, com a certeza de uma entrega que atende exatamente às suas expectativas e impulsiona seus objetivos.",
    icon: DollarSign,
    color: "red",
  },
];

export function WorkModalities() {
  return (
    <section className="py-16 px-4">
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        viewport={{ once: true }}
        className="text-center mb-12"
      >
        <h2 className="text-4xl md:text-5xl font-bold mb-4">
          Minhas Modalidades de Trabalho
        </h2>
        <p className="text-xl text-gray-300 max-w-2xl mx-auto">
          Escolha a opção que melhor se encaixa nas suas necessidades.
        </p>
      </motion.div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto justify-center">
        {WorkModalitiesData.map((modality, index) => (
          <motion.div
            key={modality.title}
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            viewport={{ once: true }}
            className={`bg-white/5 p-6 rounded-lg shadow-lg border border-white/10 ${
              modality.color === "blue" ? "hover:border-blue-500" : ""
            } ${modality.color === "green" ? "hover:border-green-500" : ""} ${
              modality.color === "purple" ? "hover:border-purple-500" : ""
            } ${modality.color === "orange" ? "hover:border-orange-500" : ""} ${
              modality.color === "red" ? "hover:border-red-500" : ""
            } transition-all duration-300 cursor-pointer`}
          >
            <div
              className={`p-3 rounded-full ${
                modality.color === "blue" ? "bg-blue-500/20" : ""
              } ${modality.color === "green" ? "bg-green-500/20" : ""} ${
                modality.color === "purple" ? "bg-purple-500/20" : ""
              } ${modality.color === "orange" ? "bg-orange-500/20" : ""} ${
                modality.color === "red" ? "bg-red-500/20" : ""
              } inline-block mb-4`}
            >
              <modality.icon
                className={`w-8 h-8 ${
                  modality.color === "blue" ? "text-blue-400" : ""
                } ${modality.color === "green" ? "text-green-400" : ""} ${
                  modality.color === "purple" ? "text-purple-400" : ""
                } ${modality.color === "orange" ? "text-orange-400" : ""} ${
                  modality.color === "red" ? "text-red-400" : ""
                }`}
              />
            </div>
            <h3 className="text-2xl font-semibold mb-2">{modality.title}</h3>
            <p className="text-lg font-medium text-gray-200 mb-2">
              {modality.value}
            </p>
            <p className="text-gray-400 mb-4">{modality.description}</p>
            <p className="text-sm text-gray-500">
              <span className="font-semibold">Ideal para:</span>{" "}
              {modality.idealFor}
            </p>
          </motion.div>
        ))}
      </div>
    </section>
  );
}