import { Check, ArrowRight } from "lucide-react"

import { Button } from "@/components/ui/button"

const features = [
  "All blocks — heroes, features, pricing & more",
  "Future blocks included, forever",
  "Full TypeScript source — no obfuscation",
  "Tailwind v4 & shadcn-ready",
  "Light &amp; dark themes baked in",
  "Commercial license for unlimited projects",
  "Priority support from Leonel directly",
]

export default function Pricing01() {
  return (
    <section className="bg-background py-24">
      <div className="mx-auto max-w-3xl px-6">
        <div className="mx-auto max-w-xl text-center">
          <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
            Pricing
          </p>
          <h2 className="mt-3 text-balance text-3xl font-medium tracking-tight sm:text-4xl">
            One payment. Everything included.
          </h2>
          <p className="mt-4 text-balance text-muted-foreground">
            No subscription, no per-seat fee, no upsell. Pay once, own the
            blocks, ship as many products as you like.
          </p>
        </div>

        <div className="mt-14 overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
          <div className="flex flex-col gap-8 p-8 md:p-10">
            <div className="flex flex-col gap-2">
              <span className="inline-flex w-fit items-center rounded-full border border-border bg-muted/50 px-2.5 py-0.5 text-xs font-medium text-muted-foreground">
                Lifetime access
              </span>
              <h3 className="text-2xl font-medium text-foreground">
                LN Blocks — Pro
              </h3>
              <p className="text-sm text-muted-foreground">
                Everything I ship, in one place. Curated by Leonel Ngoya.
              </p>
            </div>

            <div className="flex items-baseline gap-2">
              <span className="text-5xl font-medium tracking-tight text-foreground">
                $99
              </span>
              <span className="text-sm text-muted-foreground line-through">
                $149
              </span>
              <span className="text-sm text-muted-foreground">
                · one-time
              </span>
            </div>

            <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              {features.map((feature) => (
                <li
                  key={feature}
                  className="flex items-start gap-2.5 text-sm text-foreground"
                >
                  <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full bg-foreground/10">
                    <Check
                      className="size-2.5 text-foreground"
                      strokeWidth={3}
                    />
                  </span>
                  <span
                    dangerouslySetInnerHTML={{ __html: feature }}
                    className="leading-relaxed text-muted-foreground"
                  />
                </li>
              ))}
            </ul>

            <div className="flex flex-col gap-3 border-t border-border pt-6 sm:flex-row sm:items-center sm:justify-between">
              <p className="text-xs text-muted-foreground">
                30-day refund. No questions, no hard feelings.
              </p>
              <Button size="lg" asChild>
                <a href="https://lndev.me" target="_blank" rel="noreferrer">
                  Get LN Blocks
                  <ArrowRight />
                </a>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}