import Link from "next/link";
import type { PricingTier } from "@/lib/store";

export default function PricingCard({ tier }: { tier: PricingTier }) {
  return (
    <article
      className={`flex flex-col rounded-lg bg-white p-8 shadow-sm ${
        tier.empfohlen ? "border-t-8 border-primary shadow-lg" : "border border-gray-200"
      }`}
    >
      <h3 className="font-display text-2xl tracking-wide text-secondary">{tier.bezeichnung}</h3>
      <p className="mt-2 text-sm text-gray-700">{tier.beschreibung}</p>

      <div className="mt-6 space-y-2">
        {tier.zeilen.map((z) => (
          <div key={z.periode} className="flex items-baseline justify-between gap-4">
            <span className="text-sm text-gray-700">{z.periode}</span>
            <span className="font-display text-3xl text-primary">CHF {z.betragChf.toFixed(2)}</span>
          </div>
        ))}
      </div>

      <ul className="mt-6 flex-1 space-y-2 text-sm text-gray-700">
        {tier.features.map((f) => (
          <li key={f} className="flex items-start gap-2">
            <span className="mt-0.5 text-accent">✓</span>
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <Link
        href="/kontakt#kontakt-formular"
        className="mt-8 block rounded bg-primary px-6 py-3 text-center font-semibold text-cream transition-colors duration-fast hover:bg-primary-light"
      >
        {tier.cta}
      </Link>
    </article>
  );
}