"use client";
import Image from "next/image";
import type React from "react";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import { useState, useEffect } from "react";
import { usePathname, useSearchParams, useRouter } from "next/navigation";
import { QRCodeCanvas } from "qrcode.react";
import SafeHtmlRenderer from "../SafeHtmlRenderer";
import {
  RefreshCw,
  MapPin,
  Building2,
  Globe,
  Phone,
  Mail,
  User,
  MessageSquare,
  CheckCircle,
  XCircle,
  ExternalLink,
  Loader as LoaderIcon,
  UserCircle,
  Briefcase,
} from "lucide-react";
import useAxios from "@/hooks/useAxios";
import axios from "axios";
import { BASE_URL } from "@/Constant";
import Loading from "@/components/Loading/Loading";
import { toast } from "react-toastify";
import Loader from "../../components/Loader/Loader";

export default function InnerAbout({ slug }: any) {
  const pathname = usePathname();
  const [loading, setLoading] = useState(false);
  const searchParams = useSearchParams();
  const [currentUrl, setCurrentUrl] = useState("");
  const [captchaSvg, setCaptchaSvg] = useState("");
  const { postData, getData } = useAxios();
  const [message, setMessage] = useState<string>("");
  const [websiteData, setWebsiteData] = useState<any>(null);
  const [websiteLoading, setWebsiteLoading] = useState(true);

  const [formData, setFormData] = useState({
    accreditationId: "",
    name: "",
    contactNo: "",
    emailId: "",
    companyName: "",
    subject: "",
    enquiry: "",
    captcha: "",
    enquiryFrom: "ab",
  });
  const [notFound, setNotFound] = useState(false);
  const router = useRouter();

  const redirectTo404 = () => {
    setNotFound(true);
  };

  const [accreditation, setAccreditation] = useState<any>(null);

  useEffect(() => {
    async function fetchWebsiteData() {
      try {
        setWebsiteLoading(true);
        const res = await fetch(
          `${BASE_URL}website/getWebsiteById?websiteId=66e3e5bfcdfd3a17049f0279`,
          {
            cache: "no-store",
          },
        );

        if (!res.ok) throw new Error("Failed to fetch website data");

        const json = await res.json();
        console.log("Website data received:", json);

        setWebsiteData(json?.data);
      } catch (error) {
        console.error("Error fetching website data:", error);
      } finally {
        setWebsiteLoading(false);
      }
    }

    fetchWebsiteData();
  }, []);

  const fetchAccreditation = async () => {
    try {
      if (slug) {
        const response = await axios.get(
          `${BASE_URL}ab/searchAbBySlug?slug=${slug}`,
        );
        setAccreditation(response.data.data[0]);
        setFormData((prevData) => ({
          ...prevData,
          accreditationId: response.data.data[0]._id,
        }));
      }
    } catch (error) {
      console.log(error);
      redirectTo404();
    }
  };

  useEffect(() => {
    fetchAccreditation();
  }, []);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const params = searchParams?.toString();
      const url = `${window.location.origin}${pathname}${
        params ? `?${params}` : ""
      }`;
      setCurrentUrl(url);
    }
  }, [pathname, searchParams]);

  useEffect(() => {
    fetchCaptcha();
  }, []);

  const fetchCaptcha = async () => {
    try {
      const { data }: any = await getData("captcha/generateCaptcha", {
        withCredentials: true,
      });
      setCaptchaSvg(data?.captcha);
    } catch (error) {
      console.log(error);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.name) {
      toast.error("Name is required");
      return;
    }
    if (!formData.contactNo) {
      toast.error("Contact number is required");
      return;
    }
    if (!formData.emailId) {
      toast.error("Email is required");
      return;
    }
    if (!formData.companyName) {
      toast.error("Company name is required");
      return;
    }
    if (!formData.subject) {
      toast.error("Subject is required");
      return;
    }
    if (!formData.enquiry) {
      toast.error("Enquiry is required");
      return;
    }
    if (!formData.captcha) {
      toast.error("Captcha is required");
      return;
    }

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.emailId)) {
      toast.error("Please enter a valid email address");
      return;
    }

    setLoading(true);
    try {
      const res: any = await postData("enquiry", formData, {
        withCredentials: true,
      });

      if (res?.success) {
        setFormData({
          accreditationId: accreditation._id,
          name: "",
          contactNo: "",
          emailId: "",
          companyName: "",
          subject: "",
          enquiry: "",
          captcha: "",
          enquiryFrom: "ab",
        });
        toast.success(res?.message);
      } else {
        toast.error(res?.message);
      }
    } catch (error) {
      console.error(error);
      toast.error("Error submitting form");
    } finally {
      setLoading(false);
      fetchCaptcha();
    }
  };

  if (!accreditation) return <Loading />;

  const parseStandards = () => {
    try {
      if (accreditation.standards && accreditation.standards.length > 0) {
        if (typeof accreditation.standards[0] === "string") {
          return JSON.parse(accreditation.standards[0]);
        }
        return accreditation.standards;
      }
      return [];
    } catch (error) {
      console.error("Error parsing standards:", error);
      return [];
    }
  };

  const standards = parseStandards();

  const hasValidStandards =
    standards.length > 0 &&
    standards.some(
      (std: any) =>
        std.standardNumber ||
        std.glaLogoApprovalNumber ||
        std.glaApprovalStatus,
    );

  const hasOrganizationDescription =
    accreditation?.description?.trim().length > 0;

  // Format full name from firstName and lastName
  const getFullName = () => {
    const firstName = accreditation?.firstName || "";
    const lastName = accreditation?.lastName || "";

    if (firstName || lastName) {
      return `${firstName} ${lastName}`.trim();
    }
    return null;
  };

  const fullName = getFullName();
  const hasContactInfo =
    fullName ||
    accreditation?.phone ||
    accreditation?.companyWebsite ||
    accreditation?.position;

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 md:p-8">
      <div className="mx-auto md:w-[87%] bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
        <div className="bg-gradient-to-r from-blue-600 to-indigo-700 px-6  py-1 md:px-5 md:py-2 text-white">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
            <div className="flex items-center gap-6 flex-wrap sm:flex-nowrap">
              <div className="w-24 h-24 relative bg-white  p-2 shadow-lg">
                {accreditation.logo ? (
                  <Image
                    src={`${BASE_URL}${accreditation.logo}`}
                    alt={accreditation.organisationName}
                    width={88}
                    height={88}
                    className="w-full h-full object-contain"
                    unoptimized={true}
                  />
                ) : (
                  <div className="w-full h-full bg-slate-100 flex items-center justify-center  text-slate-400 text-xs">
                    No Logo
                  </div>
                )}
              </div>

              <div>
                <h4 className="text-xl flex text-gray-900 font-bold mb-1">
                  {accreditation.organisationName}{" "}
                </h4>
                <div className="flex items-center">
                  {accreditation.isVerified ? (
                    <>
                      <CheckCircle className="w-4 h-4 text-green-400" />
                      <span className="text-sm text-green-300">Verified</span>
                    </>
                  ) : (
                    <>
                      <XCircle className="w-4 h-4 text-red-400" />
                      <span className="text-sm text-red-300">Not Verified</span>
                    </>
                  )}
                </div>
                {/* <p className="text-blue-100 text-lg mb-1">
                  {accreditation.uniqueID}
                </p> */}
              </div>
            </div>

            <div className="flex flex-row gap-3">
              {accreditation.glalogo && (
                <div className="w-24 h-24 relative bg-white p-2 shadow-lg">
                  <Image
                    src={`${BASE_URL}${accreditation.glalogo}`}
                    alt="GLA Logo"
                    width={88}
                    height={88}
                    className=" w-full h-full object-contain"
                    unoptimized={true}
                  />
                </div>
              )}
              {currentUrl && (
                <div className="text-center">
                  <QRCodeCanvas
                    value={currentUrl}
                    size={80}
                    level="H"
                    includeMargin={true}
                  />
                  <span className="text-sm text-slate-600 mt-2 block">
                    Scan QR Code
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="p-6 md:p-5">
          <section className="mb-8">
            <h2 className="text-xl font-bold text-slate-800 mb-3">
              Unique Identification Number{" "}
            </h2>
            <p className="bg-gray-100 mb-1 p-2 rounded-md text-blue-100 text-lg">
              {accreditation.uniqueID}
            </p>
          </section>

          {/* New Point of Contact Section - Tabular Format */}
          {hasContactInfo && (
            <section className="mb-8">
              <h2 className="text-xl font-bold text-slate-800 mb-4 flex items-center gap-2">
                Point of Contact
              </h2>
              <div className="overflow-x-auto bg-slate-50 rounded-xl border border-slate-200">
                <table className="w-full">
                  <thead className="bg-gray-100">
                    <tr>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        Name
                      </th>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        Email Id
                      </th>
                      {/* <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">
                        Phone
                      </th> */}
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        Website
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    <tr>
                      <td
                        className="px-4 py-3 text-sm text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        {fullName || "N/A"}
                      </td>
                      <td
                        className="px-4 py-3 text-sm text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        {accreditation?.userEmail || "N/A"}
                      </td>
                      {/* <td className="px-4 py-3 text-sm text-gray-700">
                        {accreditation?.phone || "N/A"}
                      </td> */}
                      <td
                        className="px-4 py-3 text-sm text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        {accreditation?.companyWebsite || "N/A"}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          )}

          {hasValidStandards && (
            <section className="mb-8">
              <h2 className="text-xl font-bold text-slate-800 mb-4">Schemes</h2>
              <div className="overflow-x-auto bg-slate-50 rounded-xl border border-slate-200">
                <table className="w-full">
                  <thead className="bg-gray-100">
                    <tr>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        Standard
                      </th>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        GLA Logo Approval Number
                      </th>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        GLA Approval Status
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {standards.map((standard: any, index: number) => (
                      <tr key={standard._id || index}>
                        <td
                          className="px-4 py-3 text-sm text-gray-700"
                          ref={(el) => {
                            if (el)
                              el.style.setProperty(
                                "font-size",
                                "14px",
                                "important",
                              );
                          }}
                        >
                          {standard.standardNumber || "N/A"}
                        </td>
                        <td
                          className="px-4 py-3 text-sm text-gray-700"
                          ref={(el) => {
                            if (el)
                              el.style.setProperty(
                                "font-size",
                                "14px",
                                "important",
                              );
                          }}
                        >
                          {standard.glaLogoApprovalNumber || "N/A"}
                        </td>
                        <td
                          className="px-4 py-3 text-sm text-gray-700"
                          ref={(el) => {
                            if (el)
                              el.style.setProperty(
                                "font-size",
                                "14px",
                                "important",
                              );
                          }}
                        >
                          {standard.glaApprovalStatus || "N/A"}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )}

          {hasOrganizationDescription && (
            <section className="mb-8">
              <div className="flex items-center gap-3 mb-1">
                <h2 className="text-xl font-bold text-slate-800 mb-1">
                  About Organization
                </h2>
              </div>
              <div className="bg-slate-50 rounded-xl p-3 flex-wrap sm:flex-nowrap ">
                <p className="text-slate-700 leading-relaxed text-base">
                  {accreditation?.description}
                </p>
              </div>
            </section>
          )}

          {accreditation.KeyLocation?.length > 0 && (
            <section className="mb-7">
              <h2 className="text-xl font-bold text-slate-800 mb-4">
                Key Locations
              </h2>
              <div className="overflow-x-auto bg-slate-50 rounded-xl border border-slate-200">
                <table className="w-full">
                  <thead className="bg-gray-100">
                    <tr>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        Address Type
                      </th>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        Address
                      </th>
                      <th
                        className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                        ref={(el) => {
                          if (el)
                            el.style.setProperty(
                              "font-size",
                              "14px",
                              "important",
                            );
                        }}
                      >
                        Country
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {accreditation.KeyLocation.map(
                      (loc: any, index: number) => (
                        <tr key={index}>
                          <td
                            className="px-4 py-3 text-sm text-gray-700 capitalize"
                            ref={(el) => {
                              if (el)
                                el.style.setProperty(
                                  "font-size",
                                  "14px",
                                  "important",
                                );
                            }}
                          >
                            {loc.registeredAddress?.replace("_", " ") || "N/A"}
                          </td>
                          <td
                            className="px-4 py-3 text-sm text-gray-700"
                            ref={(el) => {
                              if (el)
                                el.style.setProperty(
                                  "font-size",
                                  "14px",
                                  "important",
                                );
                            }}
                          >
                            {loc.address || "N/A"}
                          </td>
                          <td
                            className="px-4 py-3 text-sm text-gray-700"
                            ref={(el) => {
                              if (el)
                                el.style.setProperty(
                                  "font-size",
                                  "14px",
                                  "important",
                                );
                            }}
                          >
                            {loc.country || "N/A"}
                          </td>
                        </tr>
                      ),
                    )}
                  </tbody>
                </table>
              </div>
            </section>
          )}

          <section className="mb-7 mt-9">
            {/* <h2 className="text-xl font-bold text-slate-800 mb-4">
              Accreditation & Certification Bodies
            </h2> */}
            <div className="overflow-x-auto bg-slate-50 rounded-xl border border-slate-200">
              <table className="w-full">
                <thead className="bg-gray-100">
                  <tr>
                    <th
                      className="px-4 py-3 text-left text-sm font-semibold text-gray-700"
                      ref={(el) => {
                        if (el)
                          el.style.setProperty(
                            "font-size",
                            "14px",
                            "important",
                          );
                      }}
                    >
                      Organisation Name
                    </th>
                    {/* <th className="px-4 py-3 text-left text-sm font-semibold text-gray-700">
                      Link
                    </th> */}
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  <tr>
                    <td
                      className="px-4 py-3 text-sm text-gray-700 capitalize"
                      ref={(el) => {
                        if (el)
                          el.style.setProperty(
                            "font-size",
                            "14px",
                            "important",
                          );
                      }}
                    >
                      {websiteLoading ? (
                        <div className="flex items-center gap-2">
                          <LoaderIcon className="w-4 h-4 animate-spin text-blue-600" />
                          <span>Loading...</span>
                        </div>
                      ) : (
                        websiteData?.title || "IAAB"
                      )}
                    </td>
                    {/* <td className="px-4 py-3 text-sm text-gray-700">
                      <a
                        href={
                          websiteLoading ? "#" : websiteData?.websiteUrl || "/"
                        }
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200 rounded-lg transition-colors text-sm font-medium ${
                          websiteLoading ? "opacity-50 cursor-not-allowed" : ""
                        }`}
                        onClick={(e) => websiteLoading && e.preventDefault()}
                      >
                        View Details
                        <ExternalLink className="w-3 h-3" />
                      </a>
                    </td> */}
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          <div
            className="bg-gradient-to-r from-slate-50 to-blue-50 rounded-2xl p-4 border border-slate-200 mt-24"
            style={{ backgroundColor: "beige" }}
          >
            <h2 className="text-xl font-bold text-slate-800 mb-4">
              Get In Touch
            </h2>
            <form onSubmit={handleSubmit} className="space-y-5 md:space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
                <div>
                  <label
                    htmlFor="name"
                    className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-1"
                  >
                    <User className="w-4 h-4 text-blue-600" />
                    Name <span className="text-red-500 font-bold">*</span>
                  </label>
                  <input
                    type="text"
                    id="name"
                    placeholder="Enter your full name"
                    className="w-full px-2 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-white"
                    value={formData.name}
                    onChange={(e) =>
                      setFormData({ ...formData, name: e.target.value })
                    }
                    required
                  />
                </div>
                <div>
                  <label
                    htmlFor="emailId"
                    className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-1"
                  >
                    <Mail className="w-4 h-4 text-blue-600" />
                    Email <span className="text-red-500 font-bold">*</span>
                  </label>
                  <input
                    type="email"
                    id="emailId"
                    placeholder="Enter email address"
                    className="w-full px-2 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-white"
                    value={formData.emailId}
                    onChange={(e) =>
                      setFormData({ ...formData, emailId: e.target.value })
                    }
                    required
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
                <div>
                  <label
                    htmlFor="contactNo"
                    className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-1"
                  >
                    <Phone className="w-4 h-4 text-blue-600" />
                    Phone <span className="text-red-500 font-bold">*</span>
                  </label>
                  <input
                    type="text"
                    id="contactNo"
                    placeholder="Enter contact number"
                    className="w-full px-2 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-white"
                    value={formData.contactNo}
                    onChange={(e) =>
                      setFormData({ ...formData, contactNo: e.target.value })
                    }
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="companyName"
                    className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-1"
                  >
                    <Building2 className="w-4 h-4 text-blue-600" />
                    Company <span className="text-red-500 font-bold">*</span>
                  </label>
                  <input
                    type="text"
                    id="companyName"
                    placeholder="Enter company name"
                    className="w-full px-2 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-white"
                    value={formData.companyName}
                    onChange={(e) =>
                      setFormData({ ...formData, companyName: e.target.value })
                    }
                    required
                  />
                </div>
              </div>

              <div>
                <label
                  htmlFor="subject"
                  className="block text-sm font-medium text-slate-700 mb-1"
                >
                  Subject <span className="text-red-500 font-bold">*</span>
                </label>
                <select
                  id="subject"
                  className="w-full px-2 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-white"
                  value={formData.subject}
                  onChange={(e) =>
                    setFormData({ ...formData, subject: e.target.value })
                  }
                  required
                >
                  <option value="">Select Subject</option>
                  <option value="General">General Enquiry</option>
                  <option value="Support">Support</option>
                  <option value="Feedback">Feedback</option>
                  <option value="Appeal">Appeal</option>
                  <option value="Complaint">Complaint</option>
                </select>
              </div>

              <div>
                <label
                  htmlFor="enquiry"
                  className="flex items-center gap-2 text-sm font-medium text-slate-700 mb-1"
                >
                  <MessageSquare className="w-4 h-4 text-blue-600" />
                  Enquiry Details{" "}
                  <span className="text-red-500 font-bold">*</span>
                </label>
                <textarea
                  id="enquiry"
                  placeholder="Write your enquiry here..."
                  rows={3}
                  className="w-full px-2 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-white resize-none"
                  value={formData.enquiry}
                  onChange={(e) =>
                    setFormData({ ...formData, enquiry: e.target.value })
                  }
                  required
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5 items-center">
                <div>
                  <label
                    htmlFor="captcha"
                    className="block text-sm font-medium text-slate-700 mb-1"
                  >
                    Captcha <span className="text-red-500 font-bold">*</span>
                  </label>
                  <input
                    type="text"
                    id="captcha"
                    placeholder="Enter captcha"
                    className="w-full px-2 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-white"
                    value={formData.captcha}
                    onChange={(e) =>
                      setFormData({ ...formData, captcha: e.target.value })
                    }
                    required
                  />
                </div>

                <div className="flex items-center gap-3 mt-1">
                  <SafeHtmlRenderer htmlContent={captchaSvg} />
                  <button
                    type="button"
                    onClick={fetchCaptcha}
                    className="p-2.5 rounded-lg hover:bg-slate-100 transition border border-slate-200"
                    aria-label="Regenerate Captcha"
                  >
                    <RefreshCw className="w-4 h-4 text-slate-600" />
                  </button>
                </div>
              </div>

              {loading ? (
                <div className="flex justify-center">
                  <Loader />
                </div>
              ) : (
                <button
                  type="submit"
                  className="px-6 py-2 bg-iaab-gradient rounded-xl border border-gray-300 hover:border-gray-400 shadow-sm disabled:opacity-60"
                >
                  Send Message
                </button>
              )}
            </form>

            <ToastContainer />
          </div>
          <ToastContainer />
        </div>
      </div>
    </div>
  );
}