"use client";

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

const Footer = () => {
  const companyLinks = [
    { label: "Home", href: "/#home" },
    { label: "About Us", href: "/#about" },
    { label: "Product", href: "/#product" },
    { label: "Benefits", href: "/#benefits" },
    { label: "How it works", href: "/#how-it-works" },
    { label: "Use Cases", href: "/#use-cases" },
    { label: "Privacy Policy", href: "/privacy" },
  ];

  const socialLinks = [
    { label: "LinkedIn", href: "https://linkedin.com", icon: "linkedin" },
    { label: "X", href: "https://x.com", icon: "x" },
    { label: "Facebook", href: "https://facebook.com", icon: "facebook" },
    { label: "Instagram", href: "https://instagram.com", icon: "instagram" },
  ];

  return (
    <footer className="bg-brand relative w-full text-white">
      <Image
        src="/images/png/grainy.png"
        width={800}
        height={900}
        alt="Munich City with trees and sensor on it"
        className="absolute top-0 left-0 h-full w-full rounded-2xl object-cover opacity-30 mix-blend-soft-light"
      />
      <div className="tab:px-4 relative z-20 mx-auto max-w-[1420px] pt-16 sm:px-2.5 lg:px-6">
        <div className="tab:flex-row tab:gap-5 flex items-center justify-between sm:flex-col sm:gap-8 md:gap-0">
          {/* Left: Logo, Description, Contact */}
          <div className="flex w-full flex-col gap-1">
            <div className="mb-4 flex items-center gap-2">
              <Image
                src="/images/svg/whispering-logo.svg"
                alt="Whispering Trees"
                width={280}
                height={68}
                className="h-[68px] w-[280px] object-contain"
              />
            </div>

            <p className="font-mium-reg text-b-3-16 leading-b3 tab:mb-6 max-w-xl tracking-[-0.5px] text-white">
              FalktronTrees is redefining urban forestry through IoT and AI —
              turning trees into living data sources for healthier, more
              sustainable cities. Together, we’re shaping a greener, smarter
              future.
            </p>

            <div className="tab:flex-col tab:mb-3 tab:gap-5 mt-6! flex items-start sm:mb-6 sm:flex-col sm:gap-2 md:flex-row">
              <div className="flex items-center gap-2">
                <span className="text-b-3-16 font-mium-reg flex items-center gap-1 font-normal tracking-[-0.5px] text-white">
                  <Image
                    width={20}
                    height={20}
                    src="/images/svg/proicons_call.svg"
                    className="h-5 w-5 object-cover"
                    alt="Call"
                  />
                  Call us:
                </span>
                <a
                  href="tel:+492511234567"
                  className="text-b-3-16 font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
                >
                  +49 251 1234567
                </a>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-b-3-16 font-mium-reg flex items-center gap-1 font-normal tracking-[-0.5px] text-white">
                  <Image
                    width={20}
                    height={20}
                    src="/images/svg/mage_email.svg"
                    className="h-5 w-5 object-cover"
                    alt="email"
                  />
                  Email:
                </span>
                <a
                  href="mailto:info@falktrontrees.com"
                  className="text-b-3-16 font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
                >
                  info@falktrontrees.com
                </a>
              </div>
            </div>

            {/* <Button text="Contact Us" /> */}
          </div>

          {/* Right: Links */}
          <div className="tab:w-max sm:w-full">
            <div className="grid grid-cols-2 gap-8 md:grid-cols-2">
              {/* Company Links */}
              <div className="min-w-[180px]">
                <h3 className="text-b-1-20 font-switzer mb-5 font-medium text-white">
                  Company
                </h3>
                <ul className="space-y-1.5">
                  {companyLinks.map((link) => {
                    // ← current route
                    const isHash = link.href.startsWith("/#"); // ← internal hash
                    const targetId = link.href.replace("/#", "");
                    return (
                      <li key={link.label}>
                        {isHash ? (
                          <a
                            href={link.href}
                            onClick={(e) => {
                              e.preventDefault();
                              const section = document.getElementById(targetId);
                              if (section) {
                                const yOffset = -80;
                                const y =
                                  section.getBoundingClientRect().top +
                                  window.pageYOffset +
                                  yOffset;
                                window.scrollTo({ top: y, behavior: "smooth" });
                              }
                            }}
                            className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
                          >
                            <span className="relative block overflow-hidden">
                              <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
                                {link.label}
                              </span>
                              <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
                                {link.label}
                              </span>
                            </span>
                          </a>
                        ) : (
                          <Link
                            href={link.href}
                            className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
                          >
                            <span className="relative block overflow-hidden">
                              <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
                                {link.label}
                              </span>
                              <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
                                {link.label}
                              </span>
                            </span>
                          </Link>
                        )}
                      </li>
                    );
                  })}
                </ul>
              </div>

              {/* Social Links */}
              <div>
                <h3 className="text-b-1-20 font-switzer mb-5 font-medium text-white">
                  Social Links
                </h3>
                <ul className="space-y-1.5">
                  {socialLinks.map((link) => (
                    <li key={link.label}>
                      <a
                        href={link.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
                      >
                        <span className="relative block overflow-hidden">
                          <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
                            {link.label}
                          </span>
                          <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
                            {link.label}
                          </span>
                        </span>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="font-switzer text-b-2-17 mt-12 border-t border-white/10 pt-6 pb-6 text-center font-normal text-white">
          © {new Date().getFullYear()} Whispering Trees. All rights reserved.
        </div>
      </div>
    </footer>
  );
};

export default Footer;