portifolio-evandrodevbr/app/components/WorkModalities.tsx

import Link from "next/link";
import type { ServiceLink } from "@/lib/site-navigation";
import { DrawLine } from "./animations/DrawLine";
import { primaryButton, secondaryButtonLight } from "./button-styles";
import "./conversion.css";
import { Reveal } from "./Reveal";
import { Section } from "./Section";

interface Tier {
  id: string;
  badge: string;
  title: string;
  tagline: string;
  description: string;
  deliverables: string[];
  /** Primeiro passo concreto, sem prazo nem preço. */
  firstStep: string;
  featured?: boolean;
  ctaLabel: string;
  ctaHref: string;
}

const TIERS: Tier[] = [
  {
    id: "build",
    badge: "Do zero à produção",
    title: "Um sistema para a sua operação",
    tagline: "Quando as ferramentas prontas já não atendem.",
    description:
      "Transforme regras de negócio, planilhas e processos dispersos em um sistema próprio, com os fluxos e as integrações que a empresa precisa.",
    deliverables: [
      "Definição de escopo e arquitetura",
      "Interface, backend e banco de dados",
      "Integrações e permissões de acesso",
      "Validação, publicação e documentação",
    ],
    firstStep:
      "Primeira conversa para entender o problema. Depois, escopo e proposta por escrito.",
    featured: true,
    ctaLabel: "Conversar sobre meu sistema",
    ctaHref: "/#contact",
  },
  {
    id: "discovery",
    badge: "Antes de investir",
    title: "Diagnóstico de um sistema existente",
    tagline: "Entenda o que aproveitar e o que precisa mudar.",
    description:
      "Seu sistema ficou lento, frágil ou difícil de manter? Avalio o código e a operação para orientar a próxima decisão, inclusive em projetos iniciados com IA.",
    deliverables: [
      "Levantamento de riscos e dependências",
      "Revisão de acesso aos dados",
      "Análise dos gargalos da aplicação",
      "Plano de correção por prioridade",
    ],
    firstStep:
      "Você me mostra o que já existe. Depois, recebe o levantamento de riscos e o plano de correção por prioridade.",
    ctaLabel: "Avaliar meu projeto",
    ctaHref: "/#contact",
  },
  {
    id: "evolution",
    badge: "Continuidade",
    title: "Integração e evolução",
    tagline: "Faça o que já existe trabalhar melhor.",
    description:
      "Conecte ferramentas, reduza tarefas manuais e acrescente funcionalidades ao sistema atual, com atenção às dependências e ao impacto de cada mudança.",
    deliverables: [
      "Integração entre sistemas e equipamentos",
      "Novos fluxos e automações",
      "Testes das partes afetadas",
      "Planejamento de manutenção e operação",
    ],
    firstStep:
      "Primeira conversa sobre o sistema e as ferramentas que você já usa. Depois, escopo e proposta por escrito.",
    ctaLabel: "Planejar a próxima etapa",
    ctaHref: "/#contact",
  },
];

const PROCESS = [
  {
    title: "Entender a operação",
    description:
      "Quem usa, qual problema precisa resolver e quais dados e ferramentas já existem.",
  },
  {
    title: "Definir a entrega",
    description:
      "Escopo, arquitetura, riscos, investimento e critérios de aceite antes de desenvolver.",
  },
  {
    title: "Construir e validar",
    description:
      "Entregas por etapa, demonstrações e testes dos fluxos, das permissões e das integrações.",
  },
  {
    title: "Publicar e dar continuidade",
    description:
      "Implantação, documentação e condições de manutenção combinadas para a operação.",
  },
];

function TierCard({ tier }: Readonly<{ tier: Tier }>) {
  return (
    <article
      className={`ds-card cv-press cv-lift relative flex h-full min-w-0 flex-col overflow-hidden max-md:w-full max-md:max-w-none max-md:px-sp-5 max-md:py-sp-5 ${
        tier.featured ? "border-[var(--slash)] shadow-sm" : ""
      }`}
      style={{
        borderWidth: tier.featured ? "2px" : "1px",
      }}
    >
      <div className="flex min-w-0 items-start justify-between gap-sp-4">
        <span className="ds-kicker">{tier.badge}</span>
      </div>

      <DrawLine delay={0.04} />

      <div className="mt-sp-4 min-w-0">
        <h3 className="ds-card-title !mt-0 text-balance !text-[clamp(19px,5vw,28px)] !leading-[1.02] !tracking-[-0.035em] [overflow-wrap:break-word] [word-break:normal]">
          {tier.title}
        </h3>
        <p className="mt-sp-2 text-[15px] md:text-[13px] leading-[1.7] text-[var(--meta)]">
          {tier.tagline}
        </p>
      </div>

      <p
        className="ds-copy !mt-sp-4 !text-[15px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[13px]"
        data-reel="right"
      >
        {tier.description}
      </p>

      <ul
        className="ds-list !mt-sp-5 !pl-[1.15rem] !text-[15px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[12px]"
        data-reel-stagger="fade"
      >
        {tier.deliverables.map((deliverable) => (
          <li key={deliverable} className="pl-sp-1">
            {deliverable}
          </li>
        ))}
      </ul>

      <div className="mt-sp-6 space-y-sp-2 border-t border-[var(--border)] pt-sp-5">
        <div className="font-display text-[clamp(17px,4.6vw,18px)] font-extrabold leading-none tracking-tight">
          Primeiro passo
        </div>
        <div className="font-display text-[15px] md:text-[13px] leading-[1.7] text-[var(--ink-80)]">
          {tier.firstStep}
        </div>
      </div>

      <Link
        href={tier.ctaHref}
        className={`mt-sp-6 w-full ${
          tier.featured ? primaryButton : secondaryButtonLight
        }`}
      >
        {tier.ctaLabel}
      </Link>
    </article>
  );
}

/** A home mostra só os três serviços principais, nesta ordem: sites, sistemas web e integrações. O hub tem os demais. */
const HOME_SERVICE_SLUGS = [
  "criacao-de-sites",
  "engenharia-de-software",
  "integracao-hardware-software-iot",
];

export function WorkModalities({
  serviceLinks = [],
}: {
  /** Os serviços do hub; app/page.tsx os lê de lib/site-content.ts. */
  serviceLinks?: ServiceLink[];
}) {
  const mainServices = HOME_SERVICE_SLUGS.flatMap((slug) => {
    const service = serviceLinks.find(({ href }) => href.endsWith(`/${slug}`));
    return service ? [service] : [];
  });

  return (
    <Section
      id="modalities"
      eyebrow="Soluções"
      title="Software feito a partir do seu negócio."
      description="Para empresas que precisam de um sistema próprio, de ferramentas conectadas ou de uma avaliação técnica antes de dar o próximo passo."
      disableChildrenAnimation
    >
      <div className="mb-sp-8 ds-card bg-[rgba(10,10,10,0.02)]">
        <div className="flex flex-col gap-sp-4 lg:flex-row lg:items-end lg:justify-between">
          <div className="max-w-[760px]">
            <div className="ds-kicker">Reconhece algum destes cenários?</div>
            <h3 className="ds-card-title !mt-sp-3" data-reel="left">
              Planilhas demais. Sistemas isolados. Trabalho repetido.
            </h3>
            <p className="ds-copy !mt-sp-3 max-w-[62ch]" data-reel="right">
              A operação cresceu, mas as ferramentas não acompanharam. Ou a
              ideia precisa sair do protótipo para atender clientes. O projeto
              começa pelo problema, sem exigir que você já saiba qual tecnologia
              usar.
            </p>
          </div>
          <Link href="/servicos" className={`shrink-0 ${secondaryButtonLight}`}>
            Ver todos os serviços
          </Link>
        </div>

        <div
          className="mt-sp-6 grid gap-sp-3 md:grid-cols-3"
          data-reel-stagger="left"
        >
          {mainServices.map((service) => (
            <Link
              key={service.href}
              href={service.href}
              className="min-w-0 rounded-[8px] border border-[var(--border)] bg-white/70 px-sp-4 py-sp-4 transition-colors duration-200 hover:border-[var(--slash)] hover:bg-white"
            >
              <div className="font-display text-base font-semibold leading-snug text-[var(--ink)]">
                {service.label}
              </div>
              <div className="mt-sp-2 font-display text-[15px] md:text-sm leading-6 text-[var(--ink-80)]">
                {service.description}
              </div>
            </Link>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 gap-sp-4 md:grid-cols-2 md:gap-sp-5 lg:grid-cols-3 lg:gap-sp-6">
        {TIERS.map((tier, index) => (
          <Reveal
            key={tier.id}
            y={20}
            duration={0.75}
            delay={0.08 * (index + 1)}
            className="min-w-0"
          >
            <TierCard tier={tier} />
          </Reveal>
        ))}
      </div>

      <div id="process" className="mt-sp-12 scroll-mt-24">
        <h3 className="ds-card-title">Como o projeto acontece</h3>
        <p className="ds-copy max-w-[65ch]">
          Você acompanha as decisões e valida cada etapa. Prazo e investimento
          dependem do escopo, das integrações e dos riscos identificados.
        </p>
        <ol className="mt-sp-6 grid gap-sp-6 sm:grid-cols-2 xl:grid-cols-4">
          {PROCESS.map((step, index) => (
            <li
              key={step.title}
              className="border-t border-[var(--border)] pt-sp-4"
            >
              <span className="ds-kicker">
                {String(index + 1).padStart(2, "0")}
              </span>
              <h4 className="mt-sp-3 text-base font-semibold">{step.title}</h4>
              <p className="ds-copy">{step.description}</p>
            </li>
          ))}
        </ol>
      </div>
    </Section>
  );
}