import Image from "next/image";
import Link from "next/link";
import Script from "next/script";
import AOSProvider from "./component/AOSProvider";
import StructuredData from "./component/StructuredData";
import { getPageMetadata } from "../lib/seo";
import { commonSchemas } from "./lib/schemas";
import "bootstrap/dist/css/bootstrap.min.css";
import BootstrapClient from "./component/bootstrapClient";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "@fortawesome/fontawesome-svg-core/styles.css";
import {
  faFacebookF,
  faLinkedinIn,
  faPinterestP,
  faTwitter,
  faInstagram,
} from "@fortawesome/free-brands-svg-icons";
import { faPhoneVolume, faArrowDown } from "@fortawesome/free-solid-svg-icons";
import "./globals.css";

export const dynamic = "force-dynamic";

export async function generateMetadata() {
  return getPageMetadata("/");
}

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <Script id="cleanup-extension-attrs" strategy="beforeInteractive">
          {`
            (() => {
              const shouldRemove = (name) =>
                name === "bis_register" ||
                name.startsWith("bis_") ||
                name.startsWith("__processed_");

              const cleanNode = (node) => {
                if (!node || node.nodeType !== Node.ELEMENT_NODE) {
                  return;
                }

                for (const attr of [...node.attributes]) {
                  if (shouldRemove(attr.name)) {
                    node.removeAttribute(attr.name);
                  }
                }
              };

              const cleanTree = (root) => {
                cleanNode(root);

                if (!root || typeof root.querySelectorAll !== "function") {
                  return;
                }

                for (const node of root.querySelectorAll("*")) {
                  cleanNode(node);
                }
              };

              cleanTree(document.documentElement);

              const observer = new MutationObserver((mutations) => {
                for (const mutation of mutations) {
                  if (mutation.type === "attributes") {
                    cleanNode(mutation.target);
                    continue;
                  }

                  for (const node of mutation.addedNodes) {
                    cleanTree(node);
                  }
                }
              });

              const startObserver = () => {
                observer.observe(document.documentElement, {
                  subtree: true,
                  childList: true,
                  attributes: true,
                });
              };

              if (document.documentElement) {
                startObserver();
              } else {
                document.addEventListener("DOMContentLoaded", startObserver, {
                  once: true,
                });
              }

              window.addEventListener(
                "load",
                () => {
                  cleanTree(document.documentElement);
                  setTimeout(() => observer.disconnect(), 3000);
                },
                { once: true }
              );
            })();
          `}
        </Script>
        <StructuredData id="organization-schema" data={commonSchemas.organization} />
        <StructuredData id="website-schema" data={commonSchemas.website} />
        <BootstrapClient />
        <header className="main-header">
          <nav className="navbar navbar-expand-lg bg-body-tertiary">
            <div className="container">
              <Link className="navbar-brand" href="/">
                <Image
                  className="img-fluid"
                  src="/assets/images/logo.webp"
                  alt="The Book Quill"
                  width={107}
                  height={69}
                />
              </Link>
              <button
                className="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="navbar-toggler-icon"></span>
              </button>
              <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav m-auto mb-2 mb-lg-0">
                  <li className="nav-item">
                    <Link className="nav-link" aria-current="page" href="/">
                      Home
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" href="/about-us">
                      about us
                    </Link>
                  </li>
                  <li className="nav-item dropdown">
                    <a
                      className="nav-link"
                      href="#"
                      role="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Our Services
                      <FontAwesomeIcon icon={faArrowDown} className="dropdown-icon" />
                    </a>
                    <ul className="dropdown-menu">
                      <li>
                        <Link className="dropdown-item" href="/book-writing">
                          Book Writing
                        </Link>
                      </li>
                      <li>
                        <Link className="dropdown-item" href="/book-cover-design">
                          Book Cover Design
                        </Link>
                      </li>
                      <li>
                        <Link className="dropdown-item" href="/book-publishing">
                          Book Publishing
                        </Link>
                      </li>
                      <li>
                        <Link className="dropdown-item" href="/book-editing">
                          Book Editing & Proofreading
                        </Link>
                      </li>
                      <li>
                        <Link className="dropdown-item" href="/book-illustrations">
                          Book Illustrations
                        </Link>
                      </li>
                      <li>
                        <Link className="dropdown-item" href="/childrens-book">
                          Children&apos;s book publishing
                        </Link>
                      </li>
                      <li>
                        <Link className="dropdown-item" href="/book-printing">
                          Book Printing
                        </Link>
                      </li>
                      <li>
                        <Link className="dropdown-item" href="/author-website">
                          Author Website
                        </Link>
                      </li>
                    </ul>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" href="/portfolio">
                      Portfolio
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" href="/testimonial">
                      Testimonials
                    </Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" href="/contact-us">
                      Contact
                    </Link>
                  </li>
                </ul>
                <div className="d-flex btn-cell">
                  <a href="tel:+1 (323) 503-1458">
                    <FontAwesomeIcon icon={faPhoneVolume} />
                    <span>
                      give us call <br />
                      +1 (323) 503-1458
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </header>
        <AOSProvider>{children}</AOSProvider>
        <footer className="main-footer">
          <div className="container">
            <div className="heading">
              <h2>Genres We Cater</h2>
            </div>
            <div className="row gy-2 gy-lg-5">
              <div className="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
                <ul className="url">
                  <li>
                    <Link href="/book-writing">Book Writing</Link>
                  </li>
                  <li>
                    <Link href="/ebook-writing">E-book Writing & Publishing</Link>
                  </li>
                  <li>
                    <Link href="/book-editing">Book Editing & Proofreading</Link>
                  </li>
                </ul>
              </div>
              <div className="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
                <ul className="url">
                  <li>
                    <Link href="/book-cover-design">Book Cover Design</Link>
                  </li>
                  <li>
                    <Link href="/book-illustrations">Book Illustrations</Link>
                  </li>
                  <li>
                    <Link href="/book-publishing">Book Publishing</Link>
                  </li>
                </ul>
              </div>
              <div className="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
                <ul className="url">
                  <li>
                    <Link href="/book-printing">Book Printing</Link>
                  </li>
                  <li>
                    <Link href="/book-marketing">Book Marketing</Link>
                  </li>
                  <li>
                    <Link href="/author-website">Author Website</Link>
                  </li>
                </ul>
              </div>
              <div className="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
                <ul className="url">
                  <li>
                    <Link href="/amazon-publishing">Amazon Publishing</Link>
                  </li>
                  <li>
                    <Link href="/ghostwriting-services">Ghostwriting Services</Link>
                  </li>
                  <li>
                    <Link href="/childrens-book">Children&apos;s book publishing</Link>
                  </li>
                </ul>
              </div>

              <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
                <div className="heading">
                  <h2>About Us</h2>
                  <p>
                    The Book Quill is a USA-based book writing, editing, publishing, and author branding agency dedicated to helping writers turn ideas into professionally crafted books. Our team provides reliable guidance and creative support for authors across every genre.
                  </p>
                  <ul className="social">
                    <li>
                      <a href="https://www.facebook.com/bookquillofficial" target="_blank">
                        <FontAwesomeIcon icon={faFacebookF} />
                      </a>
                    </li>
                    <li>
                      <a href="https://www.linkedin.com/company/thebookquill" target="_blank">
                        <FontAwesomeIcon icon={faLinkedinIn} />
                      </a>
                    </li>
                    <li>
                      <a href="https://www.pinterest.com/thebookquill" target="_blank">
                        <FontAwesomeIcon icon={faPinterestP} />
                      </a>
                    </li>
                    <li>
                      <a href="https://x.com/the_book_quill" target="_blank">
                        <FontAwesomeIcon icon={faTwitter} />
                      </a>
                    </li>
                    <li>
                      <a href="https://www.instagram.com/thebookquill/" target="_blank">
                        <FontAwesomeIcon icon={faInstagram} />
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
                <div className="row">
                  <div className="col-xl-4 col-lg-4 col-md-3 col-sm-12 col-12">
                    <div className="heading">
                      <h2>Quick Links</h2>
                    </div>
                    <ul className="url">
                      <li>
                        <Link href="/">Home</Link>
                      </li>
                      <li>
                        <Link href="/testimonial">Reviews</Link>
                      </li>
                      <li>
                        <Link href="/contact-us">Contact</Link>
                      </li>
                      <li>
                        <Link href="/blogs">Blogs</Link>
                      </li>
                    </ul>
                  </div>
                  <div className="col-xl-4 col-lg-4 col-md-3 col-sm-12 col-12">
                    <div className="heading">
                      <h2>Legal</h2>
                    </div>
                    <ul className="url">
                      <li>
                        <Link href="/terms-conditions">Terms & Conditions</Link>
                      </li>
                      <li>
                        <Link href="/privacy-policy">Privacy Policy</Link>
                      </li>
                      <li>
                        <Link href="/refund-policy">Refund Policy</Link>
                      </li>
                      <li>
                        <Link href="/opt-out-option">Opt Out Option</Link>
                      </li>
                    </ul>
                  </div>
                  <div className="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
                    <div className="heading">
                      <h2>Contact Info</h2>
                    </div>
                    <ul className="url">
                      <li>
                        <a href="tel:+1 (323) 503-1458">+1 (323) 503-1458</a>
                      </li>
                      <li>
                        <a href="mailto:info@thebookquill.com"> info@thebookquill.com</a>
                      </li>
                      <li>
                        <p>594 Broadway 9th Floor Suite 901, New York, NY 10012, USA</p>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <ul className="review-icons">
              <li>
                <a href="https://clutch.co/profile/book-quill" title="Read our Clutch Reviews" target="_blank">
                  <Image src="/assets/images/clutch-icon.png" alt="The Book Quill Clutch Reviews" title="Read our Clutch Reviews" width={172} height={92} />
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <Image src="/assets/images/review-icons-2.webp" alt="The Book Quill Client Ratings on Sitejabber" title="Customer Ratings" width={172} height={92} />
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <Image src="/assets/images/review-icons-3.webp" alt="Top Rated Book Writing Agency on Bark" title="Verified Professional Agency" width={172} height={92} />
                </a>
              </li>
              <li>
                <a href="https://www.trustpilot.com/review/thebookquill.com" title="View our Trustpilot Profile" target="_blank">
                  <Image src="/assets/images/review-icons-4.webp" alt="The Book Quill Trustpilot Reviews and Ratings" title="View our Trustpilot Profile" width={172} height={92} />
                </a>
              </li>
              <li>
                <a title="DMCA.com Protection Status" className="dmca-badge">
                  <Image src="/assets/images/review-icons-5.webp" alt="The Book Quill Content Protection - DMCA Secured" width={172} height={92} />
                </a>
              </li>
              <li>
                <a href="https://www.goodfirms.co/company/the-book-quill" target="_blank">
                  <Image src="/assets/images/review-icons-6.webp" alt="The Book Quill Profile on GoodFirms" title="GoodFirms Verified Company" width={172} height={92} />
                </a>
              </li>
            </ul>
            <div className="copyright">
              <div className="row align-items-center flex-row-reverse gy-3">
                <div className="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-12">
                  <div className="img-pay">
                    <Image src="/assets/images/pymnt-mthds.webp" alt="Secure Payment Methods - Visa, Mastercard, American Express, and PayPal" title="Safe and Secure Transactions via Major Credit Cards and PayPal" className="img-fluid" width={220} height={24} />
                  </div>
                </div>
                <div className="col-xl-7 col-lg-7 col-md-8 col-sm-12 col-12">
                  <p>
                    Â© 2026 All Rights Reserved Website Design & Develop By{" "}
                    <a href="https://codesitex.com/" title="Our Partner" target="_blank">
                      Code Sitex
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
}
