import type { Metadata } from "next";

const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";

export const metadata: Metadata = {
  title: "Visaway – Immigration & Visa Consulting HTML Template",
  description: "Visaway – Immigration & Visa Consulting HTML Template",
  authors: [{ name: "Gramentheme" }],
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "http://localhost:3000",
  },
};

export default function VisaLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      {/* Preloader Start */}
      <div id="preloader" className="preloader" style={{ display: "none" }}>
        <div className="animation-preloader">
          <div className="spinner"></div>
          <div className="txt-loading">
            <span data-text-preloader="V" className="letters-loading">
              {" "}
              V{" "}
            </span>
            <span data-text-preloader="I" className="letters-loading">
              {" "}
              I{" "}
            </span>
            <span data-text-preloader="S" className="letters-loading">
              {" "}
              S{" "}
            </span>
            <span data-text-preloader="A" className="letters-loading">
              {" "}
              A{" "}
            </span>
            <span data-text-preloader="W" className="letters-loading">
              {" "}
              W{" "}
            </span>
            <span data-text-preloader="A" className="letters-loading">
              {" "}
              A{" "}
            </span>
            <span data-text-preloader="Y" className="letters-loading">
              {" "}
              Y{" "}
            </span>
          </div>
          <p className="text-center">Loading</p>
        </div>
        <div className="loader">
          <div className="row">
            <div className="col-3 loader-section section-left">
              <div className="bg"></div>
            </div>
            <div className="col-3 loader-section section-left">
              <div className="bg"></div>
            </div>
            <div className="col-3 loader-section section-right">
              <div className="bg"></div>
            </div>
            <div className="col-3 loader-section section-right">
              <div className="bg"></div>
            </div>
          </div>
        </div>
      </div>

      {/* GT Back To Top Start */}
      <button id="back-top" className="back-to-top show">
        <i className="fa-regular fa-arrow-up"></i>
      </button>

      {/* GT MouseCursor Start */}
      <div className="mouseCursor cursor-outer"></div>
      <div className="mouseCursor cursor-inner"></div>

      {/* Header-Top-Section Start */}
      <div className="header-top-section">
        <div className="container-fluid">
          <div className="header-top-wrapper">
            <div className="header-left">
              <ul className="list">
                <li className="style-2">
                  <span>Help Line</span>
                  <i className="fa-solid fa-phone"></i>
                  <a href="tel:+093783575222">+09 378 357 5222</a>
                </li>
                <li>
                  <i className="fa-solid fa-location-dot"></i>
                  69 Street, 5th AvenueLA, United States
                </li>
                <li>
                  <i className="fa-solid fa-envelope"></i>
                  <a href="mailto:info@example.com">info@example.com</a>
                </li>
              </ul>
            </div>
            <div className="header-right">
              <div className="flag-wrap">
                <div className="flag">
                  <i className="fa-solid fa-globe"></i>
                </div>
                <div className="nice-select" tabIndex={0}>
                  <span className="current"> English </span>
                  <ul className="list">
                    <li data-value="1" className="option selected focus">
                      English
                    </li>
                    <li data-value="1" className="option">
                      Bangla
                    </li>
                    <li data-value="1" className="option">
                      Hindi
                    </li>
                  </ul>
                </div>
              </div>
              <div className="social-item">
                <a href="#">
                  <i className="fa-brands fa-linkedin"></i>
                </a>
                <a href="#">
                  <i className="fa-brands fa-twitter"></i>
                </a>
                <a href="#">
                  <i className="fa-brands fa-instagram"></i>
                </a>
                <a href="#">
                  <i className="fa-brands fa-youtube"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Offcanvas Area Start */}
      <div className="fix-area">
        <div className="offcanvas__info">
          <div className="offcanvas__wrapper">
            <div className="offcanvas__content">
              <div className="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
                <div className="offcanvas__logo">
                  <a href="/">
                    <img
                      src={`${ASSET_URL}/assets/img/logo/black-logo.svg`}
                      alt="logo-img"
                    />
                  </a>
                </div>
                <div className="offcanvas__close">
                  <button>
                    <i className="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <p className="text d-none d-xl-block">
                Nullam dignissim, ante scelerisque the is euismod fermentum odio
                sem semper the is erat, a feugiat leo urna eget eros. Duis
                Aenean a imperdiet risus.
              </p>
              <div className="mobile-menu fix mb-3"></div>
              <div className="offcanvas__contact d-xl-block">
                <h4 className="d-xl-block">Contact Info</h4>
                <ul className="d-xl-block">
                  <li className="d-flex align-items-center">
                    <div className="offcanvas__contact-icon">
                      <i className="fal fa-map-marker-alt"></i>
                    </div>
                    <div className="offcanvas__contact-text">
                      <a target="_blank" href="#">
                        Main Street, Melbourne, Australia
                      </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:info@example.com">
                        <span>info@example.com</span>
                      </a>
                    </div>
                  </li>
                  <li className="d-flex align-items-center">
                    <div className="offcanvas__contact-icon mr-15">
                      <i className="fal fa-clock"></i>
                    </div>
                    <div className="offcanvas__contact-text">
                      <a target="_blank" href="#">
                        Mod-friday, 09am -05pm
                      </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:+11002345909">+11002345909</a>
                    </div>
                  </li>
                </ul>
                <div className="social-icon d-flex align-items-center">
                  <a href="#">
                    <i className="fab fa-facebook-f"></i>
                  </a>
                  <a href="#">
                    <i className="fab fa-twitter"></i>
                  </a>
                  <a href="#">
                    <i className="fab fa-youtube"></i>
                  </a>
                  <a href="#">
                    <i className="fab fa-linkedin-in"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="offcanvas__overlay"></div>

      {/* Header Section Start */}
      {/* <header id="header-sticky" className="header-1">
        <div className="container-fluid">
          <div className="mega-menu-wrapper">
            <div className="header-main">
              <div className="header-left">
                <div className="logo">
                  <a href="/" className="header-logo-2">
                    <img
                      src={`${ASSET_URL}/assets/img/logo/black-logo.svg`}
                      alt="logo-img"
                    />
                  </a>
                </div>
                <div className="mean__menu-wrapper">
                  <div className="main-menu">
                    <nav id="mobile-menu">
                      <ul>
                        <li className="has-dropdown active menu-thumb">
                          <a href="/"> Home </a>
                        </li>
                        <li>
                          <a href="/about">About Us</a>
                        </li>
                        <li className="has-dropdown">
                          <a href="#"> Pages </a>
                          <ul className="submenu">
                            <li>
                              <a href="/services">Services</a>
                            </li>
                            <li>
                              <a href="/visa">Country List</a>
                            </li>
                            <li>
                              <a href="/pricing">Our Pricing</a>
                            </li>
                            <li>
                              <a href="/appointment">Appointment</a>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <a href="/visa"> VISA </a>
                        </li>
                        <li>
                          <a href="/blog"> Blog </a>
                        </li>
                        <li>
                          <a href="/contact">Contact Us</a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
              <div className="header-right d-flex align-items-center mt-0">
                <div className="header-call-item">
                  <a href="#" className="main-header__search search-toggler">
                    <i className="fa-regular fa-magnifying-glass"></i>
                  </a>
                  <a href="/contact" className="theme-btn">
                    Apply now
                    <i className="fa-solid fa-arrow-right"></i>
                  </a>
                  <div className="header__hamburger my-auto">
                    <div className="sidebar__toggle">
                      <i className="fa-solid fa-bars-staggered"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header> */}

      {/* Search Area Start */}
      <div className="search-popup">
        <div className="search-popup__overlay search-toggler"></div>
        <div className="search-popup__content">
          <form
            role="search"
            method="get"
            className="search-popup__form"
            action="#"
          >
            <input
              type="text"
              id="search"
              name="search"
              placeholder="Search Here..."
            />
            <button
              type="submit"
              aria-label="search submit"
              className="search-btn"
            >
              <span>
                <i className="fa-regular fa-magnifying-glass"></i>
              </span>
            </button>
          </form>
        </div>
      </div>

      {/* Main Content */}
      {children}

      {/* Footer Section Start */}
      {/* <footer
        className="footer-section fix bg-cover"
        style={{
          backgroundImage: `url(${ASSET_URL}/assets/img/home-1/footer-bg.jpg)`,
        }}
      >
        <div className="container">
          <div className="footer-wrapper">
            <div className="row">
              <div className="col-xl-12">
                <div className="footer-item">
                  <h2>
                    <a href="tel:+16336547896">+163 3654 7896</a>
                  </h2>
                  <h2 className="text">
                    69 Street, 5th AvenueLA, United States
                  </h2>
                  <div className="footer-list-item">
                    <a href="/">
                      <img
                        src={`${ASSET_URL}/assets/img/logo/white-logo.svg`}
                        alt="img"
                      />
                    </a>
                    <ul className="footer-list">
                      <li>
                        <a href="/">Home</a>
                      </li>
                      <li>
                        <a href="/about">About Us</a>
                      </li>
                      <li>
                        <a href="/visa">Visa</a>
                      </li>
                      <li>
                        <a href="/blog">Pages</a>
                      </li>
                      <li>
                        <a href="/blog">Article</a>
                      </li>
                      <li>
                        <a href="/contact">Contact Us</a>
                      </li>
                    </ul>
                    <div className="social-icon">
                      <a href="#">
                        <i className="fa-brands fa-twitter"></i>
                      </a>
                      <a href="#">
                        <i className="fa-brands fa-instagram"></i>
                      </a>
                      <a href="#">
                        <i className="fa-brands fa-linkedin"></i>
                      </a>
                      <a href="#">
                        <i className="fa-brands fa-youtube"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer> */}
    </>
  );
}