import Image from "next/image";
import Link from "next/link";

const footerLinkClass =
  "w-fit text-[15px] font-normal leading-[1.35] text-[#9b869a] transition-all duration-300 ease-out hover:font-bold hover:text-white";

const footerTitleClass =
  "mb-[22px] text-[11px] font-semibold uppercase tracking-[0.24em] text-[#9a7138]";

export default function Footer() {
  return (
    <footer className="bg-[#1A0019] text-white">
      {/* =========================
          FOOTER PART 1
      ========================== */}
      <div className="mx-auto w-full max-w-[1180px] px-5 pb-8 pt-10 sm:px-6 md:pt-12 lg:px-0 lg:pt-[100px]">
        <div
          className="
            grid
            grid-cols-1
            gap-x-10
            gap-y-12
            sm:grid-cols-2
            lg:grid-cols-[1.45fr_0.9fr_0.9fr_0.9fr_1fr]
            lg:gap-x-[58px]
          "
        >
          {/* =====================================
              COLUMN 1 — BRAND
          ====================================== */}
          <div>
            {/* Logo */}
            <Link href="/" className="inline-flex items-center">
              <Image
                src="/images/common/shepays-footer-logo.png"
                alt="ShePays"
                width={168}
                height={48}
                className="h-auto w-[158px] object-contain sm:w-[165px]"
              />
            </Link>

            {/* Description */}
            <p className="mt-[18px] max-w-[285px] text-[15px] leading-[1.65] text-[#9b869a]">
              The all-in-one financial app that turns daily transactions into
              wealth, growth, and leverage. She Leads. She Grows. She Pays.
            </p>

            {/* Google Play */}
            <a
              href="#get-started"
              className="
                mt-[48px]
                inline-flex
                h-[58px]
                min-w-[126px]
                items-center
                gap-3
                rounded-[12px]
                border
                border-[#70576e]
                px-[14px]
                transition-all
                duration-300
                hover:border-[#ae80aa]
                hover:bg-white/[0.03]
              "
            >
              {/* Play Icon */}
              <span className="text-[17px] text-white">▲</span>

              <span className="flex flex-col">
                <span className="text-[8px] font-medium uppercase tracking-[0.18em] text-[#c9bac7]">
                  Get it on
                </span>

                <span className="mt-[1px] text-[13px] font-bold leading-none text-white">
                  Google Play
                </span>
              </span>
            </a>

            {/* Social Media */}
            <div className="mt-[20px] flex flex-wrap gap-[10px]">
              <SocialLink href="https://www.linkedin.com/company/shepays/posts/?feedView=all" label="in" ariaLabel="LinkedIn" />

              <SocialLink href="#" label="ig" ariaLabel="Instagram" />

              <SocialLink href="#" label="x" ariaLabel="X" />

              <SocialLink href="#" label="yt" ariaLabel="YouTube" />
            </div>

            {/* Trust & Legal */}
            <div className="mt-[34px] flex flex-col">
              <h3 className={footerTitleClass}>Trust &amp; Legal</h3>

              <div className="flex flex-col gap-[16px]">
                <FooterLink href="/trust">Trust &amp; safety</FooterLink>

                <FooterLink href="/trust">
                  Accreditations
                </FooterLink>

                <FooterLink href="/legal">Terms &amp; conditions</FooterLink>

                <FooterLink href="/legal#privacy-policy">Privacy policy</FooterLink>

                <FooterLink href="mailto:support@shepays.com">Report fraud</FooterLink>

                <FooterLink href="/contact">
                  Grievance redressal
                </FooterLink>
              </div>
            </div>
          </div>

          {/* =====================================
              COLUMN 2 — UPI SERVICES
          ====================================== */}
          <div>
            <h3 className={footerTitleClass}>UPI Services</h3>

            <div className="flex flex-col gap-[16px]">
              <FooterLink href="/upi">
                Credit Line on UPI
              </FooterLink>

              <FooterLink href="/upi">
                Credit Card on UPI
              </FooterLink>

              <FooterLink href="/upi">Scan &amp; Pay</FooterLink>

              <FooterLink href="/upi">
                Send &amp; receive money
              </FooterLink>

              <FooterLink href="/upi">
                UPI Lite &amp; Lite Autopay
              </FooterLink>

              <FooterLink href="/upi">
                UPI Autopay &amp; mandates
              </FooterLink>

              <FooterLink href="/upi">UPI Number</FooterLink>
            </div>
          </div>

          {/* =====================================
              COLUMN 3 — PRODUCTS
          ====================================== */}
          <div>
            <h3 className={footerTitleClass}>Products</h3>

            <div className="flex flex-col gap-[16px]">
              <FooterLink href="/product">
                Savings account
              </FooterLink>

              <FooterLink href="/product">
                Digital gold
              </FooterLink>

              <FooterLink href="/product">Insurance</FooterLink>

              <FooterLink href="/producty">
                Bill pay (BBPS)
              </FooterLink>

              <FooterLink href="/product">
                Shopping &amp; rewards
              </FooterLink>

              <FooterLink href="/product">Cards</FooterLink>

              <FooterLink href="/tools">Money calculators</FooterLink>

              <FooterLink href="/app">The app</FooterLink>
            </div>
          </div>

          {/* =====================================
              COLUMN 4 — COMPANY
          ====================================== */}
          <div>
            <h3 className={footerTitleClass}>Company</h3>

            <div className="flex flex-col gap-[16px]">
              <FooterLink href="/company">Why we exist</FooterLink>

              <FooterLink href="/company">
                Leadership
              </FooterLink>

              <FooterLink href="/company">Backed by</FooterLink>

              <FooterLink href="/company">For investors</FooterLink>

              <FooterLink href="/blog">Blog</FooterLink>

              <FooterLink href="/contact">Contact us</FooterLink>
            </div>
          </div>

          {/* =====================================
              COLUMN 5 — PARTNERS
          ====================================== */}
          <div>
            <h3 className={footerTitleClass}>Partners</h3>

            <div className="flex flex-col gap-[16px]">
              <FooterLink href="/partners">
                Brands &amp; e-commerce
              </FooterLink>

              <FooterLink href="/partners">
                Banks &amp; NBFCs
              </FooterLink>

              <FooterLink href="/company">
                Investors &amp; incubators
              </FooterLink>

              <FooterLink href="/contact">
                Partnership enquiries
              </FooterLink>
            </div>
          </div>
        </div>
      </div>

      {/* PART 2 WILL GO HERE */}

      {/* =========================
            FOOTER PART 2
        ========================== */}
        <div className="mx-auto w-full max-w-[1180px] px-5 pb-8 sm:px-6 lg:px-0">
        {/* Disclaimer */}
        <div className="border-t border-white/15 pt-[26px]">
            <div className="max-w-[950px] text-[12px] leading-[1.7] text-[#8f7f8d] sm:text-[13px]">
            <p>
                <span className="font-bold text-[#cbbec9]">Important:</span>{" "}
                ShePays is a financial services platform and not a bank. ShePays does
                not claim to possess a banking license. Savings accounts, cards and
                loans are issued by our partner banks and NBFCs.
            </p>

            <p className="mt-[10px]">
                Do not disclose your password, card details, CVV, PIN, OTP or any other
                confidential information to anyone, even if they claim to represent
                ShePays.
            </p>

            <p className="mt-[10px]">
                Brand logos featured on this website indicate potential purchase
                locations for users. We neither endorse nor are endorsed by these
                brands, and their logos remain the property of their respective owners.
                Investments in securities and market-linked products are subject to
                market risks; please read all scheme-related documents carefully.
            </p>
            </div>
        </div>

        {/* Explore Links */}
        <div className="mt-[38px] border-y border-white/15 py-[26px]">
            <div className="flex flex-col gap-4 lg:flex-row lg:items-center">
            <span className="shrink-0 text-[10px] font-semibold uppercase tracking-[0.18em] text-[#8d7b89]">
                Explore
            </span>

            <div className="flex flex-wrap gap-[9px]">
                <ExploreLink href="/">Home</ExploreLink>
                <ExploreLink href="/upi">UPI services</ExploreLink>
                <ExploreLink href="/product">Products</ExploreLink>
                <ExploreLink href="/tools">Money tools</ExploreLink>
                <ExploreLink href="/app">The app</ExploreLink>
                <ExploreLink href="/company">Company</ExploreLink>
                <ExploreLink href="/partners">Partners</ExploreLink>
                <ExploreLink href="/trust">Trust &amp; safety</ExploreLink>
                <ExploreLink href="/legal">Legal</ExploreLink>
                <ExploreLink href="/contact">Contact</ExploreLink>
                <ExploreLink href="mailto:support@shepays.com">Urgent support</ExploreLink>
            </div>
            </div>
        </div>

        {/* Middle Statement */}
        <div className="flex flex-col items-center justify-center py-[28px] text-center sm:py-[30px]">
            <p className="text-[15px] font-semibold text-[#ddd3dc] sm:text-[16px]">
            Made with <span className="text-[#ff4fa3]">♥</span> for every woman
            chasing her dreams
            </p>

            <p className="mt-[13px] text-[10px] font-semibold uppercase tracking-[0.28em] text-[#806f7d] sm:text-[11px]">
            She leads. She grows. She pays.
            </p>
        </div>

        {/* Bottom Row */}
        <div className="flex flex-col gap-5 border-t border-white/15 pt-[24px] sm:flex-row sm:items-center sm:justify-between">
            <p className="text-[12px] text-[#8f7f8d] sm:text-[13px]">
            © 2026 ShePays Financial Services Pvt. Ltd., Gurugram, India.
            </p>

            <div className="flex flex-wrap gap-x-[24px] gap-y-2">
            <FooterLink href="/legal#privacy-policy">Privacy</FooterLink>
            <FooterLink href="/legal">Terms</FooterLink>
            <FooterLink href="/trust">Security</FooterLink>
            <FooterLink href="/contact">Contact</FooterLink>
            </div>
        </div>
        </div>
    </footer>
  );
}

/* ==========================================
   REUSABLE FOOTER LINK
========================================== */

function FooterLink({
  href,
  children,
}: {
  href: string;
  children: React.ReactNode;
}) {
  return (
    <Link href={href} className={footerLinkClass}>
      {children}
    </Link>
  );
}

function ExploreLink({
  href,
  children,
}: {
  href: string;
  children: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      className="
        inline-flex
        min-h-[38px]
        items-center
        justify-center
        rounded-full
        border
        border-[#5c3e58]
        px-[15px]
        text-[12px]
        font-medium
        text-[#c1b2bf]
        transition-all
        duration-300
        ease-out
        hover:border-white/50
        hover:bg-white/[0.04]
        hover:font-bold
        hover:text-white
      "
    >
      {children}
    </Link>
  );
}

/* ==========================================
   SOCIAL LINK
========================================== */

function SocialLink({
  href,
  label,
  ariaLabel,
}: {
  href: string;
  label: string;
  ariaLabel: string;
}) {
  return (
    <a
      href={href}
      aria-label={ariaLabel}
      className="
        flex
        h-[39px]
        w-[39px]
        items-center
        justify-center
        rounded-[11px]
        border
        border-[#64465f]
        text-[12px]
        font-medium
        lowercase
        text-white
        transition-all
        duration-300
        hover:border-white/60
        hover:bg-white
        hover:text-[#24001f]
      "
    >
      {label}
    </a>
  );
}