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

const Footer3 = () => (
    <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-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-50.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-40 text-white">Phasellus ultricies aliquam volutpat ullamcorper laoreet neque, a lacinia curabitur lacinia mollis</p>
                                <div className="footer-socials p-relative">
                                    <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-30 footer-title text-white">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">
                                <h4 className="mb-30 footer-title text-white">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">
                                <h4 className="mb-20 footer-title text-white">Contact Info</h4>
                                <ul className="footer-contact-info-widget p-relative">
                                    {[
                                        { icon: "location-dot", title: "Location:", text: "4517 Washington. mg Manchester, Kentucky 39495" },
                                        { icon: "phone-alt", title: "Phone Call:", text: "208-6666-0112, 308-5555-0113" },
                                        { icon: "clock", title: "Opening Hours:", text: "Mon - Sat: 10.00 AM - 4.00 PM" }
                                    ].map((item, i) => (
                                        <li key={i}>
                                            <div className="icon">
                                                <i className={`fa-solid fa-${item.icon === 'phone-alt' ? 'phone' : item.icon}`}></i>
                                            </div>
                                            <div className="info-details">
                                                <h6 className="mb-10 text-white">{item.title} </h6>
                                                <p className="m-0 text-white">{item.text}</p>
                                            </div>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="small-container">
                <div className="footer-bottom pt-30 pb-30 p-relative">
                    <div className="left-area">
                        <span className="text-white">© All Copyright 2024 by <a href="#">Metatron</a></span>
                    </div>
                    <div className="right-area">
                        <span className="text-white"><Link href="#">Terms & Condition</Link></span>
                        <span className="text-white"><Link href="#">Privacy Policy</Link></span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
);

export default Footer3;
