import React, { useEffect, useRef, useState } from "react";
import {
  Mail,
  Menu,
  X,
  Leaf,
  Waves,
  Users,
  GraduationCap,
  HeartHandshake,
  ArrowRight,
  Facebook,
  Instagram,
  Globe,
  ShieldCheck,
} from "lucide-react";

/**
 * IDA Maldives – Single-Page Website (React)
 *
 * ✅ TailwindCSS utility classes
 * ✅ Mobile-friendly, accessible navigation with focus restore & Esc to close
 * ✅ Sections: Home, About, Programs, Impact, Get Involved, News, Contact
 * ✅ Contact form via mailto: (GET). Swap to Formspree/back end later.
 */

const navItems = [
  { id: "home", label: "Home" },
  { id: "about", label: "About" },
  { id: "programs", label: "Programs" },
  { id: "impact", label: "Impact" },
  { id: "get-involved", label: "Get Involved" },
  { id: "news", label: "News" },
  { id: "contact", label: "Contact" },
] as const;

function SkipLink() {
  return (
    <a
      href="#main"
      className="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-[100] rounded-lg bg-teal-700 px-4 py-2 text-white shadow"
    >
      Skip to main content
    </a>
  );
}

function MobileMenu({
  open,
  onClose,
  triggerRef,
}: {
  open: boolean;
  onClose: () => void;
  triggerRef: React.RefObject<HTMLButtonElement>;
}) {
  const panelRef = useRef<HTMLDivElement>(null);

  // Close on Esc & click outside (backdrop)
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  // Focus first link when opening; restore to trigger when closing
  useEffect(() => {
    if (open) {
      const firstLink = panelRef.current?.querySelector<HTMLAnchorElement>("a, button");
      firstLink?.focus();
    } else {
      triggerRef.current?.focus();
    }
  }, [open, triggerRef]);

  if (!open) return null;
  return (
    <div
      className="md:hidden fixed inset-0 z-50 bg-white/80 backdrop-blur"
      role="dialog"
      aria-modal="true"
      aria-label="Mobile menu"
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div ref={panelRef} className="h-full w-full flex flex-col items-center justify-center gap-6">
        <button
          className="absolute top-4 right-4 p-2 rounded-xl border border-gray-300"
          aria-label="Close menu"
          type="button"
          onClick={onClose}
        >
          <X className="h-5 w-5" />
        </button>
        <nav aria-label="Mobile primary">
          <ul className="flex flex-col items-center gap-6 text-lg">
            {navItems.map((item) => (
              <li key={item.id}>
                <a
                  href={`#${item.id}`}
                  className="text-gray-700 hover:text-teal-700 transition-colors"
                  onClick={onClose}
                >
                  {item.label}
                </a>
              </li>
            ))}
            <li>
              <a
                href="#get-involved"
                className="inline-flex items-center gap-2 rounded-2xl px-4 py-2 bg-teal-600 text-white hover:bg-teal-700 transition-colors"
                onClick={onClose}
              >
                Donate <ArrowRight className="h-4 w-4" />
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  );
}

function Nav() {
  const [open, setOpen] = useState(false);
  const menuBtnRef = useRef<HTMLButtonElement>(null);

  return (
    <header className="sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-gray-200">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          <a href="#home" className="flex items-center gap-2" aria-label="Go to IDA Maldives Home">
            <div className="h-9 w-9 rounded-2xl bg-gradient-to-br from-teal-500 to-sky-600 grid place-items-center text-white font-bold">
              IDA
            </div>
            <span className="font-semibold text-gray-900">IDA Maldives</span>
          </a>

          <nav className="hidden md:flex items-center gap-6" aria-label="Primary">
            <ul className="flex items-center gap-6">
              {navItems.map((item) => (
                <li key={item.id}>
                  <a
                    href={`#${item.id}`}
                    className="text-gray-700 hover:text-teal-700 transition-colors"
                  >
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
            <a
              href="#get-involved"
              className="inline-flex items-center gap-2 rounded-2xl px-4 py-2 bg-teal-600 text-white hover:bg-teal-700 transition-colors"
            >
              Donate <ArrowRight className="h-4 w-4" />
            </a>
          </nav>

          <button
            ref={menuBtnRef}
            className="md:hidden p-2 rounded-xl border border-gray-300"
            aria-label="Open menu"
            aria-haspopup="menu"
            aria-expanded={open}
            aria-controls="mobile-menu"
            type="button"
            onClick={() => setOpen(true)}
          >
            <Menu className="h-5 w-5" />
          </button>
        </div>
      </div>

      <MobileMenu open={open} onClose={() => setOpen(false)} triggerRef={menuBtnRef} />
    </header>
  );
}

function PillarCard({
  icon: Icon,
  title,
  children,
}: {
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col items-center p-6 rounded-2xl bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow text-center">
      <Icon className="h-12 w-12 text-teal-600 mb-4" aria-hidden="true" />
      <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
      <p className="text-gray-600">{children}</p>
    </div>
  );
}

function Home() {
  return (
    <section id="home" aria-labelledby="home-heading" className="py-20 bg-gradient-to-br from-teal-50 to-sky-50">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
        <h1 id="home-heading" className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
          Building sustainable island communities in Huvadhoo Atoll.
        </h1>
        <p className="text-xl text-gray-700 mb-8">
          IDA Maldives is a nonprofit advancing smart farming, mariculture, and youth development.
        </p>
        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <a
            href="#get-involved"
            className="rounded-2xl px-6 py-3 bg-teal-600 text-white hover:bg-teal-700 transition-colors"
          >
            Get Involved
          </a>
          <a
            href="#programs"
            className="rounded-2xl px-6 py-3 border border-teal-600 text-teal-600 hover:bg-teal-50 transition-colors"
          >
            Our Programs
          </a>
        </div>

        <div className="mt-12 grid grid-cols-1 md:grid-cols-4 gap-8" aria-label="Program areas">
          <div className="text-teal-600 font-semibold">Smart Farming</div>
          <div className="text-teal-600 font-semibold">Mariculture</div>
          <div className="text-teal-600 font-semibold">Youth &amp; Community</div>
          <div className="text-teal-600 font-semibold">Training</div>
        </div>

        <div className="mt-12" aria-label="Impact highlights">
          <h2 className="text-2xl font-semibold mb-4">Impact Highlights</h2>
          <p className="text-gray-600">
            Seedlings distributed: 1,000+ | Workshops held: 20+ | Communities served: 5+
          </p>
        </div>

        <div className="mt-12">
          <a href="#news" className="text-teal-600 hover:underline">
            See our latest updates &rarr;
          </a>
        </div>

        <div className="mt-12">
          <h2 className="text-2xl font-semibold mb-4">Partners &amp; Supporters</h2>
          <div className="flex justify-center gap-8 text-gray-500" aria-label="Partner logos">
            [Logos Placeholder]
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" aria-labelledby="about-heading" className="py-16 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
        <h2 id="about-heading" className="text-3xl font-bold text-gray-900 mb-12">
          About IDA Maldives
        </h2>
        <p className="text-gray-600 max-w-3xl mx-auto mb-8">
          The Institute for Development Actions (IDA) is dedicated to fostering positive social, economic, and environmental outcomes through strategic initiatives, research, and evidence-based programs. Its mission focuses on addressing critical challenges in community development, poverty reduction, education, health, and sustainable progress. By collaborating with stakeholders and prioritizing capacity building, IDA empowers communities and drives sustainable impact.
        </p>

        <div className="max-w-3xl mx-auto text-left md:text-center">
          <p className="font-semibold text-teal-600">Vision</p>
          <p className="text-gray-600 mb-4">
            Thriving island communities that are resilient, inclusive, and environmentally secure.
          </p>
          <p className="font-semibold text-teal-600">Mission</p>
          <p className="text-gray-600 mb-4">
            To empower communities in Huvadhoo Atoll and across the Maldives through sustainable agriculture, mariculture innovation, and youth-led development initiatives.
          </p>
          <p className="font-semibold text-teal-600">Values</p>
          <p className="text-gray-600">Stewardship • Transparency • Inclusion • Collaboration • Learning-by-doing.</p>
        </div>
      </div>
    </section>
  );
}

function Programs() {
  return (
    <section id="programs" aria-labelledby="programs-heading" className="py-16 bg-gray-50">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 id="programs-heading" className="text-3xl font-bold text-gray-900 text-center mb-12">
          Our Programs
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <PillarCard icon={Leaf} title="Smart Farming & Agroforestry">
            We promote climate-smart cultivation, nurseries, and household gardens to improve food security and livelihoods.
          </PillarCard>
          <PillarCard icon={Waves} title="Mariculture & Coastal Resilience">
            We pilot seaweed and shellfish initiatives with community partners to diversify income and protect ecosystems.
          </PillarCard>
          <PillarCard icon={Users} title="Youth Development & Recreation">
            We run events, training, and safe recreation spaces that build leadership, health, and social cohesion.
          </PillarCard>
          <PillarCard icon={GraduationCap} title="Community Training & Workshops">
            Practical, hands-on sessions for farmers, youth, and women’s groups on cultivation, processing, and entrepreneurship.
          </PillarCard>
        </div>
      </div>
    </section>
  );
}

function Impact() {
  return (
    <section id="impact" aria-labelledby="impact-heading" className="py-16 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 id="impact-heading" className="text-3xl font-bold text-gray-900 text-center mb-12">
          Our Impact
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center" aria-label="Impact metrics">
          <div>
            <div className="text-4xl font-bold text-teal-600 mb-2">1,000+</div>
            <p className="text-gray-600">Seedlings Distributed</p>
          </div>
          <div>
            <div className="text-4xl font-bold text-teal-600 mb-2">20+</div>
            <p className="text-gray-600">Workshops Held</p>
          </div>
          <div>
            <div className="text-4xl font-bold text-teal-600 mb-2">5+</div>
            <p className="text-gray-600">Communities Served</p>
          </div>
        </div>
        <div className="mt-12 text-center">
          <p className="text-gray-600">[Impact Chart Placeholder – plug in Recharts or Chart.js]</p>
        </div>
      </div>
    </section>
  );
}

function GetInvolved() {
  return (
    <section id="get-involved" aria-labelledby="get-involved-heading" className="py-16 bg-gray-50">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 id="get-involved-heading" className="text-3xl font-bold text-gray-900 text-center mb-12">
          Get Involved
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm text-center">
            <Users className="h-12 w-12 text-teal-600 mx-auto mb-4" aria-hidden="true" />
            <h3 className="text-xl font-semibold mb-2">Volunteer</h3>
            <p className="text-gray-600 mb-4">Join our team and contribute to community projects.</p>
            <a href="#contact" className="text-teal-600 hover:underline">
              Apply to volunteer
            </a>
          </div>
          <div className="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm text-center">
            <HeartHandshake className="h-12 w-12 text-teal-600 mx-auto mb-4" aria-hidden="true" />
            <h3 className="text-xl font-semibold mb-2">Partner with Us</h3>
            <p className="text-gray-600 mb-4">Collaborate on initiatives for sustainable development.</p>
            <a href="#contact" className="text-teal-600 hover:underline">
              Explore partnerships
            </a>
          </div>
          <div className="p-6 rounded-2xl bg-white border border-gray-200 shadow-sm text-center">
            <ShieldCheck className="h-12 w-12 text-teal-600 mx-auto mb-4" aria-hidden="true" />
            <h3 className="text-xl font-semibold mb-2">Donate</h3>
            <p className="text-gray-600 mb-4">Support our work with a donation (bank details coming soon).</p>
            <a href="#contact" className="text-teal-600 hover:underline">
              Donate or pledge
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function News() {
  return (
    <section id="news" aria-labelledby="news-heading" className="py-16 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 id="news-heading" className="text-3xl font-bold text-gray-900 text-center mb-12">
          News &amp; Updates
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <article className="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <h3 className="text-xl font-semibold mb-2">Latest Workshop Success</h3>
            <p className="text-gray-600 mb-4">
              Over 50 participants joined our recent training on sustainable farming.
            </p>
            <a href="#" className="text-teal-600 hover:underline">
              Read the workshop recap
            </a>
          </article>
          <article className="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <h3 className="text-xl font-semibold mb-2">New Mariculture Pilot</h3>
            <p className="text-gray-600 mb-4">Launching seaweed farming initiatives in coastal areas.</p>
            <a href="#" className="text-teal-600 hover:underline">
              Learn about the pilot
            </a>
          </article>
          <article className="p-6 rounded-2xl bg-gray-50 border border-gray-200">
            <h3 className="text-xl font-semibold mb-2">Youth Leadership Event</h3>
            <p className="text-gray-600 mb-4">
              Empowering the next generation through recreation and skills.
            </p>
            <a href="#" className="text-teal-600 hover:underline">
              See event highlights
            </a>
          </article>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  // mailto with GET: subject + body will be filled from fields
  // For production use a service like Formspree or your API.
  return (
    <section id="contact" aria-labelledby="contact-heading" className="py-16 bg-gray-50">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 id="contact-heading" className="text-3xl font-bold text-gray-900 text-center mb-12">
          Contact Us
        </h2>

        <form
          action="mailto:info@idamaldives.com"
          method="GET"
          className="max-w-lg mx-auto space-y-6"
          onSubmit={(e) => {
            // Build a mailto URL with subject & body from form values
            e.preventDefault();
            const form = e.currentTarget as HTMLFormElement;
            const data = new FormData(form);
            const name = data.get("name") || "";
            const email = data.get("email") || "";
            const phone = data.get("phone") || "";
            const topic = data.get("topic") || "General";
            const message = data.get("message") || "";

            const subject = encodeURIComponent(`[IDA Maldives] ${topic} inquiry from ${name}`);
            const body = encodeURIComponent(
              `Name: ${name}\nEmail: ${email}\nPhone: ${phone}\nTopic: ${topic}\n\n${message}`
            );

            window.location.href = `mailto:info@idamaldives.com?subject=${subject}&body=${body}`;
          }}
          aria-describedby="contact-note"
        >
          <p id="contact-note" className="text-sm text-gray-600">
            This opens your email app. For instant delivery, switch to a hosted form service later.
          </p>

          <div>
            <label htmlFor="name" className="block text-gray-700 font-medium mb-2">
              Name
            </label>
            <input
              id="name"
              name="name"
              type="text"
              required
              autoComplete="name"
              className="w-full rounded-xl border border-gray-300 p-3 focus:ring-2 focus:ring-teal-600"
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-gray-700 font-medium mb-2">
              Email
            </label>
            <input
              id="email"
              name="email"
              type="email"
              required
              autoComplete="email"
              className="w-full rounded-xl border border-gray-300 p-3 focus:ring-2 focus:ring-teal-600"
            />
          </div>

          <div>
            <label htmlFor="phone" className="block text-gray-700 font-medium mb-2">
              Phone (optional)
            </label>
            <input
              id="phone"
              name="phone"
              type="tel"
              autoComplete="tel"
              className="w-full rounded-xl border border-gray-300 p-3 focus:ring-2 focus:ring-teal-600"
            />
          </div>

          <div>
            <label htmlFor="topic" className="block text-gray-700 font-medium mb-2">
              Topic
            </label>
            <select
              id="topic"
              name="topic"
              className="w-full rounded-xl border border-gray-300 p-3 focus:ring-2 focus:ring-teal-600"
              defaultValue="Volunteer"
            >
              <option>Volunteer</option>
              <option>Partnership</option>
              <option>Media</option>
              <option>General</option>
            </select>
          </div>

          <div>
            <label htmlFor="message" className="block text-gray-700 font-medium mb-2">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              required
              rows={5}
              className="w-full rounded-xl border border-gray-300 p-3 focus:ring-2 focus:ring-teal-600"
            />
          </div>

          <div className="flex items-center">
            <input id="consent" type="checkbox" required className="mr-2" />
            <label htmlFor="consent" className="text-gray-600">
              I consent to being contacted by IDA Maldives.
            </label>
          </div>

          <button
            type="submit"
            className="w-full rounded-xl bg-teal-600 text-white py-3 hover:bg-teal-700 transition-colors"
          >
            Send Message
          </button>
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="bg-gray-900 text-white py-12">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <div className="h-9 w-9 rounded-2xl bg-gradient-to-br from-teal-500 to-sky-600 grid place-items-center text-white font-bold">
                IDA
              </div>
              <span className="font-semibold">IDA Maldives</span>
            </div>
            <p className="text-gray-400">Institute for Development Actions (IDA Maldives)</p>
          </div>

          <div>
            <h2 className="text-lg font-semibold mb-4">Contact</h2>
            <p className="text-gray-400">
              Email: <a className="underline hover:text-teal-400" href="mailto:info@idamaldives.com">info@idamaldives.com</a>
            </p>
            <p className="text-gray-400">Location: Huvadhoo Atoll, Maldives</p>
            <p className="text-gray-400">NGO Registration: [Placeholder]</p>
          </div>

          <div>
            <h2 className="text-lg font-semibold mb-4">Follow Us</h2>
            <div className="flex gap-4">
              <a
                href="[Facebook Placeholder]"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Facebook"
                title="Facebook"
              >
                <Facebook className="h-6 w-6 text-gray-400 hover:text-teal-500" />
              </a>
              <a
                href="[Instagram Placeholder]"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Instagram"
                title="Instagram"
              >
                <Instagram className="h-6 w-6 text-gray-400 hover:text-teal-500" />
              </a>
            </div>
          </div>
        </div>

        <p className="mt-8 text-center text-gray-400">&copy; {new Date().getFullYear()} IDA Maldives. All rights reserved.</p>
      </div>
    </footer>
  );
}

function App() {
  return (
    <div className="font-sans">
      <SkipLink />
      <Nav />
      <main id="main">
        <Home />
        <About />
        <Programs />
        <Impact />
        <GetInvolved />
        <News />
        <Contact />
      </main>
      <Footer />
    </div>
  );
}

export default App;