import Link from "next/link";

export default function StripeSuccessPage() {
  return (
    <main className="max-w-2xl mx-auto p-8 space-y-10">
      <h1 className="text-2xl font-semibold">
        Stripe connected 🎉
      </h1>

      <p className="text-gray-600">
        Your Stripe account is now linked. We can now detect successful
        payments and automatically reconcile invoices in Xero.
      </p>

      {/* Progress */}
      <ol className="space-y-4">
        <li className="flex items-center gap-3">
          <span className="text-green-600">✔</span>
          <span>Logged in</span>
        </li>

        <li className="flex items-center gap-3">
          <span className="text-green-600">✔</span>
          <span>Stripe connected</span>
        </li>

        <li className="flex items-center gap-3 text-blue-600">
          <span>→</span>
          <span className="font-medium">Connect Xero</span>
        </li>
      </ol>

      {/* Primary CTA */}
      <div className="pt-6 border-t">
        <Link
          href="/connect/xero"
          className="inline-block rounded bg-black text-white px-5 py-3"
        >
          Continue → Connect Xero
        </Link>
      </div>
    </main>
  );
}