Pricing 4

"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 = [
  "99.99% uptime SLA guarantee",
  "Dedicated account manager",
  "Custom integrations & workflows",
  "Advanced security & compliance",
  "Real-time analytics dashboard",
  "24/7 priority support",
]

export function Pricing() {
  return (
    <section aria-label="Pricing" className="mx-auto w-full max-w-2xl">
      <div className="flex flex-col items-center gap-8">
        <div className="flex flex-col items-center gap-4 text-center">
          <Badge variant="outline" className="h-7 w-fit">
            Pricing
          </Badge>
          <h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
            Enterprise scale, zero compromise
          </h2>
        </div>

        <div className="w-full flex-col gap-4 rounded-4xl bg-muted p-1">
          <div className="grid grid-cols-1 items-start gap-8 rounded-3xl bg-card p-8 shadow-elevated-lg lg:grid-cols-[1.25fr_auto_1fr]">
            <div className="lg:order-3">
              <PlanInfo />
            </div>
            <Separator
              orientation="vertical"
              className="block bg-border/50 max-lg:hidden lg:order-2"
            />
            <div className="lg:order-1">
              <FeatureList />
            </div>
          </div>

          <div className="flex items-center justify-center gap-3 py-3">
            <AvatarGroup className="grayscale *:size-6">
              <Avatar>
                <AvatarImage src="https://github.com/shadcn.png" alt="User 1" />
                <AvatarFallback>U1</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarImage
                  src="https://github.com/maxleiter.png"
                  alt="User 2"
                />
                <AvatarFallback>U2</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarImage
                  src="https://github.com/evilrabbit.png"
                  alt="User 3"
                />
                <AvatarFallback>U3</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarImage
                  src="https://github.com/shuding.png"
                  alt="User 4"
                />
                <AvatarFallback>U4</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarImage src="https://github.com/leerob.png" alt="User 5" />
                <AvatarFallback>U5</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarImage
                  src="https://github.com/timneutkens.png"
                  alt="User 6"
                />
                <AvatarFallback>U6</AvatarFallback>
              </Avatar>
            </AvatarGroup>
            <p className="text-sm text-muted-foreground">
              Trusted by Fortune 500 companies and startups alike
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}

function PlanInfo() {
  return (
    <div className="flex flex-col gap-6">
      <h3 className="text-xl font-medium text-foreground">Enterprise</h3>
      <p className="text-base leading-relaxed text-muted-foreground">
        Built for mission-critical systems requiring maximum reliability,
        security, and dedicated support at scale.
      </p>

      <div className="flex flex-col gap-1">
        <div className="flex items-baseline gap-2">
          <span className="text-7xl font-semibold tracking-tight text-foreground">
            $199
          </span>
          <span className="text-xl text-muted-foreground">monthly</span>
        </div>
        <p className="text-sm text-muted-foreground">billed annually</p>
      </div>

      <FancyButton size="lg" className="w-full">
        Start free trial
        <ArrowUpRightIcon  className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" data-icon="inline-end" />
      </FancyButton>
    </div>
  )
}

function FeatureList() {
  return (
    <ul className="flex flex-col gap-4">
      {features.map((feature) => (
        <li 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-base text-muted-foreground">{feature}</span>
        </li>
      ))}
    </ul>
  )
}