import Link from "next/link";
import { landingDict } from "@/features/landing/dict";

type FeatureItem = {
  label: string;
  available: boolean;
  note?: string;
};

function CheckIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-4 shrink-0 text-[#2EC4B6]"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2.5}
    >
      <path d="M5 13l4 4L19 7" />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-4 shrink-0 text-destructive/60"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2.5}
    >
      <path d="M18 6L6 18M6 6l12 12" />
    </svg>
  );
}

export function LandingPricing() {
  return (
    <section id="pricing" className="px-4 py-16 sm:px-6 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-2xl font-bold text-foreground sm:text-3xl">
            {landingDict.pricing.title}
          </h2>
          <p className="mt-3 text-sm leading-7 text-muted-foreground sm:text-base">
            {landingDict.pricing.subtitle}
          </p>
        </div>

        <div className="mx-auto mt-10 grid max-w-5xl gap-6 lg:grid-cols-4">
          {landingDict.pricing.plans.map((plan) => {
            const features = plan.features as unknown as FeatureItem[];
            const isFree = plan.price === "رایگان";

            return (
            <div
              key={`${plan.name}-${plan.period}`}
              className={`relative flex flex-col rounded-3xl border p-6 shadow-soft-sm ${
                plan.highlighted
                  ? "border-primary/40 bg-primary/[0.04]"
                  : "border-border bg-card"
              }`}
            >
              {plan.highlighted ? (
                <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-0.5 text-[11px] font-semibold text-primary-foreground">
                  {landingDict.pricing.mostPopular}
                </span>
              ) : null}

              <h3 className="text-lg font-bold text-foreground">{plan.name}</h3>
              <p className="mt-1 text-xs text-muted-foreground">{plan.period}</p>

              <div className="mt-3">
                <span className="text-2xl font-bold text-foreground">
                  {plan.price}
                </span>
              </div>

              <ul className="mt-5 flex-1 space-y-2.5">
                {features.map((feature) => (
                  <li key={feature.label} className="flex items-start gap-2 text-sm">
                    {feature.available ? <CheckIcon /> : <CloseIcon />}
                    <span
                      className={`leading-5 ${
                        feature.available
                          ? "text-foreground"
                          : "text-muted-foreground"
                      }`}
                    >
                      {feature.label}
                      {feature.note ? (
                        <span className="text-muted-foreground"> {feature.note}</span>
                      ) : null}
                    </span>
                  </li>
                ))}
              </ul>

              <Link
                href="/panel/subscription"
                className={`mt-6 inline-flex h-12 items-center justify-center rounded-2xl px-6 text-sm font-semibold shadow-soft-sm transition-all ${
                  plan.highlighted
                    ? "bg-primary text-primary-foreground hover:brightness-105"
                    : "border border-border bg-card text-foreground hover:bg-accent"
                }`}
              >
                {isFree
                  ? landingDict.pricing.freeCta
                  : landingDict.pricing.paidCta}
              </Link>
            </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}