"use client";

import { Section } from "./Section";

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, performance e decisões rápidas com rastreabilidade.",
    benefits: [
      "Diagnóstico sênior imediato",
      "Sem compromisso de longo prazo",
      "Documentação de alterações",
    ],
  },
  {
    title: "Alocação de sprint",
    value: "Eficiência financeira",
    badge: "Mais escolhido",
    idealFor:
      "Times que precisam de entrega contínua com previsibilidade de orçamento e prioridade técnica.",
    description:
      "Pacotes de horas pré-pagas com redução de custo unitário e espaço reservado na agenda para evolução constante.",
    benefits: [
      "Taxa horária reduzida",
      "Garantia de disponibilidade",
      "Prioridade em bugs críticos",
    ],
  },
  {
    title: "Engenheiro dedicado",
    value: "A partir de R$ 2.800/mês",
    badge: "Estratégico",
    idealFor:
      "Empresas que precisam de liderança técnica contínua, coordenação de backlog e direção arquitetural.",
    description:
      "Parceria recorrente para sustentação, evolução de sistema, revisão de dívida técnica e tomada de decisão.",
    benefits: [
      "SLA prioritário",
      "Gestão de débito técnico",
      "Consultoria estratégica",
    ],
  },
  {
    title: "Squad por projeto",
    value: "Escopo fechado",
    badge: "Controle total",
    idealFor:
      "Produtos novos, replatforming ou migrações com orçamento definido por entregáveis e marcos claros.",
    description:
      "Execução orientada a milestones com redução de risco através de definição objetiva de escopo e critérios de done.",
    benefits: [
      "Estimativa de riscos inclusa",
      "Cronograma de entregas",
      "Garantia pós-entrega",
    ],
  },
];

export function WorkModalities() {
  return (
    <Section
      id="modalities"
      eyebrow="CONTRACT_PROTOCOLS.sys"
      title="Formatos de contratação para contextos técnicos distintos"
      description="Modelos pensados para reduzir overhead, preservar velocidade de decisão e manter previsibilidade."
    >
      <div className="ds-grid-4 mb-sp-6">
        {[
          ["Agências tradicionais", "Alto overhead"],
          ["Consultorias big tech", "Custo inflacionado"],
          ["Freelancers generalistas", "Risco técnico"],
          ["Engenheiro especialista", "High ROI"],
        ].map(([label, value]) => (
          <div key={label} className="ds-panel">
            <div className="ds-kicker">{label}</div>
            <div className="mt-sp-3 font-display text-2xl font-extrabold tracking-[-0.02em]">
              {value}
            </div>
          </div>
        ))}
      </div>

      <div className="ds-grid-2">
        {WorkModalitiesData.map((modality) => (
          <article key={modality.title} className="ds-card">
            <div className="flex items-center justify-between gap-sp-4">
              <span className="ds-kicker">{modality.badge}</span>
              <span className="ds-tag">{modality.value}</span>
            </div>
            <h3 className="ds-card-title">{modality.title}</h3>
            <p className="ds-copy">{modality.description}</p>
            <div className="mt-sp-5 rounded-[var(--r-md)] bg-[rgba(10,10,10,.03)] p-sp-4 text-[11px] leading-7 text-ink-80">
              Ideal para: {modality.idealFor}
            </div>
            <ul className="ds-list">
              {modality.benefits.map((benefit) => (
                <li key={benefit}>{benefit}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </Section>
  );
}