"use client";

import { useState } from "react";
import { Section } from "./Section";

interface Tier {
  id: string;
  badge: string;
  level: string;
  title: string;
  tagline: string;
  description: string;
  deliverables: string[];
  pricing: string;
  pricingNote: string;
  featured?: boolean;
  ctaLabel: string;
  ctaHref: string;
}

const TIERS: Tier[] = [
  {
    id: "discovery",
    badge: "Entrada / Baixo Risco",
    level: "01",
    title: "Auditoria & Diagnóstico Técnico",
    tagline: "Fotografia clara do problema antes de qualquer comprometimento.",
    description:
      "Análise profunda de arquitetura, performance ou segurança com entrega de um plano de ação executável. Ideal para quem precisa de direção antes de contratar execução.",
    deliverables: [
      "Relatório de gargalos e dívida técnica",
      "Mapeamento de riscos e dependências",
      "Sugestão de stack e cronograma de mitigação",
      "Plano de ação priorizado",
    ],
    pricing: "Valor Fixo",
    pricingNote: "Contrato único. Entrega em até 5 dias úteis.",
    featured: false,
    ctaLabel: "Solicitar diagnóstico",
    ctaHref: "#contact",
  },
  {
    id: "cycles",
    badge: "Mais Escolhido",
    level: "02",
    title: "Ciclos de Engenharia",
    tagline: "Capacidade produtiva garantida. Entrega a cada 2 semanas.",
    description:
      "Desenvolvimento contínuo com a previsibilidade de orçamento do escopo fechado e a agilidade de sprints. Milestones claros, sem amarras de contrato longo.",
    deliverables: [
      "Features em produção a cada ciclo",
      "Refatoração iterativa com rastreabilidade",
      "Documentação técnica atualizada",
      "Capacidade de pivotar prioridades no início de cada sprint",
    ],
    pricing: "Fixo por Ciclo",
    pricingNote: "Assinatura quinzenal ou mensal. Cancele a qualquer ciclo.",
    featured: true,
    ctaLabel: "Iniciar ciclo de engenharia",
    ctaHref: "#contact",
  },
  {
    id: "fractional",
    badge: "Premium / High-Ticket",
    level: "03",
    title: "Fractional Tech Lead",
    tagline: "Liderança técnica senior. Sem o custo de um CTO full-time.",
    description:
      "Direção arquitetural, gestão de risco e sustentação de operações críticas. Para empresas que precisam de decisões de alto impacto com responsabilidade contínua.",
    deliverables: [
      "SLA prioritário Zero-Risk",
      "Code review e liderança do time interno",
      "Decisões de infra: Cloud, VPS, CI/CD",
      "Consultoria estratégica recorrente",
    ],
    pricing: "Retainer Mensal",
    pricingNote: "Renovação mensal. Vagas limitadas.",
    featured: false,
    ctaLabel: "Agendar conversa estratégica",
    ctaHref: "#contact",
  },
];

function TierCard({ tier }: { tier: Tier }) {
  const [hovered, setHovered] = useState(false);

  return (
    <article
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onFocus={() => setHovered(true)}
      onBlur={() => setHovered(false)}
      tabIndex={0}
      style={{
        border: tier.featured
          ? "2px solid #0A0A0A"
          : "1px solid rgba(10,10,10,0.1)",
        background: tier.featured ? "#0A0A0A" : "#fff",
        padding: "var(--sp-6)",
        display: "flex",
        flexDirection: "column",
        gap: "var(--sp-4)",
        position: "relative",
        transition: "border-color 0.3s ease, box-shadow 0.3s ease",
        outline: "none",
        cursor: "default",
        boxShadow: hovered
          ? "0 8px 32px rgba(10,10,10,0.1)"
          : "0 1px 4px rgba(10,10,10,0.04)",
      }}
    >
      {/* Top row */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
        }}
      >
        <span
          style={{
            fontSize: "9px",
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            color: tier.featured ? "#E8FF00" : "rgba(10,10,10,0.4)",
          }}
        >
          {tier.badge}
        </span>
        <span
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "11px",
            color: tier.featured
              ? "rgba(255,255,255,0.15)"
              : "rgba(10,10,10,0.12)",
            fontWeight: 800,
            letterSpacing: "0.04em",
          }}
        >
          {tier.level}
        </span>
      </div>

      {/* Title */}
      <div>
        <h3
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(18px, 2.2vw, 26px)",
            lineHeight: 1.1,
            letterSpacing: "-0.02em",
            fontWeight: 800,
            color: tier.featured ? "#fff" : "#0A0A0A",
          }}
        >
          {tier.title}
        </h3>
        <p
          style={{
            marginTop: "var(--sp-2)",
            fontSize: "11px",
            color: tier.featured
              ? "rgba(232,255,0,0.85)"
              : "rgba(10,10,10,0.5)",
            lineHeight: 1.6,
          }}
        >
          {tier.tagline}
        </p>
      </div>

      {/* Description */}
      <p
        style={{
          fontSize: "12px",
          color: tier.featured
            ? "rgba(255,255,255,0.7)"
            : "rgba(10,10,10,0.65)",
          lineHeight: 1.8,
        }}
      >
        {tier.description}
      </p>

      {/* Deliverables */}
      <ul
        style={{
          paddingLeft: "var(--sp-5)",
          fontSize: "12px",
          color: tier.featured ? "rgba(255,255,255,0.6)" : "rgba(10,10,10,0.6)",
          lineHeight: 1.9,
          flexGrow: 1,
        }}
      >
        {tier.deliverables.map((d) => (
          <li key={d} style={{ listStyleType: "disc" }}>
            {d}
          </li>
        ))}
      </ul>

      {/* Pricing */}
      <div
        style={{
          borderTop: tier.featured
            ? "1px solid rgba(255,255,255,0.1)"
            : "1px solid rgba(10,10,10,0.08)",
          paddingTop: "var(--sp-4)",
        }}
      >
        <div
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(14px, 1.5vw, 18px)",
            fontWeight: 800,
            color: tier.featured ? "#E8FF00" : "#0A0A0A",
            letterSpacing: "-0.01em",
          }}
        >
          {tier.pricing}
        </div>
        <div
          style={{
            fontSize: "10px",
            color: tier.featured
              ? "rgba(255,255,255,0.3)"
              : "rgba(10,10,10,0.35)",
            marginTop: "4px",
            letterSpacing: "0.06em",
          }}
        >
          {tier.pricingNote}
        </div>
      </div>

      {/* CTA — reveals on hover/focus */}
      <a
        href={tier.ctaHref}
        style={{
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "12px 18px",
          fontSize: "10px",
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          textDecoration: "none",
          fontWeight: 700,
          background: tier.featured ? "#E8FF00" : "#0A0A0A",
          color: tier.featured ? "#0A0A0A" : "#fff",
          transition: "opacity 0.25s ease, transform 0.25s ease",
          opacity: hovered ? 1 : 0,
          transform: hovered ? "translateY(0)" : "translateY(6px)",
          pointerEvents: hovered ? "auto" : "none",
        }}
      >
        {tier.ctaLabel} →
      </a>
    </article>
  );
}

export function WorkModalities() {
  return (
    <Section
      id="modalities"
      eyebrow="CONTRACT_PROTOCOLS.sys"
      title="Engenharia sob demanda. Previsibilidade de entrega sem overhead."
      description="Três níveis de contratação desenhados como uma esteira de valor — do diagnóstico rápido à parceria estratégica de longo prazo."
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: "var(--sp-6)",
        }}
      >
        {TIERS.map((tier) => (
          <TierCard key={tier.id} tier={tier} />
        ))}
      </div>
    </Section>
  );
}