import { fetchFooterData, fetchSubscribeForm } from "@/services/home.service";
import Image from "next/image";
import Link from "next/link";
import SubscribeForm from "./SubscibeForm";

export interface Subsection {
  id: number;
  title: string;
  description: string;
  image: string;
}

export interface FooterSection {
  id: number;
  website_id: number;
  page_id: number;
  sequence: number;
  title: string;
  shortDescription: string;
  longDescription: string;
  image: string;
  tumbImage: string | null;
  bannerImage: string | null;
  file: string | null;
  slug: string;
  metaTitle: string;
  metaKeyword: string;
  metaDescription: string;
  status: "active" | "inactive";
  createdAt: string;
  updatedAt: string;
  subsections: Subsection[];
}

export default async function Footer() {
  let footerData: FooterSection[] = [];
  let subscribeData = null;

  try {
    const [footerResponse, subscribeResponse] = await Promise.all([
      fetchFooterData("be616c29-90bb-461b-8ca9-11939620e6a2"),
      fetchSubscribeForm("f4a86a99-4fad-4993-b940-134d3335de83"),
    ]);
    footerData = footerResponse?.pageItemdataWithSubsection ?? [];
    subscribeData = subscribeResponse;
  } catch (error) {
    console.log("Error fetching footer data:", error);
    return null;
  }

  const socialData = footerData.find((i) => i.slug === "follow-us-on-12");
  return (
    <footer className="bg-gray-100 text-gray-700">
      {/* Main footer */}
      <div className="w-full flex justify-center ">
        <div className="w-full container px-4 mx-auto py-11 md:py-16 grid grid-cols-1 md:grid-cols-3 gap-12 ">
          {/* Subscribe Section */}
          <div className="flex flex-col">
            <h3 className="text-[28px] md:text-[36px] font-[100] uppercase mb-4 tracking-wide">
              {subscribeData?.form?.title}
            </h3>
            <SubscribeForm fields={subscribeData?.fields} />

            <p className="text-sm font-semibold tracking-wide text-[#1A2B3C] uppercase mb-4">
              Follow us on
            </p>
            {socialData && (
              <div className="flex items-center space-x-4">
                {socialData.subsections?.map((sub) => {
                  const url = sub.description.replace(/<[^>]+>/g, "").trim();

                  return (
                    <Link
                      key={sub.id}
                      href={url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-9 h-9 bg-[#1A2B3C] text-white rounded-full flex items-center justify-center hover:opacity-80 transition"
                    >
                      <Image
                        src={sub.image}
                        alt={sub.title}
                        width={40}
                        height={40}
                        // className="w-4 h-4 object-contain"
                      />
                    </Link>
                  );
                })}
              </div>
            )}

            {/* <div className="flex space-x-3">
              <a href="https://www.facebook.com/crescentindia" target="_blank" rel="noopener noreferrer"
                className="w-9 h-9 bg-[#1A2B3C] text-white rounded-full flex items-center justify-center hover:opacity-80 transition">
                <Facebook className="w-4 h-4" />
              </a>
              <a href="https://www.twitter.com/crescentindia" target="_blank" rel="noopener noreferrer"
                className="w-9 h-9 bg-[#1A2B3C] text-white rounded-full flex items-center justify-center hover:opacity-80 transition">
                <Twitter className="w-4 h-4" />
              </a>
              <a href="https://www.linkedin.com/company/1173329" target="_blank" rel="noopener noreferrer"
                className="w-9 h-9 bg-[#1A2B3C] text-white rounded-full flex items-center justify-center hover:opacity-80 transition">
                <Linkedin className="w-4 h-4" />
              </a>
            </div> */}
          </div>

          {/* Company Divisions */}
          <div className="flex md:justify-center">
            <div>
              {/* <h4 className="text-base font-bold uppercase mb-4">Divisions</h4> */}
              <ul className="space-y-5 text-[16px] leading-5 text-[#777] uppercase">
                 <li>
                  <Link href="/crescent-organics-pvt-ltd">
                     Crescent Organics Pvt Ltd
                  </Link>
                </li> 
                <li>
                  <Link href="/crescent-healthcare">Crescent Healthcare</Link>
				  
                </li>
              </ul>
            </div>
          </div>
          {/* Quick Links */}
          <div className="flex md:justify-center">
            {/* <h4 className="text-base font-bold uppercase mb-4">Quick Links</h4> */}
            <ul className="space-y-4 text-[16px] leading-5 text-[#777] uppercase">
              <li>
                <Link href="/contact-us-1">Contact Us</Link>
              </li>
              <li>
                <Link href="/download-brochures">Download Brochure</Link>
              </li>
              <li>
                <Link href="/terms-conditions">Terms & Conditions</Link>
              </li>
              <li>
                <Link href="/sustainability">Sustainability</Link>
              </li>
              <li>
                <Link href="/iso-certificate">ISO Certificate</Link>
              </li>
              <li>
                <Link href="/policies">Policies</Link>
              </li>
              <li>
                <Link href="/sitemap">Sitemap</Link>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom Footer */}
      <div className="bg-[#1A2B3C] py-4 px-4 text-white text-center text-[13px]">
        <p className="italic">
          © 2022 Crescent India. All Rights Reserved. Powered by{" "}
          <a
            href="https://iudyog.com"
            target="_blank"
            rel="noopener noreferrer"
            className="underline"
          >
            iUdyog
          </a>
        </p>
      </div>
    </footer>
  );
}