"use client"; import React, { useState, useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import emailjs from "@emailjs/browser"; 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 })); // Clear any stale success/error message once the user resumes editing. if (formStatus === "success" || formStatus === "error") setFormStatus("idle"); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); // EmailJS is fully client-side — only the public-safe credentials are used // (Service ID, Template ID, Public Key). No private/secret key, no backend route. const serviceId = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID; const templateId = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID; const publicKey = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY; if (!serviceId || !templateId || !publicKey) { console.error("EmailJS env vars are missing — set NEXT_PUBLIC_EMAILJS_* in .env.local"); setFormStatus("error"); return; } setFormStatus("submitting"); try { await emailjs.send( serviceId, templateId, { name: formData.fullName, email: formData.email, subject: formData.subject, message: formData.message, }, publicKey, ); 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. */}