import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { PRICING_CATEGORIES } from "@/lib/pricing-data";
import { Reveal } from "@/components/ui/reveal";
import { cn } from "@/lib/utils";

export function PricingQuickView() {
  const websiteTiers = PRICING_CATEGORIES.find((c) => c.id === "websites")!.tiers;

  return (
    <section className="border-b border-line">
      <div className="mx-auto max-w-shell px-6 py-16 lg:px-8 lg:py-20">
        <Reveal>
          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div className="max-w-xl">
              <p className="font-mono text-[13px] text-signal">Pricing</p>
              <h2 className="mt-3 font-display text-3xl font-semibold text-paper lg:text-4xl">
                Know the number before the call.
              </h2>
            </div>
            <Link
              href="/pricing"
              className="group inline-flex w-fit items-center gap-1.5 font-mono text-[13px] text-paper transition-colors hover:text-signal"
            >
              See full pricing
              <ArrowUpRight
                size={14}
                className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
              />
            </Link>
          </div>
        </Reveal>

        <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-3">
          {websiteTiers.map((tier, i) => (
            <Reveal key={tier.name} delay={i * 0.08}>
              <Link
                href="/pricing"
                className={cn(
                  "group flex h-full flex-col rounded-lg border p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-black/20",
                  tier.featured
                    ? "border-signal/50 bg-ink-2 ring-1 ring-signal/20"
                    : "border-line bg-ink-2 hover:border-line-strong"
                )}
              >
                {tier.featured && (
                  <p className="mb-3 inline-flex w-fit items-center rounded-full bg-signal-soft px-2.5 py-1 font-mono text-[11px] text-signal">
                    Most popular
                  </p>
                )}
                <p className="font-display text-base font-semibold text-paper">
                  {tier.name}
                </p>
                <p className="mt-1 text-sm text-paper-2">{tier.tagline}</p>
                <p className="mt-4 font-mono text-2xl font-medium text-paper">
                  ${tier.price.toLocaleString("en-CA")}{" "}
                  <span className="text-sm font-normal text-paper-2">CAD</span>
                </p>
                <span className="mt-4 inline-flex items-center gap-1 font-mono text-[12px] text-paper-2 transition-colors group-hover:text-signal">
                  View details
                  <ArrowUpRight
                    size={12}
                    className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
                  />
                </span>
              </Link>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}