"use client"; import React, { useState, useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import { ScrollReveal } from "@/animations/Reveal"; export default function Footer() { const socialIconSpacing = { "--grid-column-gap": "52px", "--grid-row-gap": "18px", columnGap: "52px", rowGap: "18px", } as React.CSSProperties; const [showScrollTop, setShowScrollTop] = useState(false); const [formData, setFormData] = useState({ fullName: "", email: "", subject: "", message: "", }); const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); // Handle scroll to top button visibility useEffect(() => { const handleScroll = () => { if (window.scrollY > 300) { setShowScrollTop(true); } else { setShowScrollTop(false); } }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }); }; const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setFormStatus("submitting"); try { // Simulate API submission console.log("Footer contact form submitted:", formData); await new Promise((resolve) => setTimeout(resolve, 1000)); setFormStatus("success"); setFormData({ fullName: "", email: "", subject: "", message: "" }); } catch (err) { console.error(err); setFormStatus("error"); } }; return ( <> {/* Scroll to Top Button */}
{/* Vendor CSS hard-codes font-family: "Manrope" but next/font/google exposes the loaded font only through --font-manrope (it has a hashed internal name). Re-map the footer bottom-section titles to the loaded font and supply the base divider widget border. */}