Pricing One

import { cn } from "@/lib/utils";

export interface PricingOneProps {
  price?: string;
  period?: string;
  title?: string;
  description?: string;
  included?: string[];
  cta?: { label: string; href: string };
  className?: string;
}

/** Single-price poster: a gigantic price set in the display face across the left, and on the right a short pitch, a two-column “included” list with en-dashes and an ink CTA; separated by a full-ink rule. */
export function PricingOne({
  price = "€16",
  period = "per month",
  title = "One plan for independent studios.",
  description = "Everything Frame does, for the price of two coffees. Billed yearly; cancel anytime.",
  included = ["3 sites", "Unlimited projects", "Custom domain", "Custom fonts", "Password pages", "Analytics", "Version history", "Email support"],
  cta = { label: "Start 14-day trial", href: "#trial" },
  className,
}: PricingOneProps) {
  return (
    <section aria-labelledby="mc-po-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid items-end gap-10 border-t border-da-border-strong pt-10 lg:grid-cols-12">
        <p className="font-da-display text-[clamp(6rem,20vw,16rem)] leading-[0.8] font-medium tracking-[-0.06em] lg:col-span-6">
          {price}
          <span className="ml-3 align-top font-da-mono text-sm tracking-da-label text-da-muted-fg uppercase">{period}</span>
        </p>
        <div className="lg:col-span-5 lg:col-start-8">
          <h2 id="mc-po-title" className="font-da-display text-3xl font-medium tracking-da-display">
            {title}
          </h2>
          <p className="mt-3 text-da-muted-fg">{description}</p>
          <ul className="mt-6 grid grid-cols-2 gap-x-6 gap-y-2 text-[15px]">
            {included.map((i) => (
              <li key={i} className="flex gap-2">
                <span aria-hidden className="text-da-muted-fg">
                  –
                </span>
                {i}
              </li>
            ))}
          </ul>
          <a
            href={cta.href}
            className="da-focus da-transition mt-8 inline-flex h-12 w-full items-center justify-center rounded-da-sm bg-da-primary font-medium text-da-primary-fg hover:opacity-85"
          >
            {cta.label}
          </a>
        </div>
      </div>
    </section>
  );
}

export default PricingOne;