import React from 'react';
import { useNavigate } from 'react-router-dom';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter-kc';
import { Card } from '../components/ui/card';
import { Button } from '../components/ui/button';
import { CheckCircle, Heart } from 'lucide-react';

const DonationSuccess = () => {
  const navigate = useNavigate();
  const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;

  return (
    <div className="min-h-screen bg-white">
      <PublicNavbar />

      <main className="bg-gradient-to-b from-white to-[#f1eef9] px-6 py-20">
        <div className="max-w-2xl mx-auto">
          <Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-xl text-center">
            {/* Success Icon */}
            <div className="flex justify-center mb-4">
              <img
                src={loafHearts}
                alt="Hearts"
                className="w-32 h-auto"
                onError={(e) => e.target.style.display = 'none'}
              />
            </div>
            <div className="inline-flex items-center justify-center w-20 h-20 bg-[#81B29A]/10 rounded-full mb-6">
              <CheckCircle className="h-12 w-12 text-[#81B29A]" />
            </div>

            {/* Title */}
            <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Thank You for Your Donation!
            </h1>

            {/* Message */}
            <div className="space-y-4 mb-8">
              <p className="text-xl text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Your generous contribution helps support our community and continue our mission.
              </p>

              <div className="bg-gradient-to-r from-[#f1eef9] to-[#DDD8EB]/30 rounded-2xl p-6 border-2 border-[#ddd8eb]">
                <div className="flex items-center justify-center gap-2 text-[#ff9e77] mb-2">
                  <Heart className="h-6 w-6" />
                  <span className="text-lg font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                    Your Support Makes a Difference
                  </span>
                </div>
                <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  A receipt for your donation has been sent to your email address.
                </p>
              </div>

              <p className="text-base text-[#664fa3] pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                We deeply appreciate your support and commitment to LOAF's mission of building a vibrant, inclusive community.
              </p>
            </div>

            {/* Actions */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                onClick={() => navigate('/')}
                className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
                style={{ fontFamily: "'Inter', sans-serif" }}
              >
                Return to Home
              </Button>
              <Button
                onClick={() => navigate('/donate')}
                variant="outline"
                className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#DDD8EB]/20 rounded-full px-8 py-6 text-lg font-medium"
                style={{ fontFamily: "'Inter', sans-serif" }}
              >
                Make Another Donation
              </Button>
            </div>
          </Card>

          {/* Additional Info */}
          <div className="mt-12 text-center">
            <p className="text-sm text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Have questions about your donation?
            </p>
            <a
              href="mailto:support@loaf.org"
              className="text-[#ff9e77] hover:text-[#664fa3] font-medium transition-colors"
              style={{ fontFamily: "'Inter', sans-serif" }}
            >
              Contact us at support@loaf.org
            </a>
          </div>
        </div>
      </main>

      <PublicFooter />
    </div>
  );
};

export default DonationSuccess;