import { Check } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

const plans = [
  {
    id: "starter",
    name: "Starter",
    description:
      "Perfect for individuals and small teams just getting started.",
    price: 9,
    featured: false,
    features: [
      "5 projects",
      "10 GB storage",
      "Basic analytics",
      "Email support",
      "API access",
    ],
  },
  {
    id: "pro",
    name: "Pro",
    description: "Everything you need to grow and scale your business.",
    price: 29,
    featured: true,
    features: [
      "Unlimited projects",
      "100 GB storage",
      "Advanced analytics",
      "Priority support",
      "API access",
      "Custom integrations",
      "Team collaboration",
    ],
  },
  {
    id: "business",
    name: "Business",
    description: "Enterprise-grade features for large organizations.",
    price: 79,
    featured: false,
    features: [
      "Unlimited projects",
      "1 TB storage",
      "Custom analytics",
      "24/7 dedicated support",
      "API access",
      "Custom integrations",
      "SSO / SAML",
      "SLA guarantee",
    ],
  },
]

interface PricingCardProps {
  name: string
  description: string
  price: number
  featured: boolean
  features: string[]
}

function PricingCard({
  name,
  description,
  price,
  featured,
  features,
}: PricingCardProps) {
  return (
    <div
      className={cn(
        "bg-card relative rounded-3xl border p-8 text-left shadow-sm transition-shadow hover:shadow-md",
        featured && "border-primary"
      )}
    >
      {featured && (
        <span className="bg-primary text-primary-foreground absolute -top-3 right-8 rounded-full px-3 py-1 text-sm font-medium">
          Most popular
        </span>
      )}

      <div className="mb-8">
        <h3 className="mb-2 text-xl font-semibold">{name}</h3>
        <p className="text-muted-foreground text-sm">{description}</p>
      </div>

      <div className="mb-8">
        <div className="flex items-end gap-1">
          <span className="text-5xl font-semibold">${price}</span>
          <span className="text-muted-foreground mb-1 text-sm">/per month</span>
        </div>
      </div>

      <Button
        variant={featured ? "default" : "secondary"}
        className="mb-8 w-full"
        asChild
      >
        <a href="#">Get started</a>
      </Button>

      <ul className="space-y-3">
        {features.map((feature) => (
          <li key={feature} className="flex items-center gap-3">
            <Check className="text-primary h-4 w-4 shrink-0" />
            <span className="text-muted-foreground text-sm">{feature}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default function PricingSection() {
  return (
    <div className="section-soft min-h-screen w-full px-4 py-20">
      <div className="mx-auto max-w-7xl text-center">
        <h1 className="mb-4 font-[family-name:var(--font-instrument-serif)] text-4xl sm:text-6xl">
          Simple &amp; <span className="italic">transparent</span> pricing
        </h1>
        <p className="text-muted-foreground mb-16 font-[family-name:var(--font-instrument-serif)] text-2xl sm:text-4xl">
          for all business sizes
        </p>
        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 md:grid-cols-3">
          {plans.map((plan) => (
            <PricingCard key={plan.id} {...plan} />
          ))}
        </div>
      </div>
    </div>
  )
}