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

const Footer1 = () => {
    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.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/images/logo/white-logo-2.png" alt="footer logo" />
                                    </figure>
                                    <p className="mt-20 mb-40">Metatroncube Software Solution: 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</Link></li>
                                        <li><Link href="/about-us">About</Link></li>
                                        <li><Link href="/careers">Careers</Link></li>
                                        <li><Link href="/portfolio">Portfolio</Link></li>
                                        <li><Link href="/faq">Faq</Link></li>
                                        <li><Link href="/blog">Blog</Link></li>
                                        <li><Link href="/contact">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="/service/website-development-company">Website Development</Link></li>
                                        <li><Link href="/service/mobile-application-development">Mobile Application Development</Link></li>
                                        <li><Link href="/service/graphic-designing-company">Graphic Designing</Link></li>
                                        <li><Link href="/service/ui-ux-designing">UI / UX Designing</Link></li>
                                        <li><Link href="/service/search-engine-optimization-seo-content-writing">SEO & Content Writing</Link></li>
                                        <li><Link href="/service/digital-marketing-agency-in-canada">Digital Marketing</Link></li>
                                        <li><Link href="/service/erp-development-implementation">ERP Development & Implementation</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">
                        <div className="left-area">
                            <span>Copyright {new Date().getFullYear()} © by{" "}
                                Metatroncube Software Solution.
                                All Rights Reserved.
                            </span>
                        </div>
                        <div className="right-area">
                            <span><Link href="/accessibility-statement-for-metatroncube-software-solutions">Accessibility Statement</Link></span>
                            <span style={{ margin: '0 8px' }}>/</span>
                            <span><Link href="/privacy-policy">Privacy Policy</Link></span>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
};

export default Footer1;