import Image from "next/image";
import Link from "next/link";
import { getFooterData } from "@/lib/getFooterData";
import NewsletterForm from "@/components/newsletter/NewsletterForm";

interface MenuItem {
  id: string;
  label: string;
  uri?: string | null;
}

interface MenuData {
  menuItems?: {
    nodes?: MenuItem[];
  };
}

export default async function Footer() {
  const {
    quickLinks,
    services,
  }: {
    quickLinks: MenuData;
    services: MenuData;
  } = await getFooterData();
  const message = encodeURIComponent("Hello! I want to know more about your services.");

  return (
    <>
    <footer className="bg-black text-white pt-20">
      <div className="container mx-auto px-4 grid lg:grid-cols-4 gap-8">

        {/* Brand */}
        <div>
          <Link href="/" className="flex items-center gap-2">
            <Image
              src="/togwe-logo.png"   // put logo in public/
              alt="Togwe"
              width={110}
              height={78}
              priority
            />
          </Link>
          <p className="text-lg text-white/70 mb-6">
            We are an empire of creativity, strategy, branding, and game management that reshapes the virtual landscape and opens a dream realm of innovation to toast success!
          </p>

          {/* Social Icons */}
          <h3 className="font-mono font-medium text-[20px] mb-4">Follow Us</h3>

          <div className="flex items-center gap-1 md:gap-3 mt-3">
            <Link href="https://www.facebook.com/togweofficial" target="_blank">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="36" height="36" rx="4" fill="#202020"/>
                <path d="M19.4648 27V18.7894H22.3594L22.7928 15.5895H19.4647V13.5465C19.4647 12.6201 19.7349 11.9888 21.1303 11.9888L22.91 11.988V9.12607C22.6022 9.08715 21.5457 9 20.3167 9C17.7507 9 15.9939 10.4912 15.9939 13.2297V15.5895H13.0918V18.7894H15.9939V26.9999H19.4648V27Z" fill="white"/>
              </svg>
            </Link>
            <Link href="https://twitter.com/togweofficial" target="_blank">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="36" height="36" rx="4" fill="#202020"/>
                <path d="M22.682 10.6875H25.1641L19.743 16.882L26.1203 25.3125H21.1281L17.2152 20.2008L12.7434 25.3125H10.2578L16.0551 18.6855L9.94141 10.6875H15.0602L18.5934 15.3598L22.682 10.6875ZM21.8102 23.8289H23.1848L14.3113 12.0938H12.8348L21.8102 23.8289Z" fill="white"/>
              </svg>
            </Link>
            <Link href="https://www.instagram.com/togweofficial/" target="_blank">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="36" height="36" rx="4" fill="#202020"/>
                <path d="M18 9C21.5951 9 23.3928 8.9998 24.6875 9.85645C25.2657 10.239 25.761 10.7343 26.1436 11.3125C27.0002 12.6072 27 14.4049 27 18C27 21.5951 27.0002 23.3928 26.1436 24.6875C25.761 25.2657 25.2657 25.761 24.6875 26.1436C23.3928 27.0002 21.5951 27 18 27C14.4049 27 12.6072 27.0002 11.3125 26.1436C10.7343 25.761 10.239 25.2657 9.85645 24.6875C8.9998 23.3928 9 21.5951 9 18C9 14.4049 8.9998 12.6072 9.85645 11.3125C10.239 10.7343 10.7343 10.239 11.3125 9.85645C12.6072 8.9998 14.4049 9 18 9ZM17.999 13.3398C15.4259 13.34 13.34 15.4259 13.3398 17.999C13.3398 20.5723 15.4258 22.6581 17.999 22.6582C20.5723 22.6582 22.6582 20.5723 22.6582 17.999C22.6581 15.4258 20.5723 13.3398 17.999 13.3398ZM17.999 14.916C19.7016 14.916 21.0819 16.2964 21.082 17.999C21.082 19.7017 19.7017 21.082 17.999 21.082C16.2964 21.0819 14.916 19.7016 14.916 17.999C14.9161 16.2965 16.2965 14.9161 17.999 14.916ZM22.8428 12.0117C22.2382 12.0117 21.7481 12.5018 21.748 13.1064C21.748 13.7111 22.2381 14.2012 22.8428 14.2012C23.4474 14.2011 23.9375 13.7111 23.9375 13.1064C23.9374 12.5019 23.4473 12.0118 22.8428 12.0117Z" fill="white"/>
              </svg>
            </Link>
            <Link href="https://www.linkedin.com/company/togwe/" target="_blank">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="36" height="36" rx="4" fill="#202020"/>
                <path d="M9 11.4191C9 10.8419 9.20271 10.3657 9.60811 9.9905C10.0135 9.61532 10.5405 9.42773 11.1892 9.42773C11.8263 9.42773 12.3417 9.61243 12.7355 9.98185C13.1409 10.3628 13.3436 10.8592 13.3436 11.471C13.3436 12.0251 13.1467 12.4869 12.7529 12.8563C12.3475 13.2373 11.8147 13.4277 11.1544 13.4277H11.1371C10.5 13.4277 9.98456 13.2373 9.59073 12.8563C9.19691 12.4754 9 11.9963 9 11.4191ZM9.22587 26.5706V15.0035H13.083V26.5706H9.22587ZM15.2201 26.5706H19.0772V20.1117C19.0772 19.7077 19.1236 19.396 19.2162 19.1766C19.3784 18.7841 19.6245 18.4523 19.9546 18.181C20.2847 17.9097 20.6988 17.7741 21.1969 17.7741C22.4942 17.7741 23.1429 18.6456 23.1429 20.3888V26.5706H27V19.9386C27 18.23 26.5946 16.9342 25.7838 16.0511C24.973 15.168 23.9015 14.7264 22.5695 14.7264C21.0753 14.7264 19.9112 15.3671 19.0772 16.6485V16.6831H19.0598L19.0772 16.6485V15.0035H15.2201C15.2432 15.3729 15.2548 16.5215 15.2548 18.4494C15.2548 20.3772 15.2432 23.0843 15.2201 26.5706Z" fill="white"/>
              </svg>
            </Link>
            {/* <Link href="https://www.youtube.com/" target="_blank">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="36" height="36" rx="4" fill="#202020"/>
                <path d="M18.4383 24.9802L14.3761 24.9042C13.0608 24.8778 11.7423 24.9306 10.4528 24.6565C8.49128 24.247 8.35232 22.2391 8.20691 20.5549C8.00654 18.187 8.08411 15.7762 8.46222 13.4281C8.67567 12.1106 9.51571 11.3244 10.8148 11.2389C15.2001 10.9284 19.6147 10.9652 23.9903 11.1101C24.4524 11.1233 24.9177 11.1959 25.3734 11.2785C27.6227 11.6814 27.6775 13.9568 27.8233 15.8723C27.9688 17.8075 27.9074 19.7527 27.6294 21.6747C27.4065 23.2661 26.9798 24.6007 25.1795 24.7295C22.9237 24.898 20.7197 25.0336 18.4576 24.9904C18.4577 24.9802 18.4447 24.9802 18.4383 24.9802ZM16.0501 20.9512C17.75 19.9538 19.4175 18.973 21.1076 17.9823C19.4046 16.9849 17.7403 16.0041 16.0501 15.0133V20.9512Z" fill="white"/>
              </svg>
            </Link> */}
          </div>
        </div>
        <div className="col-span-2 grid md:grid-cols-2 lg:grid-cols-2 gap-8">
          {/* Quick Links */}
          <div>
            <h4 className="font-mono font-medium text-[20px] mb-4">Quick Links</h4>
            <ul className="space-y-3 text-[16px] text-white">
              {quickLinks?.menuItems?.nodes
                ?.filter((item: MenuItem) => item?.uri)
                .map((item: MenuItem) => (
                  <li key={item.id}>
                    <Link href={item.uri!} className="hover:text-white">
                      {item.label}
                    </Link>
                  </li>
                ))}
            </ul>
          </div>

          {/* Services */}
          <div>
            <h4 className="font-mono font-medium text-[20px] mb-4">Services</h4>
            <ul className="space-y-3 text-[16px] text-white">
              {services?.menuItems?.nodes
                ?.filter((item: MenuItem) => item?.uri)
                .map((item: MenuItem) => (
                  <li key={item.id}>
                    <Link href={item.uri!} className="hover:text-white">
                      {item.label}
                    </Link>
                  </li>
                ))}
            </ul>

          </div>
        </div>

        {/* Newsletter */}
        <div>
          <h4 className="font-mono font-medium text-[20px]">Join our Newsletter</h4>
          <p className="text-[16px] text-white/70 mb-5">
            Only updates and offers. No spam.
          </p>

          {/* MC4WP FORM */}
          <NewsletterForm />
        </div>
      </div>

      {/* Bottom */}
      <div className="border-t border-white/15 mt-16 py-6 text-center text-sm text-white">
        © {new Date().getFullYear()} Togwe Private Limited | All Rights Reserved
      </div>
    </footer>
    
    <Link 
        href={`https://wa.me/9091234111?text=${message}`}
        target="_blank" 
        rel="noopener noreferrer"
        className="whatsapp-sticky-btn"
        aria-label="Join our WhatsApp Channel"
      >
        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="24" cy="24" r="24" fill="white" fillOpacity="0.08"/>
          <path d="M32.86 15.892C31.7596 14.7809 30.4492 13.8999 29.005 13.3004C27.5608 12.7009 26.0117 12.3948 24.448 12.4C17.896 12.4 12.556 17.74 12.556 24.292C12.556 26.392 13.108 28.432 14.14 30.232L12.46 36.4L18.76 34.744C20.5 35.692 22.456 36.196 24.448 36.196C31 36.196 36.34 30.856 36.34 24.304C36.34 21.124 35.104 18.136 32.86 15.892ZM24.448 34.18C22.672 34.18 20.932 33.7 19.408 32.8L19.048 32.584L15.304 33.568L16.3 29.92L16.06 29.548C15.073 27.9724 14.5491 26.1511 14.548 24.292C14.548 18.844 18.988 14.404 24.436 14.404C27.076 14.404 29.56 15.436 31.42 17.308C32.3411 18.2246 33.0711 19.315 33.5675 20.516C34.064 21.7169 34.317 23.0045 34.312 24.304C34.336 29.752 29.896 34.18 24.448 34.18ZM29.872 26.788C29.572 26.644 28.108 25.924 27.844 25.816C27.568 25.72 27.376 25.672 27.172 25.96C26.968 26.26 26.404 26.932 26.236 27.124C26.068 27.328 25.888 27.352 25.588 27.196C25.288 27.052 24.328 26.728 23.2 25.72C22.312 24.928 21.724 23.956 21.544 23.656C21.376 23.356 21.52 23.2 21.676 23.044C21.808 22.912 21.976 22.696 22.12 22.528C22.264 22.36 22.324 22.228 22.42 22.036C22.516 21.832 22.468 21.664 22.396 21.52C22.324 21.376 21.724 19.912 21.484 19.312C21.244 18.736 20.992 18.808 20.812 18.796H20.236C20.032 18.796 19.72 18.868 19.444 19.168C19.18 19.468 18.412 20.188 18.412 21.652C18.412 23.116 19.48 24.532 19.624 24.724C19.768 24.928 21.724 27.928 24.7 29.212C25.408 29.524 25.96 29.704 26.392 29.836C27.1 30.064 27.748 30.028 28.264 29.956C28.84 29.872 30.028 29.236 30.268 28.54C30.52 27.844 30.52 27.256 30.436 27.124C30.352 26.992 30.172 26.932 29.872 26.788Z" fill="white"/>
        </svg>
      </Link>
    </>
  );
}
