Footer 3

"use client";
import { ArrowUpRight } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";

const pages = [
  "Home",
  "Projects",
  "About Us",
  "Solutions",
  "Careers",
  "News",
  "Contact",
];

const socials = ["Instagram", "X", "Linkedin"];

const formatTime = () =>
  new Date().toLocaleTimeString("en-US", {
    hour: "2-digit",
    hour12: false,
    minute: "2-digit",
    second: "2-digit",
  });

export default function Footer() {
  const [currentTime, setCurrentTime] = React.useState(formatTime());

  React.useEffect(() => {
    const timer = setInterval(() => setCurrentTime(formatTime()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <footer className="w-full bg-[#122023] px-6 pt-20 pb-10 text-[#e1fcad] md:px-10">
      <div className="mx-auto flex max-w-full flex-col gap-16">
        <div className="grid gap-16 lg:grid-cols-[minmax(0,1fr)_auto]">
          <div className="flex flex-col justify-between gap-12">
            <div className="max-w-xl space-y-6">
              <p className="font-normal text-3xl sm:text-2xl">
                Start your project today! Contact us to learn more and
                let&apos;s work together to achieve your goals.
              </p>
              <Button className="group not-disabled:inset-shadow-none flex cursor-pointer items-center justify-center gap-0 rounded-full border-none bg-transparent px-0 py-5 font-normal shadow-none hover:bg-transparent [:hover,[data-pressed]]:bg-transparent">
                <span className="rounded-full bg-[#e1fcad] px-6 py-3 text-black duration-500 ease-in-out group-hover:bg-[#122023] group-hover:text-[#e1fcad] group-hover:transition-colors">
                  Start a Project
                </span>
                <div className="relative flex h-fit cursor-pointer items-center overflow-hidden rounded-full bg-[#e1fcad] p-5 text-black duration-500 ease-in-out group-hover:bg-[#122023] group-hover:text-[#e1fcad] group-hover:transition-colors">
                  <ArrowUpRight className="absolute h-5 w-5 -translate-x-1/2 transition-all duration-500 ease-in-out group-hover:translate-x-10" />
                  <ArrowUpRight className="absolute h-5 w-5 -translate-x-10 transition-all duration-500 ease-in-out group-hover:-translate-x-1/2" />
                </div>
              </Button>
            </div>
          </div>
          <div className="flex flex-col gap-12 text-base lg:flex-row lg:items-start lg:gap-16">
            <div>
              <span className="mb-4 block text-[#aefc72] text-xs uppercase tracking-[0.35em]">
                ↳ Pages
              </span>
            </div>
            <div>
              <ul className="space-y-3">
                {pages.map((item) => (
                  <li key={item}>
                    <a className="transition hover:text-white/80" href="#">
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <span className="mb-4 block text-[#aefc72] text-xs uppercase tracking-[0.35em]">
                ↳ Social
              </span>
            </div>
            <div>
              <ul className="space-y-3">
                {socials.map((item) => (
                  <li key={item}>
                    <a className="transition hover:text-white/80" href="#">
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
        <div className="flex flex-col items-end justify-between gap-4 text-[#aefc72] text-xs uppercase tracking-[0.35em] sm:flex-row">
          <div className="font-medium text-[4rem] uppercase leading-none sm:text-[6rem] md:text-[7rem] lg:text-[8rem]">
            ©Aero
          </div>

          <div className="space-x-5 font-mono">
            <span>INDIA: {currentTime}</span>
            <span className="text-[#E2FF8C]/80 text-[0.65rem] tracking-[0.4em]">
              ©2025 Aero All Rights Reserved
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}