"use client"; // <--- DIRETIVA OBRIGATÓRIA NA PRIMEIRA LINHA

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

// --- 1. DATA (Definido aqui para evitar erros de serialização) ---
const WorkModalitiesData = [
  {
    title: "Consultoria por Hora",
    value: "R$ 35 - 70/hora",
    badge: "RECOMENDADO",
    idealFor: "Empresas que buscam flexibilidade máxima e expertise especializada.",
    description: "Transparência total: você paga apenas pelas horas trabalhadas. Ideal para resolver problemas específicos com expertise sênior.",
    benefits: ["Transparência total", "Estimativas claras", "Flexibilidade total", "Custo-benefício otimizado", "Engenharia de Software Sênior"],
    icon: Lightbulb,
    color: "blue",
    featured: true,
  },
  {
    title: "Pacotes de Horas",
    value: "Até 21% de Desconto",
    idealFor: "Clientes que buscam economia com comprometimento antecipado e prioridade na agenda.",
    description: "Invista antecipadamente e garanta preços fixos por 6 meses. Ideal para projetos recorrentes.",
    benefits: ["10h: R$ 65/h (7% off)", "20h: R$ 60/h (14% off)", "40h+: R$ 55/h (21% off)", "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 e acesso prioritário a um especialista dedicado.",
    description: "Parceria estratégica com suporte contínuo e manutenção preventiva. Transforme sua empresa em parceiro VIP.",
    benefits: ["Acesso prioritário exclusivo", "Horas mensais inclusas", "Suporte preventivo", "Previsibilidade financeira"],
    icon: Clock,
    color: "purple",
  },
  {
    title: "Desenvolvimento Sob Demanda",
    value: "Estimativa em Horas",
    idealFor: "Projetos específicos que precisam de controle total sobre investimento e escopo.",
    description: "Projetos customizados com estimativas claras. Pague apenas pelo desenvolvimento necessário.",
    benefits: ["Escopo ajustável", "Controle total de investimento", "Foco em performance", "Sem surpresas no valor"],
    icon: HardHat,
    color: "orange",
  },
];

// --- 2. DESIGN TOKENS ---
const COLOR_VARIANTS: Record<string, string> = {
  blue: "border-blue-500/30 bg-blue-500/5 text-blue-400 hover:border-blue-500/60 shadow-blue-500/5",
  green: "border-green-500/30 bg-green-500/5 text-green-400 hover:border-green-500/60 shadow-green-500/5",
  purple: "border-purple-500/30 bg-purple-500/5 text-purple-400 hover:border-purple-500/60 shadow-purple-500/5",
  orange: "border-orange-500/30 bg-orange-500/5 text-orange-400 hover:border-orange-500/60 shadow-orange-500/5",
};

export function WorkModalities() {
  return (
    <section id="modalities" className="py-32 px-6 bg-[#030712] relative overflow-hidden">
      <div className="max-w-7xl mx-auto relative z-10">
        
        {/* Header Profissional */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          className="text-center mb-20"
        >
          <div className="inline-flex items-center gap-2 bg-blue-500/10 px-4 py-2 rounded-full mb-6 border border-blue-500/20">
            <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <span className="text-xs font-bold text-blue-300 uppercase tracking-widest font-mono">Business_Architect</span>
          </div>
          <h2 className="text-5xl md:text-7xl font-black text-white tracking-tighter leading-none mb-6">
            Flexibilidade <span className="text-slate-700 italic">Total</span>
          </h2>
          <p className="text-slate-400 max-w-2xl mx-auto text-lg">
            Modelos de contratação adaptáveis para diferentes estágios de maturidade tecnológica.
          </p>
        </motion.div>

        {/* Comparação de Mercado (Anchoring Effect) */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
          <MarketCard title="Agências" price="R$ 15k-50k" icon={Building2} color="text-red-400" />
          <MarketCard title="Consultorias" price="R$ 150-300/h" icon={Users} color="text-orange-400" />
          <MarketCard title="Freelancers" price="R$ 40-80/h" icon={User} color="text-yellow-400" />
          <MarketCard title="Engenheiro" price="R$ 35-70/h" icon={Star} color="text-green-400" best />
        </div>

        {/* Grid de Modalidades */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {WorkModalitiesData.map((modality, index) => {
            const style = COLOR_VARIANTS[modality.color] || COLOR_VARIANTS.blue;
            const Icon = modality.icon;

            return (
              <motion.div
                key={modality.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, amount: 0.2 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className={`relative p-8 rounded-[2.5rem] border-2 backdrop-blur-xl transition-all duration-500 shadow-xl ${style}`}
              >
                {modality.badge && (
                  <span className="absolute -top-3 right-8 bg-blue-600 text-white px-4 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-lg shadow-blue-600/20">
                    {modality.badge}
                  </span>
                )}

                <div className="flex items-center gap-6 mb-8">
                  <div className="p-4 rounded-2xl bg-slate-900 border border-slate-800 group-hover:scale-110 transition-transform">
                    <Icon className="w-8 h-8" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-white tracking-tight">{modality.title}</h3>
                    <p className="text-xl font-mono font-bold opacity-80">{modality.value}</p>
                  </div>
                </div>

                <p className="text-slate-400 text-sm leading-relaxed mb-8 h-20 line-clamp-3">
                  {modality.description}
                </p>

                <div className="space-y-3 mb-8">
                  {modality.benefits.map((benefit, bIdx) => (
                    <div key={bIdx} className="flex items-center gap-3 text-slate-300 text-xs font-medium">
                      <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
                      <span>{benefit}</span>
                    </div>
                  ))}
                </div>

                <div className="pt-6 border-t border-slate-800/50 mt-auto">
                  <p className="text-[11px] text-slate-500 leading-relaxed uppercase tracking-tighter">
                    <strong className="text-slate-400">Ideal para:</strong> {modality.idealFor}
                  </p>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function MarketCard({ title, price, icon: Icon, color, best }: any) {
  return (
    <div className={`p-6 rounded-3xl border transition-all duration-500 ${best ? 'bg-green-500/10 border-green-500/30 shadow-lg shadow-green-500/5' : 'bg-slate-900/40 border-slate-800'}`}>
      <Icon className={`w-5 h-5 mb-4 ${color}`} />
      <h4 className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{title}</h4>
      <p className={`text-lg font-black mt-1 ${best ? 'text-green-400' : 'text-slate-300'}`}>{price}</p>
    </div>
  );
}