---
import "@styles/global.css";
import { SITE_TITLE_SUFFIX } from "@constants";

import Header from "@components/layout/header/Header.astro";
import Footer from "@components/layout/footer/Footer.astro";
import Breadcrumbs from "@components/base/Breadcrumbs.astro";
import ConsultationModal from "@components/base/ConsultationModal.astro";
import Toast from "@components/base/Toast.astro";

export interface Props {
  title: string;
  description: string;
  canonicalLink?: string;
  breadcrumbs?: Array<{ label: string; href?: string }>;
}

const { title, description, canonicalLink, breadcrumbs } = Astro.props;
---

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
    <link rel="icon" href="/favicons/favicon.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap" rel="stylesheet" />
    <title>{title} {SITE_TITLE_SUFFIX}</title>
    <meta name="description" content={description} />
    {canonicalLink && <link rel="canonical" href={canonicalLink} />}
    <link rel="sitemap" href="/sitemap-index.xml" />
    <!-- Yandex  верификация -->
    <meta name="yandex-verification" content="be3edfd138348e43" />
  </head>
  <body>
    <Toast />
    <Header />
    <main class="main-content">
      {breadcrumbs && breadcrumbs.length > 0 && (
        <div class="breadcrumbs-wrapper">
          <Breadcrumbs items={breadcrumbs} />
        </div>
      )}
      <slot />
    </main>
    <Footer />
    <ConsultationModal />
  </body>
</html>

<style>
  .main-content {
    padding-top: 0;
  }

  .breadcrumbs-wrapper {
    padding-top: 4.5rem;
    background: #f8fafc;
    border-bottom: 1px solid rgba(30, 48, 80, 0.05);
  }
</style>

<script>
  // Клиентский скрипт для открытия модального окна
  document.addEventListener("DOMContentLoaded", () => {
    const btn = document.getElementById("consultation-btn");

    btn?.addEventListener("click", () => {
      window.dispatchEvent(
        new CustomEvent("open-modal", {
          detail: "consultation-modal",
        }),
      );
    });
  });

  // Для Astro View Transitions
  document.addEventListener("astro:page-load", () => {
    const btn = document.getElementById("consultation-btn");

    btn?.addEventListener("click", () => {
      window.dispatchEvent(
        new CustomEvent("open-modal", {
          detail: "consultation-modal",
        }),
      );
    });
  });
</script>
