import Link from 'next/link'

export default function CancelPage() {
  return (
    <main className="min-h-screen bg-gradient-to-b from-slate-50 to-white flex items-center justify-center px-4">
      <div className="max-w-md w-full text-center">
        {/* Cancel Icon */}
        <div className="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto">
          <svg
            className="w-10 h-10 text-slate-400"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </div>

        {/* Message */}
        <h1 className="mt-6 text-3xl font-bold text-slate-900">
          Vorgang abgebrochen
        </h1>
        <p className="mt-4 text-lg text-slate-600">
          Sie haben den Checkout-Vorgang abgebrochen.
          Keine Sorge - es wurden keine Daten gespeichert.
        </p>

        {/* Options */}
        <div className="mt-8 space-y-4">
          <Link
            href="/#pricing"
            className="block w-full bg-primary-600 text-white px-8 py-3 rounded-xl font-medium hover:bg-primary-700 transition-all btn-press"
          >
            Zurueck zur Planauswahl
          </Link>

          <Link
            href="/"
            className="block w-full bg-slate-100 text-slate-900 px-8 py-3 rounded-xl font-medium hover:bg-slate-200 transition-all"
          >
            Zur Startseite
          </Link>
        </div>

        {/* FAQ Link */}
        <div className="mt-8 p-6 bg-slate-50 rounded-xl">
          <h3 className="font-medium text-slate-900">Haben Sie Fragen?</h3>
          <p className="mt-2 text-sm text-slate-600">
            Wenn Sie unsicher sind, welcher Plan der richtige fuer Sie ist,
            helfen wir Ihnen gerne weiter.
          </p>
          <a
            href="mailto:support@breakpilot.de"
            className="mt-3 inline-block text-primary-600 hover:underline text-sm font-medium"
          >
            support@breakpilot.de
          </a>
        </div>
      </div>
    </main>
  )
}