// components/ServiceCard.tsx
import Link from "next/link";
import type { Service } from "@/lib/services";

export default function ServiceCard({ svc }: { svc: Service }) {
  return (
    <article className="rounded-lg border bg-white/50 dark:bg-neutral-900/50 p-5 shadow-sm hover:shadow transition">
      <h3 className="text-lg font-semibold tracking-tight">
        <Link href={`/services/${svc.slug}`} className="hover:underline">
          {svc.title}
        </Link>
      </h3>
      <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-300">{svc.outcome}</p>

      <ul className="mt-3 list-disc pl-5 text-sm text-neutral-700 dark:text-neutral-200 space-y-1">
        {svc.deliverables.slice(0, 4).map((d, i) => (
          <li key={i}>{d}</li>
        ))}
      </ul>

      <div className="mt-4 flex items-center justify-between">
        <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{svc.price}</span>
        <div className="flex gap-2">
          <Link
            href={`/services/${svc.slug}`}
            className="inline-flex items-center rounded-md border px-3 py-1.5 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800"
          >
            See details
          </Link>
          <Link
            href={`/contact?topic=${encodeURIComponent(svc.slug)}`}
            className="inline-flex items-center rounded-md bg-blue-600 text-white px-3 py-1.5 text-sm hover:opacity-90"
          >
            Start now
          </Link>
        </div>
      </div>
    </article>
  );
}