так, смотри, твоя задача сейчас максимально глубоко и подробно вникнуть в тему и решить мою проблему. в общем, смотри в чем суть, есть у меня сайт на next.js , есть сверху панель навигации, сайт одностраничный, при пролистывании по компонентам на сайте в панели навигации должен отображаться текущий раздел, который открыт, но у меян проблема, что все компоненты корректно вроде как отображаются, а вот "Квалификация" и "Обратная связь" ни в какую не хотят пролистываться, т.е. если я нажимаю на них в панели навигации, как на кнопки, то все корректно в нужном месте октрыватся, но если я просто листая скроллом, то ничего не происходит, именно эти 2 раздлеа не отображаются в панели навигации. я высылаю тебе сейчас все компоненты, которые в этом участвуют, попробуй решить мою проблему.


// /components/header.tsx

"use client";

import React from "react";
import { motion } from "framer-motion";
import { links } from "@/lib/data";
import Link from "next/link";
import clsx from "clsx";
import { useActiveSectionContext } from "@/context/active-section-context";

export default function Header() {
  const { activeSection, setActiveSection, setTimeOfLastClick } =
    useActiveSectionContext();

  return (
    <header className="z-[999] relative">
      <motion.div
        className="fixed top-0 left-1/2 h-[5.2rem] w-full rounded-none border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.6rem] sm:w-[48rem] sm:rounded-full dark:bg-gray-950 dark:border-black/40 dark:bg-opacity-75"
        initial={{ y: -100, x: "-50%", opacity: 0 }}
        animate={{ y: 0, x: "-50%", opacity: 1 }}
      ></motion.div>

      <nav className="flex fixed top-[0.2rem] left-1/2 h-14 -translate-x-1/2 py-2 sm:top-[1.8rem] sm:h-[initial] sm:py-0">
        <ul className="flex w-[24rem] flex-wrap items-center justify-center gap-y-1 text-[1.1rem] font-semibold text-gray-500 sm:w-[initial] sm:flex-nowrap sm:gap-5">
          {links.map((link) => (
            <motion.li
              className="h-3/4 flex items-center justify-center relative"
              key={link.hash}
              initial={{ y: -100, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
            >
              <Link
                className={clsx(
                  "flex w-full items-center justify-center px-3 py-3 hover:text-gray-950 transition dark:text-gray-400 dark:hover:text-gray-100 whitespace-nowrap",
                  {
                    "text-gray-950 dark:text-gray-100":
                      activeSection === link.name,
                  }
                )}
                href={link.hash}
                onClick={() => {
                  setActiveSection(link.name);
                  setTimeOfLastClick(Date.now());
                }}
              >
                {link.name}

                {link.name === activeSection && (
                  <motion.span
                    className="bg-gray-200 rounded-full absolute inset-0 -z-10 dark:bg-gray-800"
                    layoutId="activeSection"
                    transition={{
                      type: "spring",
                      stiffness: 380,
                      damping: 30,
                    }}
                  ></motion.span>
                )}
              </Link>
            </motion.li>
          ))}
        </ul>
      </nav>
    </header>
  );
}


// /components/intro.tsx

"use client";

import Image from "next/image";
import React from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { BsArrowRight } from "react-icons/bs";
import { FaVk, FaTelegramPlane, FaWhatsapp } from "react-icons/fa";
import { useSectionInView } from "@/lib/hooks";
import { useActiveSectionContext } from "@/context/active-section-context";

export default function Intro() {
  const { ref } = useSectionInView("Главная", 0.5);
  const { setActiveSection, setTimeOfLastClick } = useActiveSectionContext();

  return (
    <section
      ref={ref}
      id="home"
      className="mb-28 max-w-[50rem] text-center sm:mb-0 scroll-mt-[100rem]"
    >
      <div className="flex items-center justify-center">
        <div className="relative">
          <motion.div
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{
              type: "tween",
              duration: 0.2,
            }}
          >
            <Image
              src="/photo.jpg"
              alt="Vladimir portrait"
              width="256"
              height="256"
              quality="95"
              priority={true}
              className="h-32 w-32 rounded-full object-cover border-[0.35rem] border-white shadow-xl"
            />
          </motion.div>

          <motion.span
            className="absolute bottom-0 right-0 text-4xl"
            initial={{ opacity: 0, scale: 0 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{
              type: "spring",
              stiffness: 125,
              delay: 0.1,
              duration: 0.7,
            }}
          >
            👋
          </motion.span>
        </div>
      </div>

      <motion.h1
        className="mb-10 mt-4 px-4 text-2xl font-medium !leading-[1.5] sm:text-4xl"
        initial={{ opacity: 0, y: 100 }}
        animate={{ opacity: 1, y: 0 }}
      >
        <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-cyan-500">Приветствую!</span> Меня зовут <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-yellow-500">Владимир</span>. Я специализируюсь на <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500">ремонте ТНВД</span> для автомобилей марки <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-500">Peugeot, Citroen, BMW и Mini</span>. Моя основная задача — обеспечить надежную и качественную работу вашего двигателя.
      </motion.h1>

      <motion.div
        className="flex flex-col sm:flex-row items-center justify-center gap-2 px-4 text-lg font-medium"
        initial={{ opacity: 0, y: 100 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.1,
        }}
      >
        <Link
          href="#contact"
          className="group bg-gray-900 text-white px-8 py-4 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 hover:bg-gray-950 active:scale-105 transition"
          onClick={() => {
            setActiveSection("Обратная связь");
            setTimeOfLastClick(Date.now());
          }}
        >
          Связаться со мной{" "}
          <BsArrowRight className="opacity-70 group-hover:translate-x-1 transition" />
        </Link>

        <Link
          href="#prices"
          className="group bg-white px-8 py-4 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
          onClick={() => {
            setActiveSection("Цены");
            setTimeOfLastClick(Date.now());
          }}
        >
          Цены{" "}
        </Link>

        <div className="flex flex-row sm:flex-row gap-2">
          <a
            className="bg-white p-5 text-gray-700 hover:text-gray-950 flex items-center gap-2 rounded-full focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
            href="https://vk.com"
            target="_blank"
          >
            <FaVk size={24} />
          </a>

          <a
            className="bg-white p-5 text-gray-700 hover:text-gray-950 flex items-center gap-2 rounded-full focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
            href="https://telegram.org"
            target="_blank"
          >
            <FaTelegramPlane size={24} />
          </a>

          <a
            className="bg-white p-5 text-gray-700 hover:text-gray-950 flex items-center gap-2 rounded-full focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
            href="https://whatsapp.com"
            target="_blank"
          >
            <FaWhatsapp size={24} />
          </a>
        </div>
      </motion.div>
    </section>
  );
}



// /components/about.tsx

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import { motion } from "framer-motion";
import { useSectionInView } from "@/lib/hooks";

export default function About() {
  const { ref } = useSectionInView("Обо мне");

  return (
    <motion.section
      ref={ref}
      className="mb-28 max-w-[45rem] text-center leading-8 sm:mb-40 scroll-mt-28 text-lg"
      initial={{ opacity: 0, y: 100 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.175 }}
      id="about"
    >
      <SectionHeading>👋 Обо мне</SectionHeading>
      <p className="mb-3">
        Добро пожаловать! Я специализируюсь на <span className="font-medium text-blue-500"><strong>ремонте ТНВД</strong></span> для автомобилей марки <span className="font-medium text-blue-500"><strong>Peugeot, Citroen, BMW и Mini</strong></span>. Моя цель — обеспечить надежную и качественную работу вашего двигателя.
      </p>
      <p className="mb-3">
        Если ваш двигатель <span className="italic text-red-500"><strong>троит, глохнет, теряет мощность и динамику разгона</strong></span>, или выдает ошибки <span className="font-medium text-blue-500"><strong>Check Engine</strong></span> (например, <span className="font-medium text-blue-500"><strong>P0087, P0088, P1336, P2880</strong></span> и другие), это может указывать на неисправность ТНВД. 🛠️
      </p>
      <p>
        Я предлагаю услуги по <span className="font-medium text-blue-500"><strong>капитальному ремонту ТНВД</strong></span> с гарантией надежности и качества. Включая полную диагностику, модернизированный ремонт и послеремонтную обратную связь. Стоимость услуг составляет <span className="font-medium text-green-500"><strong>6999 рублей</strong></span>, включая все расходные и уплотнительные материалы. 💰
      </p>
      <p>
        Дополнительно предоставляю <span className="font-medium text-blue-500"><strong>фото и видео материалы</strong></span> стадий ремонта и неисправности ТНВД, а также возможность продажи готового насоса или обмена на ваш. Предлагаю сотрудничество с автосервисами на выгодных условиях. Доставка осуществляется по всем регионам транспортной компанией или почтой (оплачивается отдельно). 📦
      </p>
    </motion.section>
  );
}


// /components/prices.tsx

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import { priceData } from "@/lib/data";
import Price from "./price";
import { useSectionInView } from "@/lib/hooks";

export default function Prices() {
  const { ref } = useSectionInView("Цены", 0.5);

  return (
    <section ref={ref} id="prices" className="scroll-mt-28 mb-28">
      <SectionHeading>💰 Цены</SectionHeading>
      <div>
        {priceData.map((price, index) => (
          <React.Fragment key={index}>
            <Price {...price} />
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}


// /components/services.tsx

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import { servicesData } from "@/lib/data";
import { useSectionInView } from "@/lib/hooks";
import { motion } from "framer-motion";

const fadeInAnimationVariants = {
  initial: {
    opacity: 0,
    y: 100,
  },
  animate: (index: number) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: 0.05 * index,
    },
  }),
};

export default function Services() {
  const { ref } = useSectionInView("Услуги");

  return (
    <section
      id="services"
      ref={ref}
      className="mb-28 max-w-[53rem] scroll-mt-28 text-center sm:mb-40"
    >
      <SectionHeading>🛠️ Услуги</SectionHeading>
      <ul className="flex flex-wrap justify-center gap-2 text-lg text-gray-800">
        {servicesData.map((service, index) => (
          <motion.li
            className="bg-white borderBlack rounded-xl px-5 py-3 dark:bg-white/10 dark:text-white/80"
            key={index}
            variants={fadeInAnimationVariants}
            initial="initial"
            whileInView="animate"
            viewport={{
              once: true,
            }}
            custom={index}
          >
            {service}
          </motion.li>
        ))}
      </ul>
    </section>
  );
}



// /components/experience.tsx

"use client";

import React from "react";
import SectionHeading from "./section-heading";
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { experiencesData } from "@/lib/data";
import { useSectionInView } from "@/lib/hooks";
import { useTheme } from "@/context/theme-context";
import { motion } from "framer-motion";

export default function Experience() {
  const { ref } = useSectionInView("Квалификация", 0.5);
  const { theme } = useTheme();

  return (
    <motion.section
      id="experience"
      ref={ref}
      className="scroll-mt-28 mb-28 sm:mb-40"
      initial={{ opacity: 0, y: 100 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.175 }}
      viewport={{ once: true }}
    >
      <SectionHeading>🎓 Квалификация</SectionHeading>
      <VerticalTimeline lineColor="">
        {experiencesData.map((item, index) => (
          <React.Fragment key={index}>
            <VerticalTimelineElement
              contentStyle={{
                background:
                  theme === "light" ? "#f3f4f6" : "rgba(255, 255, 255, 0.05)",
                boxShadow: "none",
                border: "1px solid rgba(0, 0, 0, 0.05)",
                textAlign: "left",
                padding: "1.3rem 2rem",
              }}
              contentArrowStyle={{
                borderRight:
                  theme === "light"
                    ? "0.4rem solid #9ca3af"
                    : "0.4rem solid rgba(255, 255, 255, 0.5)",
              }}
              date={item.date}
              icon={item.icon}
              iconStyle={{
                background:
                  theme === "light" ? "white" : "rgba(255, 255, 255, 0.15)",
                fontSize: "1.5rem",
              }}
            >
              <h3 className="font-semibold">{item.title}</h3>
              <p className="font-normal !mt-0">{item.location}</p>
              <p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
                {item.description}
              </p>
            </VerticalTimelineElement>
          </React.Fragment>
        ))}
      </VerticalTimeline>
    </motion.section>
  );
}



// /components/contact.tsx

"use client";

import React, { useState } from "react";
import SectionHeading from "./section-heading";
import { motion } from "framer-motion";
import { useSectionInView } from "@/lib/hooks";
import { sendEmail } from "@/actions/sendEmail";
import SubmitBtn from "./submit-btn";
import toast from "react-hot-toast";
import { FaVk, FaWhatsapp, FaTelegram } from "react-icons/fa";
import Image from "next/image";

export default function Contact() {
  const { ref } = useSectionInView("Обратная связь");
  const [showPhone, setShowPhone] = useState(false);

  const togglePhoneVisibility = () => {
    setShowPhone(true);
  };

  return (
    <motion.section
      id="contact"
      ref={ref}
      className="mb-28 max-w-[70rem] scroll-mt-28 text-center sm:mb-40 mx-auto"
      initial={{
        opacity: 0,
      }}
      whileInView={{
        opacity: 1,
      }}
      transition={{
        duration: 1,
      }}
      viewport={{
        once: true,
      }}
    >
      <SectionHeading>✉️ Обратная связь</SectionHeading>
      <div className="flex flex-col sm:flex-row w-full gap-8">
        <div className="w-full sm:w-1/2 p-4">
          <h2 className="text-lg font-semibold mb-4">📞 Контакты</h2>
          <div className="flex flex-col sm:flex-row items-center sm:items-start mt-4 space-x-4 justify-center gap-4">
            <motion.div
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
              className="flex flex-col items-center"
            >
              <a href="https://vk.com/evdokimovrus" className="mb-2 flex items-center mt-4">
                <FaVk className="mr-2 text-blue-500" /> ВКонтакте
              </a>
              <a href="https://vk.com/evdokimovrus">
                <Image
                  src="https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=https://vk.com/evdokimovrus"
                  alt="VK QR Code"
                  width={128}
                  height={128}
                  className="rounded-lg shadow-lg w-32 h-32"
                />
              </a>
            </motion.div>
            <motion.div
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
              className="flex flex-col items-center"
            >
              <a href="https://wa.me/+79879317210" className="mb-2 flex items-center mt-4">
                <FaWhatsapp className="mr-2 text-green-500" /> WhatsApp
              </a>
              <a href="https://wa.me/+79879317210">
                <Image
                  src="https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=https://wa.me/+79879317210"
                  alt="WhatsApp QR Code"
                  width={128}
                  height={128}
                  className="rounded-lg shadow-lg w-32 h-32"
                />
              </a>
            </motion.div>
            <motion.div
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.9 }}
              className="flex flex-col items-center"
            >
              <a href="https://t.me/+79879317210" className="mb-2 flex items-center mt-4">
                <FaTelegram className="mr-2 text-blue-400" /> Telegram
              </a>
              <a href="https://t.me/+79879317210">
                <Image
                  src="https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=https://t.me/+79879317210"
                  alt="Telegram QR Code"
                  width={128}
                  height={128}
                  className="rounded-lg shadow-lg w-32 h-32"
                />
              </a>
            </motion.div>
          </div>
          <div className="mt-8">
            <h3 className="text-base font-semibold mb-2">🕒 График работы:</h3>
            <p className="text-gray-700 dark:text-white/80 mb-4">
              Будни: 9:00 - 18:00<br />
              Выходные: 10:00 - 16:00
            </p>
            <h3 className="text-base font-semibold mb-2">📞 Контактный телефон:</h3>
            <button onClick={togglePhoneVisibility} className="text-gray-700 dark:text-white/80 underline mb-4">
              <motion.span
                initial={{ filter: "blur(5px)" }}
                animate={{ filter: showPhone ? "blur(0px)" : "blur(5px)" }}
                transition={{ duration: 0.5 }}
              >
                {showPhone ? (
                  <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" className="text-gray-700 dark:text-white/80 underline">
                    <PRESIDIO_ANONYMIZED_PHONE_NUMBER>
                  </a>
                ) : (
                  "+7 987 931 7210"
                )}
              </motion.span>
            </button>
            <h3 className="text-base font-semibold mb-2">📍 Адрес:</h3>
            <p className="text-gray-700 dark:text-white/80">
              ул. Мира, 113, Тольятти, Самарская обл., 445054
            </p>
          </div>
        </div>
        <div className="w-full sm:w-1/2 p-4">
          <h2 className="text-lg font-semibold mb-4">📨 Форма обратной связи</h2>
          <p className="text-gray-700 dark:text-white/80 mb-6">
            Пожалуйста, свяжитесь с нами напрямую по адресу{" "}
            <a className="underline" href="mailto:example@gmail.com">
              example@gmail.com
            </a>{" "}
            или через эту форму.
          </p>
          <form
            className="mt-10 flex flex-col dark:text-black"
            action={async (formData) => {
              const { data, error } = await sendEmail(formData);

              if (error) {
                toast.error(error);
                return;
              }

              toast.success("Email sent successfully!");
            }}
          >
            <input
              className="h-14 px-4 rounded-lg borderBlack dark:bg-white dark:bg-opacity-80 dark:focus:bg-opacity-100 transition-all dark:outline-none mb-4"
              name="senderEmail"
              type="email"
              required
              maxLength={500}
              placeholder="Ваш email"
            />
            <textarea
              className="h-52 my-3 rounded-lg borderBlack p-4 dark:bg-white dark:bg-opacity-80 dark:focus:bg-opacity-100 transition-all dark:outline-none mb-4"
              name="message"
              placeholder="Ваше сообщение"
              required
              maxLength={5000}
            />
            <SubmitBtn />
          </form>
        </div>
      </div>
      <div className="w-full mt-8">
        <h2 className="text-lg font-semibold mb-4">🌍 Мы на карте</h2>
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2372.625496765013!2d49.44457003041072!3d53.51088505855271!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x41687f4866fcfd7d%3A0x85f659284c3131e3!2z0YPQuy4g0JzQuNGA0LAsIDExMywg0KLQvtC70YzRj9GC0YLQuCwg0KHQsNC80LDRgNGB0LrQsNGPINC-0LHQuy4sIDQ0NTA1NA!5e0!3m2!1sru!2sru!4v1734877094477!5m2!1sru!2sru"
          width="100%"
          height="300"
          style={{ border: 0 }}
          allowFullScreen={true}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        ></iframe>
      </div>
    </motion.section>
  );
}


// /components/section-devider.tsx

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function SectionDivider() {
  return (
    <motion.div
      className="bg-gray-200 my-24 h-16 w-1 rounded-full hidden sm:block dark:bg-opacity-20"
      initial={{ opacity: 0, y: 100 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.125 }}
    ></motion.div>
  );
}



// /components/section-heading.tsx

import React from "react";

type SectionHeadingProps = {
  children: React.ReactNode;
};

export default function SectionHeading({ children }: SectionHeadingProps) {
  return (
    <h2 className="text-3xl font-medium capitalize mb-8 text-center">
      {children}
    </h2>
  );
}



// /lib/data.ts

import React from "react";
import { CgWorkAlt } from "react-icons/cg";
import { FaReact, FaCar, FaTools } from "react-icons/fa";
import { LuGraduationCap } from "react-icons/lu";
import { GiTeacher } from "react-icons/gi";
import { MdOutlineSpeakerNotes } from "react-icons/md";
import corpcommentImg from "@/public/corpcomment.png";
import rmtdevImg from "@/public/rmtdev.png";
import wordanalyticsImg from "@/public/wordanalytics.png";

export const links = [
  {
    name: "Главная",
    hash: "#home",
  },
  {
    name: "Обо мне",
    hash: "#about",
  },
  {
    name: "Цены",
    hash: "#prices",
  },
  {
    name: "Услуги",
    hash: "#services",
  },
  {
    name: "Квалификация",
    hash: "#experience",
  },
  {
    name: "Обратная связь",
    hash: "#contact",
  },
] as const;

export const experiencesData = [
  {
    title: "Окончание ТГУ Тольятти",
    location: "Тольятти, Россия",
    description: "Окончил Тольяттинский Государственный Университет по специальности 'Ремонт и обслуживание автомобилей'. Сразу после окончания начал работать в автосервисе.",
    icon: React.createElement(LuGraduationCap),
    date: "2014",
  },
  {
    title: "Механик в автосервисе",
    location: "Тольятти, Россия",
    description: "Работал механиком в автосервисе, специализируясь на ремонте ТНВД для автомобилей марки Peugeot, Citroen, BMW и Mini. Повысил квалификацию до уровня мастера.",
    icon: React.createElement(CgWorkAlt),
    date: "2014 - 2020",
  },
  {
    title: "Участие в автомобильной выставке 'МоторШоу'",
    location: "Москва, Россия",
    description: "Принял участие в автомобильной выставке 'МоторШоу', где демонстрировал свои навыки и знания в области ремонта ТНВД. Получил признание среди коллег и клиентов.",
    icon: React.createElement(FaCar),
    date: "2016",
  },
  {
    title: "Сертификация и тренинги",
    location: "Санкт-Петербург, Россия",
    description: "Прошел несколько сертификационных курсов и тренингов по ремонту ТНВД от ведущих производителей, таких как Bosch и Delphi. Повысил свою квалификацию и расширил знания.",
    icon: React.createElement(GiTeacher),
    date: "2018",
  },
  {
    title: "Участие в международной конференции 'АвтоТех'",
    location: "Казань, Россия",
    description: "Принял участие в международной конференции 'АвтоТех', где обменивался опытом с коллегами из разных стран и узнавал о новейших технологиях в области ремонта автомобилей.",
    icon: React.createElement(MdOutlineSpeakerNotes),
    date: "2019",
  },
  {
    title: "Мастер по ремонту ТНВД",
    location: "Тольятти, Россия",
    description: "Теперь я мастер по ремонту ТНВД, работающий на себя. Мои услуги включают капитальный ремонт ТНВД, диагностику двигателя, замену и ремонт насосов, а также гарантийное обслуживание. Открыт для сотрудничества с автосервисами.",
    icon: React.createElement(FaTools),
    date: "2020 - настоящее время",
  }
] as const;

export const priceData = [
  {
    title: "Капитальный ремонт ТНВД",
    description:
      "Я специализируюсь на капитальном ремонте ТНВД для автомобилей марки Peugeot, Citroen, BMW и Mini. Обеспечиваю надежную и качественную работу вашего ТНВД.",
    tags: ["Ремонт ТНВД", "Диагностика", "Гарантия", "Фотоотчет", "Доставка"],
    price: "6999р",
    imageUrl: corpcommentImg,
  },
  {
    title: "Диагностика ТНВД",
    description:
      "Провожу полную диагностику ТНВД, чтобы выявить и устранить все неисправности. Обеспечиваю послеремонтную обратную связь и гарантии.",
    tags: ["Диагностика", "Ремонт", "Гарантия", "Обслуживание", "Фотоотчет"],
    price: "1000р",
    imageUrl: rmtdevImg,
  },
  {
    title: "Замена и ремонт насосов",
    description:
      "Осуществляю замену и ремонт насосов для автомобилей различных марок. Предлагаю возможность продажи готового насоса или обмена на ваш.",
    tags: ["Ремонт насосов", "Замена", "Обмен", "Гарантия", "Доставка"],
    price: "3999р",
    imageUrl: wordanalyticsImg,
  },
] as const;

export const servicesData = [
  "Капитальный ремонт ТНВД",
  "Замена и ремонт насосов",
  "Обслуживание автомобилей Peugeot, Citroen, BMW, Mini",
  "Гарантийное обслуживание",
  "Фото и видео отчеты",
  "Доставка по всем регионам",
  "Сотрудничество с автосервисами",
] as const;



// /lib/hooks.ts

import { useActiveSectionContext } from "@/context/active-section-context";
import { useEffect } from "react";
import { useInView } from "react-intersection-observer";
import type { SectionName } from "./types";

export function useSectionInView(sectionName: SectionName, threshold = 0.75) {
  const { ref, inView } = useInView({
    threshold,
  });
  const { setActiveSection, timeOfLastClick } = useActiveSectionContext();

  useEffect(() => {
    if (inView && Date.now() - timeOfLastClick > 1000) {
      setActiveSection(sectionName);
    }
  }, [inView, setActiveSection, timeOfLastClick, sectionName]);

  return {
    ref,
  };
}