Pricing Toggle

"use client";

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

export interface PricingToggleProps {
  title?: string;
  plans?: { name: string; monthly: number; yearly: number; blurb: string; href: string }[];
  className?: string;
}

const DEFAULT_PLANS = [
  { name: "Personal", monthly: 0, yearly: 0, blurb: "One site on a frame.studio address.", href: "#personal" },
  { name: "Studio", monthly: 20, yearly: 16, blurb: "Custom domain, fonts and password pages.", href: "#studio" },
  { name: "Agency", monthly: 60, yearly: 48, blurb: "Unlimited sites and client handoff.", href: "#agency" },
];

/** Pricing as a ruled list: a text toggle “Monthly / Yearly (−20%)” with an underline on the active option, then one row per plan — name, blurb, price, arrow link — rows invert on hover. */
export function PricingToggle({ title = "Pricing", plans = DEFAULT_PLANS, className }: PricingToggleProps) {
  const [yearly, setYearly] = useState(true);
  return (
    <section aria-labelledby="mc-pt-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <h2 id="mc-pt-title" className="font-da-display text-[clamp(2.5rem,6vw,5rem)] leading-none font-medium tracking-da-display">
            {title}
          </h2>
          <div role="radiogroup" aria-label="Billing period" className="flex gap-5 font-da-mono text-xs tracking-da-label uppercase">
            {[
              { v: false, l: "Monthly" },
              { v: true, l: "Yearly (−20%)" },
            ].map((o) => (
              <button
                key={o.l}
                type="button"
                role="radio"
                aria-checked={yearly === o.v}
                onClick={() => setYearly(o.v)}
                className={cn("da-focus rounded-da-sm pb-1", yearly === o.v ? "border-b-2 border-da-accent" : "text-da-muted-fg hover:text-da-fg")}
              >
                {o.l}
              </button>
            ))}
          </div>
        </div>
        <ul className="mt-12 border-t border-da-border-strong">
          {plans.map((p) => {
            const price = yearly ? p.yearly : p.monthly;
            return (
              <li key={p.name} className="border-b border-da-border">
                <a
                  href={p.href}
                  className="group da-focus da-transition grid grid-cols-[1fr_auto] items-baseline gap-x-6 gap-y-1 px-2 py-6 hover:bg-da-fg hover:text-da-bg sm:grid-cols-[12rem_1fr_auto_auto]"
                >
                  <span className="font-da-display text-3xl font-medium tracking-da-display">{p.name}</span>
                  <span className="col-span-2 row-start-2 opacity-70 sm:col-span-1 sm:row-start-auto">{p.blurb}</span>
                  <span className="font-da-display text-3xl font-medium tracking-da-display tabular-nums">
                    €{price}
                    <span className="ml-1 font-da-mono text-xs tracking-normal opacity-70">/mo</span>
                  </span>
                  <span
                    aria-hidden
                    className="hidden text-2xl transition-transform duration-(--da-duration) group-hover:translate-x-1 group-hover:-translate-y-1 sm:block"
                  >
                    ↗
                  </span>
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default PricingToggle;