// Footer.jsx — dark ink panel, design-system type, real anchors.
const FOOTER_EXTERNAL = window.SITE_EXTERNAL_LINKS || {
  email: "mailto:kyle@zaigo.ai",
  linkedIn: "https://www.linkedin.com/company/zaigo-ai/",
};

const FOOTER_SECTION_LINKS = window.SITE_SECTION_LINKS || [
  { href: "#approach", label: "How We Work" },
  { href: "#work", label: "Case Studies" },
  { href: "#about", label: "Team" },
];

const FOOTER_LINKS = {
  sections: FOOTER_SECTION_LINKS,
  contact: [
    { href: FOOTER_EXTERNAL.email, label: "kyle@zaigo.ai" },
    { href: null, label: "Book a call", action: "book" },
  ],
  follow: [
    {
      href: FOOTER_EXTERNAL.linkedIn,
      label: "LinkedIn",
      external: true,
    },
  ],
};

function Footer({ onBookCall }) {
  const sectionRef = React.useRef(null);
  const playedRef = React.useRef(false);

  const handleLink = (item, event) => {
    if (item.action === "book") {
      event.preventDefault();
      onBookCall?.();
    }
  };

  React.useEffect(() => {
    const section = sectionRef.current;
    if (!section) return undefined;

    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const gsap = window.gsap;

    const play = () => {
      if (playedRef.current) return;
      playedRef.current = true;

      const panel = section.querySelector(".zg-footer-panel");
      const logo = section.querySelector(".zg-footer-logo");
      const tagline = section.querySelector(".zg-footer-tagline");
      const cta = section.querySelector(".zg-footer-cta");
      const cols = section.querySelectorAll(".zg-footer-col");
      const bar = section.querySelector(".zg-footer-bar");
      const mono = section.querySelector(".zg-footer-mono");
      const heart = section.querySelector(".zg-footer-heart");

      if (reduced || !gsap) {
        section.classList.add("zg-footer--revealed");
        return;
      }

      const allLabels = Array.from(cols).map((col) =>
        col.querySelector(".zg-footer-col-label")
      );
      const allLinks = Array.from(cols).map((col) =>
        Array.from(col.querySelectorAll(".zg-footer-link, .zg-footer-static"))
      );

      // Lock initial state
      gsap.set(panel, { opacity: 0, y: 40, scale: 0.985, transformOrigin: "50% 100%" });
      gsap.set([logo, tagline, cta], { opacity: 0, y: 18 });
      gsap.set(allLabels.filter(Boolean), { opacity: 0, y: 12 });
      allLinks.forEach((links) => gsap.set(links, { opacity: 0, y: 10 }));
      gsap.set(bar, { opacity: 0, y: 10 });
      if (mono) gsap.set(mono, { opacity: 0, x: 220, rotate: -10, scale: 0.6 });

      const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

      tl.to(panel, { opacity: 1, y: 0, scale: 1, duration: 0.95 })
        .to(logo, { opacity: 1, y: 0, duration: 0.7 }, "-=0.55")
        .to(tagline, { opacity: 1, y: 0, duration: 0.7 }, "-=0.5")
        .to(
          cta,
          { opacity: 1, y: 0, duration: 0.6, ease: "back.out(1.4)" },
          "-=0.42"
        );

      cols.forEach((col, i) => {
        const label = allLabels[i];
        const links = allLinks[i];
        if (label) {
          tl.to(
            label,
            { opacity: 1, y: 0, duration: 0.5 },
            i === 0 ? "-=0.55" : "-=0.42"
          );
        }
        if (links.length) {
          tl.to(
            links,
            { opacity: 1, y: 0, duration: 0.45, stagger: 0.07 },
            "-=0.32"
          );
        }
      });

      tl.to(bar, { opacity: 1, y: 0, duration: 0.55 }, "-=0.25");

      if (mono) {
        tl.to(
          mono,
          {
            opacity: 0.05,
            x: 0,
            rotate: 0,
            scale: 1,
            duration: 1.15,
            ease: "expo.out",
          },
          "-=0.75"
        );
      }

      if (heart) {
        tl.fromTo(
          heart,
          { scale: 1 },
          {
            scale: 1.45,
            duration: 0.22,
            ease: "power2.out",
            yoyo: true,
            repeat: 1,
          },
          "-=0.15"
        );
      }

      tl.add(() => section.classList.add("zg-footer--revealed"));
    };

    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          play();
          io.disconnect();
        }
      },
      { threshold: 0.18 }
    );

    io.observe(section);
    return () => io.disconnect();
  }, []);

  const renderLink = (item) => {
    if (item.static) {
      return (
        <span key={item.label} className="zg-footer-static">
          {item.label}
        </span>
      );
    }

    const Tag = item.action === "book" ? "button" : "a";
    const props =
      item.action === "book"
        ? { type: "button", onClick: (event) => handleLink(item, event) }
        : {
            href: item.href,
            ...(item.external
              ? {
                  target: "_blank",
                  rel: "noopener noreferrer",
                  "aria-label": `${item.label} (opens in new tab)`,
                }
              : {}),
          };

    return (
      <Tag key={item.label} className="zg-footer-link" {...props}>
        {item.label}
      </Tag>
    );
  };

  return (
    <footer ref={sectionRef} className="zg-footer">
      <div className="zg-container">
        <div className="zg-footer-panel">
          <div className="zg-footer-main">
            <div className="zg-footer-brand">
              <a className="zg-footer-logo" href="#top" aria-label="Zaigo home">
                <img
                  src="assets/logos/full-logos/logo-wordmark-on-ink.png"
                  alt="Zaigo"
                />
              </a>
              <p className="zg-footer-tagline">
                Zaigo is the outsourced AI team for small &amp; mid-market companies.
                We map the workflow, build the system, and keep improving it after
                launch.
              </p>
              <button type="button" className="zg-btn zg-footer-cta" onClick={onBookCall}>
                Book a Call <span className="plus">+</span>
              </button>
            </div>

            <div className="zg-footer-cols">
              <div className="zg-footer-col">
                <span className="zg-footer-col-label">Sections</span>
                {FOOTER_LINKS.sections.map((item) => renderLink(item))}
              </div>
              <div className="zg-footer-col">
                <span className="zg-footer-col-label">Contact</span>
                {FOOTER_LINKS.contact.map((item) => renderLink(item))}
              </div>
              <div className="zg-footer-col">
                <span className="zg-footer-col-label">Follow</span>
                {FOOTER_LINKS.follow.map((item) => renderLink(item))}
              </div>
            </div>
          </div>

          <div className="zg-footer-bar">
            <span>© 2026 Zaigo Labs LLC</span>
            <span className="zg-footer-made">
              Made in NYC <span className="zg-footer-heart" aria-hidden="true">♥</span>
            </span>
          </div>

          <span className="zg-footer-mono" aria-hidden="true">
            Z
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;