'use client'

import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Heart, ArrowLeft, CheckCircle } from 'lucide-react'
import { Logo } from '@/components/ui/logo'

export default function DankePage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="border-b border-gray-100 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center gap-2">
              <Logo size={36} />
              <span className="font-bold text-xl text-gray-900">Lageplan</span>
            </Link>
          </div>
        </div>
      </nav>

      <div className="max-w-2xl mx-auto px-4 py-20 text-center">
        <div className="w-24 h-24 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-8">
          <CheckCircle className="w-12 h-12 text-green-600" />
        </div>

        <h1 className="text-4xl font-extrabold text-gray-900 mb-4">
          Vielen Dank!
        </h1>

        <p className="text-xl text-gray-500 mb-2">
          Deine Spende ist angekommen.
        </p>
        <p className="text-gray-400 mb-10 max-w-md mx-auto">
          Dein Beitrag hilft direkt dabei, Lageplan weiterzuentwickeln und die Server am Laufen zu halten.
          Danke, dass du dieses Projekt unterstützt!
        </p>

        <div className="bg-red-50 rounded-2xl p-8 border border-red-100 mb-10">
          <Heart className="w-8 h-8 text-red-500 mx-auto mb-3" />
          <p className="text-gray-700 font-medium">
            &laquo;Jede Spende motiviert mich, weiterzumachen. Danke von Herzen!&raquo;
          </p>
          <p className="text-sm text-gray-500 mt-2">— Pepe Ziberi, Entwickler von Lageplan</p>
        </div>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Link href="/">
            <Button variant="outline" size="lg">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Zur Startseite
            </Button>
          </Link>
          <Link href="/app">
            <Button size="lg" className="bg-red-600 hover:bg-red-700">
              Zur App
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
