"use client";

import { useState } from "react";

export function TogglePricing() {
  const [annual, setAnnual] = useState(true);

  const plans = [
    {
      name: "Solo",
      monthly: 12,
      desc: "For one builder, all the essentials.",
      features: ["Core component set", "1 visual system", "Email support"],
    },
    {
      name: "Studio",
      monthly: 29,
      desc: "For teams shipping every week.",
      features: ["All components", "All visual systems", "Priority support", "Figma files"],
      featured: true,
    },
  ];

  return (
    <section className="bg-[#F4F3EF] px-8 py-20 text-[#111111]">
      <div className="mx-auto max-w-3xl">
        <div className="mb-10 flex flex-col items-center gap-5">
          <h2
            className="text-center leading-[1] tracking-[-0.01em]"
            style={{
              fontFamily: "'Instrument Serif', Georgia, serif",
              fontSize: "clamp(30px, 4.4vw, 46px)",
            }}
          >
            Simple, honest pricing
          </h2>

          <div className="flex items-center gap-3 rounded-full border border-[#1111111A] bg-[#FAFAF8] p-1">
            <button
              type="button"
              onClick={() => setAnnual(false)}
              className={`rounded-full px-4 py-1.5 text-[13px] transition-colors ${
                !annual ? "bg-[#111111] text-[#FAFAF8]" : "text-[#6B6B66]"
              }`}
            >
              Monthly
            </button>
            <button
              type="button"
              onClick={() => setAnnual(true)}
              className={`rounded-full px-4 py-1.5 text-[13px] transition-colors ${
                annual ? "bg-[#111111] text-[#FAFAF8]" : "text-[#6B6B66]"
              }`}
            >
              Annual
              <span className="ml-1.5 text-[#2A3D2F]">−20%</span>
            </button>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {plans.map((p) => {
            const price = annual ? Math.round(p.monthly * 0.8) : p.monthly;
            return (
              <div
                key={p.name}
                className={`flex flex-col rounded-2xl border p-7 ${
                  p.featured
                    ? "border-[#2A3D2F] bg-[#FAFAF8] shadow-[0_24px_50px_-30px_rgba(42,61,47,0.6)]"
                    : "border-[#1111111A] bg-[#FAFAF8]"
                }`}
              >
                <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-[#6B6B66]">
                  {p.name}
                </span>
                <div className="mt-3 flex items-baseline gap-1">
                  <span className="text-[14px] text-[#6B6B66]">$</span>
                  <span
                    className="text-[52px] leading-none tracking-[-0.02em] tabular-nums"
                    style={{ fontFamily: "'Instrument Serif', Georgia, serif" }}
                  >
                    {price}
                  </span>
                  <span className="ml-1 font-mono text-[11px] text-[#6B6B66]">
                    /mo
                  </span>
                </div>
                <p className="mt-2 text-[13px] text-[#6B6B66]">{p.desc}</p>
                <ul className="mt-5 flex flex-1 flex-col gap-2.5">
                  {p.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5 text-[13.5px]">
                      <span className="text-[#2A3D2F]">✓</span>
                      {f}
                    </li>
                  ))}
                </ul>
                <button
                  type="button"
                  className={`mt-6 w-full rounded-full py-3 text-[14px] font-medium transition-colors ${
                    p.featured
                      ? "bg-[#2A3D2F] text-[#FAFAF8] hover:bg-[#111111]"
                      : "border border-[#111111] hover:bg-[#111111] hover:text-[#FAFAF8]"
                  }`}
                >
                  Choose {p.name}
                </button>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Toggle Pricing

Simple, honest pricing
