import Link from "next/link";
import ServiceIcon from "./ServiceIcon";
import TiltCard from "@/components/motion/TiltCard";
import type { Service } from "@/lib/content/services";

export default function ServiceCard({ service }: { service: Service }) {
  return (
    <TiltCard className="h-full">
    <Link
      href={`/services/${service.slug}`}
      className="notch-card group flex h-full flex-col rounded-xl border border-black/10 bg-white p-7 transition-all duration-500 hover:-translate-y-1.5 hover:border-transparent"
      style={{ boxShadow: "0 1px 2px rgba(11,27,51,0.04)" }}
    >
      <ServiceIcon name={service.icon} className="mb-5 h-[46px] w-[46px] text-azure-deep" />
      <h3 className="text-[1.3rem] font-semibold text-lhi">{service.name}</h3>
      <p className="mt-2.5 text-[0.97rem] leading-relaxed text-lmid">{service.summary}</p>
      <ul className="mt-4 flex flex-1 flex-col gap-2 border-t border-dashed border-black/10 pt-4">
        {service.capabilities.map((c) => (
          <li key={c} className="flex items-baseline gap-2.5 text-[0.88rem] text-lmid">
            <span className="text-[0.72rem] text-azure" aria-hidden>
              ▸
            </span>
            {c}
          </li>
        ))}
      </ul>
      <p className="mt-5 font-[family-name:var(--font-mono)] text-[0.72rem] uppercase tracking-[0.14em] text-llo">
        {service.meta}
      </p>
      <span className="mt-4 inline-flex items-center gap-2 text-[0.9rem] font-semibold text-azure-deep">
        Explore practice{" "}
        <span className="transition-transform duration-200 group-hover:translate-x-1" aria-hidden>
          →
        </span>
      </span>
    </Link>
    </TiltCard>
  );
}