Pricing 3

"use client"

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 = [
  "10M+ API requests per month",
  "Advanced analytics & real-time insights",
  "Custom integrations & webhooks",
  "Global CDN & automatic scaling",
  "Team collaboration tools",
  "99.99% uptime guarantee",
  "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="secondary" className="h-8 w-fit">
            Transparent pricing
          </Badge>
          <h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
            One plan
          </h2>
          <p className="max-w-2xl text-lg text-muted-foreground">
            No hidden fees, no surprise charges. Scale from idea to millions of
            users with predictable pricing and industry-leading performance.
          </p>
        </div>

        <div className="w-full rounded-4xl bg-muted p-8">
          <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-[1fr_auto_1.25fr]">
            <div className="flex flex-col gap-6">
              <div className="flex flex-col gap-3">
                <h3 className="text-xl font-medium text-foreground">
                  Growth plan
                </h3>
                <p className="text-sm leading-relaxed text-muted-foreground">
                  Built for modern teams who want to move fast. Get everything
                  you need to build, ship, and scale production applications
                  without limits.
                </p>
              </div>

              <div className="flex items-baseline gap-2">
                <span className="text-7xl font-semibold tracking-tight text-foreground">
                  $99
                </span>
                <span key="period" className="text-xl text-muted-foreground">
                  /month
                </span>
              </div>

              <FancyButton className="group w-fit" size="lg">
                Get started free
                <ArrowUpRightIcon  className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" data-icon="inline-end" />
              </FancyButton>
            </div>

            <Separator orientation="vertical" className="block max-lg:hidden" />

            <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-4 shrink-0 items-center justify-center rounded-full bg-primary">
                    <CheckIcon  className="size-2.5 text-primary-foreground" />
                  </div>
                  <span className="text-base text-muted-foreground">
                    {feature}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  )
}