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

const Footer2 = () => (
    <footer>
        <div className="footer-main bg-color-1 p-relative">
            <div className="footer-shape-1" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-1.png)" }}></div>
            <div className="footer-shape-2" style={{ backgroundImage: "url(/assets/imgs/footer/shape-f-2.png)" }}></div>
            <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/imgs/logo/logo-white.svg" alt="" />
                                </figure>
                                <p className="mt-40 mb-30">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
                                <div className="working-hours">
                                    <h6 className="text-white mb-20">Working Hours:</h6>
                                    <ul className="text-white">
                                        <li>Mon - Sat: <span className="fw-lighter">10.00AM - 4.00PM</span></li>
                                        <li>Sunday: <span className="fw-lighter">Close</span></li>
                                    </ul>
                                </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-30 footer-title">Quick Links</h4>
                                <ul className="service-list">
                                    <li><Link href="/about">About Us</Link></li>
                                    <li><Link href="/team">Our Team</Link></li>
                                    <li><Link href="/services">Our Services</Link></li>
                                    <li><Link href="/blog-grid">Latest Blog</Link></li>
                                    <li><Link href="/contact">Contact Us</Link></li>
                                </ul>
                            </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-30 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-4 pr-30">
                                <h4 className="mb-20 footer-title mb-30">Our Gallery</h4>
                                <div className="footer-gallery p-relative">
                                    <a className="popup-image" href="/assets/imgs/footer/footer-1.png"><img src="/assets/imgs/footer/footer-1.png" alt="" /></a>
                                    <a className="popup-image" href="/assets/imgs/footer/footer-2.png"><img src="/assets/imgs/footer/footer-2.png" alt="" /></a>
                                    <a className="popup-image" href="/assets/imgs/footer/footer-3.png"><img src="/assets/imgs/footer/footer-3.png" alt="" /></a>
                                    <a className="popup-image" href="/assets/imgs/footer/footer-4.png"><img src="/assets/imgs/footer/footer-4.png" alt="" /></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="small-container">
                <div className="footer-bottom pt-30 pb-30">
                    <div className="left-area p-relative">
                        <span>© All Copyright 2024 by <a href="#">Metatron</a></span>
                    </div>
                    <div className="footer-socials p-relative">
                        <span><a href="#"><i className="fab fa-facebook-f"></i></a></span>
                        <span><a href="#"><i className="fab fa-twitter"></i></a></span>
                        <span><a href="#"><i className="fab fa-linkedin-in"></i></a></span>
                        <span><a href="#"><i className="fab fa-youtube"></i></a></span>
                    </div>
                    <div className="right-area p-relative">
                        <span><Link href="#">Terms & Condition</Link></span>
                        <span><Link href="#">Privacy Policy</Link></span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
);

export default Footer2;
