import { AppShell } from "../../../components/app-shell";

const plans = [
  {
    name: "Free",
    price: "$0",
    cadence: "forever",
    highlight: "Connect up to 2 accounts",
    features: [
      "2 connected accounts",
      "30-day transaction history",
      "Basic exports",
      "Email support"
    ]
  },
  {
    name: "Pro Monthly",
    price: "$9",
    cadence: "per month",
    highlight: "Unlimited connected accounts",
    features: [
      "Unlimited accounts",
      "12-month history",
      "Advanced exports + rules",
      "Priority support"
    ]
  },
  {
    name: "Pro Annual",
    price: "$90",
    cadence: "per year",
    highlight: "Two months free",
    features: [
      "Unlimited accounts",
      "12-month history",
      "Advanced exports + rules",
      "Priority support"
    ]
  }
];

export default function SubscriptionPage() {
  return (
    <AppShell title="Subscription" subtitle="Choose a plan that fits your team.">
      <div className="app-card p-6">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <p className="text-xs uppercase tracking-[0.3em] text-muted">Current plan</p>
            <h2 className="mt-2 text-2xl font-semibold">Free Plan</h2>
            <p className="mt-2 text-sm text-muted">
              Free includes up to two connected accounts. Upgrade any time to unlock
              unlimited accounts and advanced automation.
            </p>
          </div>
          <button
            type="button"
            className="app-button rounded-full px-5 py-2 text-xs font-semibold"
          >
            Start free trial
          </button>
        </div>
      </div>

      <div className="mt-6 grid gap-4 lg:grid-cols-3">
        {plans.map((plan) => (
          <div key={plan.name} className="app-card p-6">
            <p className="text-xs uppercase tracking-[0.3em] text-muted">{plan.name}</p>
            <div className="mt-3 flex items-baseline gap-2">
              <span className="text-3xl font-semibold">{plan.price}</span>
              <span className="text-xs text-muted">{plan.cadence}</span>
            </div>
            <p className="mt-2 text-sm text-muted">{plan.highlight}</p>
            <ul className="mt-4 space-y-2 text-xs text-muted">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2">
                  <span className="h-2 w-2 rounded-full bg-emerald-400" />
                  {feature}
                </li>
              ))}
            </ul>
            <button
              type="button"
              className="mt-6 w-full rounded-full border border-ink/10 bg-white/5 px-4 py-2 text-xs font-semibold text-ink"
            >
              {plan.name === "Free" ? "Current plan" : "Upgrade"}
            </button>
          </div>
        ))}
      </div>
    </AppShell>
  );
}