src/app/page.tsx

'use client';
import { useEffect, useRef, useState } from 'react';
import Link from 'next/link';

export default function Home() {
  const aiTermRef = useRef<HTMLDivElement>(null);
  const contactFormRef = useRef<HTMLFormElement>(null);

  // Intersection Observer for Reveals
  useEffect(() => {
    const revealObs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('visible');
            revealObs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
    );

    document.querySelectorAll('.reveal').forEach((el) => revealObs.observe(el));
    return () => revealObs.disconnect();
  }, []);

  // Card Glow Effect
  useEffect(() => {
    const cards = document.querySelectorAll('.cap-card');
    const handleMouseMove = (e: Event) => {
      const mouseEvent = e as MouseEvent;
      const card = mouseEvent.currentTarget as HTMLElement;
      const r = card.getBoundingClientRect();
      const glow = card.querySelector('.card-glow') as HTMLElement;
      if (glow) {
        glow.style.setProperty('--gx', mouseEvent.clientX - r.left + 'px');
        glow.style.setProperty('--gy', mouseEvent.clientY - r.top + 'px');
      }
    };

    cards.forEach((card) => {
      card.addEventListener('mousemove', handleMouseMove);
    });

    return () => {
      cards.forEach((card) => {
        card.removeEventListener('mousemove', handleMouseMove);
      });
    };
  }, []);

  // Terminal Re-animate
  useEffect(() => {
    const termObs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const lines = e.target.querySelectorAll('.ai-term-line');
            lines.forEach((l) => {
              const el = l as HTMLElement;
              el.style.animation = 'none';
              void el.offsetHeight;
              el.style.animation = '';
            });
          }
        });
      },
      { threshold: 0.3 }
    );

    if (aiTermRef.current) termObs.observe(aiTermRef.current);
    return () => termObs.disconnect();
  }, []);

  // Smooth Scroll
  useEffect(() => {
    const handleAnchorClick = (e: MouseEvent) => {
      const target = e.currentTarget as HTMLAnchorElement;
      const href = target.getAttribute('href');
      if (href?.startsWith('#')) {
        e.preventDefault();
        const element = document.querySelector(href);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }
    };

    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach((link) => {
      link.addEventListener('click', handleAnchorClick as EventListener);
    });

    return () => {
      links.forEach((link) => {
        link.removeEventListener('click', handleAnchorClick as EventListener);
      });
    };
  }, []);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const btn = e.currentTarget.querySelector('.form-submit') as HTMLElement;
    const origText = btn.textContent;
    btn.textContent = '✓ Заявка отправлена!';
    btn.style.background = '#059669';
    btn.style.boxShadow = '0 4px 20px rgba(5,150,105,0.3)';
    setTimeout(() => {
        if (btn) {
            btn.textContent = origText;
            btn.style.background = '';
            btn.style.boxShadow = '';
        }
        if (contactFormRef.current) {
            contactFormRef.current.reset();
        }
    }, 3000);
  };

  return (
    <>
      {/* ===== NAVIGATION ===== */}
      <nav id="nav">
        <div className="nav-inner">
          <Link href="#" className="nav-logo">
            <span className="nav-logo-mark" aria-hidden="true">
              <svg
                width="101"
                height="100"
                viewBox="0 0 101 100"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g clipPath="url(#vkLogoClip)">
                  <path
                    d="M0.5 48C0.5 25.3726 0.5 14.0589 7.52944 7.02944C14.5589 0 25.8726 0 48.5 0H52.5C75.1274 0 86.4411 0 93.4706 7.02944C100.5 14.0589 100.5 25.3726 100.5 48V52C100.5 74.6274 100.5 85.9411 93.4706 92.9706C86.4411 100 75.1274 100 52.5 100H48.5C25.8726 100 14.5589 100 7.52944 92.9706C0.5 85.9411 0.5 74.6274 0.5 52V48Z"
                    fill="#0077FF"
                  />
                  <path
                    d="M53.7085 72.042C30.9168 72.042 17.9169 56.417 17.3752 30.417H28.7919C29.1669 49.5003 37.5834 57.5836 44.25 59.2503V30.417H55.0004V46.8752C61.5837 46.1669 68.4995 38.667 70.8329 30.417H81.5832C79.7915 40.5837 72.2915 48.0836 66.9582 51.1669C72.2915 53.6669 80.8336 60.2086 84.0836 72.042H72.2499C69.7082 64.1253 63.3754 58.0003 55.0004 57.1669V72.042H53.7085Z"
                    fill="white"
                  />
                </g>
                <defs>
                  <clipPath id="vkLogoClip">
                    <rect width="100" height="100" fill="white" transform="translate(0.5)" />
                  </clipPath>
                </defs>
              </svg>
            </span>
            <span className="nav-logo-text">vk_bot.ai</span>
          </Link>
          <div className="nav-links">
            <Link href="#capabilities">Возможности</Link>
            <Link href="#ai">AI боты</Link>
            <Link href="#integrations">Интеграции</Link>
            <Link href="#process">Процесс</Link>
            <Link href="#cases">Кейсы</Link>
          </div>
          <Link href="#contact" className="btn btn-primary">
            Обсудить проект
          </Link>
        </div>
      </nav>

      {/* ===== 1. HERO ===== */}
      <section className="hero">
        <div className="hero-bg">
          <div className="mesh-orb"></div>
          <div className="mesh-orb"></div>
          <div className="mesh-orb"></div>
        </div>
        <div className="hero-content">
          <div className="hero-top">
            <div>
              <div className="hero-badge">
                <span className="badge-dot"></span>
                Разработка VK ботов под ключ
              </div>
              <h1>
                VK боты, которые <em className="serif">продают</em> для вас
              </h1>
              <p className="hero-desc">
                Создаём интеллектуальных чат-ботов для VK на базе AI.
                Автоматизируем продажи, поддержку и маркетинг - ваш бизнес работает 24/7.
              </p>
              <div className="hero-actions">
                <Link href="#contact" className="btn btn-primary btn-lg">
                  Создать VK бота
                  <svg
                    className="btn-icon"
                    viewBox="0 0 20 20"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                  >
                    <path d="M4 10h12M10 4l6 6-6 6" />
                  </svg>
                </Link>
                <Link href="#capabilities" className="btn btn-ghost btn-lg">
                  Узнать больше
                </Link>
              </div>
            </div>

            {/* Hero Visual — Chat Window */}
            <div className="hero-visual">
              <div className="chat-window">
                <div className="chat-titlebar">
                  <div className="chat-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <div className="chat-title">VK Bot — Автоконсультант</div>
                </div>
                <div className="chat-body">
                  <div className="chat-msg user">
                    Здравствуйте! Хочу записаться на консультацию
                  </div>
                  <div className="chat-msg bot">
                    Добрый день! 👋 Подскажите ваше имя и удобное время — я запишу вас в ближайшее окно
                  </div>
                  <div className="chat-msg user">Алексей, завтра после 14:00</div>
                  <div className="chat-msg bot">
                    Отлично, Алексей! Записал вас на завтра, 15:00. Отправил подтверждение в amoCRM ✓
                  </div>
                  <div className="chat-msg bot">Что-нибудь ещё могу помочь? 😊</div>
                </div>
                <div className="chat-input">
                  <div className="chat-input-field">Написать сообщение...</div>
                  <button className="chat-send">
                    <svg
                      viewBox="0 0 20 20"
                      fill="none"
                      stroke="white"
                      strokeWidth="2"
                    >
                      <path d="M4 10h12M10 4l6 6-6 6" />
                    </svg>
                  </button>
                </div>
              </div>

              {/* Floating Stats */}
              {/* <div className="float-stat s1">
                <div className="stat-icon">⚡</div>
                <div>
                  <div className="stat-val">0.3s</div>
                  <div className="stat-lbl">Время ответа</div>
                </div>
              </div>
              <div className="float-stat s2">
                <div className="stat-icon">📈</div>
                <div>
                  <div className="stat-val">+280%</div>
                  <div className="stat-lbl">Конверсия</div>
                </div>
              </div>
              <div className="float-stat s3">
                <div className="stat-icon">🤖</div>
                <div>
                  <div className="stat-val">24/7</div>
                  <div className="stat-lbl">Онлайн</div>
                </div>
              </div> */}
            </div>
          </div>
        </div>
      </section>

      {/* ===== 2. TRUST BAR ===== */}
      <section className="trust">
        <div className="container">
          <div className="trust-inner">
            <div className="trust-item">
              <span className="trust-icon">🛡️</span> 20+ проектов запущено
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-icon">⭐</span> 97% довольных клиентов
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-icon">⚙️</span> VK API официальная интеграция
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-icon">🔒</span> Защита данных
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-icon">🚀</span> Запуск от 2 недель
            </div>
          </div>
        </div>
      </section>

      {/* ===== 3. CAPABILITIES ===== */}
      <section className="capabilities" id="capabilities">
        <div className="container">
          <div className="s-header reveal">
            <div className="s-label">Возможности</div>
            <h2>
              Всё, что умеет <em className="serif">ваш бот</em>
            </h2>
            <p className="s-desc">
              От простых автоответов до AI-консультантов — создаём ботов любой сложности для любых задач бизнеса
            </p>
          </div>
          <div className="cap-grid">
            <div className="cap-card reveal reveal-delay-1">
              <div className="card-glow"></div>
              <div className="cap-icon c1">💬</div>
              <h3>Автоматизация продаж</h3>
              <p>
                Бот квалифицирует лиды, отвечает на вопросы о товарах и услугах, подводит к покупке и оформляет заказ
              </p>
            </div>
            <div className="cap-card reveal reveal-delay-2">
              <div className="card-glow"></div>
              <div className="cap-icon c2">🎯</div>
              <h3>Запись на услуги</h3>
              <p>
                Клиент записывается прямо в чате VK — бот проверяет расписание и отправляет подтверждение
              </p>
            </div>
            <div className="cap-card reveal reveal-delay-3">
              <div className="card-glow"></div>
              <div className="cap-icon c3">🧠</div>
              <h3>AI-консультант</h3>
              <p>
                Бот на базе LLM отвечает на любые вопросы клиентов, используя базу знаний вашего бизнеса
              </p>
            </div>
            <div className="cap-card reveal reveal-delay-1">
              <div className="card-glow"></div>
              <div className="cap-icon c4">🔄</div>
              <h3>Квалификация лидов</h3>
              <p>
                Автоматический сбор данных о клиенте, сегментация и передача горячих лидов менеджерам
              </p>
            </div>
            <div className="cap-card reveal reveal-delay-2">
              <div className="card-glow"></div>
              <div className="cap-icon c5">📋</div>
              <h3>Поддержка 24/7</h3>
              <p>
                Мгновенные ответы на частые вопросы, обработка обращений и передача сложных кейсов оператору
              </p>
            </div>
            <div className="cap-card reveal reveal-delay-3">
              <div className="card-glow"></div>
              <div className="cap-icon c6">📢</div>
              <h3>Маркетинг и рассылки</h3>
              <p>
                Сценарные воронки, автоматические цепочки сообщений, сегментированные рассылки по базе
              </p>
            </div>
          </div>
        </div>
      </section>

      <hr className="sep" />

      {/* ===== 4. AI BOTS ===== */}
      <section className="ai-section" id="ai">
        <div className="container">
          <div className="ai-layout">
            <div>
              <div className="s-label" style={{ justifyContent: 'flex-start' }}>
                AI-технологии
              </div>
              <h2 style={{ textAlign: 'left', marginBottom: '16px' }}>
                Почему <em className="serif">AI боты</em> — это другой уровень
              </h2>
              <p
                style={{
                  color: 'var(--text-secondary)',
                  marginBottom: '40px',
                  lineHeight: '1.7',
                }}
              >
                Боты на базе LLM не просто следуют скрипту — они понимают контекст, обучаются на вашей базе знаний и ведут живой диалог с клиентом
              </p>
              <div className="ai-features">
                <div className="ai-feat reveal">
                  <div className="ai-feat-num">01</div>
                  <div>
                    <h3>Понимание естественного языка</h3>
                    <p>
                      Бот распознаёт намерения клиента, даже если вопрос сформулирован нестандартно
                    </p>
                  </div>
                </div>
                <div className="ai-feat reveal">
                  <div className="ai-feat-num">02</div>
                  <div>
                    <h3>Обучение на ваших данных</h3>
                    <p>
                      Загружаем базу знаний, прайсы, каталоги — бот отвечает точно как ваш лучший менеджер
                    </p>
                  </div>
                </div>
                <div className="ai-feat reveal">
                  <div className="ai-feat-num">03</div>
                  <div>
                    <h3>Контекстная память</h3>
                    <p>
                      Бот помнит историю диалога и адаптирует ответы в зависимости от предыдущих сообщений
                    </p>
                  </div>
                </div>
                <div className="ai-feat reveal">
                  <div className="ai-feat-num">04</div>
                  <div>
                    <h3>Передача менеджеру</h3>
                    <p>
                      Если клиент требует живого человека — бот плавно передаёт диалог оператору с полным контекстом
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* AI Terminal Visual */}
            <div className="ai-visual reveal">
              <div className="ai-terminal" id="ai-term" ref={aiTermRef}>
                <div className="ai-terminal-bar">
                  <div className="td"></div>
                  <div className="td"></div>
                  <div className="td"></div>
                  <span>vkbot-ai — inference engine</span>
                </div>
                <div className="ai-terminal-body">
                  <div className="ai-term-line">
                    <span className="t-prompt">vkbot</span> <span className="t-cmd">$ deploy --model sales-agent-v3</span>
                  </div>
                  <div className="ai-term-line">
                    <span className="t-out">⠋ Loading knowledge base...</span>
                  </div>
                  <div className="ai-term-line">
                    <span className="t-success">✓</span> <span className="t-out">Vectors indexed:</span> <span className="t-hl">2,847 documents</span>
                  </div>
                  <div className="ai-term-line">
                    <span className="t-success">✓</span> <span className="t-out">VK API connected:</span> <span className="t-hl">community_id:218493</span>
                  </div>
                  <div className="ai-term-line">
                    <span className="t-success">✓</span> <span className="t-out">amoCRM sync:</span> <span className="t-hl">pipeline ready</span>
                  </div>
                  <div className="ai-term-line">
                    <span className="t-success">✓</span> <span className="t-out">Intent classifier:</span> <span className="t-hl">98.7% accuracy</span>
                  </div>
                  <div className="ai-term-line">
                    <span className="t-prompt">vkbot</span> <span className="t-cmd">$ status</span> <span className="t-out">→ 🟢 Agent live. Handling</span> <span className="t-hl">12 dialogs</span>
                    <span className="t-cursor"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <hr className="sep" />

      {/* ===== 5. INTEGRATIONS ===== */}
      <section className="integrations" id="integrations">
        <div className="container">
          <div className="s-header reveal">
            <div className="s-label">Экосистема</div>
            <h2>
              Подключается <em className="serif">к вашим</em> инструментам
            </h2>
            <p className="s-desc">
              Бот встраивается в вашу текущую инфраструктуру — без ломки процессов
            </p>
          </div>
          <div className="int-grid reveal">
            <div className="int-chip">
              <div className="int-icon">🟣</div> amoCRM
            </div>
            <div className="int-chip">
              <div className="int-icon">🔵</div> Битрикс24
            </div>
            <div className="int-chip">
              <div className="int-icon">🟢</div> Google Sheets
            </div>
            <div className="int-chip">
              <div className="int-icon">🟡</div> N8N Automation
            </div>
            <div className="int-chip">
              <div className="int-icon">🌸</div> Telegram
            </div>
            <div className="int-chip">
              <div className="int-icon">🔗</div> Webhooks / API
            </div>
            <div className="int-chip">
              <div className="int-icon">💚</div> Любой сервис
            </div>
          </div>
          <div className="int-center reveal" style={{ marginTop: '40px' }}>
            <p style={{ color: 'var(--text-tertiary)', fontSize: '0.9rem' }}>
              Нужна интеграция с другим сервисом? Подключим через API или webhook
            </p>
          </div>
        </div>
      </section>

      <hr className="sep" />

      {/* ===== 6. PROCESS ===== */}
      <section className="process" id="process">
        <div className="container">
          <div className="s-header reveal">
            <div className="s-label">Процесс</div>
            <h2>
              Как мы <em className="serif">создаём</em> ботов
            </h2>
            <p className="s-desc">
              Прозрачный процесс от первого звонка до запуска и поддержки
            </p>
          </div>
          <div className="proc-steps">
            <div className="proc-step reveal reveal-delay-1">
              <div className="proc-num">01</div>
              <h3>Анализ</h3>
              <p>
                Разбираем ваши бизнес-процессы, определяем задачи для бота и проектируем сценарии
              </p>
            </div>
            <div className="proc-step reveal reveal-delay-2">
              <div className="proc-num">02</div>
              <h3>Разработка</h3>
              <p>
                Создаём бота, настраиваем AI, подключаем интеграции и обучаем на вашей базе знаний
              </p>
            </div>
            <div className="proc-step reveal reveal-delay-3">
              <div className="proc-num">03</div>
              <h3>Тестирование</h3>
              <p>
                Проводим полное тестирование всех сценариев, отлаживаем ответы и настраиваем воронки
              </p>
            </div>
            <div className="proc-step reveal reveal-delay-4">
              <div className="proc-num">04</div>
              <h3>Запуск</h3>
              <p>
                Деплоим бота в вашу VK группу, обучаем команду и обеспечиваем техническую поддержку
              </p>
            </div>
          </div>
        </div>
      </section>

      <hr className="sep" />

      {/* ===== 7. CASES ===== */}
      <section className="cases" id="cases">
        <div className="container">
          <div className="s-header reveal">
            <div className="s-label">Кейсы</div>
            <h2>
              Результаты <em className="serif">наших</em> клиентов
            </h2>
          </div>
          <div className="case-grid">
            <div className="case-card reveal reveal-delay-1">
              <div className="case-visual">🏫</div>
              <div className="case-body">
                <span className="case-tag">Онлайн-школа</span>
                <h3>Автоматизация записи на курсы</h3>
                <p>
                  AI-бот консультирует по программам обучения, подбирает курс и записывает студентов — без участия менеджера
                </p>
                <div className="case-metrics">
                  <div className="case-metric">
                    <span className="case-metric-val">+180%</span>
                    <span className="case-metric-lbl">Записей</span>
                  </div>
                  <div className="case-metric">
                    <span className="case-metric-val">-60%</span>
                    <span className="case-metric-lbl">Нагрузка</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="case-card reveal reveal-delay-2">
              <div className="case-visual">🛒</div>
              <div className="case-body">
                <span className="case-tag">E-commerce</span>
                <h3>Продажа товаров через VK</h3>
                <p>
                  Сценарный бот ведёт клиента от выбора товара до оформления заказа с интеграцией в CRM и оплату
                </p>
                <div className="case-metrics">
                  <div className="case-metric">
                    <span className="case-metric-val">+320%</span>
                    <span className="case-metric-lbl">Конверсия</span>
                  </div>
                  <div className="case-metric">
                    <span className="case-metric-val">24/7</span>
                    <span className="case-metric-lbl">Работа</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="case-card reveal reveal-delay-3">
              <div className="case-visual">🏥</div>
              <div className="case-body">
                <span className="case-tag">Сервис</span>
                <h3>Запись в медицинский центр</h3>
                <p>
                  Бот записывает на приём, напоминает о визитах, синхронизирует расписание с внутренней системой
                </p>
                <div className="case-metrics">
                  <div className="case-metric">
                    <span className="case-metric-val">85%</span>
                    <span className="case-metric-lbl">Авто-запись</span>
                  </div>
                  <div className="case-metric">
                    <span className="case-metric-val">×3</span>
                    <span className="case-metric-lbl">Скорость</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== 8. CTA + FORM ===== */}
      <section className="cta-section" id="contact">
        <div className="cta-mesh">
          <div className="cm"></div>
          <div className="cm"></div>
        </div>
        <div className="dot-grid"></div>
        <div className="container">
          <div className="cta-layout">
            <div className="cta-text reveal">
              <h2>Готовы автоматизировать VK?</h2>
              <p>
                Расскажите о задаче — мы подберём решение, рассчитаем стоимость и предложим план запуска за 24 часа
              </p>
              <div className="cta-features">
                <div className="cta-feat">
                  <div className="cta-feat-check">✓</div> Бесплатная консультация и аудит
                </div>
                <div className="cta-feat">
                  <div className="cta-feat-check">✓</div> Индивидуальное решение под ваш бизнес
                </div>
                <div className="cta-feat">
                  <div className="cta-feat-check">✓</div> Запуск от 2 недель
                </div>
                <div className="cta-feat">
                  <div className="cta-feat-check">✓</div> Техническая поддержка после запуска
                </div>
                <div className="cta-feat">
                  <div className="cta-feat-check">✓</div> Интеграция с вашей CRM и сервисами
                </div>
              </div>
            </div>
            <div className="cta-form reveal reveal-delay-2">
              <h3>Обсудить проект</h3>
              <form id="contactForm" ref={contactFormRef} onSubmit={handleSubmit}>
                <div className="form-row">
                  <div className="form-group">
                    <label>Имя</label>
                    <input type="text" placeholder="Как вас зовут?" required />
                  </div>
                  <div className="form-group">
                    <label>Компания</label>
                    <input type="text" placeholder="Название компании" />
                  </div>
                </div>
                <div className="form-group">
                  <label>Ссылка на VK сообщество</label>
                  <input type="url" placeholder="https://vk.com/your_community" />
                </div>
                <div className="form-group">
                  <label>Что нужно автоматизировать?</label>
                  <textarea placeholder="Опишите задачу: продажи, поддержка, запись, консультации..."></textarea>
                </div>
                <div className="form-row">
                  <div className="form-group">
                    <label>Телефон или Telegram</label>
                    <input type="text" placeholder="@username или +7..." required />
                  </div>
                  <div className="form-group">
                    <label>Бюджет</label>
                    <select defaultValue="">
                      <option value="" disabled style={{ color: 'rgba(255,255,255,0.25)' }}>
                        Выберите диапазон
                      </option>
                      <option>до 50 000 ₽</option>
                      <option>50 000 — 150 000 ₽</option>
                      <option>150 000 — 300 000 ₽</option>
                      <option>от 300 000 ₽</option>
                      <option>Нужна оценка</option>
                    </select>
                  </div>
                </div>
                <button type="submit" className="form-submit">
                  Получить консультацию →
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* ===== 9. FOOTER ===== */}
      <footer>
        <div className="container">
          <div className="footer-inner">
            <div className="footer-left">
              <div className="footer-logo">VK</div>
              vkbot.ai
            </div>
            <div className="footer-copy">© 2026 vkbot.ai — Разработка VK ботов для бизнеса</div>
            <div className="footer-links">
              <Link href="#">Telegram</Link>
              <Link href="#">VK</Link>
              <Link href="#">Политика</Link>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}