import Link from "next/link";

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

      <p className="text-gray-600">
        Your Xero organisation is now linked. We can now automatically
        create invoices and mark them as paid when Stripe payments succeed.
      </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">
          <span className="text-green-600">✔</span>
          <span>Xero connected</span>
        </li>
      </ol>

      {/* Primary CTA */}
      <div className="pt-6 border-t">
        <Link
          href="/app"
          className="inline-block rounded bg-black text-white px-5 py-3"
        >
          Go to dashboard →
        </Link>
      </div>
    </main>
  );
}