import Link from "next/link";
import CoverArt from "./CoverArt";
import TiltCard from "@/components/motion/TiltCard";
import type { CaseStudy } from "@/lib/content/work";

export default function WorkCard({ cs }: { cs: CaseStudy }) {
  return (
    <TiltCard className="h-full">
    <Link
      href={`/work/${cs.slug}`}
      className="group relative flex h-full flex-col overflow-hidden rounded-xl border border-white/10 bg-ink-2 transition-all duration-500 hover:-translate-y-1.5 hover:border-ice/40 hover:shadow-[0_30px_60px_-28px_rgba(0,0,0,0.7)]"
    >
      <div className="relative aspect-[16/8.5] overflow-hidden">
        <CoverArt
          cs={cs}
          caption={cs.premise.split("—")[0].trim().slice(0, 42).toLowerCase()}
          className="h-full w-full transition-transform duration-700 ease-out group-hover:scale-[1.045]"
        />
        <span className="absolute right-4 top-4 font-[family-name:var(--font-mono)] text-xs tracking-[0.12em] text-thi/75">
          {cs.index}
        </span>
      </div>
      <div className="flex flex-1 flex-col p-6">
        <div className="flex flex-wrap gap-2">
          <span className="rounded-full border border-ice/30 px-2.5 py-0.5 font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.1em] text-ice">
            {cs.sector}
          </span>
          <span className="rounded-full border border-ice/30 px-2.5 py-0.5 font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.1em] text-ice">
            {cs.categoryLabel}
          </span>
        </div>
        <h3 className="mt-3.5 text-[1.35rem] font-semibold text-thi">{cs.title}</h3>
        <p className="mt-2.5 flex-1 text-[0.95rem] leading-relaxed text-tmid">{cs.premise}</p>
        <div className="mt-5 flex gap-7 border-t border-white/10 pt-5">
          {cs.outcomes.slice(0, 2).map((o) => (
            <div key={o.label}>
              <div className="font-[family-name:var(--font-mono)] text-xl font-medium leading-tight text-azure-bright tnum">
                {o.value}
              </div>
              <div className="mt-1 text-[0.78rem] leading-snug text-tlo">{o.label}</div>
            </div>
          ))}
        </div>
        <span className="mt-5 inline-flex items-center gap-2 text-[0.9rem] font-semibold text-ice">
          View case study{" "}
          <span className="transition-transform duration-200 group-hover:translate-x-1" aria-hidden>
            →
          </span>
        </span>
      </div>
    </Link>
    </TiltCard>
  );
}