---
import Layout from "@layouts/Layout.astro";
import { HOME_PAGE_SEO } from "@constants/constants.ts";

import Hero from "@/components/home/Hero.astro";
import Stats from "@components/home/Stats.astro";
import Services from "@components/home/Services.astro";
import WhyUs from "@components/home/WhyUs.astro";
import Reviews from "@components/home/Reviews.astro";
import AuthorizedContactForm from "@components/base/AuthorizedContactForm.astro";
import Toast from "@components/base/Toast.astro";
---

<Layout
    title={HOME_PAGE_SEO.title}
    description={HOME_PAGE_SEO.description}
    pagePath=""
>
  <Hero />
  <Stats />
  <Services />
  <WhyUs />
  <Reviews />
  <AuthorizedContactForm />
  <Toast />
</Layout>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const anchors = document.querySelectorAll<HTMLAnchorElement>('a[href^="#"]');

    anchors.forEach((anchor) => {
      anchor.addEventListener("click", function (this: HTMLAnchorElement, e: Event) {
        e.preventDefault();

        const targetId = this.getAttribute("href");
        if (!targetId) return;

        const targetElement = document.querySelector<HTMLElement>(targetId);

        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: "smooth",
          });
        }
      });
    });
  });
</script>