Pricing

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

import { Button } from "@waveinno/ui";

const INCLUDED = ["Unlimited gates and cameras", "bKash, Nagad, cards and cash", "Monthly passes", "Attendant app, offline", "Nightly reports", "Support in Bangla, 9 am to 9 pm"];

export default function PricingSimple() {
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-4xl">
        <div className="text-center">
          <h2 className="disp text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[40px]">One price per site</h2>
          <p className="mt-3 text-[16px] text-body">Everything included. No setup fee, no contract.</p>
        </div>
        <div className="mt-12 grid overflow-hidden rounded-[24px] border border-border bg-raised shadow-[var(--lit),0_24px_50px_-36px_rgba(5,8,22,.4)] md:grid-cols-[1.4fr_1fr]">
          <div className="p-8 sm:p-10">
            <h3 className="text-[20px] font-semibold leading-7 text-text">Per site, per month</h3>
            <p className="mt-2 text-[14.5px] leading-[1.6] text-body">Add sites as you grow; each one gets every feature from day one.</p>
            <div className="mt-8 flex items-center gap-4">
              <p className="shrink-0 text-[13px] font-semibold text-primary">What is included</p>
              <span className="h-px flex-1 bg-border" />
            </div>
            <ul className="mt-5 grid gap-3 text-[14px] text-body sm:grid-cols-2">
              {INCLUDED.map((f) => (
                <li key={f} className="flex items-start gap-2.5">
                  <Check className="mt-0.5 size-4 shrink-0 text-primary" strokeWidth={3} /> {f}
                </li>
              ))}
            </ul>
          </div>
          <div className="flex flex-col justify-center border-t border-border bg-surface p-8 text-center md:border-l md:border-t-0">
            <p className="text-[14px] font-medium text-muted">Pay monthly, cancel any time</p>
            <p className="mt-4 flex items-baseline justify-center gap-1.5">
              <span className="disp num text-[48px] font-bold leading-none tracking-[-0.04em] text-text">৳4,900</span>
              <span className="text-[14px] text-muted">/ month</span>
            </p>
            <Button variant="primary" size="lg" className="mt-7 w-full">
              Start free for 14 days <ArrowRight />
            </Button>
            <p className="mt-4 text-[12px] text-muted">VAT invoice for every payment</p>
          </div>
        </div>
      </div>
    </section>
  );
}

import { Check, Minus } from "lucide-react";

import { Badge, Button, cn } from "@waveinno/ui";

const PLANS = [
  {
    name: "Free",
    price: "৳0",
    line: "One site with two gates, for good.",
    cta: "Start free",
    features: [
      ["1 site, 2 gates", true],
      ["Sessions and receipts", true],
      ["bKash and cash", true],
      ["Monthly passes", false],
      ["Plate reading", false],
    ],
  },
  {
    name: "Business",
    price: "৳4,900",
    line: "Every feature, per site.",
    cta: "Try it for 14 days",
    features: [
      ["Unlimited gates", true],
      ["Sessions and receipts", true],
      ["Every payment method", true],
      ["Monthly passes", true],
      ["Plate reading", true],
    ],
    featured: true,
  },
] as const;

export default function PricingTwo() {
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="disp text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[40px]">Start free, pay when it pays</h2>
        <p className="mt-3 text-[16px] text-body">Most owners move to Business in their second month.</p>
      </div>
      <div className="mx-auto mt-12 grid max-w-3xl gap-5 md:grid-cols-2">
        {PLANS.map((p) => (
          <article
            key={p.name}
            className={cn(
              "relative rounded-[22px] bg-raised p-7",
              "featured" in p ? "border-2 border-primary shadow-[0_24px_50px_-30px_var(--primary)]" : "border border-border shadow-[var(--lit)]",
            )}
          >
            {"featured" in p ? (
              <Badge variant="solid" dot={false} className="absolute -top-3 left-7">
                Recommended
              </Badge>
            ) : null}
            <h3 className="text-[17px] font-semibold leading-6 text-text">{p.name}</h3>
            <p className="mt-1 text-[13.5px] text-muted">{p.line}</p>
            <p className="mt-5 flex items-baseline gap-1">
              <span className="disp num text-[40px] font-bold leading-none tracking-[-0.035em] text-text">{p.price}</span>
              <span className="text-[13.5px] text-muted">/ site / month</span>
            </p>
            <Button variant={"featured" in p ? "primary" : "secondary"} size="lg" className="mt-6 w-full">
              {p.cta}
            </Button>
            <ul className="mt-6 space-y-2.5 text-[14px]">
              {p.features.map(([f, on]) => (
                <li key={f} className={cn("flex items-center gap-2.5", on ? "text-body" : "text-muted line-through decoration-border2")}>
                  {on ? <Check className="size-4 text-success" strokeWidth={3} /> : <Minus className="size-4 text-border2" />} {f}
                </li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}