Website-Generation-Request (1)/src/components/blocks/footers/footer-with-grid.tsx

"use client";

import { cn } from "@/lib/utils";
import Link from "next/link";
import React from "react";
import { Facebook, Twitter, Instagram, Linkedin, Phone, Mail, MapPin } from "lucide-react";

export function FooterWithGrid() {
  return (
    <div className="bg-gray-900 text-white">
      <div className="mx-auto max-w-7xl px-4 py-16 md:px-8">
        <div className="border-b border-gray-700 pb-8">
          <div className="mb-10 max-w-2xl">
            <Logo className="justify-start" />
            <p className="mb-4 text-lg text-gray-300">
              Ceramic Shield provides superior window film solutions with advanced ceramic technology for UV protection, heat rejection, and lasting durability.
            </p>
            <div className="flex flex-col gap-2 text-sm text-gray-400">
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4" />
                <span>(555) 123-FILM</span>
              </div>
              <div className="flex items-center gap-2">
                <Mail className="h-4 w-4" />
                <span>info@ceramicshield.com</span>
              </div>
              <div className="flex items-center gap-2">
                <MapPin className="h-4 w-4" />
                <span>123 Protection Blvd, Shield City, SC 29401</span>
              </div>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 md:grid-cols-4">
          <ul className="text-base">
            <li className="mb-6 text-lg font-bold text-white">
              Products
            </li>
            {PRODUCTS.map((item, idx) => (
              <li key={"products" + idx} className="mb-3">
                <Link
                  href={item.href}
                  className="text-gray-300 hover:text-red-600 transition-colors"
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
          <ul className="text-base">
            <li className="mb-6 text-lg font-bold text-white">
              Services
            </li>
            {SERVICES.map((item, idx) => (
              <li key={"services" + idx} className="mb-3">
                <Link
                  href={item.href}
                  className="text-gray-300 hover:text-red-600 transition-colors"
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
          <ul className="text-base">
            <li className="mb-6 text-lg font-bold text-white">
              About
            </li>
            {ABOUT.map((item, idx) => (
              <li key={"about" + idx} className="mb-3">
                <Link
                  href={item.href}
                  className="text-gray-300 hover:text-red-600 transition-colors"
                >
                  {item.title}
                </Link>
              </li>
            ))}
          </ul>
          <ul className="text-base">
            <li className="mb-6 text-lg font-bold text-white">
              Connect
            </li>
            <li className="mb-3">
              <Link
                href="/contact"
                className="text-gray-300 hover:text-red-600 transition-colors"
              >
                Contact Us
              </Link>
            </li>
            <li className="mb-6">
              <Link
                href="/quote"
                className="text-gray-300 hover:text-red-600 transition-colors"
              >
                Get a Quote
              </Link>
            </li>
            <li>
              <div className="flex space-x-4">
                <Link
                  href="#"
                  className="text-gray-400 hover:text-red-600 transition-colors"
                >
                  <Facebook className="h-5 w-5" />
                </Link>
                <Link
                  href="#"
                  className="text-gray-400 hover:text-red-600 transition-colors"
                >
                  <Twitter className="h-5 w-5" />
                </Link>
                <Link
                  href="#"
                  className="text-gray-400 hover:text-red-600 transition-colors"
                >
                  <Instagram className="h-5 w-5" />
                </Link>
                <Link
                  href="#"
                  className="text-gray-400 hover:text-red-600 transition-colors"
                >
                  <Linkedin className="h-5 w-5" />
                </Link>
              </div>
            </li>
          </ul>
        </div>

        <div className="pt-8 text-center">
          <p className="text-sm text-gray-400">
            &copy; {new Date().getFullYear()} Ceramic Shield. All Rights Reserved.
          </p>
        </div>
      </div>
    </div>
  );
}

const PRODUCTS = [
  { title: "Residential", href: "/products/residential" },
  { title: "Commercial", href: "/products/commercial" },
  { title: "Automotive", href: "/products/automotive" },
];

const SERVICES = [
  { title: "Installation", href: "/services/installation" },
  { title: "Maintenance", href: "/services/maintenance" },
  { title: "Consultation", href: "/services/consultation" },
];

const ABOUT = [
  { title: "Company", href: "/about/company" },
  { title: "Certifications", href: "/about/certifications" },
  { title: "Warranty", href: "/about/warranty" },
];

const Logo = ({ className }: { className?: string }) => {
  return (
    <Link
      href="/"
      className={cn(
        "flex flex-shrink-0 items-center space-x-3 py-6 text-center",
        className
      )}
    >
      <div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-red-600">
        <div className="text-white font-bold text-lg">CS</div>
      </div>
      <div className="flex flex-col">
        <div className="text-2xl font-bold text-white">
          Ceramic Shield
        </div>
        <div className="text-sm text-gray-300">
          Premium Window Film Protection
        </div>
      </div>
    </Link>
  );
};