import React from 'react';
import Link from 'next/link';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Donate | Louisiana Association of the Deaf',
  description: 'Support the Louisiana Association of the Deaf through donations. Your contribution helps us serve the Deaf community across Louisiana.',
};

export default function DonatePage() {
  return (
    <div className="bg-color-bg">
      {/* Hero section */}
      <section className="py-16 bg-color-bg-secondary">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="hero-title text-4xl md:text-5xl font-bold mb-6">Support Our Mission</h1>
            <p className="hero-subtitle text-xl">
              Your donations help us continue to serve and support the Deaf community across Louisiana.
            </p>
          </div>
        </div>
      </section>

      {/* Zeffy Donation Widget - placeholder */}
      <section className="py-16 bg-color-bg">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h2 className="section-heading text-3xl font-bold mb-8 text-center">Make a Donation</h2>
            <div className="card video-container-gold shadow-md rounded-lg overflow-hidden">
              {/* Placeholder for Zeffy widget */}
              <div className="p-8 text-center">
                <div className="video-container p-12 rounded-lg mb-6">
                  <p className="video-placeholder-text text-lg">
                    Zeffy donation widget will be embedded here.
                  </p>
                </div>
                <p className="section-text">
                  Donations are processed securely through Zeffy, a platform for nonprofit organizations.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Ways to Give */}
      <section className="py-16 bg-color-bg-secondary">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-3xl font-bold mb-12 text-center">Ways to Give</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <div className="card event-card-gold-border p-6">
              <div className="text-center mb-6">
                <h3 className="benefit-card-title event-card-title-gold text-2xl font-bold mb-2">One-Time Donation</h3>
              </div>
              <p className="benefit-card-description mb-6">
                Make a one-time donation to support our programs and events. Every contribution, big or small, makes a difference in our community.
              </p>
              <div className="text-center mt-auto">
                <a href="#donation-form" className="btn-primary inline-block px-8 py-3 rounded-lg">
                  Donate Now
                </a>
              </div>
            </div>
            <div className="card event-card-gold-border p-6 border-primary">
              <div className="text-center mb-6">
                <span className="inline-block featured-badge px-3 py-1 rounded-full text-sm font-medium mb-2">Most Impactful</span>
                <h3 className="benefit-card-title event-card-title-gold text-2xl font-bold mb-2">Monthly Giving</h3>
              </div>
              <p className="benefit-card-description mb-6">
                Join our sustaining donors by setting up a monthly donation. This provides reliable support for our ongoing programs and operations.
              </p>
              <div className="text-center mt-auto">
                <a href="#donation-form" className="btn-primary inline-block px-8 py-3 rounded-lg">
                  Donate Monthly
                </a>
              </div>
            </div>
            <div className="card event-card-gold-border p-6">
              <div className="text-center mb-6">
                <h3 className="benefit-card-title event-card-title-gold text-2xl font-bold mb-2">In-Kind Donations</h3>
              </div>
              <p className="benefit-card-description mb-6">
                Donate goods, services, or equipment to support our operations. Contact us to discuss your in-kind donation.
              </p>
              <div className="text-center mt-auto">
                <Link href="/contact" className="btn-primary inline-block px-8 py-3 rounded-lg">
                  Contact Us
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Impact */}
      <section className="py-16 bg-color-bg">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-3xl font-bold mb-12 text-center">Your Impact</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
            <div>
              <h3 className="card-title text-2xl font-bold mb-6">How Your Donation Helps</h3>
              <ul className="space-y-4">
                <li className="flex items-start">
                  <span className="card-date font-bold mr-3">•</span>
                  <p className="section-text">
                    <strong>Community Events:</strong> Funds community gatherings, social events, and cultural celebrations that bring our deaf community together.
                  </p>
                </li>
                <li className="flex items-start">
                  <span className="card-date font-bold mr-3">•</span>
                  <p className="section-text">
                    <strong>Educational Workshops:</strong> Supports ASL classes, interpreter training, and educational workshops for members and the broader community.
                  </p>
                </li>
                <li className="flex items-start">
                  <span className="card-date font-bold mr-3">•</span>
                  <p className="section-text">
                    <strong>Advocacy:</strong> Enables our work advocating for accessibility and deaf rights in local businesses, schools, and government.
                  </p>
                </li>
                <li className="flex items-start">
                  <span className="card-date font-bold mr-3">•</span>
                  <p className="section-text">
                    <strong>Youth Programs:</strong> Funds activities and mentorship opportunities for deaf and hard-of-hearing youth in our community.
                  </p>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="card-title text-2xl font-bold mb-6">Donation Allocation</h3>
              <div className="space-y-6">
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="section-text font-medium">Community Events</span>
                    <span className="section-text font-medium">40%</span>
                  </div>
                  <div className="w-full video-container rounded-full h-2.5">
                    <div className="bg-primary h-2.5 rounded-full" style={{ width: '40%' }}></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="section-text font-medium">Educational Programs</span>
                    <span className="section-text font-medium">30%</span>
                  </div>
                  <div className="w-full video-container rounded-full h-2.5">
                    <div className="bg-primary h-2.5 rounded-full" style={{ width: '30%' }}></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="section-text font-medium">Advocacy</span>
                    <span className="section-text font-medium">15%</span>
                  </div>
                  <div className="w-full video-container rounded-full h-2.5">
                    <div className="bg-primary h-2.5 rounded-full" style={{ width: '15%' }}></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="section-text font-medium">Youth Programs</span>
                    <span className="section-text font-medium">15%</span>
                  </div>
                  <div className="w-full video-container rounded-full h-2.5">
                    <div className="bg-primary h-2.5 rounded-full" style={{ width: '15%' }}></div>
                  </div>
                </div>
              </div>
              <p className="mt-4 card-date text-sm">
                Financial information and annual reports are available upon request.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Corporate Sponsorship */}
      <section className="py-16 bg-color-bg-secondary">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-3xl font-bold mb-8 text-center">Corporate Sponsorship</h2>
          <div className="max-w-3xl mx-auto text-center">
            <p className="section-text text-lg mb-8">
              We welcome partnerships with businesses and organizations that share our commitment to the deaf community. 
              Corporate sponsors receive recognition in our events, publications, and website.
            </p>
            <Link href="/contact" className="btn-primary inline-block px-8 py-3 rounded-lg">
              Become a Sponsor
            </Link>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-color-bg">
        <div className="container mx-auto px-4">
          <h2 className="section-heading text-3xl font-bold mb-12 text-center">Donation FAQs</h2>
          <div className="max-w-3xl mx-auto space-y-6">
            <div className="card event-card-gold-border p-6">
              <h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Is my donation tax-deductible?</h3>
              <p className="section-text">
                Yes, the Louisiana Association of the Deaf is a 501(c)(3) nonprofit organization. All donations are tax-deductible to the extent allowed by law.
              </p>
            </div>
            <div className="card event-card-gold-border p-6">
              <h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Can I specify how my donation is used?</h3>
              <p className="section-text">
                Yes, you can designate your donation for a specific program or project. Please include a note with your donation or contact us to discuss your preferences.
              </p>
            </div>
            <div className="card event-card-gold-border p-6">
              <h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Do you accept donations by check or mail?</h3>
              <p className="section-text">
                Yes, checks can be made payable to "Louisiana Association of the Deaf" and mailed to our office address. Please contact us for the current mailing address.
              </p>
            </div>
            <div className="card event-card-gold-border p-6">
              <h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Can I donate in memory or honor of someone?</h3>
              <p className="section-text">
                Absolutely. Memorial and honorary donations are a meaningful way to celebrate someone special. We can send a notification of your gift to the person or family you designate.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section id="donation-form" className="py-16 cta-section">
        <div className="container mx-auto px-4 text-center">
          <h2 className="cta-title text-3xl font-bold mb-4">Ready to Make a Difference?</h2>
          <p className="cta-description text-xl max-w-3xl mx-auto mb-8">
            Your support helps us continue our mission of serving the Deaf community across Louisiana.
          </p>
          <div className="card video-container-gold rounded-lg p-8 max-w-3xl mx-auto">
            <p className="section-text text-center mb-6">
              Zeffy donation widget integration will be placed here.
            </p>
            <div className="flex justify-center">
              <a 
                href="https://zeffy.com"
                target="_blank"
                rel="noopener noreferrer"
                className="cta-button-primary px-8 py-3 rounded-lg hero-button-gold-accent"
              >
                Donate via Zeffy
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}