Footer Section 6

"use client";
import React from "react";
import { HalftoneDots } from "@paper-design/shaders-react";
import Link from "next/link";
import { SocialCloud } from "@/registry/blocks/footer-section/social-cloud";

const companyName = "SolaceUI";

const SolaceUILogo = ({ className }: { className?: string }) => {
  return (
    <svg className={className} width="64" height="38" viewBox="0 0 64 38" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 20.1032L39.8387 20.1032C44.7808 20.1032 48.7871 24.1095 48.7871 29.0516C48.7871 33.9937 44.7808 38 39.8387 38L1.56459e-06 38L0 20.1032Z" fill="currentColor" />
      <path d="M63.4968 17.8968L23.6581 17.8968C18.716 17.8968 14.7097 13.8904 14.7097 8.94839C14.7097 4.00633 18.716 0 23.6581 0L63.4968 0V17.8968Z" fill="currentColor" />
    </svg>
  )
}

const footerLinks = [
  {
    title: "Product",
    links: [
      { name: "Features", href: "#" },
      { name: "Solution", href: "#" },
      { name: "Customers", href: "#" },
      { name: "Pricing", href: "#" },
      { name: "Help", href: "#" },
      { name: "Terms", href: "#" },
    ],
  },
  {
    title: "Company",
    links: [
      { name: "About", href: "#" },
      { name: "Careers", href: "#" },
      { name: "Blogs", href: "#" },
      { name: "Pricing", href: "#" },
      { name: "Contact", href: "#" },
      { name: "Privacy", href: "#" },
    ],
  },
  {
    title: "Social",
    links: [
      { name: "X", href: "#" },
      { name: "LinkedIn", href: "#" },
      { name: "Facebook", href: "#" },
      { name: "Threads", href: "#" },
      { name: "Instagram", href: "#" },
      { name: "Youtube", href: "#" },
    ],
  },
];

export default function FooterSection6() {
  return (
    <footer className="w-full relative overflow-hidden antialiased [font-synthesis:none] bg-white text-black">
      {/* Background Shader */}
      <div className="absolute inset-0 z-0 pointer-events-none opacity-40">
        <HalftoneDots
          contrast={0.01}
          originalColors
          inverted={false}
          grid="hex"
          radius={2}
          size={0.16}
          scale={1}
          type="classic"
          fit="cover"
          image="https://assets.solaceui.com/solaceui-renaissance.webp"
          colorFront="#FFFFFF"
          colorBack="#00000000"
          className="w-full h-full bg-white"
        />
      </div>

      {/* White Fade at Bottom */}
      <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-white via-white/80 to-transparent z-0 pointer-events-none" />

      {/* Content */}
      <div className="relative z-10 max-w-7xl mx-auto px-6 md:px-12 lg:px-24 pt-24 pb-12 flex flex-col min-h-[400px]">
        {/* Top Section */}
        <div className="flex flex-col lg:flex-row justify-between gap-16 lg:gap-8 flex-1">
          {/* Left Side */}
          <div className="flex flex-col justify-between max-w-sm w-full">
            <div className="flex flex-col gap-4 lg:-mt-1.5">
              {/* Logo and Name inline */}
              <div className="flex items-center gap-2.5">
                <SolaceUILogo className="w-9 h-auto shrink-0 text-black" />
                <span className="font-semibold text-black text-2xl md:text-[26px] tracking-tight">{companyName}</span>
              </div>
              <h2 className="text-black/80 text-lg md:text-[20px] font-medium leading-snug">
                Ship Tastefully Crafted<br />Marketing Pages
              </h2>
            </div>

            <div className="mt-12 lg:mt-auto pb-1">
              <SocialCloud className="text-black/70 gap-4" />
            </div>
          </div>

          {/* Right Side - Links */}
          <div className="flex gap-12 md:gap-24 flex-wrap lg:flex-nowrap">
            {footerLinks.map((section) => (
              <div key={section.title} className="flex flex-col gap-5">
                <h3 className="text-black font-medium text-[20px] md:text-[22px]">
                  {section.title}
                </h3>
                <ul className="flex flex-col gap-3 md:gap-4">
                  {section.links.map((link) => (
                    <li key={link.name}>
                      <Link
                        href={link.href}
                        className="text-black/70 hover:text-black transition-colors text-[16px] md:text-[17px]"
                      >
                        {link.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom Centered Copyright */}
        <div className="mt-20 md:mt-24 w-full flex justify-center relative z-10">
          <p className="font-light text-black/70 text-sm md:text-[15px]">
            © 2026 {companyName}, All rights reserved
          </p>
        </div>
      </div>
    </footer>
  );
}