"use client";

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

// --- 1. DATA ---
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",
    ],
    icon: Zap,
    color: "blue",
    featured: false,
  },
  {
    title: "Alocação de Sprint",
    value: "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",
      "Prioridade em Critical Bugs",
    ],
    icon: Briefcase,
    color: "green",
    featured: true,
  },
  {
    title: "Engenheiro Dedicado",
    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",
      "Consultoria Estratégica",
    ],
    icon: ShieldCheck,
    color: "purple",
    featured: false,
  },
  {
    title: "Squad por Projeto",
    value: "Escopo Fechado",
    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",
      "Garantia Pós-Entrega",
    ],
    icon: HardHat,
    color: "orange",
    featured: false,
  },
];

// --- 2. COMPONENTS ---

export function WorkModalities() {
  return (
    <section
      id="modalities"
      className="py-32 px-6 relative"
    >
      {/* Background Decor handled globally now, avoiding overflow-hidden here allows bleed */}

      <div className="max-w-7xl mx-auto relative z-10">

        {/* Header Profissional */}
        <div className="mb-24 text-center md:text-left">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-950/30 border border-blue-500/20 text-blue-400 font-mono text-xs tracking-wider mb-6"
          >
            <Terminal className="w-3 h-3" />
            <span>CONTRACT_PROTOCOLS.sys</span>
          </motion.div>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl md:text-6xl font-black text-white tracking-tighter"
          >
            Flexibilidade <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-cyan-400">Contratual</span>
          </motion.h2>
          <p className="mt-6 text-lg text-slate-400 max-w-2xl leading-relaxed font-light border-l-2 border-slate-800 pl-6">
            Modelos de engajamento adaptáveis para diferentes estágios de maturidade tecnológica e orçamentária.
          </p>
        </div>

        {/* Comparação de Mercado (Anchoring Effect) */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-24">
          <MarketCard
            title="Agências Tradicionais"
            price="Alto Overhead"
            icon={Building2}
            color="text-red-500"
            delay={0}
            best={false}
          />
          <MarketCard
            title="Consultorias Big Tech"
            price="Custo Inflacionado"
            icon={Users}
            color="text-orange-500"
            delay={0.1}
            best={false}
          />
          <MarketCard
            title="Freelancers Generalistas"
            price="Risco Técnico"
            icon={User}
            color="text-yellow-500"
            delay={0.2}
            best={false}
          />
          <MarketCard
            title="Engenheiro Especialista"
            price="High ROI"
            icon={Star}
            color="text-emerald-400"
            best={true}
            delay={0.3}
          />
        </div>

        {/* Grid de Modalidades */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {WorkModalitiesData.map((modality, index) => (
            <ModalityCard key={modality.title} modality={modality} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

function MarketCard({ title, price, icon: Icon, color, best, delay }: any) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay }}
      className={`p-6 rounded-2xl border backdrop-blur-sm transition-all duration-300 ${best
          ? "bg-emerald-500/5 border-emerald-500/20 shadow-[0_0_20px_rgba(16,185,129,0.1)]"
          : "bg-zinc-900/40 border-white/5 opacity-70 hover:opacity-100"
        }`}
    >
      <div className="flex items-center gap-3 mb-3">
        <Icon className={`w-4 h-4 ${color}`} />
        <h4 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
          {title}
        </h4>
      </div>
      <p className={`text-sm font-bold ${best ? "text-emerald-400" : "text-slate-500"}`}>
        {price}
      </p>
    </motion.div>
  );
}

function ModalityCard({ modality, index }: { modality: any; index: number }) {
  const Icon = modality.icon;
  const isFeatured = modality.featured;

  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      className={`group relative flex flex-col p-8 rounded-3xl border transition-all duration-500 overflow-hidden ${isFeatured
          ? "bg-zinc-900/60 border-blue-500/30 shadow-2xl shadow-blue-900/10"
          : "bg-zinc-900/40 border-white/5 hover:border-white/10"
        }`}
    >
      {/* Hover Gradient */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

      {/* Badge */}
      {modality.badge && (
        <div className="absolute top-6 right-6">
          <span className={`px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase border ${isFeatured
              ? "bg-blue-500/10 border-blue-500/20 text-blue-300"
              : "bg-slate-800/50 border-slate-700 text-slate-400"
            }`}>
            {modality.badge}
          </span>
        </div>
      )}

      {/* Header */}
      <div className="relative z-10 mb-8">
        <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110 ${isFeatured ? "bg-blue-500/10 text-blue-400" : "bg-slate-800/50 text-slate-400"
          }`}>
          <Icon className="w-6 h-6" />
        </div>

        <h3 className="text-2xl font-bold text-white mb-2 group-hover:text-blue-200 transition-colors">
          {modality.title}
        </h3>
        <p className="font-mono text-sm text-slate-500">
          {modality.value}
        </p>
      </div>

      {/* Content */}
      <div className="relative z-10 flex-1">
        <p className="text-slate-400 text-sm leading-relaxed mb-8">
          {modality.description}
        </p>

        <ul className="space-y-3 mb-8">
          {modality.benefits.map((benefit: string, i: number) => (
            <li key={i} className="flex items-start gap-3 text-xs text-slate-300">
              <CheckCircle2 className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isFeatured ? "text-blue-400" : "text-slate-500"}`} />
              <span>{benefit}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Footer */}
      <div className="relative z-10 pt-6 border-t border-white/5 mt-auto">
        <p className="text-[10px] uppercase tracking-wider text-slate-500">
          <span className="text-slate-600 font-bold mb-1 block">Ideal Para:</span>
          {modality.idealFor}
        </p>
      </div>
    </motion.div>
  );
}