"use client";

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

const WorkModalitiesData = [
  {
    title: "Consultoria por Hora",
    value: "R$ 35 - 70/hora",
    badge: "RECOMENDADO",
    idealFor:
      "Empresas que buscam flexibilidade máxima, startups testando soluções ou projetos que exigem expertise especializada sem compromissos longos.",
    description:
      "Transparência total: você paga apenas pelas horas efetivamente trabalhadas. Sem surpresas, com estimativas claras antes de iniciar. Ideal para testar soluções, resolver problemas específicos ou ter acesso a expertise sênior sem o custo de consultorias tradicionais (R$ 100-200/h).",
    benefits: [
      "✓ Transparência total - pague apenas pelo que usar",
      "✓ Sem surpresas - estimativas claras antes de iniciar",
      "✓ Flexibilidade - ajuste conforme sua necessidade evolui",
      "✓ Melhor custo-benefício - 50% menos que consultorias tradicionais",
      "✓ Experiência comprovada - 3+ anos + Eng. Computação",
    ],
    icon: Lightbulb,
    color: "blue",
    featured: true,
  },
  {
    title: "Pacotes de Horas",
    value: "Descontos até 21%",
    idealFor:
      "Clientes que já testaram o serviço e querem economizar com comprometimento antecipado, garantindo disponibilidade e preços favoráveis.",
    description:
      "Invista antecipadamente e economize significativamente: 10h (R$ 65/h), 20h (R$ 60/h) ou 40h+ (R$ 55/h). Garanta prioridade na agenda e preços fixos por 6 meses, mesmo se o mercado subir.",
    benefits: [
      "✓ 10 horas: R$ 65/h (economia de 7%)",
      "✓ 20 horas: R$ 60/h (economia de 14%)",
      "✓ 40+ horas: R$ 55/h (economia de 21%)",
      "✓ Preço fixo por 6 meses",
      "✓ Prioridade na agenda",
    ],
    icon: Briefcase,
    color: "green",
  },
  {
    title: "Retainer Mensal",
    value: "A partir de R$ 2.800/mês",
    idealFor:
      "Negócios que valorizam estabilidade, crescimento planejado e acesso prioritário a um especialista dedicado para impulsionar sua inovação contínua.",
    description:
      "Parceria estratégica com acesso prioritário e horas incluídas. Ideal para empresas que precisam de suporte contínuo, manutenção preventiva e consultoria estratégica regular. Transforme sua empresa em parceiro VIP.",
    benefits: [
      "✓ Acesso prioritário e exclusivo",
      "✓ Horas incluídas mensalmente",
      "✓ Suporte preventivo e consultoria estratégica",
      "✓ Relacionamento de longo prazo",
      "✓ Previsibilidade financeira",
    ],
    icon: Clock,
    color: "purple",
  },
  {
    title: "Desenvolvimento Sob Demanda",
    value: "Estimativa em horas",
    idealFor:
      "Empreendedores e empresas com projetos específicos que precisam de estimativas transparentes e controle total sobre investimento e escopo.",
    description:
      "Projetos customizados com estimativas claras baseadas em horas. Da concepção à entrega, seu projeto ganha vida com transparência total. Pague apenas pelo desenvolvimento necessário, sem valores fixos surpresas.",
    benefits: [
      "✓ Estimativas transparentes em horas",
      "✓ Controle total sobre investimento",
      "✓ Sem valores fixos surpresas",
      "✓ Escopo ajustável conforme evolução",
      "✓ Foco em performance e escalabilidade",
    ],
    icon: HardHat,
    color: "orange",
  },
];

export function WorkModalities() {
  return (
    <section className="py-20 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"
      >
        <div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
          <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
          <span className="text-sm font-medium text-cyan-300">
            Flexibilidade Total
          </span>
        </div>
        <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
          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>

      {/* Seção de Comparação de Mercado Refinada */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        viewport={{ once: true }}
        className="relative overflow-hidden bg-gradient-to-br from-gray-900/80 via-blue-900/30 to-purple-900/40 rounded-2xl p-8 mb-12 max-w-5xl mx-auto border border-blue-500/30 shadow-2xl"
      >
        {/* Background Pattern */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.1),transparent_50%)]"></div>

        {/* Header */}
        <div className="relative text-center mb-8">
          <div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-4">
            <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
            <span className="text-sm font-medium text-blue-300">
              Análise de Mercado 2025
            </span>
          </div>
          <h3 className="text-3xl font-bold mb-2 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
            Compare com o Mercado
          </h3>
          <p className="text-gray-300 text-lg">
            Veja como nossa proposta se destaca da concorrência
          </p>
        </div>

        {/* Comparison Grid */}
        <div className="relative grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {/* Agências Tradicionais */}
          <div className="group relative bg-red-500/5 border border-red-500/20 rounded-xl p-6 hover:border-red-400/40 transition-all duration-300">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
                <Building2 className="w-6 h-6 text-red-500" />
              </div>
              <div>
                <h4 className="font-semibold text-red-300">
                  Agências Tradicionais
                </h4>
                <p className="text-xs text-red-400/70">Projetos fechados</p>
              </div>
            </div>
            <div className="space-y-2">
              <p className="text-2xl font-bold text-red-400">R$ 15k - 50k</p>
              <div className="space-y-1 text-xs text-gray-400">
                <p>• Escopo fixo</p>
                <p>• Sem flexibilidade</p>
                <p>• Equipe grande</p>
                <p>• Processo lento</p>
              </div>
            </div>
          </div>

          {/* Consultorias Corporativas */}
          <div className="group relative bg-orange-500/5 border border-orange-500/20 rounded-xl p-6 hover:border-orange-400/40 transition-all duration-300">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-orange-500/20 rounded-lg flex items-center justify-center">
                <Users className="w-6 h-6 text-orange-500" />
              </div>
              <div>
                <h4 className="font-semibold text-orange-300">
                  Consultorias Corporativas
                </h4>
                <p className="text-xs text-orange-400/70">Por hora</p>
              </div>
            </div>
            <div className="space-y-2">
              <p className="text-2xl font-bold text-orange-400">
                R$ 150 - 300/h
              </p>
              <div className="space-y-1 text-xs text-gray-400">
                <p>• Apenas consultoria</p>
                <p>• Sem desenvolvimento</p>
                <p>• Muito caro</p>
                <p>• Foco corporativo</p>
              </div>
            </div>
          </div>

          {/* Freelancers Generalistas */}
          <div className="group relative bg-yellow-500/5 border border-yellow-500/20 rounded-xl p-6 hover:border-yellow-400/40 transition-all duration-300">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-yellow-500/20 rounded-lg flex items-center justify-center">
                <User className="w-6 h-6 text-yellow-500" />
              </div>
              <div>
                <h4 className="font-semibold text-yellow-300">
                  Freelancers Generalistas
                </h4>
                <p className="text-xs text-yellow-400/70">Por hora</p>
              </div>
            </div>
            <div className="space-y-2">
              <p className="text-2xl font-bold text-yellow-400">R$ 40 - 80/h</p>
              <div className="space-y-1 text-xs text-gray-400">
                <p>• Competitivo</p>
                <p>• Sem especialização</p>
                <p>• Qualidade variável</p>
                <p>• Sem garantias</p>
              </div>
            </div>
          </div>

          {/* Comigo - Evandro */}
          <div className="group relative bg-gradient-to-br from-green-500/10 to-emerald-500/10 border-2 border-green-500/40 rounded-xl p-6 hover:border-green-400/60 transition-all duration-300 shadow-lg shadow-green-500/10">
            <div className="absolute -top-2 -right-2">
              <span className="bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg">
                RECOMENDADO
              </span>
            </div>

            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
                <Star className="w-6 h-6 text-green-400" />
              </div>
              <div>
                <h4 className="font-bold text-green-300">Comigo</h4>
                <p className="text-xs text-green-400/70">Evandro Fonseca</p>
              </div>
            </div>
            <div className="space-y-3">
              <div className="flex items-baseline gap-2">
                <p className="text-2xl font-bold text-green-400">
                  R$ 35 - 70/h
                </p>
                <span className="text-xs bg-green-500/20 text-green-300 px-2 py-1 rounded">
                  -50% vs mercado
                </span>
              </div>
              <div className="space-y-1 text-xs text-gray-300">
                <p className="flex items-center gap-2">
                  <span className="text-green-400">✓</span>
                  <span>Full-Stack + IoT + Cloud</span>
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-green-400">✓</span>
                  <span>Transparência total</span>
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-green-400">✓</span>
                  <span>Flexibilidade máxima</span>
                </p>
                <p className="flex items-center gap-2">
                  <span className="text-green-400">✓</span>
                  <span>Experiência comprovada</span>
                </p>
              </div>

              {/* Call to Action */}
              <div className="mt-4 pt-3 border-t border-green-500/20">
                <p className="text-xs text-green-300 font-medium text-center">
                  🎯 Melhor custo-benefício do mercado
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom CTA */}
        <div className="relative mt-8 text-center">
          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500/10 to-purple-500/10 px-6 py-3 rounded-full border border-blue-500/20">
            <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <span className="text-sm text-blue-300 font-medium">
              Economia média de R$ 15.000 por projeto vs agências tradicionais
            </span>
          </div>
        </div>
      </motion.div>

      <div className="grid grid-cols-1 md:grid-cols-2 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={`relative bg-white/5 p-6 rounded-lg shadow-lg border-2 ${
              modality.featured
                ? "border-blue-500/50 bg-blue-500/5"
                : "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`}
          >
            {modality.badge && (
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <span className="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-bold">
                  {modality.badge}
                </span>
              </div>
            )}

            <div className="flex items-center gap-4 mb-4">
              <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" : ""
                }`}
              >
                <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>
              <div>
                <h3 className="text-2xl font-semibold mb-1">
                  {modality.title}
                </h3>
                <p
                  className={`text-lg font-bold ${
                    modality.featured ? "text-blue-400" : "text-gray-200"
                  }`}
                >
                  {modality.value}
                </p>
              </div>
            </div>

            <p className="text-gray-400 mb-4">{modality.description}</p>

            {modality.benefits && (
              <div className="space-y-2 mb-4">
                {modality.benefits.map((benefit, idx) => (
                  <p
                    key={idx}
                    className="text-sm text-gray-300 flex items-start gap-2"
                  >
                    <span className="text-green-400 mt-0.5">✓</span>
                    <span>{benefit.replace("✓ ", "")}</span>
                  </p>
                ))}
              </div>
            )}

            <p className="text-sm text-gray-500">
              <span className="font-semibold">Ideal para:</span>{" "}
              {modality.idealFor}
            </p>
          </motion.div>
        ))}
      </div>
    </section>
  );
}