Footers

"use client";

import React from "react";
import Link from "next/link";
import { motion } from "motion/react";
import { HugeiconsIcon } from "@hugeicons/react";
import {
  NewTwitterIcon,
  Github01Icon,
  Linkedin01Icon,
  YoutubeIcon,
  InstagramIcon,
} from "@hugeicons/core-free-icons";
import { cn } from "@/lib/utils";

const footerLinks = [
  {
    title: "Products",
    links: [
      { label: "Zendesk for Service", href: "#" },
      { label: "Zendesk for Sales", href: "#" },
      { label: "Integrations", href: "#" },
      { label: "Product updates", href: "#" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Security", href: "#" },
      { label: "Support", href: "#" },
      { label: "Blog", href: "#" },
      { label: "Training", href: "#" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About us", href: "#" },
      { label: "Newsroom", href: "#" },
      { label: "Careers", href: "#" },
      { label: "Legal", href: "#" },
    ],
  },
];

export function FooterV1() {
  return (
    <footer className="w-full bg-background border-t border-border/50 pt-16 pb-8 overflow-hidden">
      <div className="container mx-auto px-6">
        {/* Top Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-16">
          {footerLinks.map((section) => (
            <div key={section.title} className="space-y-4">
              <h4 className="font-bold text-foreground">{section.title}</h4>
              <div className="space-y-2 list-none flex flex-col gap-1">
                {section.links.map((link) => (
                  <span key={link.label}>
                    <Link
                      href={link.href}
                      className="text-muted-foreground hover:text-primary transition-colors text-sm no-underline"
                    >
                      {link.label}
                    </Link>
                  </span>
                ))}
              </div>
            </div>
          ))}

          <div className="col-span-2 space-y-4">
            <h4 className="font-bold text-foreground">Stay Updated</h4>
            <div className="flex gap-2">
              <input
                type="email"
                placeholder="name@company.com"
                className="flex-1 min-w-0 bg-muted/30 border border-border/50 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary outline-none transition-all"
              />
              <button className="bg-foreground text-background px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity whitespace-nowrap">
                Subscribe
              </button>
            </div>
            <p className="text-xs text-muted-foreground">
              By subscribing, you agree to our Terms of Service and Privacy Policy.
            </p>
          </div>
        </div>

        {/* Big CTA */}
        <div className="pt-4 border-y border-border/30 flex flex-col md:flex-row items-center justify-between gap-8">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tighter text-foreground max-w-xl">
            How can we help?{" "}
            <span className="text-primary italic cursor-pointer">
              Contact us.
            </span>
          </h2>
          <div className="flex gap-4">
            {[
              NewTwitterIcon,
              Github01Icon,
              Linkedin01Icon,
              YoutubeIcon,
              InstagramIcon,
            ].map((icon, i) => (
              <Link
                key={i}
                href="#"
                className="w-10 h-10 rounded-full border border-border/50 flex items-center justify-center text-muted-foreground hover:text-primary hover:border-primary transition-all duration-300"
              >
                <HugeiconsIcon icon={icon} size={18} />
              </Link>
            ))}
          </div>
        </div>

        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-muted-foreground mt-6 relative z-10">
          <p>© 2026 Nurav UI Inc. All rights reserved.</p>
          <div className="flex gap-6">
            <Link href="#" className="hover:text-primary">Terms</Link>
            <Link href="#" className="hover:text-primary">Privacy</Link>
            <Link href="#" className="hover:text-primary">Cookies</Link>
            <Link href="#" className="hover:text-primary">Sitemap</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}