import type { Metadata } from "next";
import {
  FaEnvelope,
  FaMapMarkerAlt,
  FaPhoneAlt,
  FaClock,
} from "react-icons/fa";

import Breadcrumb from "@/components/common/Breadcrumb";
import ContactForm from "@/components/forms/ContactForm";
import CTA from "@/components/common/CTA";

export const metadata: Metadata = {
  title: "Contact Rajvi Social Welfare Trust",
  description:
    "Contact Rajvi Social Welfare Trust for donation, volunteering, partnership, healthcare awareness, education support and community welfare initiatives across India.",
  keywords: [
    "Contact Rajvi Social Welfare Trust",
    "NGO Contact India",
    "Volunteer NGO Contact",
    "Donate to NGO India",
    "Social Welfare Trust Contact",
  ],
  alternates: {
    canonical: "/contact",
  },
};

export default function ContactPage() {
  return (
    <>
      <section className="relative overflow-hidden bg-slate-950 pb-20 pt-32 text-white sm:pt-36 lg:pt-40">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(251,191,36,0.15),transparent_40%)]" />

        <div className="relative z-10 mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
          <span className="inline-flex rounded-full bg-white/10 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-[var(--accent)] sm:text-xs">
            Contact Us
          </span>

          <h1 className="mx-auto mt-6 max-w-5xl text-4xl font-extrabold leading-tight sm:text-5xl lg:text-6xl">
            Get in Touch with Rajvi Social Welfare Trust
          </h1>

          <p className="mx-auto mt-6 max-w-3xl text-sm leading-7 text-slate-300 sm:text-lg sm:leading-8">
            Connect with us for volunteering, donations, partnerships,
            community programs or social welfare initiatives.
          </p>
        </div>
      </section>

      <Breadcrumb />

      <section className="bg-section-light py-14 sm:py-16 lg:py-24">
        <div className="mx-auto grid max-w-7xl gap-8 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
          
          {/* Form Left side */}
          <div className="lg:col-span-7">
            <ContactForm />
          </div>

          {/* Info Right side */}
          <div className="lg:col-span-5">
            <div className="rounded-3xl bg-slate-950 p-6 text-white shadow-xl sm:p-8">
              <span className="inline-flex rounded-full bg-white/10 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-[var(--accent)]">
                Contact Information
              </span>

              <h2 className="mt-4 text-3xl font-extrabold">
                We Are Here to Help
              </h2>

              <p className="mt-4 text-sm leading-7 text-slate-300">
                Rajvi Social Welfare Trust welcomes donors, volunteers,
                partners and community members who want to support meaningful
                social change.
              </p>

              <div className="mt-8 space-y-5">
                <div className="flex gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <FaMapMarkerAlt />
                  </div>
                  <div>
                    <h3 className="font-bold">Registered Office</h3>
                    <p className="mt-1 text-sm leading-7 text-slate-300">
                      238, Plot No. 8, Near IDFC Bank,
                      <br />
                      Pocket C, Sector 13,
                      <br />
                      Dwarka, New Delhi - 110077
                    </p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <FaPhoneAlt />
                  </div>
                  <div>
                    <h3 className="font-bold">Phone Number</h3>
                    <a
                      href="tel:+917310295095"
                      className="mt-1 block text-sm text-slate-300 hover:text-[var(--accent)]"
                    >
                      +91 73102 95095
                    </a>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <FaEnvelope />
                  </div>
                  <div>
                    <h3 className="font-bold">Email Address</h3>
                    <a
                      href="mailto:info@rajvisocialwelfare.org"
                      className="mt-1 block break-all text-sm text-slate-300 hover:text-[var(--accent)]"
                    >
                      info@rajvisocialwelfare.org
                    </a>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--accent)] text-black">
                    <FaClock />
                  </div>
                  <div>
                    <h3 className="font-bold">Working Hours</h3>
                    <p className="mt-1 text-sm text-slate-300">
                      Monday to Saturday, 10:00 AM - 6:00 PM
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTA />
    </>
  );
}