<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tuning Garage | Чип-тюнинг, Euro 2, Диагностика</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        /* Основные стили */
        :root {
            --neon-orange: #FF8C00;
            --neon-orange-dark: #FF5E00;
            --dark-bg: #1a1a1a;
            --darker-bg: #111;
            --text-outline: 1px 1px 0 #000,
                           -1px -1px 0 #000,
                           1px -1px 0 #000,
                           -1px 1px 0 #000,
                           1px 1px 0 #000;
        }

        * {
            font-family: 'Noto Sans JP', sans-serif !important;
            color: var(--neon-orange);
            text-shadow: var(--text-outline);
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--dark-bg);
            overflow-x: hidden;
        }

        /* Навигационная панель */
        .nav-panel {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            gap: 10px;
        }

        .nav-btn {
            padding: 8px 15px;
            background: rgba(255, 140, 0, 0.2);
            border: 1px solid var(--neon-orange);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.9rem;
            font-weight: 700;
            text-decoration: none;
        }

        .nav-btn:hover {
            background: rgba(255, 140, 0, 0.4);
            box-shadow: 0 0 10px var(--neon-orange);
        }

        /* Главная рамка с логотипом и информацией */
        .main-frame {
            position: relative;
            padding: 40px;
            margin: 50px auto;
            max-width: 900px;
            background: rgba(30, 30, 30, 0.7);
            border-radius: 10px;
            text-align: center;
        }

        /* Стиль для всех рамок */
        .frame-style {
            position: relative;
            padding: 30px;
            margin: 40px auto;
            background: rgba(40, 40, 40, 0.8);
            border-radius: 10px;
        }

        .frame-style::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 3px solid transparent;
            border-radius: 12px;
            background: linear-gradient(90deg, #FF5E00, #FF8C00, #FF5E00) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            z-index: -1;
            animation: border-flicker 3s infinite alternate;
        }

        @keyframes border-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                opacity: 1;
                box-shadow: 0 0 15px var(--neon-orange),
                            0 0 30px var(--neon-orange);
            }
            20%, 24%, 55% {
                opacity: 0.7;
                box-shadow: none;
            }
        }

        /* Анимированный хедер с видео-фоном */
        .header {
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            opacity: 0.7;
        }

        .header-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
            padding: 0 20px;
        }

        .logo {
            font-size: 4rem;
            margin-bottom: 10px;
            text-transform: uppercase;
            color: var(--neon-orange);
            text-shadow: var(--text-outline),
                         0 0 10px var(--neon-orange),
                         0 0 20px var(--neon-orange);
            animation: neon-flicker 1.5s infinite alternate;
            font-weight: 900;
        }

        @keyframes neon-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                text-shadow: var(--text-outline),
                             0 0 10px var(--neon-orange),
                             0 0 20px var(--neon-orange);
            }
            20%, 24%, 55% {
                text-shadow: var(--text-outline);
            }
        }

        .slogan {
            font-size: 1.5rem;
            margin-bottom: 20px;
            font-weight: 700;
        }

        /* Информационные кнопки */
        .info-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .info-btn {
            padding: 10px 20px;
            background: rgba(255, 140, 0, 0.2);
            border: 1px solid var(--neon-orange);
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 4px;
            font-weight: 700;
        }

        .info-btn:hover {
            background: rgba(255, 140, 0, 0.4);
            box-shadow: 0 0 10px var(--neon-orange);
        }

        .info-content {
            display: none;
            background: rgba(30, 30, 30, 0.9);
            padding: 20px;
            margin-top: 10px;
            border-radius: 5px;
            border: 1px solid var(--neon-orange);
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .btn {
            padding: 12px 30px;
            background: transparent;
            border: 2px solid var(--neon-orange);
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            margin-top: 20px;
            font-size: 1.1rem;
        }

        .btn:hover {
            background: var(--neon-orange);
            color: black !important;
            text-shadow: none;
            box-shadow: 0 0 10px var(--neon-orange),
                        0 0 20px var(--neon-orange);
        }

        /* Блок услуг */
        .services {
            padding: 80px 20px;
            background: url('/images/993f2ef9.gif') no-repeat center/cover;
            background-attachment: fixed;
            position: relative;
        }

        .services::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
        }

        .services-container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Блок О нас */
        .about {
            padding: 80px 20px;
            background: url('/images/1544218572_giphy.gif') no-repeat center/cover;
            background-attachment: fixed;
            position: relative;
        }

        .about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
        }

        .about-container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 900;
            text-shadow: var(--text-outline),
                         0 0 5px var(--neon-orange);
        }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .service-card {
            background: rgba(50, 50, 50, 0.9);
            border: 1px solid var(--neon-orange);
            padding: 30px;
            border-radius: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
            text-align: center;
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3);
        }

        .service-icon {
            font-size: 3rem;
            color: var(--neon-orange);
            margin-bottom: 20px;
            text-shadow: var(--text-outline);
        }

        .service-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            font-weight: 700;
            color: var(--neon-orange-dark);
        }

	.service-price {
            font-size: 1.8rem;
            margin-top: 20px;
            font-weight: 700;
            color: var(--neon-orange);
            text-shadow: 0 0 5px var(--neon-orange),
                         0 0 10px var(--neon-orange),
                         1px 1px 0 #000,
                         -1px -1px 0 #000;
            animation: neon-flicker 2s infinite alternate;
            position: relative;
            padding: 10px 0;
        }

        .service-price::after {
            content: '';
            display: block;
            width: 50%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--neon-orange), transparent);
            margin: 10px auto 0;
        }

        /* Анимация для цен */
        @keyframes price-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                opacity: 1;
                text-shadow: 0 0 5px var(--neon-orange),
                             0 0 10px var(--neon-orange),
                             1px 1px 0 #000,
                             -1px -1px 0 #000;
            }
            20%, 24%, 55% {
                opacity: 0.8;
                text-shadow: 0 0 2px var(--neon-orange),
                             1px 1px 0 #000,
                             -1px -1px 0 #000;
            }
        }

        /* Стили для секции "Наши работы" */
        .gallery-section {
            padding: 80px 20px;
            position: relative;
            background: url('/images/1612530492.gif') no-repeat center/cover;
            background-attachment: fixed;
        }

        .gallery-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
        }

        .gallery-container {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
        }

        .gallery-frame {
            background: rgba(40, 40, 40, 0.8);
            border-radius: 10px;
            padding: 40px 30px;
            position: relative;
        }

        .gallery-frame::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 3px solid transparent;
            border-radius: 12px;
            background: linear-gradient(90deg, #FF5E00, #FF8C00, #FF5E00) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            z-index: -1;
            animation: border-flicker 3s infinite alternate;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            height: 220px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }

        .gallery-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(255, 140, 0, 0.4);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        .gallery-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            padding: 15px;
            color: white;
            text-shadow: 1px 1px 2px #000;
            transform: translateY(100%);
            transition: transform 0.3s;
        }

        .gallery-item:hover .gallery-caption {
            transform: translateY(0);
        }

        /* Форма заявки */
        .contact {
            padding: 80px 20px;
            background: url('https://images.unsplash.com/photo-1597931757101-41e31d9a8a0c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') no-repeat center/cover;
            background-attachment: fixed;
            position: relative;
        }

        .contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
        }

        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            background: rgba(40, 40, 40, 0.9);
            padding: 40px;
            border-radius: 5px;
            border: 1px solid var(--neon-orange);
            box-shadow: 0 0 20px rgba(255, 140, 0, 0.3);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .form-group input, .form-group textarea {
            width: 100%;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--neon-orange);
            color: white;
        }

        .submit-btn {
            width: 100%;
            padding: 12px;
            background: var(--neon-orange);
            color: black !important;
            border: none;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            text-shadow: none;
        }

        .submit-btn:hover {
            background: var(--neon-orange-dark);
            color: white !important;
        }

        /* Футер */
        .footer {
            background-color: var(--darker-bg);
            padding: 40px 20px;
            text-align: center;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .social-links a {
            color: var(--neon-orange) !important;
            font-size: 1.5rem;
            transition: color 0.3s;
            text-shadow: var(--text-outline);
        }

        .social-links a:hover {
            color: var(--neon-orange-dark) !important;
        }

        .copyright {
            color: #aaa;
            text-shadow: var(--text-outline);
        }

        /* Стили для выпадающего списка */
        select {
            width: 100%;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--neon-orange);
            color: white !important;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF8C00'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 20px;
            cursor: pointer;
        }

        select option {
            background-color: var(--dark-bg);
            color: var(--neon-orange);
            text-shadow: var(--text-outline);
        }

        select:focus {
            outline: none;
            box-shadow: 0 0 5px var(--neon-orange);
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .logo {
                font-size: 2.5rem;
            }
            .slogan {
                font-size: 1.2rem;
            }
            .info-buttons {
                flex-direction: column;
                align-items: center;
            }
            .section-title {
                font-size: 2rem;
            }
            .main-frame {
                padding: 20px;
                margin: 20px 10px;
            }
            .frame-style {
                padding: 20px;
                margin: 20px 10px;
            }
            .nav-panel {
                top: 10px;
                right: 10px;
                flex-direction: column;
                align-items: flex-end;
            }
            .nav-btn {
                padding: 6px 12px;
                font-size: 0.8rem;
            }
        }

        /* Якорь для формы */
        #contact-form {
            scroll-margin-top: 20px;
        }

        .error-message {
            color: #ff3333;
            font-size: 14px;
            margin-top: 5px;
        }

        .form-group {
            margin-bottom: 15px;
            position: relative;
        }

        input:invalid, select:invalid {
            border-color: #ff3333;
        }

        input, select {
            transition: border-color 0.3s ease;
        }
    </style>
</head>
<body>
<!-- Навигационная панель -->
<div class="nav-panel">
    <a href="/" class="nav-btn">Чип тюнинг</a>
    <a href="/kraska" class="nav-btn">Покраска кузова</a>
    <a href="/vixlop" class="nav-btn">Кастомный выхлоп</a>
</div>


<!-- Хедер с видео-фоном -->
<header class="header">
    <img src="/images/1727445842_new_.gif" class="video-bg">
    <div class="header-content">
        <!-- Главная рамка с логотипом и информацией -->
        <div class="main-frame frame-style">
            <h1 class="logo">Tuning Garage</h1>
            <p class="slogan">Тюнинг выхлопных систем | Спортивные трассы | Индивидуальный звук</p>

            <div class="info-buttons">
                <button class="info-btn" onclick="toggleInfo('chip-info')">Звук выхлопа</button>
                <button class="info-btn" onclick="toggleInfo('errors-info')">Прирост мощности</button>
            </div>

            <div id="chip-info" class="info-content">
                <h3>Индивидуальный звук</h3>
                <p>Мы создаем уникальное звучание для вашего автомобиля - от агрессивного спортивного рёва до благородного басовитого тембра. Каждый выхлоп проектируется с учетом ваших пожеланий и характеристик автомобиля.</p>
            </div>

            <div id="errors-info" class="info-content">
                <h3>Прирост мощности</h3>
                <p>Правильно настроенная выхлопная система может увеличить мощность вашего двигателя на 5-15%. Мы используем только проверенные решения и качественные материалы для максимального эффекта.</p>
                <div class="exhaust-features">
                    <div class="feature-item">
                        <div class="feature-icon">⚡</div>
                        <p>Увеличение мощности</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">⏱️</div>
                        <p>Улучшение разгона</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon">🛢️</div>
                        <p>Оптимизация расхода</p>
                    </div>
                </div>
            </div>

            <button class="btn" onclick="scrollToForm()">ЗАПИСАТЬСЯ</button>
        </div>
    </div>
</header>

<!-- Услуги -->
<section class="services">
    <div class="services-container">
        <h2 class="section-title">Наши услуги</h2>

        <!-- Рамка с услугами -->
        <!-- Рамка с услугами -->
        <div class="frame-style" style="max-width: 1000px;">
            <div class="service-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i>🔊</i>
                    </div>
                    <h3 class="service-title">Спортивный выхлоп</h3>
                    <p>Полная замена штатной системы на спортивную с настройкой звука и производительности.</p>
                    <div class="service-price">от 10 000 ₽</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i>🏎️</i>
                    </div>
                    <h3 class="service-title">Трасса прямоточная</h3>
                    <p>Прямоточные системы для максимального прироста мощности и агрессивного звука.</p>
                    <div class="service-price">от 20 000 ₽</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i>🔧</i>
                    </div>
                    <h3 class="service-title">Доработка штатного выхлопа</h3>
                    <p>Модификация существующей системы с улучшением характеристик.</p>
                    <div class="service-price">от 5 000 ₽</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- О нас -->
<section class="about">
    <div class="about-container">
        <h2 class="section-title">Преимущества</h2>

        <!-- Рамка с преимуществами -->
        <div class="frame-style" style="maxwidth: 1000px;">
            <div class="service-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i>🔩</i>
                    </div>
                    <h3 class="service-title">Качественные материалы</h3>
                    <p>Используем только нержавеющую сталь AISI 304 и 409 для долговечности системы.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i>👨‍🔧</i>
                    </div>
                    <h3 class="service-title">Опытные мастера</h3>
                    <p>Наши специалисты с опытом более 10 лет в тюнинге выхлопных систем.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i>🎛️</i>
                    </div>
                    <h3 class="service-title">Индивидуальный подход</h3>
                    <p>Каждая система настраивается под конкретный автомобиль и пожелания клиента.</p>
                </div>

                <div class="service-card">
                    <div class="service-icon">
                        <i>🔥</i>
                    </div>
                    <h4>Термостойкое покрытие</h4>
                    <p>Все системы покрываются термостойкой краской или полируются</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i>🔊</i>
                    </div>
                    <h4>Настройка звука</h4>
                    <p>Возможность выбрать желаемый тембр и громкость выхлопа</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i>⚙️</i>
                    </div>
                    <h4>Гарантия</h4>
                    <p>Гарантия на все работы и материалы до 3 лет</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Галерея -->
<section class="gallery-section">
    <div class="gallery-container">
        <h2 class="section-title">Наши работы</h2>
        <div class="gallery-frame">
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="/images/28c9b78s-960.jpg" alt="Пример работы 1">
                    <div class="gallery-caption">Прямоточная система</div>
                </div>
                <div class="gallery-item">
                    <img src="/images/a263e48s-960.jpg" alt="Пример работы 2">
                    <div class="gallery-caption">Спортивный выхлоп</div>
                </div>
                <div class="gallery-item">
                    <img src="/images/50g05101-set.jpg" alt="Пример работы 3">
                    <div class="gallery-caption">Тюнинг выхлопа</div>
                </div>
                <div class="gallery-item">
                    <img src="/images/NAAAAgBS4-A-1920.jpg" alt="Пример работы 4">
                    <div class="gallery-caption">Кастомная трасса</div>
                </div>
                <div class="gallery-item">
                    <img src="/images/9cf1129s-1920.jpg" alt="Пример работы 4">
                    <div class="gallery-caption">Двойной выхлоп</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Форма заявки -->
<section class="contact" id="contact-form">
    <div class="contact-form">
        <div style="display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 20px;">
            <img src="/images/324hreky324.gif" alt="" style="height: 40px; width: auto;">
            <h2 class="section-title">Оставить заявку</h2>
        </div>
        <form action="/formdann" method="post">
            <div class="form-group">
                <label for="name">Имя</label>
                <input type="text" id="name" name="fio" required>
            </div>
            <div class="form-group">
                <label for="phone">Телефон</label>
                <input type="tel" id="phone" name="phone" required>
            </div>
            <div class="form-group">
                <label for="car">Модель авто</label>
                <input type="text" id="car" name="modelavto" required>
            </div>
            <div class="form-group">
                <label for="service">Тип системы</label>
                <select id="service" name="usluga" required>
                    <option value="" disabled selected>Выберите тип системы</option>
                    <option value="Спортивный выхлоп">Спортивный выхлоп</option>
                    <option value="Прямоточная трасса">Прямоточная трасса</option>
                    <option value="Доработка штатного выхлопа">Доработка штатного выхлопа</option>
                    <option value="Индивидуальный заказ">Индивидуальный заказ</option>
                </select>
            </div>
            <button type="submit" class="submit-btn">Отправить</button>
        </form>
    </div>
</section>

<!-- Футер -->
<footer class="footer">
    <div class="social-links">
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-telegram"></i></a>
        <a href="#"><i class="fab fa-whatsapp"></i></a>
    </div>
    <p class="copyright">© 2023 Tuning Garage. Все права защищены.</p>
</footer>

<!-- Скрипты для анимаций -->
<script>
    // Параллакс-эффект для видео-фона
    window.addEventListener('scroll', function() {
        const scrollPosition = window.scrollY;
        const videoBg = document.querySelector('.video-bg');
        if(videoBg) {
            videoBg.style.transform = `translateY(${scrollPosition * 0.5}px)`;
        }
    });

    // Анимация появления элементов при скролле
    const animateOnScroll = () => {
        const elements = document.querySelectorAll('.service-card, .gallery-item, .contact-form, .main-frame, .frame-style, .feature-item');
        elements.forEach(el => {
            const elementPosition = el.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            if (elementPosition < screenPosition) {
                el.style.opacity = '1';
                el.style.transform = 'translateY(0)';
            }
        });
    };

    // Изначально скрываем элементы
    document.querySelectorAll('.service-card, .gallery-item, .contact-form, .main-frame, .frame-style, .feature-item').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(50px)';
        el.style.transition = 'opacity 0.5s, transform 0.5s';
    });

    // Функция для показа/скрытия информации
    function toggleInfo(id) {
        const info = document.getElementById(id);
        const allInfos = document.querySelectorAll('.info-content');

        // Скрываем все информационные блоки кроме текущего
        allInfos.forEach(item => {
            if (item.id !== id) {
                item.style.display = 'none';
            }
        });

        // Переключаем отображение текущего блока
        if (info.style.display === 'block') {
            info.style.display = 'none';
        } else {
            info.style.display = 'block';
        }
    }

    // Функция для прокрутки к форме
    function scrollToForm() {
        const form = document.getElementById('contact-form');
        form.scrollIntoView({ behavior: 'smooth' });
    }

    window.addEventListener('scroll', animateOnScroll);
    animateOnScroll(); // Проверяем при загрузке



    // Валидация формы заявки
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault(); // Предотвращаем отправку формы для проверки

        // Получаем элементы формы
        const nameInput = document.getElementById('name');
        const phoneInput = document.getElementById('phone');
        const carInput = document.getElementById('car');
        const serviceSelect = document.getElementById('service');

        let isValid = true;

        // Валидация имени (минимум 2 слова, каждое минимум 2 символа)
        const nameRegex = /^[а-яА-ЯёЁa-zA-Z]+\s[а-яА-ЯёЁa-zA-Z]+/;
        if (!nameRegex.test(nameInput.value.trim())) {
            showError(nameInput, 'Введите имя и фамилию (минимум 2 слова)');
            isValid = false;
        } else {
            clearError(nameInput);
        }

        // Валидация телефона (российский формат)
        const phoneRegex = /^(\+7|7|8)?[\s\-]?\(?[0-9]{3}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
        if (!phoneRegex.test(phoneInput.value.trim())) {
            showError(phoneInput, 'Введите корректный номер телефона');
            isValid = false;
        } else {
            clearError(phoneInput);
        }

        // Валидация модели авто (минимум 2 символа)
        if (carInput.value.trim().length < 2) {
            showError(carInput, 'Введите модель автомобиля');
            isValid = false;
        } else {
            clearError(carInput);
        }

        // Валидация услуги (должна быть выбрана)
        if (serviceSelect.value === '') {
            showError(serviceSelect, 'Выберите услугу');
            isValid = false;
        } else {
            clearError(serviceSelect);
        }

        // Если все проверки пройдены, отправляем форму
        if (isValid) {
            this.submit();
        }
    });

    // Функция для отображения ошибки
    function showError(input, message) {
        const formGroup = input.parentElement;
        const errorDiv = formGroup.querySelector('.error-message') || document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.textContent = message;

        if (!formGroup.querySelector('.error-message')) {
            formGroup.appendChild(errorDiv);
        }

        input.style.borderColor = '#ff3333';
    }

    // Функция для очистки ошибки
    function clearError(input) {
        const formGroup = input.parentElement;
        const errorDiv = formGroup.querySelector('.error-message');

        if (errorDiv) {
            formGroup.removeChild(errorDiv);
        }

        input.style.borderColor = '';
    }

    // Маска для телефона
    document.getElementById('phone').addEventListener('input', function(e) {
        let value = this.value.replace(/\D/g, '');

        if (value.length > 0) {
            value = value.match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/);
            value = !value[2] ? value[1] :
                    !value[3] ? value[1] + value[2] :
                    !value[4] ? value[1] + '(' + value[2] + ')' + value[3] :
                    !value[5] ? value[1] + '(' + value[2] + ')' + value[3] + '-' + value[4] :
                    value[1] + '(' + value[2] + ')' + value[3] + '-' + value[4] + '-' + value[5];
        }

        this.value = value;
    });
</script>
</body>
</html>