MetatronLatestWebsite/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx

"use client";
import React, { useState } from "react";
import Link from "next/link";
import axios from "axios";

const Footer = () => {
    const [email, setEmail] = useState("");
    const [status, setStatus] = useState({ show: false, type: "", message: "" });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!email) return;

        setStatus({ show: false, type: "", message: "" });

        const emailData = {
            email: email,
            message: `Newsletter Subscription Request from: ${email}`,
            to: "info@metatroncubesolutions.com",
            senderName: "Metatroncube Footer Newsletter",
        };

        try {
            const res = await axios.post("https://mailserver.metatronnest.com/send", emailData);
            setStatus({
                show: true,
                type: "success",
                message: res?.data?.message || "Subscribed successfully!",
            });
            setEmail("");
        } catch (error) {
            console.error("❌ Newsletter error:", error);
            setStatus({
                show: true,
                type: "danger",
                message: "Failed to subscribe. Please try again.",
            });
        }
    };

    return (
        <footer>
            <div className="footer-main bg-color-1" style={{ backgroundImage: 'url(/assets/images/footer/footer-bg-2.webp)', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}>
                <div className="footer-top section-space-medium">
                    <div className="small-container">
                        <div className="row g-4">
                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                                <div className="footer-widget-1">
                                    <figure className="image">
                                        <img src="/assets/img-app/logo.webp" alt="footer logo" />
                                    </figure>
                                    <p className="mt-20 mb-40">Metatroncube Software Solutions: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
                                    <div className="footer-socials mb-20">
                                        <span>
                                            <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer">
                                                <i className="fa-brands fa-facebook-f"></i>
                                            </a>
                                        </span>

                                        <span>
                                            <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer">
                                                <i className="fa-brands fa-instagram"></i>
                                            </a>
                                        </span>

                                        <span>
                                            <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer">
                                                <i className="fa-brands fa-twitter"></i>
                                            </a>
                                        </span>

                                        <span>
                                            <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer">
                                                <i className="fa-brands fa-linkedin-in"></i>
                                            </a>
                                        </span>

                                        <span>
                                            <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer">
                                                <i className="fa-brands fa-youtube"></i>
                                            </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                                <div className="footer-widget-2 pl-50">
                                    <h4 className="mb-20 footer-title">Quick Links</h4>
                                    <ul className="service-list">
                                        <li><Link href="#home">Home</Link></li>
                                        <li><Link href="#about">About Us</Link></li>
                                        <li><Link href="#portfolio">Portfolio</Link></li>
                                        <li><Link href="#faq">Faq</Link></li>
                                        <li>
                                            <Link
                                                href="#contact-trigger"
                                                onClick={(e) => {
                                                    e.preventDefault();
                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
                                                }}
                                            >
                                                Contact
                                            </Link>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                                <div className="footer-widget-2">
                                    <h4 className="mb-20 footer-title">Our Services</h4>
                                    <ul className="service-list">
                                        <li><Link href="#services">Mobile App Development</Link></li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                                <div className="footer-widget-4 pr-30">
                                    <h4 className="mb-20 footer-title">Newsletter</h4>
                                    <p>Subscribe our newsletter to get our latest update & news</p>
                                    <div className="footer-subscribe">
                                        {status.show && (
                                            <div className={`alert alert-${status.type === 'danger' ? 'danger' : 'success'} mb-3`} style={{ fontSize: '14px', padding: '10px' }}>
                                                {status.message}
                                            </div>
                                        )}
                                        <form onSubmit={handleSubmit}>
                                            <input
                                                type="email"
                                                name="email"
                                                placeholder="Your email address"
                                                required
                                                suppressHydrationWarning={true}
                                                value={email}
                                                onChange={(e) => setEmail(e.target.value)}
                                            />
                                            <button type="submit" className="testimonial-btn" style={{ backgroundPosition: 'left center' }} suppressHydrationWarning={true}>
                                                SUBSCRIBE NOW
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="small-container">
                    <div className="footer-bottom pt-15 pb-15" style={{ justifyContent: "center" }}>
                        <div className="left-area">
                            <span>Copyright {new Date().getFullYear()} © by{" "}
                                Metatroncube Software Solutions.
                                All Rights Reserved.
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
};

export default Footer;