"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: "Intervenção Ad-hoc",
    value: "R$ 35 - 70/hora",
    badge: "AGILIDADE",
    idealFor:
      "Resolução de gargalos técnicos específicos e consultoria de arquitetura imediata.",
    description:
      "Engenharia sob demanda com foco em troubleshooting e otimização de performance. Rastreabilidade total via timesheet detalhado.",
    benefits: [
      "Diagnóstico Sênior Imediato",
      "Sem Compromisso de Longo Prazo",
      "Documentação de Alterações",
      "Code Review de Segurança",
      "Deploy assistido",
    ],
    icon: Lightbulb,
    color: "blue",
    featured: false,
  },
  {
    title: "Alocação de Sprint",
    value: "Até 21% de Eficiência Financeira",
    badge: "MAIS ESCOLHIDO",
    idealFor:
      "Desenvolvimento contínuo de features com previsibilidade de budget e prioridade técnica.",
    description:
      "Pacotes de horas pré-pagas que garantem disponibilidade na agenda e redução do custo unitário por hora. Ideal para scaling.",
    benefits: [
      "Taxa horária reduzida (Lock-in)",
      "Garantia de Disponibilidade",
      "Preço fixo por 180 dias",
      "Relatórios de Burndown",
      "Prioridade em Critical Bugs",
    ],
    icon: Briefcase,
    color: "green",
    featured: true,
  },
  {
    title: "Engenheiro Dedicado (Retainer)",
    value: "A partir de R$ 2.800/mês",
    badge: "VIP & ESTRATÉGICO",
    idealFor:
      "Empresas que necessitam de um 'Fractional CTO' ou Lead Engineer para governança técnica.",
    description:
      "Parceria estratégica com foco em sustentabilidade do sistema, manutenção preventiva e evolução arquitetural contínua.",
    benefits: [
      "SLA de Resposta Prioritária",
      "Gestão de Débito Técnico",
      "Planejamento de Roadmap",
      "Monitoramento de Infraestrutura",
      "Consultoria Estratégica",
    ],
    icon: Clock,
    color: "purple",
    featured: false,
  },
  {
    title: "Squad por Projeto",
    value: "Escopo Fechado / Milestone-based",
    badge: "CONTROLE TOTAL",
    idealFor:
      "Produtos novos ou migrações de sistemas onde o orçamento é rigorosamente definido pelo escopo.",
    description:
      "Desenvolvimento orientado a entregáveis (milestones). Mitigação de riscos através de definições claras de 'Done'.",
    benefits: [
      "Estimativa de Riscos Inclusa",
      "Cronograma de Entregas (Milestones)",
      "Garantia Pós-Entrega",
      "Foco em Time-to-Market",
      "Transferência de Conhecimento",
    ],
    icon: HardHat,
    color: "orange",
    featured: false,
  },
];

// --- 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-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-20">
          {/* AGÊNCIAS: Foco no Overhead */}
          <MarketCard
            title="Agências Software House"
            price="R$ 15k - 80k+"
            icon={Building2}
            color="text-red-500"
            description="Alto overhead administrativo e camadas de gestão que encarecem o setup inicial."
          />

          {/* CONSULTORIAS: Foco na Diluição de Senioridade */}
          <MarketCard
            title="Consultorias Big Tech"
            price="R$ 180 - 450/h"
            icon={Users}
            color="text-orange-500"
            description="Especialistas juniores alocados com margens de lucro agressivas sobre a hora sênior."
          />

          {/* FREELANCERS: Foco no Risco de Sustentabilidade */}
          <MarketCard
            title="Freelancers Generalistas"
            price="R$ 40 - 90/h"
            icon={User}
            color="text-yellow-500"
            description="Falta de rigor arquitetural e risco de manutenção por falta de documentação técnica."
          />

          {/* VOCÊ: O Ponto de Equilíbrio (The Sweet Spot) */}
          <MarketCard
            title="Engenheiro de Software"
            price="R$ 35 - 75/h"
            icon={Star}
            color="text-emerald-400"
            best={true}
            description="Acesso direto ao especialista. Engenharia de nível sênior com custo operacional zero de intermediação."
          />
        </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>
  );
}