/* FOOTER — giant /DATA_DOGS wordmark + link columns + meta strip */

function Footer() {
  const cols = [
    {
      label: "Studio",
      links: [
        { label: "The Problem", href: "#" },
        { label: "The System", href: "#" },
        { label: "Capabilities", href: "#" },
        { label: "Proof", href: "#" },
      ],
    },
    {
      label: "Engagements",
      links: [
        { label: "Free Report", href: "#" },
        { label: "AI Citation Audit", href: "#" },
        { label: "SEO Retainer", href: "#" },
        { label: "Automation Build", href: "#" },
      ],
    },
    {
      label: "Contact",
      links: [
        { label: "hello@datadogs.studio", href: "#" },
        { label: "LinkedIn", href: "#" },
        { label: "X / Twitter", href: "#" },
        { label: "Substack", href: "#" },
      ],
    },
  ];

  // Live clock, refreshed once per second
  const [now, setNow] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hh = String(now.getUTCHours()).padStart(2, "0");
  const mm = String(now.getUTCMinutes()).padStart(2, "0");
  const ss = String(now.getUTCSeconds()).padStart(2, "0");

  return (
    <footer className="bg-black relative overflow-hidden pt-16 md:pt-24 pb-6 md:pb-8 px-4 md:px-6">
      {/* subtle noise */}
      <div className="absolute inset-0 bg-noise opacity-[0.12] pointer-events-none" />

      <div className="relative z-10">
        {/* Top meta row */}
        <div
          className="flex items-center justify-between text-[10px] sm:text-xs tracking-[0.2em] uppercase border-t border-white/10 pt-5 md:pt-6 mb-10 md:mb-14"
          style={{ color: "rgba(225,224,204,0.55)" }}
        >
          <div className="flex items-center gap-2">
            <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary/80 animate-pulse" />
            <span>Studio online</span>
          </div>
          <div className="hidden sm:flex items-center gap-6">
            <span>UTC {hh}:{mm}:{ss}</span>
            <span>Est. 2024</span>
          </div>
          <div>
            <span>v.2026.4</span>
          </div>
        </div>

        {/* Columns row */}
        <div className="grid grid-cols-12 gap-6 md:gap-10 pb-10 md:pb-16">
          {/* Tagline left */}
          <div className="col-span-12 md:col-span-5 lg:col-span-6">
            <div
              className="text-[10px] sm:text-xs tracking-[0.2em] uppercase mb-4 md:mb-5"
              style={{ color: "rgba(225,224,204,0.55)" }}
            >
              Total Visibility Specialists
            </div>
            <p
              className="text-primary text-lg sm:text-xl md:text-2xl font-serif-italic leading-[1.15] max-w-md"
            >
              One system for Google ranking, AI citation, and business automation.
            </p>
          </div>

          {/* Link columns right */}
          <div className="col-span-12 md:col-span-7 lg:col-span-6 grid grid-cols-3 gap-4 sm:gap-8">
            {cols.map((col) => (
              <div key={col.label}>
                <div
                  className="text-[10px] tracking-[0.2em] uppercase mb-4"
                  style={{ color: "rgba(225,224,204,0.45)" }}
                >
                  {col.label}
                </div>
                <ul className="space-y-2.5">
                  {col.links.map((l) => (
                    <li key={l.label}>
                      <a
                        href={l.href}
                        className="nav-link text-[13px] sm:text-sm inline-flex items-center gap-1.5 group whitespace-nowrap"
                      >
                        <span className="border-b border-transparent group-hover:border-primary/60 transition-colors">
                          {l.label}
                        </span>
                        <span
                          aria-hidden="true"
                          className="opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
                        >
                          ↗
                        </span>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Giant wordmark */}
        <div className="relative pb-2 md:pb-4 -mx-1">
          <h2
            className="font-medium leading-[0.85] tracking-[-0.07em] text-left select-none"
            style={{
              color: "#E1E0CC",
              fontSize: "clamp(56px, 17vw, 360px)",
              paddingBottom: "0.18em",
              whiteSpace: "nowrap",
            }}
          >
            /DATA_DOGS
          </h2>
        </div>

        {/* Bottom bar */}
        <div
          className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 border-t border-white/10 pt-5 md:pt-6 text-[11px] sm:text-xs"
          style={{ color: "rgba(225,224,204,0.45)" }}
        >
          <div>© 2026 DATA DOGS — All rights reserved.</div>
          <div className="flex gap-5">
            <a href="#" className="nav-link">Privacy</a>
            <a href="#" className="nav-link">Terms</a>
            <a href="#" className="nav-link">Cookies</a>
          </div>
          <div className="font-mono tracking-wider" style={{ color: "rgba(225,224,204,0.35)" }}>
            51.5074°N / 0.1278°W
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });