import React from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Button } from '../components/ui/button';
import { Card } from '../components/ui/card';
import { CreditCard, Mail } from 'lucide-react';

const Donate = () => {
  const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;
  const zelleLogo = `${process.env.PUBLIC_URL}/zelle-logo.png`;

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

      <main className="bg-gradient-to-b from-white to-[#f1eef9] px-16 py-12">
        {/* Hero Section */}
        <section className="py-12">
          <div className="max-w-4xl mx-auto text-center">
            <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>
            <h1 className="text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
              Donate
            </h1>
            <p className="text-xl text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              We really appreciate your donations. You can make your donation online
              or send a check by mail.
            </p>
          </div>
        </section>

        {/* Donation Amount Buttons */}
        <section className="py-12">
          <div className="max-w-4xl mx-auto">
            <Card className="p-8 bg-white rounded-2xl shadow-lg">
              <div className="flex items-center gap-4 mb-6">
                <CreditCard className="w-12 h-12 text-[#664fa3]" />
                <h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Select Your Donation Amount
                </h2>
              </div>

              {/* Donation Buttons Grid */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                {[25, 50, 100, 250].map(amount => (
                  <Button key={amount}
                    className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full"
                    disabled>
                    ${amount}
                  </Button>
                ))}
              </div>

              {/* Custom Amount Button */}
              <Button className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full"
                disabled>
                Donate Any Amount
              </Button>

              <p className="text-sm text-[#48286e] text-center mt-4 opacity-75" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Online donations coming soon
              </p>
            </Card>
          </div>
        </section>

        {/* Alternative Payment Methods */}
        <section className="py-12">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {/* Mail Check */}
              <Card className="p-8 bg-white rounded-2xl shadow-lg">
                <Mail className="w-12 h-12 text-[#664fa3] mb-4" />
                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Mail a Check
                </h3>
                <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  Our mailing address for checks:<br />
                  <span className="font-semibold">LOAF</span><br />
                  P.O. Box 7207<br />
                  Houston, Texas 77248-7207
                </p>
              </Card>

              {/* Zelle */}
              <Card className="p-8 bg-white rounded-2xl shadow-lg">
                <div className="mb-4">
                  <img src={zelleLogo} alt="Zelle" className="h-32" onError={(e) => e.target.style.display = 'none'} />
                </div>
                <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Pay with Zelle
                </h3>
                <p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  If your bank allows the use of Zelle, please feel free to send money to:
                </p>
                <a href="mailto:LOAFHoustonTX@gmail.com"
                  className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  LOAFHoustonTX@gmail.com
                </a>
              </Card>
            </div>
          </div>
        </section>
      </main>

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

export default Donate;