import React from "react";
import Link from "next/link";
import Image from "next/image";
import { FooterData } from "@/types/navigation";
import { FooterCol } from "./FooterCol";
import { FooterCountryList } from "./FooterCountryList";
import { SocialLinks } from "./SocialLinks";

interface FooterProps {
  data: FooterData;
}

/**
 * The live site's real footer — `JM_modules` id 111 ("Custom Footer",
 * `mod_custom`, position `user1`), read directly from the database since the
 * REST API doesn't expose module content. Structure, copy and colors below
 * are copied from that module's actual HTML/`_footer.scss`, not invented:
 * dark `#292929` background (not the app's usual slate-950), 4 real columns
 * (Top Assignment Searches / Get to know us / Country / Contact Us), a
 * 9-link policy bar, DMCA + payment badges, the real disclaimer paragraph,
 * and a copyright/rating line. The live module also carries a fixed side
 * icon rail, a bottom sticky contact strip, and several popups (discount,
 * OTP, "thank you") — those are separate floating widgets, not part of the
 * footer itself, and aren't reproduced here yet.
 */
export const Footer: React.FC<FooterProps> = ({ data }) => {
  return (
    <footer className="bg-[#292929] text-white pt-5 pb-5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <FooterCol column={data.columns.topSearches} />
          <FooterCol column={data.columns.company} />
          <FooterCountryList title={data.columns.countries.title} countries={data.columns.countries.items} />

          {/* Contact Us — real `.contactbx`. Unlike the three columns above,
              the live site never collapses this one on mobile
              (`.contactbx .fheading:after{display:none}` — no +/- toggle) so
              it stays plain, just without the bottom divider the accordion
              columns use to separate themselves when stacked. */}
          <div>
            <h3 className="text-[17px] leading-[23px] text-white mb-2">Contact Us</h3>
            <div className="mt-2.5 space-y-2.5">
              <a
                href={`tel:${data.contactInfo.phone}`}
                className="flex min-w-0 items-center gap-2.5 text-base sm:text-lg leading-[21px] text-[#dfdfdf] hover:text-[#f58e0e] transition-colors"
              >
                <Image src="/icons/phone.svg" alt="" width={22} height={22} className="w-[22px] h-[22px] shrink-0" />
                <span className="min-w-0 break-words">{data.contactInfo.phone}</span>
              </a>
              <a
                href={data.contactInfo.whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex min-w-0 items-center gap-2.5 text-base sm:text-lg leading-[21px] text-[#dfdfdf] hover:text-[#f58e0e] transition-colors"
              >
                <Image src="/icons/whatsapp.svg" alt="" width={22} height={22} className="w-[22px] h-[22px] shrink-0" />
                <span className="min-w-0 break-words">{data.contactInfo.whatsapp}</span>
              </a>
              <a
                href={`mailto:${data.contactInfo.email}`}
                className="flex min-w-0 items-center gap-2.5 text-base sm:text-lg leading-[21px] text-[#dfdfdf] hover:text-[#f58e0e] transition-colors"
              >
                <Image src="/icons/mail.svg" alt="" width={22} height={18} className="w-[22px] h-[18px] shrink-0" />
                <span className="min-w-0 break-all">{data.contactInfo.email}</span>
              </a>
            </div>

            <SocialLinks links={data.socialLinks} />
          </div>
        </div>

        {/* Real `.useful-link` bar — all 9 policy links, pipe-separated */}
        <div className="mt-4 border-t border-b border-[#717171] py-[7px] text-center">
          {data.legalLinks.map((item, i) => (
            <React.Fragment key={item.href}>
              {i > 0 && <span className="text-sm text-[#dfdfdf]"> | </span>}
              {/* `prefetch={false}` — same reasoning as `FooterCol.tsx`: this bar
                  renders unconditionally on every page, and these 9 links firing
                  their default auto-prefetch at once contributed to the request
                  burst that tripped the beta host's rate limiter. */}
              <Link
                href={item.href}
                prefetch={false}
                className="text-sm leading-[18px] px-[7px] text-[#dfdfdf] hover:text-[#f58e0e] transition-colors"
              >
                {item.label}
              </Link>
            </React.Fragment>
          ))}
        </div>

        {/* Real `.footer-img` — DMCA badge + payment methods */}
        <div className="flex items-center justify-center gap-3 py-[15px]">
          <a href={data.dmcaUrl} target="_blank" rel="noopener noreferrer" title="DMCA.com Protection Status">
            <Image src="/icons/dmca-protected.png" alt="DMCA.com Protection Status" width={121} height={24} />
          </a>
          <Image src="/icons/payment-methods.png" alt={data.paymentBadgeAlt} width={207} height={23} />
        </div>

        {/* Real `.disclaimer` */}
        <p className="text-center text-[13px] leading-[17px] text-[#dfdfdf] px-0 sm:px-10">
          {data.disclaimerText}
        </p>

        {/* Real `.ratingcopyright` */}
        <div className="mt-[15px] flex flex-col sm:flex-row items-center justify-between gap-2 text-sm leading-[18px] text-[#dfdfdf]">
          <span>{data.copyrightText}</span>
          <div>
            <span>Assignment Help </span>
            <span>
              Rated <span>{data.ratingInfo.rating}</span> based on <span>{data.ratingInfo.reviewsCount}</span>{" "}
              <Link href={data.ratingInfo.reviewsUrl} className="text-[#dfdfdf] hover:text-[#f58e0e]">
                Reviews
              </Link>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
};