import React from "react";
import Link from "next/link";

const Footer1 = () => (
    <footer>
        <div className="footer-main bg-color-1">
            <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/logo.webp" alt="" />
                                </figure>
                                <p className="mt-40 mb-40">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
                                <div className="footer-socials">
                                    <span><a href="#"><i className="fa-brands fa-facebook-f"></i></a></span>
                                    <span><a href="#"><i className="fa-brands fa-twitter"></i></a></span>
                                    <span><a href="#"><i className="fa-brands fa-linkedin-in"></i></a></span>
                                    <span><a href="#"><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">Our Services</h4>
                                <ul className="service-list">
                                    <li><Link href="/service-details">IT Management</Link></li>
                                    <li><Link href="/service-details">SEO Optimization</Link></li>
                                    <li><Link href="/service-details">Web Development</Link></li>
                                    <li><Link href="/service-details">Cyber Security</Link></li>
                                    <li><Link href="/service-details">Data Security</Link></li>
                                </ul>
                            </div>
                        </div>
                        <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                            <div className="footer-widget-3">
                                <h4 className="mb-20 footer-title">Latest Post</h4>
                                <ul className="blog-list">
                                    {[1, 2].map((num) => (
                                        <li key={num}>
                                            <div className="footer-blog-post-box mb-15">
                                                <figure className="thumb"><img src={`/assets/imgs/blog/blog-s-${num}.jpg`} alt="" /></figure>
                                                <div className="content">
                                                    <span className="date"><a href="#">05 Dec, 2024</a></span>
                                                    <h6><Link href="#">{num === 1 ? "Tacking the Changes of Retail Industry" : "What’s the Holding Back the It Solution"}</Link></h6>
                                                </div>
                                            </div>
                                        </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>Sign Up For News & Get 30% Off in New User.</p>
                                <div className="footer-subscribe">
                                    <form action="#">
                                        <input type="email" name="email" placeholder="Your email address" required />
                                        <button type="submit" className="primary-btn-1 btn-hover">
                                            SUBSCRIBE NOW
                                            <span className="btn-hover-span"></span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="small-container">
                <div className="footer-bottom pt-30 pb-30">
                    <div className="left-area">
                        <span>© All Copyright 2024 by <a href="#">Metatron</a></span>
                    </div>
                    <div className="right-area">
                        <span><Link href="#">Terms & Condition</Link></span>
                        <span><Link href="#">Privacy Policy</Link></span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
);

export default Footer1;
