Pricing 6

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { FancyButton } from "@/components/ui/fancy-button"
import { ArrowUpRightIcon, CheckIcon } from 'lucide-react'

const features = [
  "Lifetime access to all features",
  "All future updates included",
  "Unlimited projects & team seats",
  "Priority support forever",
  "No recurring fees",
  "Full API & webhook access",
  "Custom domain support",
  "Advanced analytics dashboard",
]

export function Pricing() {
  return (
    <section aria-label="Pricing" className="mx-auto w-full max-w-5xl">
      <div className="flex flex-col items-center gap-6">
        <div className="flex flex-col items-center gap-4 text-center">
          <Badge
            variant="secondary"
            className="w-fit bg-primary/10 text-primary"
          >
            Limited time offer
          </Badge>
          <h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
            One price. Lifetime access.
          </h2>
          <p className="max-w-2xl text-lg text-muted-foreground">
            Pay once, use forever. No subscriptions, no renewals, just permanent
            access to every feature we build.
          </p>
        </div>

        <div className="w-full max-w-2xl rounded-4xl bg-muted p-1.5">
          <div className="flex flex-col gap-8 rounded-3xl bg-card p-8 shadow-elevated-lg">
            <div className="flex flex-col items-center gap-4 text-center">
              <div className="flex items-center gap-4">
                <span className="text-3xl text-muted-foreground line-through">
                  $588
                </span>
                <span className="text-7xl font-semibold tracking-tight text-foreground">
                  $199
                </span>
              </div>
              <p className="text-sm text-muted-foreground">
                One-time payment · Lifetime access
              </p>
              <Badge variant="secondary" className="bg-primary/10 text-primary">
                Save $389 (66% off)
              </Badge>
            </div>

            <FancyButton size="lg" className="w-full">
              Get lifetime access
              <ArrowUpRightIcon  data-icon="inline-end" />
            </FancyButton>

            <Separator className="bg-border/50" />

            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              {features.map((feature) => (
                <div key={feature} className="flex items-start gap-3">
                  <div className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary">
                    <CheckIcon  className="size-3 text-primary-foreground" />
                  </div>
                  <span className="text-sm text-muted-foreground">
                    {feature}
                  </span>
                </div>
              ))}
            </div>

            <Separator className="bg-border/50" />

            <div className="flex items-center justify-center gap-3">
              <AvatarGroup className="grayscale">
                <Avatar>
                  <AvatarImage
                    src="https://github.com/shadcn.png"
                    alt="User 1"
                  />
                  <AvatarFallback>U1</AvatarFallback>
                </Avatar>
                <Avatar>
                  <AvatarImage
                    src="https://github.com/leerob.png"
                    alt="User 2"
                  />
                  <AvatarFallback>U2</AvatarFallback>
                </Avatar>
                <Avatar>
                  <AvatarImage
                    src="https://github.com/evilrabbit.png"
                    alt="User 3"
                  />
                  <AvatarFallback>U3</AvatarFallback>
                </Avatar>
              </AvatarGroup>
              <p className="text-sm text-muted-foreground">
                <span className="font-medium text-foreground">847</span> people
                grabbed this deal
              </p>
            </div>
          </div>
        </div>

        <p className="text-sm text-muted-foreground">
          30-day money-back guarantee · Secure payment via Stripe
        </p>
      </div>
    </section>
  )
}