Pricing 03 — Golden Ledger

"use client"

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

import { buttonVariants } from "@/components/ui/button"
import { AnimatedNumber } from "@/components/ludus/animated-number"
import { GlowBorder } from "@/components/ludus/glow-border"
import { Grain } from "@/components/ludus/grain"
import { fadeUp, stagger, viewport } from "@/lib/motion"
import { cn } from "@/lib/utils"

type Cta = { label: string; href: string }

type FeatureRow = { name: string; value: string }

export type Pricing03FeaturedTier = {
  name: string
  tag: string
  /** Numeric price — animated, formatted with tabular figures. */
  price: number
  currency?: string
  priceNote: string
  outcome: string
  features: FeatureRow[]
  cta: Cta
  riskReversal: string
}

export type Pricing03Tier = {
  name: string
  price: string
  audience: string
  features: string[]
  cta: Cta
}

export type Pricing03Props = {
  index?: string
  label?: string
  note?: string
  title?: React.ReactNode
  description?: string
  featured?: Pricing03FeaturedTier
  tiers?: Pricing03Tier[]
  /** Heading element — use "h1" when this is the page's main heading. */
  as?: "h1" | "h2"
  className?: string
}

const DEFAULT_FEATURED: Pricing03FeaturedTier = {
  name: "Growth",
  tag: "Recommended",
  price: 79,
  currency: "$",
  priceNote: "per seat / month, billed annually",
  outcome: "Teams recover 12× the subscription on average within the first quarter.",
  features: [
    { name: "Funnel audits", value: "Unlimited" },
    { name: "Checkout experiments", value: "20 / month" },
    { name: "Revenue-leak alerts", value: "Real-time" },
    { name: "Support", value: "Same-day, human" },
  ],
  cta: { label: "Start recovering revenue", href: "#" },
  riskReversal: "30-day money-back · Cancel anytime",
}

const DEFAULT_TIERS: Pricing03Tier[] = [
  {
    name: "Starter",
    price: "$29",
    audience: "For solo founders validating one funnel.",
    features: ["3 funnel audits / month", "5,000 session replays"],
    cta: { label: "Start free trial", href: "#" },
  },
  {
    name: "Scale",
    price: "Custom",
    audience: "For teams above $5M ARR with custom needs.",
    features: ["Unlimited everything", "Dedicated CRO engineer"],
    cta: { label: "Talk to sales", href: "#" },
  },
]

export function Pricing03({
  index = "05",
  label = "Pricing",
  note = "One plan pays for the rest",
  title = "Pricing that pays for itself in week one.",
  description = "The average customer finds $18,000 of leaking revenue in their first audit — more than a year of Growth costs.",
  featured = DEFAULT_FEATURED,
  tiers = DEFAULT_TIERS,
  as: Heading = "h2",
  className,
}: Pricing03Props) {
  return (
    <section className={cn("relative overflow-hidden bg-background", className)}>
      <Grain opacity={0.04} />

      <motion.div
        initial="hidden"
        whileInView="visible"
        viewport={viewport}
        variants={stagger(0.09)}
        className="relative mx-auto max-w-6xl px-6 py-20 md:py-28"
      >
        {/* Swiss index bar */}
        <motion.div
          variants={fadeUp}
          className="flex items-baseline justify-between border-b pb-3 text-xs tracking-[0.2em] text-muted-foreground uppercase"
        >
          <span>
            <span className="text-primary">{index}</span> — {label}
          </span>
          <span className="hidden sm:block">{note}</span>
        </motion.div>

        <motion.div variants={fadeUp} className="mt-10 max-w-[60ch]">
          <Heading className="text-4xl font-medium tracking-tight text-balance md:text-5xl">
            {title}
          </Heading>
          <p className="mt-4 text-pretty text-muted-foreground md:text-lg">{description}</p>
        </motion.div>

        {/* Golden ledger frame */}
        <motion.div
          variants={fadeUp}
          className="mt-12 grid gap-px rounded-none border bg-border lg:grid-cols-[1.618fr_1fr]"
        >
          {/* Featured plan — GlowBorder as its living frame */}
          <div className="relative rounded-none bg-background">
            <GlowBorder intensity={0.5} />
            <div className="relative flex h-full flex-col p-6 md:p-8">
              <div className="flex items-baseline justify-between text-xs tracking-[0.2em] uppercase">
                <span className="text-foreground">{featured.name}</span>
                <span className="text-primary">{featured.tag}</span>
              </div>

              <p className="mt-6 font-heading text-5xl font-medium tracking-tight tabular-nums md:text-6xl">
                <AnimatedNumber value={featured.price} prefix={featured.currency ?? "$"} />
              </p>
              <p className="mt-2 text-sm text-muted-foreground">{featured.priceNote}</p>

              <p className="mt-5 max-w-[52ch] border-t pt-5 text-sm text-pretty text-foreground">
                {featured.outcome}
              </p>

              {/* Included-feature ledger */}
              <ul className="mt-6 divide-y border-y">
                {featured.features.map((row) => (
                  <li
                    key={row.name}
                    className="flex items-baseline justify-between gap-4 py-2.5 text-sm"
                  >
                    <span className="text-muted-foreground">{row.name}</span>
                    <span className="text-right font-medium tabular-nums">{row.value}</span>
                  </li>
                ))}
              </ul>

              <div className="mt-auto pt-6">
                <a
                  href={featured.cta.href}
                  className={cn(buttonVariants({ size: "lg" }), "group w-full justify-between")}
                >
                  {featured.cta.label}
                  <ArrowRight className="transition-transform group-hover:translate-x-0.5" />
                </a>
                <p className="mt-3 text-xs tracking-wide text-muted-foreground/70 uppercase">
                  {featured.riskReversal}
                </p>
              </div>
            </div>
          </div>

          {/* Supporting plans */}
          <div className="grid grid-rows-2 gap-px bg-border">
            {tiers.map((tier) => (
              <div key={tier.name} className="flex flex-col rounded-none bg-background p-6 md:p-8">
                <div className="flex items-baseline justify-between">
                  <span className="text-xs tracking-[0.2em] uppercase">{tier.name}</span>
                  <span className="font-heading text-2xl font-medium tracking-tight tabular-nums">
                    {tier.price}
                  </span>
                </div>
                <p className="mt-2 max-w-[42ch] text-sm text-pretty text-muted-foreground">
                  {tier.audience}
                </p>
                <ul className="mt-4 space-y-2 border-t pt-4">
                  {tier.features.map((feature) => (
                    <li
                      key={feature}
                      className="flex items-center gap-2 text-sm text-muted-foreground"
                    >
                      <Check className="size-3.5 text-primary" aria-hidden />
                      {feature}
                    </li>
                  ))}
                </ul>
                <div className="mt-auto pt-5">
                  <a
                    href={tier.cta.href}
                    className={cn(
                      buttonVariants({ size: "lg", variant: "outline" }),
                      "w-full justify-between"
                    )}
                  >
                    {tier.cta.label}
                    <ArrowRight aria-hidden />
                  </a>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      </motion.div>
    </section>
  )
}