Radio Set Toggle

"use client";

import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";

/* ----------------------------- data ----------------------------- */

const PLANS = [
  {
    value: "starter",
    name: "Starter",
    tagline: "For solo builders and side projects",
    monthly: 0,
    annual: 0,
    features: ["1 workspace", "5 GB storage", "Community support"],
  },
  {
    value: "pro",
    name: "Pro",
    tagline: "For growing product teams",
    monthly: 19,
    annual: 15,
    features: ["Unlimited workspaces", "100 GB storage", "Priority support"],
    popular: true,
  },
  {
    value: "team",
    name: "Team",
    tagline: "For scaling organizations",
    monthly: 49,
    annual: 39,
    features: ["SSO & audit logs", "1 TB storage", "99.9% uptime SLA"],
  },
] as const;

type PlanValue = (typeof PLANS)[number]["value"];

const BILLING = [
  { value: "monthly", label: "Monthly" },
  { value: "annual", label: "Annual" },
] as const;

type BillingValue = (typeof BILLING)[number]["value"];

const FREQUENCIES = [
  {
    value: "realtime",
    title: "Real-time",
    desc: "Ping me the moment something happens",
    icon: "bolt",
  },
  {
    value: "daily",
    title: "Daily digest",
    desc: "One summary email every morning at 8:00",
    icon: "sun",
  },
  {
    value: "weekly",
    title: "Weekly recap",
    desc: "A single roundup every Monday",
    icon: "calendar",
  },
  {
    value: "never",
    title: "Off",
    desc: "In-app notifications only, no email",
    icon: "bell",
  },
] as const;

type FrequencyValue = (typeof FREQUENCIES)[number]["value"];

const ACCENTS = [
  {
    value: "indigo",
    label: "Indigo",
    dot: "bg-indigo-500",
    ring: "group-has-[:checked]:ring-indigo-500 group-has-[:focus-visible]:ring-indigo-500",
    text: "text-indigo-600 dark:text-indigo-400",
  },
  {
    value: "violet",
    label: "Violet",
    dot: "bg-violet-500",
    ring: "group-has-[:checked]:ring-violet-500 group-has-[:focus-visible]:ring-violet-500",
    text: "text-violet-600 dark:text-violet-400",
  },
  {
    value: "emerald",
    label: "Emerald",
    dot: "bg-emerald-500",
    ring: "group-has-[:checked]:ring-emerald-500 group-has-[:focus-visible]:ring-emerald-500",
    text: "text-emerald-600 dark:text-emerald-400",
  },
  {
    value: "rose",
    label: "Rose",
    dot: "bg-rose-500",
    ring: "group-has-[:checked]:ring-rose-500 group-has-[:focus-visible]:ring-rose-500",
    text: "text-rose-600 dark:text-rose-400",
  },
  {
    value: "amber",
    label: "Amber",
    dot: "bg-amber-500",
    ring: "group-has-[:checked]:ring-amber-500 group-has-[:focus-visible]:ring-amber-500",
    text: "text-amber-600 dark:text-amber-400",
  },
  {
    value: "sky",
    label: "Sky",
    dot: "bg-sky-500",
    ring: "group-has-[:checked]:ring-sky-500 group-has-[:focus-visible]:ring-sky-500",
    text: "text-sky-600 dark:text-sky-400",
  },
] as const;

type AccentValue = (typeof ACCENTS)[number]["value"];

/* ----------------------------- icons ----------------------------- */

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth={2.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="m5 10.5 3.2 3.2L15 6.5" />
    </svg>
  );
}

function FreqIcon({ name, className }: { name: string; className?: string }) {
  const common = {
    className,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.8,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    "aria-hidden": true,
  };
  if (name === "bolt") {
    return (
      <svg {...common}>
        <path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" />
      </svg>
    );
  }
  if (name === "sun") {
    return (
      <svg {...common}>
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
      </svg>
    );
  }
  if (name === "calendar") {
    return (
      <svg {...common}>
        <rect x="3" y="4.5" width="18" height="16" rx="2" />
        <path d="M3 9h18M8 2.5v4M16 2.5v4" />
      </svg>
    );
  }
  return (
    <svg {...common}>
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8ZM10 21a2 2 0 0 0 4 0M3 3l18 18" />
    </svg>
  );
}

/* ----------------------------- component ----------------------------- */

export default function TglRadioSet() {
  const uid = useId();
  const reduce = useReducedMotion();

  const [plan, setPlan] = useState<PlanValue>("pro");
  const [billing, setBilling] = useState<BillingValue>("annual");
  const [freq, setFreq] = useState<FrequencyValue>("daily");
  const [accent, setAccent] = useState<AccentValue>("emerald");

  const activeAccent = ACCENTS.find((a) => a.value === accent) ?? ACCENTS[0];
  const activePlan = PLANS.find((p) => p.value === plan) ?? PLANS[0];
  const activeFreq = FREQUENCIES.find((f) => f.value === freq) ?? FREQUENCIES[0];

  const spring = reduce
    ? { duration: 0 }
    : { type: "spring" as const, bounce: 0.18, duration: 0.5 };

  return (
    <section className="relative w-full overflow-hidden bg-gradient-to-b from-white to-slate-50 px-6 py-16 text-slate-900 sm:py-24 dark:from-zinc-950 dark:to-zinc-900 dark:text-zinc-100">
      <style>{`
        @keyframes tglrs-rise {
          from { opacity: 0; transform: translateY(14px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .tglrs-rise { animation: tglrs-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
        @media (prefers-reduced-motion: reduce) {
          .tglrs-rise { animation: none !important; }
        }
      `}</style>

      <div className="mx-auto max-w-5xl">
        {/* header */}
        <div className="tglrs-rise mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/70 px-3 py-1 text-xs font-medium tracking-wide text-slate-500 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-400">
            <span className={`h-2 w-2 rounded-full ${activeAccent.dot}`} />
            Workspace setup
          </span>
          <h2 className="mt-5 text-3xl font-semibold tracking-tight sm:text-4xl">
            Configure your account
          </h2>
          <p className="mt-3 text-base leading-relaxed text-slate-500 dark:text-zinc-400">
            Four styled radio groups, one shared state. Pick a plan, a billing
            cycle, how often we email you, and an accent color.
          </p>
        </div>

        {/* ---- plan cards ---- */}
        <fieldset
          className="tglrs-rise mt-12"
          style={reduce ? undefined : { animationDelay: "60ms" }}
        >
          <legend className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
            Plan
          </legend>
          <div className="grid gap-4 sm:grid-cols-3">
            {PLANS.map((p) => {
              const price = billing === "annual" ? p.annual : p.monthly;
              const name = `${uid}-plan`;
              return (
                <label
                  key={p.value}
                  className="group relative block h-full cursor-pointer"
                >
                  <input
                    type="radio"
                    name={name}
                    value={p.value}
                    checked={plan === p.value}
                    onChange={() => setPlan(p.value)}
                    className="sr-only"
                  />
                  <span className="flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm ring-offset-white transition-all duration-200 hover:border-slate-300 hover:shadow-md group-has-[:checked]:border-indigo-500 group-has-[:checked]:shadow-md group-has-[:checked]:ring-2 group-has-[:checked]:ring-indigo-500 group-has-[:focus-visible]:ring-2 group-has-[:focus-visible]:ring-indigo-500 group-has-[:focus-visible]:ring-offset-2 dark:border-zinc-800 dark:bg-zinc-900 dark:ring-offset-zinc-950 dark:hover:border-zinc-700">
                    <span className="flex items-center justify-between">
                      <span className="flex items-center gap-2 text-base font-semibold">
                        {p.name}
                        {"popular" in p && p.popular ? (
                          <span className="rounded-full bg-indigo-50 px-2 py-0.5 text-[11px] font-semibold text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-300">
                            Popular
                          </span>
                        ) : null}
                      </span>
                      <span className="grid h-5 w-5 place-items-center rounded-full border-2 border-slate-300 transition-colors group-has-[:checked]:border-indigo-500 dark:border-zinc-600">
                        <span className="h-2.5 w-2.5 scale-0 rounded-full bg-indigo-500 transition-transform duration-200 group-has-[:checked]:scale-100" />
                      </span>
                    </span>

                    <span className="mt-1 text-sm text-slate-500 dark:text-zinc-400">
                      {p.tagline}
                    </span>

                    <span className="mt-4 flex items-baseline gap-1">
                      <span className="text-3xl font-bold tracking-tight">
                        ${price}
                      </span>
                      <span className="text-sm text-slate-400 dark:text-zinc-500">
                        /mo
                      </span>
                    </span>
                    <span className="mt-0.5 h-4 text-xs text-slate-400 dark:text-zinc-500">
                      {billing === "annual" ? "billed annually" : ""}
                    </span>

                    <span className="mt-4 flex flex-col gap-2 border-t border-slate-100 pt-4 dark:border-zinc-800">
                      {p.features.map((f) => (
                        <span
                          key={f}
                          className="flex items-center gap-2 text-sm text-slate-600 dark:text-zinc-300"
                        >
                          <CheckIcon className="h-4 w-4 shrink-0 text-indigo-500" />
                          {f}
                        </span>
                      ))}
                    </span>
                  </span>
                </label>
              );
            })}
          </div>
        </fieldset>

        {/* ---- billing + frequency ---- */}
        <div className="mt-8 grid gap-8 md:grid-cols-2">
          {/* billing segmented control */}
          <fieldset
            className="tglrs-rise"
            style={reduce ? undefined : { animationDelay: "120ms" }}
          >
            <legend className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
              Billing cycle
            </legend>
            <div className="flex rounded-xl border border-slate-200 bg-slate-100 p-1 dark:border-zinc-800 dark:bg-zinc-800/60">
              {BILLING.map((b) => {
                const name = `${uid}-billing`;
                const selected = billing === b.value;
                return (
                  <label
                    key={b.value}
                    className="group relative flex-1 cursor-pointer"
                  >
                    <input
                      type="radio"
                      name={name}
                      value={b.value}
                      checked={selected}
                      onChange={() => setBilling(b.value)}
                      className="sr-only"
                    />
                    {selected ? (
                      reduce ? (
                        <span className="absolute inset-0 rounded-lg bg-white shadow-sm dark:bg-zinc-700" />
                      ) : (
                        <motion.span
                          layoutId={`${uid}-billing-indicator`}
                          transition={spring}
                          className="absolute inset-0 rounded-lg bg-white shadow-sm dark:bg-zinc-700"
                        />
                      )
                    ) : null}
                    <span className="relative z-10 flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium text-slate-500 transition-colors group-has-[:checked]:text-slate-900 group-has-[:focus-visible]:ring-2 group-has-[:focus-visible]:ring-indigo-500 dark:text-zinc-400 dark:group-has-[:checked]:text-white">
                      {b.label}
                      {b.value === "annual" ? (
                        <span className="rounded-full bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300">
                          −20%
                        </span>
                      ) : null}
                    </span>
                  </label>
                );
              })}
            </div>
            <p className="mt-3 text-xs text-slate-400 dark:text-zinc-500">
              {billing === "annual"
                ? "Two months free versus paying month to month."
                : "Switch to annual any time and save 20%."}
            </p>
          </fieldset>

          {/* frequency list */}
          <fieldset
            className="tglrs-rise"
            style={reduce ? undefined : { animationDelay: "180ms" }}
          >
            <legend className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
              Email frequency
            </legend>
            <div className="flex flex-col gap-2">
              {FREQUENCIES.map((f) => {
                const name = `${uid}-freq`;
                return (
                  <label
                    key={f.value}
                    className="group relative block cursor-pointer"
                  >
                    <input
                      type="radio"
                      name={name}
                      value={f.value}
                      checked={freq === f.value}
                      onChange={() => setFreq(f.value)}
                      className="sr-only"
                    />
                    <span className="flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 ring-offset-white transition-all duration-200 hover:border-slate-300 group-has-[:checked]:border-indigo-500 group-has-[:checked]:bg-indigo-50/40 group-has-[:focus-visible]:ring-2 group-has-[:focus-visible]:ring-indigo-500 group-has-[:focus-visible]:ring-offset-2 dark:border-zinc-800 dark:bg-zinc-900 dark:ring-offset-zinc-950 dark:hover:border-zinc-700 dark:group-has-[:checked]:bg-indigo-500/10">
                      <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-slate-100 text-slate-500 transition-colors group-has-[:checked]:bg-indigo-100 group-has-[:checked]:text-indigo-600 dark:bg-zinc-800 dark:text-zinc-400 dark:group-has-[:checked]:bg-indigo-500/20 dark:group-has-[:checked]:text-indigo-300">
                        <FreqIcon name={f.icon} className="h-5 w-5" />
                      </span>
                      <span className="min-w-0 flex-1">
                        <span className="block text-sm font-medium text-slate-800 dark:text-zinc-100">
                          {f.title}
                        </span>
                        <span className="block truncate text-xs text-slate-500 dark:text-zinc-400">
                          {f.desc}
                        </span>
                      </span>
                      <span className="grid h-5 w-5 shrink-0 place-items-center rounded-full border-2 border-slate-300 transition-colors group-has-[:checked]:border-indigo-500 dark:border-zinc-600">
                        <span className="h-2.5 w-2.5 scale-0 rounded-full bg-indigo-500 transition-transform duration-200 group-has-[:checked]:scale-100" />
                      </span>
                    </span>
                  </label>
                );
              })}
            </div>
          </fieldset>
        </div>

        {/* ---- accent swatches ---- */}
        <fieldset
          className="tglrs-rise mt-8"
          style={reduce ? undefined : { animationDelay: "240ms" }}
        >
          <legend className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
            Accent color
          </legend>
          <div className="flex flex-wrap items-center gap-3">
            {ACCENTS.map((a) => {
              const name = `${uid}-accent`;
              return (
                <label key={a.value} className="group cursor-pointer" title={a.label}>
                  <input
                    type="radio"
                    name={name}
                    value={a.value}
                    checked={accent === a.value}
                    onChange={() => setAccent(a.value)}
                    className="sr-only"
                  />
                  <span
                    className={`grid h-10 w-10 place-items-center rounded-full ${a.dot} ring-2 ring-transparent ring-offset-2 ring-offset-slate-50 transition-transform duration-200 hover:scale-105 group-has-[:checked]:scale-105 ${a.ring} group-has-[:focus-visible]:scale-105 dark:ring-offset-zinc-900`}
                  >
                    <CheckIcon className="h-5 w-5 text-white opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100" />
                    <span className="sr-only">{a.label}</span>
                  </span>
                </label>
              );
            })}
          </div>
        </fieldset>

        {/* ---- live summary ---- */}
        <div
          aria-live="polite"
          className="tglrs-rise mt-10 rounded-2xl border border-slate-200 bg-white/60 p-5 text-sm leading-relaxed text-slate-600 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/60 dark:text-zinc-300"
          style={reduce ? undefined : { animationDelay: "300ms" }}
        >
          You picked the{" "}
          <span className="font-semibold text-slate-900 dark:text-white">
            {activePlan.name}
          </span>{" "}
          plan billed{" "}
          <span className="font-semibold text-slate-900 dark:text-white">
            {billing === "annual" ? "annually" : "monthly"}
          </span>
          , with{" "}
          <span className="font-semibold text-slate-900 dark:text-white">
            {activeFreq.title.toLowerCase()}
          </span>{" "}
          emails and an{" "}
          <span className={`font-semibold ${activeAccent.text}`}>
            {activeAccent.label.toLowerCase()}
          </span>{" "}
          accent —{" "}
          <span className="font-semibold text-slate-900 dark:text-white">
            ${billing === "annual" ? activePlan.annual : activePlan.monthly}/mo
          </span>
          .
        </div>
      </div>
    </section>
  );
}