"use client";

import { useState } from "react";
import NextLink from "next/link";
import Image from "next/image";

// --- Navigation temporarily disabled -------------------------------------
// Shadows every footer <Link> with a non-navigating stub so all link columns,
// the "Let's talk" block and the legal bar still render but go nowhere. The
// external mailto:/tel:/social links use plain <a> tags and are unaffected.
// The brand logo still links home via `NextLink`. To restore, delete this stub
// and rename `NextLink` back to `Link`.
const Link = ({ href, onClick, children, ...props }) => (
  <a
    href="#"
    onClick={(e) => {
      e.preventDefault();
      onClick?.(e);
    }}
    {...props}
  >
    {children}
  </a>
);
// -------------------------------------------------------------------------
import { siteConfig } from "@/config/site";
import { serviceCategories } from "@/data/services";
import { getAllIndustries } from "@/data/industries";
import { ArrowRight, Mail, Phone, XSocial, LinkedIn, GitHub } from "@/components/ui/icons";

/**
 * Site footer — statement CTA, newsletter band, brand + four link columns
 * (Company / Services / Industries / Resources, sourced from the same configs
 * as the header), availability strip, legal bar, giant ghost wordmark.
 */
const SOCIALS = [
  { label: "X (Twitter)", href: siteConfig.links.twitter, Icon: XSocial },
  { label: "LinkedIn", href: siteConfig.links.linkedin, Icon: LinkedIn },
  { label: "GitHub", href: siteConfig.links.github, Icon: GitHub },
];

const industryItems = getAllIndustries().map((i) => ({ title: i.name, href: `/industries/${i.slug}` }));

const COLUMNS = [
  {
    title: "Company",
    items: [
      { title: "About us", href: "/about" },
      { title: "Portfolio", href: "/portfolio" },
      { title: "Careers", href: "/careers" },
      { title: "Blog", href: "/blog" },
      { title: "Contact", href: "/contact" },
    ],
  },
  {
    title: "Services",
    items: [
      ...serviceCategories.map((c) => ({ title: c.title, href: "/services" })),
      { title: "All services", href: "/services" },
    ],
  },
  {
    title: "Industries",
    items: industryItems.map(({ title, href }) => ({ title, href })),
  },
  {
    title: "Resources",
    items: [
      { title: "Case studies", href: "/portfolio" },
      { title: "Insights & guides", href: "/blog" },
      { title: "Privacy Policy", href: "/privacy" },
      { title: "Terms of Service", href: "/terms" },
    ],
  },
];

export default function Footer() {
  const year = new Date().getFullYear();
  const [subscribed, setSubscribed] = useState(false);

  return (
    <footer className="relative overflow-hidden bg-background text-foreground">
      {/* top hairline + glow */}
      <div className="h-px w-full bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
      <div className="pointer-events-none absolute left-1/2 top-0 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full bg-primary/10 blur-[160px]" />

      <div className="container relative">
        {/* Giant CTA row — the whole block is one link */}
        <Link href="/contact" className="group relative block overflow-hidden py-16 md:py-24">
          {/* orange flood rises on hover */}
          <span
            className="absolute inset-0 origin-bottom scale-y-0 bg-gradient-to-r from-primary to-accent transition-transform duration-500 ease-[cubic-bezier(0.76,0,0.24,1)] group-hover:scale-y-100"
            aria-hidden="true"
          />

          <span className="container relative flex items-center justify-between gap-8">
            <span className="min-w-0">
              <span className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground transition-colors duration-300 group-hover:text-background/80">
                <span className="relative flex h-2 w-2">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent opacity-75 group-hover:opacity-0" />
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-accent transition-colors duration-300 group-hover:bg-background" />
                </span>
                Available for new projects — tell us your idea
              </span>
              <span className="mt-4 block font-heading text-6xl font-bold leading-none tracking-tight text-foreground transition-colors duration-300 group-hover:text-background sm:text-7xl lg:text-8xl">
                Let’s talk
                <span className="text-primary transition-colors duration-300 group-hover:text-background">
                  .
                </span>
              </span>
            </span>

            <span className="flex h-20 w-20 shrink-0 items-center justify-center rounded-full border border-border text-foreground transition-all duration-500 group-hover:-rotate-45 group-hover:border-background group-hover:bg-background group-hover:text-primary lg:h-28 lg:w-28">
              <ArrowRight className="h-8 w-8 lg:h-10 lg:w-10" />
            </span>
          </span>
        </Link>

        {/* Newsletter band */}
        <div className="flex flex-col gap-6 border-y border-border py-9 md:flex-row md:items-center md:justify-between">
          <div>
            <h3 className="font-heading text-lg font-semibold">Stay in the loop</h3>
            <p className="mt-1 text-sm text-muted-foreground">
              Product engineering and AI insights — a short note, once a month. No spam.
            </p>
          </div>
          {subscribed ? (
            <p className="rounded-xl border border-primary/30 bg-primary/10 px-5 py-3 text-sm text-foreground">
              Thanks — you’re on the list. 🎉
            </p>
          ) : (
            <form
              onSubmit={(e) => {
                e.preventDefault();
                setSubscribed(true);
              }}
              className="flex w-full max-w-md overflow-hidden rounded-xl border border-border bg-surface/60 transition-colors focus-within:border-primary/50"
            >
              <input
                type="email"
                required
                placeholder="you@company.com"
                className="w-full bg-transparent px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none"
              />
              <button
                type="submit"
                className="group flex shrink-0 items-center gap-1.5 bg-primary px-5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
              >
                Subscribe
                <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
              </button>
            </form>
          )}
        </div>

        {/* Main grid — brand + four link columns */}
        <div className="grid gap-x-8 gap-y-12 py-16 sm:grid-cols-2 lg:grid-cols-[1.6fr_1fr_1.2fr_1fr_1fr]">
          {/* Brand + contact */}
          <div className="sm:col-span-2 lg:col-span-1">
            <NextLink href="/" className="flex items-center gap-2.5 text-lg font-semibold tracking-tight">
              <Image
                src="/images/CerkelLogo.png"
                alt="Cerkel logo"
                width={34}
                height={34}
                className="h-[34px] w-[34px]"
              />
              <span className="font-heading">Cerkel</span>
            </NextLink>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-muted-foreground">
              A technology studio designing, building and scaling web, mobile and AI
              products for ambitious teams — remote-first, delivering worldwide.
            </p>
            <div className="mt-6 space-y-2.5">
              <a
                href={`mailto:${siteConfig.contact.email}`}
                className="flex items-center gap-2.5 text-sm text-foreground/80 transition-colors hover:text-primary"
              >
                <Mail className="h-4 w-4 text-primary" />
                {siteConfig.contact.email}
              </a>
              <a
                href={`tel:${siteConfig.contact.phone.replace(/[^+\d]/g, "")}`}
                className="flex items-center gap-2.5 text-sm text-foreground/80 transition-colors hover:text-primary"
              >
                <Phone className="h-4 w-4 text-primary" />
                {siteConfig.contact.phone}
              </a>
            </div>
            <div className="mt-6 flex gap-2.5">
              {SOCIALS.map(({ label, href, Icon }) => (
                <a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-surface/60 text-muted-foreground transition-all hover:-translate-y-0.5 hover:border-primary/50 hover:text-primary"
                >
                  <Icon className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {COLUMNS.map((group) => (
            <div key={group.title}>
              <h3 className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                <span className="h-1.5 w-1.5 rounded-full bg-primary" />
                {group.title}
              </h3>
              <ul className="mt-5 space-y-2.5">
                {group.items.map((item) => (
                  <li key={item.title}>
                    <Link
                      href={item.href}
                      className="group inline-flex items-center gap-1.5 text-sm text-foreground/80 transition-colors hover:text-primary"
                    >
                      <span className="h-px w-0 bg-primary transition-all duration-300 group-hover:w-3" />
                      {item.title}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Availability strip */}
        <div className="flex flex-col items-start justify-between gap-3 border-t border-border py-5 text-sm text-muted-foreground sm:flex-row sm:items-center">
          <p className="flex items-center gap-2">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-accent" />
            </span>
            Currently taking on new projects
          </p>
          <p>Remote-first · Working across time zones</p>
        </div>

        {/* Legal bar */}
        <div className="flex flex-col items-center justify-between gap-4 border-t border-border py-6 text-xs text-muted-foreground sm:flex-row">
          <p>© {year} {siteConfig.name}. All rights reserved.</p>
          <div className="flex items-center gap-5">
            <Link href="/privacy" className="transition-colors hover:text-foreground">
              Privacy Policy
            </Link>
            <Link href="/terms" className="transition-colors hover:text-foreground">
              Terms of Service
            </Link>
            <Link href="/sitemap" className="transition-colors hover:text-foreground">
              Sitemap
            </Link>
            <button
              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
              aria-label="Back to top"
              className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:border-primary hover:text-primary"
            >
              <ArrowRight className="h-4 w-4 -rotate-90" />
            </button>
          </div>
        </div>
      </div>

      {/* Giant ghost wordmark — anchored to the bottom edge, tightly cropped */}
      <div aria-hidden="true" className="pointer-events-none relative select-none overflow-hidden">
        <p
          className="-mb-[1.5vw] whitespace-nowrap text-center font-heading text-[13vw] font-bold leading-[0.78] tracking-tight text-transparent"
          style={{ WebkitTextStroke: "1.5px rgb(var(--foreground) / 0.15)" }}
        >
          CERKEL
        </p>
      </div>
    </footer>
  );  
}