"use client"

import * as React from "react"
import { ArrowRight, Check } from "lucide-react"

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

type Cadence = "monthly" | "yearly"

type Plan = {
  name: string
  description: string
  monthly: number
  yearly: number
  highlight?: boolean
  features: string[]
}

const plans: Plan[] = [
  {
    name: "Solo",
    description: "For freelancers and side projects.",
    monthly: 19,
    yearly: 15,
    features: [
      "Up to 3 active projects",
      "All free + pro blocks",
      "Commercial license",
      "Email support",
    ],
  },
  {
    name: "Studio",
    description: "For small teams shipping real products.",
    monthly: 49,
    yearly: 39,
    highlight: true,
    features: [
      "Unlimited projects",
      "Everything in Solo",
      "Up to 10 teammates",
      "Priority support",
      "Quarterly office hours",
    ],
  },
]

export default function Pricing03() {
  const [cadence, setCadence] = React.useState<Cadence>("yearly")
  const yearlyDiscount = 20

  return (
    <section className="bg-background py-20 sm:py-28">
      <div className="mx-auto max-w-4xl px-6">
        <div className="mx-auto mb-10 flex max-w-xl flex-col items-center gap-4 text-center">
          <h2 className="text-balance font-semibold text-3xl tracking-tight sm:text-4xl">
            Pay monthly, or save {yearlyDiscount}% on yearly.
          </h2>
          <p className="text-pretty text-sm text-muted-foreground sm:text-base">
            One price covers your whole stack. Switch plans or cancel any
            time from your account.
          </p>

          <CadenceSwitch value={cadence} onChange={setCadence} />
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          {plans.map((plan) => {
            const price = cadence === "monthly" ? plan.monthly : plan.yearly
            return (
              <article
                key={plan.name}
                className={cn(
                  "flex flex-col gap-6 rounded-2xl border border-border bg-card p-6",
                  plan.highlight && "ring-2 ring-foreground/10"
                )}
              >
                <div className="flex items-center justify-between">
                  <div className="flex flex-col gap-1">
                    <h3 className="font-semibold text-lg tracking-tight">
                      {plan.name}
                    </h3>
                    <p className="text-sm text-muted-foreground">
                      {plan.description}
                    </p>
                  </div>
                  {plan.highlight && (
                    <span className="inline-flex items-center rounded-full bg-foreground/10 px-2 py-0.5 font-medium text-[10px] uppercase tracking-widest text-foreground">
                      Popular
                    </span>
                  )}
                </div>

                <div className="flex items-baseline gap-1">
                  <span className="font-semibold text-4xl tracking-tight">
                    ${price}
                  </span>
                  <span className="text-sm text-muted-foreground">
                    / mo
                  </span>
                  {cadence === "yearly" && (
                    <span className="ml-2 text-xs text-emerald-500">
                      billed yearly
                    </span>
                  )}
                </div>

                <Button
                  size="lg"
                  variant={plan.highlight ? "default" : "outline"}
                  className="w-full rounded-lg"
                >
                  Choose {plan.name}
                  <ArrowRight />
                </Button>

                <ul className="flex flex-col gap-2 border-t border-border pt-5">
                  {plan.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-start gap-2 text-sm text-foreground"
                    >
                      <Check
                        className="mt-0.5 size-3.5 shrink-0 text-foreground"
                        strokeWidth={2.5}
                      />
                      {feature}
                    </li>
                  ))}
                </ul>
              </article>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function CadenceSwitch({
  value,
  onChange,
}: {
  value: Cadence
  onChange: (v: Cadence) => void
}) {
  return (
    <div className="inline-flex items-center rounded-full border border-border bg-muted/40 p-0.5">
      <button
        type="button"
        onClick={() => onChange("monthly")}
        className={cn(
          "rounded-full px-3.5 py-1.5 text-xs font-medium transition-colors",
          value === "monthly"
            ? "bg-background text-foreground shadow-sm"
            : "text-muted-foreground hover:text-foreground"
        )}
      >
        Monthly
      </button>
      <button
        type="button"
        onClick={() => onChange("yearly")}
        className={cn(
          "inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-medium transition-colors",
          value === "yearly"
            ? "bg-background text-foreground shadow-sm"
            : "text-muted-foreground hover:text-foreground"
        )}
      >
        Yearly
        <span className="rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-emerald-500">
          -20%
        </span>
      </button>
    </div>
  )
}
Pricing

Product

More

Legal
