import React, { useState } from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Card } from '../components/ui/card';
import { ChevronDown, ExternalLink, Phone, Mail, MapPin } from 'lucide-react';

import { FaFlag, FaHeartbeat, FaUtensils } from "react-icons/fa";
const Resources = () => {
  const [openAccordions, setOpenAccordions] = useState({});

  const toggleAccordion = (categoryIndex, resourceIndex) => {
    const key = `${categoryIndex}-${resourceIndex}`;
    setOpenAccordions(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  const isOpen = (categoryIndex, resourceIndex) => {
    const key = `${categoryIndex}-${resourceIndex}`;
    return openAccordions[key] || false;
  };

  const categories = [
    {
      title: 'General LGBTQ+',
      icon: <FaFlag />,
      resources: [
        {
          name: 'SPRY (Seniors Preparing for Rainbow Years)',
          description: 'Social and recreational activities, health and wellness education plus drop-in center',
          location: 'Law Harrington Senior Center, 2222 Cleburne St, Houston, TX 77004',
          contact: 'Fred Reninger',
          phone: '(713) 485-5056',
          email: '[email protected]',
          link: 'https://montrosecenter.org/services/seniors/'
        },
        {
          name: 'SAGE - Advocacy and Services for LGBTQ Elders',
          description: 'SageCents program offering financial management assistance in retirement',
          link: 'https://www.sageusa.org/'
        },
        {
          name: 'Houston LGBTQ+ Chamber of Commerce',
          description: 'Member directory to support inclusive businesses advocating for LGBTQ+ community',
          link: 'https://www.houstonlgbtchamber.com'
        },
        {
          name: 'AARP',
          description: 'News, finance, wellness topics for lesbian, gay, bisexual, transgender, queer community',
          link: 'https://www.aarp.org/home-family/voices/lgbtq/'
        }
      ]
    },
    {
      title: 'Healthcare',
      icon: <FaHeartbeat />,
      resources: [
        {
          name: 'LHI (Lesbian Health Initiative)',
          description: 'Eliminates healthcare barriers, helps find LGBTQ+ friendly providers and insurance assistance',
          link: 'https://montrosecenter.org/services/gender-services/lhi/'
        },
        {
          name: 'Legacy Community Health',
          description: 'Full-service healthcare system with 50+ Texas Gulf Coast locations offering primary care, pediatrics, behavioral health, HIV/AIDS care, dental, vision services',
          link: 'https://www.legacycommunityhealth.org/'
        }
      ]
    },
    {
      title: 'Food Assistance',
      icon: <FaUtensils />,
      resources: [
        {
          name: 'Meals on Wheels',
          description: 'Home-delivered meals for seniors',
          link: 'https://www.mealsonwheelsamerica.org/find-meals'
        },
        {
          name: 'Senior Services (United Way)',
          description: 'Referral services for senior assistance programs',
          link: 'https://referral.unitedwayhouston.org/'
        },
        {
          name: 'Food Pantries',
          description: 'Directory of food pantries in the Houston area',
          link: 'https://referral.unitedwayhouston.org/MatchList.aspx?k;;0;;N;0;2448611;Food%20Pantries;Food%20Pantries;Partial'
        },
        {
          name: '211 Texas/United Way Helpline',
          description: 'Free, confidential helpline for utility, rent, housing, benefits, food, childcare assistance',
          link: 'https://unitedwayhouston.org/what-we-do/211-texas-united-way-helpline/'
        }
      ]
    }
  ];

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

      <main className="bg-gradient-to-b from-white via-[#f1eef9] to-[#e8e0f5] px-6 py-16">
        {/* Header Section */}
        <section className="max-w-7xl mx-auto mb-12">
          <h1 className="text-[28px] font-bold text-[#48286e] text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
            Tap or click on each purple tab below to open and read its contents
          </h1>

        </section>

        {/* Resources Grid */}
        <section className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
            {categories.map((category, categoryIndex) => (
              <div key={categoryIndex} className="space-y-6">
                {/* Category Title */}
                <div className="flex justify-center text-4xl text-[#664ea2]">{category.icon}</div>
                <h2 className="text-[32px] leading-6 font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
                  {category.title}
                </h2>

                {/* Resources Accordions */}
                <div className="space-y-4">
                  {category.resources.map((resource, resourceIndex) => {
                    const isExpanded = isOpen(categoryIndex, resourceIndex);

                    return (
                      <div key={resourceIndex} className="overflow-hidden ">
                        {/* Accordion Button */}
                        <button
                          onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
                          className={`w-full bg-gradient-to-tr from-[#48286E] to-[#664FA3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`

                          }
                        >
                          <span className="text-lg font-semibold text-left" style={{ fontFamily: "'Inter', sans-serif" }}>
                            {resource.name}
                          </span>
                          <ChevronDown
                            className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300 
                              ${isExpanded ? 'rotate-180' : ''}`}
                          />
                        </button>

                        {/* Accordion Content */}
                        <div
                          className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
                            }`}
                        >
                          <Card className="p-6 bg-white rounded-b-2xl rounded-t-none border-none ">
                            {/* Description */}
                            <p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                              {resource.description}
                            </p>

                            {/* Additional Details */}
                            <div className="space-y-3">
                              {/* Location */}
                              {resource.location && (
                                <div className="flex items-start gap-2 text-[#664fa3]">
                                  <MapPin className="h-5 w-5 flex-shrink-0 mt-0.5" />
                                  <span className="text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                    {resource.location}
                                  </span>
                                </div>
                              )}

                              {/* Contact */}
                              {resource.contact && (
                                <div className="text-[#664fa3]">
                                  <p className="text-sm font-medium mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                                    Contact: {resource.contact}
                                  </p>
                                  <div className="flex flex-col gap-1 ml-0">
                                    {resource.phone && (
                                      <div className="flex items-center gap-2">
                                        <Phone className="size-4" />
                                        <a
                                          href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
                                          className="text-sm hover:text-[#48286e] transition-colors"
                                          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                        >
                                          {resource.phone}
                                        </a>
                                      </div>
                                    )}
                                    {resource.email && (
                                      <div className="flex items-center gap-2">
                                        <Mail className="h-4 w-4" />
                                        <a
                                          href={`mailto:${resource.email}`}
                                          className="text-sm hover:text-[#48286e] transition-colors"
                                          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                        >
                                          {resource.email}
                                        </a>
                                      </div>
                                    )}
                                  </div>
                                </div>
                              )}

                              {/* Website Link */}
                              {resource.link && (
                                <a
                                  href={resource.link}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="inline-flex items-center gap-2 text-[#ff9e77] hover:text-[#e88a63] font-medium transition-colors mt-2"
                                  style={{ fontFamily: "'Inter', sans-serif" }}
                                >
                                  Visit Website
                                  <ExternalLink className="h-4 w-4" />
                                </a>
                              )}
                            </div>
                          </Card>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Additional Help Section */}
        <section className="max-w-4xl mx-auto mt-16">
          <Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-xl text-center">
            <h3 className="text-2xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              Need Additional Support?
            </h3>
            <p className="text-white text-lg mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              If you need help finding resources or have questions about the services listed above, please don't hesitate to reach out.
            </p>
            <a
              href="mailto:support@loaf.org"
              className="inline-block bg-white text-[#48286e] px-8 py-3 rounded-full font-semibold hover:bg-[#f1eef9] transition-colors shadow-lg"
              style={{ fontFamily: "'Inter', sans-serif" }}
            >
              Contact Us
            </a>
          </Card>
        </section>
      </main>

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

export default Resources;