import React from "react";

// ── Preloader ──────────────────────────────────────────────
export const Preloader = () => (
    <div id="preloader">
        <div className="bd-loader-inner">
            <div className="bd-loader">
                <span className="bd-loader-item"></span>
                <span className="bd-loader-item"></span>
                <span className="bd-loader-item"></span>
                <span className="bd-loader-item"></span>
                <span className="bd-loader-item"></span>
                <span className="bd-loader-item"></span>
                <span className="bd-loader-item"></span>
                <span className="bd-loader-item"></span>
            </div>
        </div>
    </div>
);

// ── Back To Top ────────────────────────────────────────────
export const BackToTop = () => (
    <div className="backtotop-wrap cursor-pointer">
        <svg className="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
);

// ── Search Overlay ─────────────────────────────────────────
export const SearchOverlay = () => (
    <>
        <div className="df-search-area">
            <div className="container">
                <div className="row">
                    <div className="col-xl-12">
                        <div className="df-search-form">
                            <div className="df-search-close text-center mb-20">
                                <button className="df-search-close-btn df-search-close-btn"></button>
                            </div>
                            <form action="#">
                                <div className="df-search-input mb-10">
                                    <input type="text" placeholder="Search here..." />
                                    <button type="submit"><i className="icon-search"></i></button>
                                </div>
                                <div className="df-search-category">
                                    <span>Search by : </span>
                                    <a href="#">Modified Metatron, </a>
                                    <a href="#">Metatron Installation, </a>
                                    <a href="#">Metatron Cornering, </a>
                                    <a href="#">Metatron Renovation </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="body-overlay"></div>
    </>
);

// ── Offcanvas Sidebar ──────────────────────────────────────
export const Offcanvas = () => (
    <>
        <div className="fix">
            <div className="offcanvas__info">
                <div className="offcanvas__wrapper">
                    <div className="offcanvas__content">
                        <div className="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
                            <div className="offcanvas__logo">
                                <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a>
                            </div>
                            <div className="offcanvas__close">
                                <button><i className="fal fa-times"></i></button>
                            </div>
                        </div>
                        <div className="offcanvas__search mb-25">
                            <p className="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum maxime accusamus corrupti natus obcaecati vitae dignissimos, id officiis similique eos.</p>
                        </div>
                        <div className="mobile-menu fix mb-40"></div>
                        <div className="offcanvas__contact mt-30 mb-20">
                            <h4>Contact Info</h4>
                            <ul>
                                <li className="d-flex align-items-center">
                                    <div className="offcanvas__contact-icon mr-15">
                                        <i className="fal fa-map-marker-alt"></i>
                                    </div>
                                    <div className="offcanvas__contact-text">
                                        <a target="_blank" href="#">31 Park End St, Brockhampton, UK</a>
                                    </div>
                                </li>
                                <li className="d-flex align-items-center">
                                    <div className="offcanvas__contact-icon mr-15">
                                        <i className="far fa-phone"></i>
                                    </div>
                                    <div className="offcanvas__contact-text">
                                        <a href="tel:+00112233665">+00112233665</a>
                                    </div>
                                </li>
                                <li className="d-flex align-items-center">
                                    <div className="offcanvas__contact-icon mr-15">
                                        <i className="fal fa-envelope"></i>
                                    </div>
                                    <div className="offcanvas__contact-text">
                                        <a href="mailto:support@example.com">support@example.com</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div className="offcanvas__social">
                            <ul>
                                <li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i className="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i className="fab fa-youtube"></i></a></li>
                                <li><a href="#"><i className="fab fa-linkedin"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="offcanvas__overlay"></div>
        <div className="offcanvas__overlay-white"></div>
    </>
);

// ── Shared Nav Menu ────────────────────────────────────────
export const NavMenu = () => (
    <ul>
        <li className="has-dropdown active">
            <a href="/">Home</a>
            {/* <ul className="submenu">
                <li><a href="/">Home One</a></li>
                <li><a href="/home-2">Home Two</a></li>
                <li><a href="/home-3">Home Three</a></li>
                <li><a href="#">Home Dark</a></li>
            </ul> */}
        </li>
        <li><a href="/about">About</a></li>
        <li className="has-dropdown">
            <a href="/services">Services</a>
            <ul className="submenu">
                <li><a href="/services">Services</a></li>
                <li><a href="/service-details">Service Details</a></li>
            </ul>
        </li>
        <li className="has-dropdown">
            <a href="/blog-grid">Pages</a>
            <ul className="submenu">
                <li className="has-dropdown">
                    <a href="/projects">Projects</a>
                    <ul className="submenu">
                        <li><a href="/projects">Projects</a></li>
                        <li><a href="/project-details">Projects Details</a></li>
                    </ul>
                </li>
                <li><a href="/team">Team</a></li>
                <li><a href="/team-details">Team Details</a></li>
                <li><a href="/faq">Faq&apos;s</a></li>
                <li><a href="/error">Error Page</a></li>
            </ul>
        </li>
        <li className="has-dropdown">
            <a href="/blog-grid">Blog</a>
            <ul className="submenu">
                <li><a href="/blog-standard">Blog Default</a></li>
                <li><a href="/blog-grid">Blog Grid</a></li>
                <li><a href="/blog-details">Blog Details</a></li>
            </ul>
        </li>
        <li><a href="/contact">Contact</a></li>
    </ul>
);

// ── Header 1 (Home One) ────────────────────────────────────
export const Header1 = () => (
    <header>
        <div className="container-fluid bg-color-1">
            <div className="header-top">
                <div className="header-top-contact-info">
                    <span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span>
                    <span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span>
                </div>
                <div className="header-top-socials">
                    <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>
        </div>
        <div id="header-sticky" className="header-area">
            <div className="large-container">
                <div className="mega-menu-wrapper">
                    <div className="header-main">
                        <div className="header-left">
                            <div className="header-logo">
                                <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
                            </div>
                        </div>
                        <div className="header-right d-flex justify-content-end">
                            <div className="mean__menu-wrapper d-none d-lg-block">
                                <div className="main-menu">
                                    <nav id="mobile-menu"><NavMenu /></nav>
                                </div>
                            </div>
                            <div className="search-toggle-open header-search my-auto">
                                <div className="search-icon"><i className="icon-search"></i></div>
                            </div>
                            <div className="header-shopping-cart my-auto">
                                <div className="cart-icon"><a href="#"><i className="icon-shopping-cart"></i></a></div>
                            </div>
                            <div className="header-action d-none d-xl-inline-flex gap-5">
                                <div className="header-link">
                                    <a className="primary-btn-1 btn-hover" href="/contact">
                                        GET A QUOTE &nbsp; | <i className="icon-right-arrow"></i>
                                        <span className="btn-hover-span"></span>
                                    </a>
                                </div>
                            </div>
                            <div className="header-action">
                                <div className="header-link-1">
                                    <div className="icon"><i className="fal fa-phone-volume"></i></div>
                                    <div className="content">
                                        <span>Call Us Now</span>
                                        <h6><a href="tel:2085550112">+208-555-0112</a></h6>
                                    </div>
                                </div>
                            </div>
                            <div className="header__hamburger d-xl-none my-auto">
                                <div className="sidebar__toggle">
                                    <a className="bar-icon" href="javascript:void(0)">
                                        <i className="fa-light fa-bars-sort"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
);

// ── Header 2 (Home Two) ───────────────────────────────────
export const Header2 = () => (
    <header>
        <div id="header-sticky" className="header-area header-style-two">
            <div className="large-container">
                <div className="mega-menu-wrapper">
                    <div className="header-main">
                        <div className="header-left">
                            <div className="header-logo">
                                <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
                            </div>
                        </div>
                        <div className="header-right d-flex justify-content-end">
                            <div className="mean__menu-wrapper d-none d-lg-block">
                                <div className="main-menu">
                                    <nav id="mobile-menu"><NavMenu /></nav>
                                </div>
                            </div>
                            <div className="search-toggle-open header-search my-auto">
                                <div className="search-icon"><i className="icon-search"></i></div>
                            </div>
                            <div className="header-shopping-cart my-auto">
                                <div className="cart-icon"><a href="#"><i className="icon-shopping-cart"></i></a></div>
                            </div>
                            <div className="header-action d-none d-xl-inline-flex gap-5">
                                <div className="header-link">
                                    <a className="primary-btn-2 btn-hover" href="/contact">
                                        GET A QUOTE &nbsp; | <i className="icon-right-arrow"></i>
                                        <span className="btn-hover-span"></span>
                                    </a>
                                </div>
                            </div>
                            <div className="header-action">
                                <div className="header-link-1">
                                    <div className="icon text-white"><i className="fal fa-phone-volume"></i></div>
                                    <div className="content">
                                        <span className="text-white">Call Us Now</span>
                                        <h6><a href="tel:2085550112" className="text-white">+208-555-0112</a></h6>
                                    </div>
                                </div>
                            </div>
                            <div className="header__hamburger d-xl-none my-auto">
                                <div className="sidebar__toggle">
                                    <a className="bar-icon" href="javascript:void(0)">
                                        <i className="fa-light fa-bars-sort"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
);

// ── Header 3 (Home Three) ─────────────────────────────────
export const Header3 = () => (
    <header>
        <div className="container-fluid bg-color-1">
            <div className="header-top">
                <div className="header-top-contact-info">
                    <span className="email p-relative"><a href="mailto:info@Metatron.com">info@Metatron.com</a></span>
                    <span className="time p-relative">Hours: Mon - Sat: 10.00 AM - 4.00 PM</span>
                </div>
                <div className="header-top-socials">
                    <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>
        </div>
        <div id="header-sticky" className="header-area header-style-three">
            <div className="large-container">
                <div className="mega-menu-wrapper">
                    <div className="header-main">
                        <div className="header-left">
                            <div className="header-logo">
                                <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="header logo" /></a>
                            </div>
                        </div>
                        <div className="header-right d-flex justify-content-end">
                            <div className="mean__menu-wrapper d-none d-lg-block">
                                <div className="main-menu">
                                    <nav id="mobile-menu"><NavMenu /></nav>
                                </div>
                            </div>
                            <div className="search-toggle-open header-search my-auto">
                                <div className="search-icon"><i className="icon-search"></i></div>
                            </div>
                            <div className="header-shopping-cart my-auto">
                                <div className="cart-icon"><a href="/shop"><i className="icon-shopping-cart"></i></a></div>
                            </div>
                            <div className="header__hamburger d-xl-block my-auto">
                                <div className="sidebar__toggle">
                                    <a className="bar-icon" href="javascript:void(0)">
                                        <i className="fa-light fa-bars-sort"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
);

// ── Footer 1 (Home One) ───────────────────────────────────
export 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-app/home/footer/footer-logo-black.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="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>
                        </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><a href="/service-details">IT Management</a></li>
                                    <li><a href="/service-details">SEO Optimization</a></li>
                                    <li><a href="/service-details">Web Development</a></li>
                                    <li><a href="/service-details">Cyber Security</a></li>
                                    <li><a href="/service-details">Data Security</a></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><a href="#">{num === 1 ? "Tacking the Changes of Retail Industry" : "What’s the Holding Back the It Solution"}</a></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><a href="#">Terms & Condition</a></span>
                        <span><a href="#">Privacy Policy</a></span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
);

// ── Footer 2 (Home Two) ───────────────────────────────────
export 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/img-app/home/footer/footer-logo-black.webp" 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><a href="/about">About Us</a></li>
                                    <li><a href="/team">Our Team</a></li>
                                    <li><a href="/services">Our Services</a></li>
                                    <li><a href="/blog-grid">Latest Blog</a></li>
                                    <li><a href="/contact">Contact Us</a></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><a href="/service-details">IT Management</a></li>
                                    <li><a href="/service-details">SEO Optimization</a></li>
                                    <li><a href="/service-details">Web Development</a></li>
                                    <li><a href="/service-details">Cyber Security</a></li>
                                    <li><a href="/service-details">Data Security</a></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><a href="#">Terms & Condition</a></span>
                        <span><a href="#">Privacy Policy</a></span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
);

// ── Footer 3 (Home Three) ───────────────────────────────────
export 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/img-app/home/footer/footer-logo-black.webp" 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="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>
                        </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><a href="/about">About Us</a></li>
                                    <li><a href="/team">Our Team</a></li>
                                    <li><a href="/services">Our Services</a></li>
                                    <li><a href="/blog-grid">Latest Blog</a></li>
                                    <li><a href="/contact">Contact Us</a></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><a href="/service-details">IT Management</a></li>
                                    <li><a href="/service-details">SEO Optimization</a></li>
                                    <li><a href="/service-details">Web Development</a></li>
                                    <li><a href="/service-details">Cyber Security</a></li>
                                    <li><a href="/service-details">Data Security</a></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-light fa-${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"><a href="#">Terms & Condition</a></span>
                        <span className="text-white"><a href="#">Privacy Policy</a></span>
                    </div>
                </div>
            </div>
        </div>
    </footer>
);
