property-management-network/components/marketing/pricing.tsx

import Link from "next/link"
import { Check, Zap } from "lucide-react"
import { cn } from "@/lib/utils"

const plans = [
  {
    name: "Starter",
    price: "Free",
    interval: "",
    description: "For landlords just getting started.",
    highlight: false,
    cta: "Get started free",
    ctaHref: "/signup",
    features: [
      "1 property",
      "Up to 3 tenants",
      "100 MB document storage",
      "Rent tracking",
      "Maintenance requests",
      "Lease tracking",
      "Tenant portal",
    ],
  },
  {
    name: "Pro",
    price: "$29",
    interval: "/mo",
    description: "For active landlords managing multiple properties.",
    highlight: true,
    badge: "Most popular",
    cta: "Start Pro",
    ctaHref: "/signup",
    features: [
      "Up to 10 properties",
      "Unlimited tenants",
      "5 GB document storage",
      "AI rent receipts (50/mo)",
      "AI maintenance reports",
      "Automated rent reminders",
      "Stripe payment links",
      "Lease expiry alerts",
    ],
  },
  {
    name: "Landlord",
    price: "$59",
    interval: "/mo",
    description: "For serious portfolios that need full power.",
    highlight: false,
    cta: "Start Landlord",
    ctaHref: "/signup",
    features: [
      "Unlimited properties",
      "Unlimited tenants",
      "25 GB document storage",
      "AI calls (200/mo)",
      "Team access",
      "White-label tenant portal",
      "Priority support",
    ],
  },
  {
    name: "Lifetime",
    price: "$199",
    interval: " one-time",
    description: "Pay once, own it forever.",
    highlight: false,
    badge: "Best value",
    cta: "Get lifetime access",
    ctaHref: "/signup",
    features: [
      "Everything in Landlord",
      "No recurring fees — ever",
      "All future updates included",
      "White-label tenant portal",
      "Team access",
      "25 GB document storage",
    ],
  },
]

export function Pricing() {
  return (
    <section id="pricing" className="py-24">
      <div className="mx-auto max-w-6xl px-6">
        <div className="mb-14 text-center">
          <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-indigo-400">Pricing</p>
          <h2 className="text-3xl font-bold text-white sm:text-4xl">Simple, honest pricing</h2>
          <p className="mx-auto mt-4 max-w-lg text-white/50">
            Start free, upgrade when you grow. No hidden fees, no per-unit charges.
          </p>
        </div>

        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={cn(
                "relative flex flex-col rounded-2xl border p-6",
                plan.highlight
                  ? "border-indigo-500/50 bg-indigo-600/10 shadow-xl shadow-indigo-600/10"
                  : "border-white/[0.06] bg-[#16161f]"
              )}
            >
              {plan.badge && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                  <span className={cn(
                    "flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold",
                    plan.highlight
                      ? "bg-indigo-600 text-white"
                      : "bg-white/10 text-white/70"
                  )}>
                    <Zap className="h-3 w-3" />
                    {plan.badge}
                  </span>
                </div>
              )}

              <div className="mb-5">
                <p className="text-sm font-semibold text-white/60">{plan.name}</p>
                <div className="mt-1 flex items-baseline gap-0.5">
                  <span className="text-3xl font-extrabold text-white">{plan.price}</span>
                  {plan.interval && <span className="text-sm text-white/40">{plan.interval}</span>}
                </div>
                <p className="mt-2 text-xs leading-relaxed text-white/40">{plan.description}</p>
              </div>

              <Link
                href={plan.ctaHref}
                className={cn(
                  "mb-6 block rounded-lg px-4 py-2.5 text-center text-sm font-semibold transition",
                  plan.highlight
                    ? "bg-indigo-600 text-white hover:bg-indigo-500"
                    : "border border-white/10 text-white/70 hover:border-white/20 hover:text-white"
                )}
              >
                {plan.cta}
              </Link>

              <ul className="flex-1 space-y-2.5">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-start gap-2">
                    <Check className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-indigo-400" />
                    <span className="text-xs text-white/60">{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}