Landing Product

import { NavSticky } from "@/components/nav-sticky";
import { HeroSplit } from "@/components/hero-split";
import { StatsBand } from "@/components/stats-band";
import { FeaturesBento } from "@/components/features-bento";
import { PricingTiers } from "@/components/pricing-tiers";
import { FaqAccordion } from "@/components/faq-accordion";
import { CtaGlow } from "@/components/cta-glow";
import { FooterMinimal } from "@/components/footer-minimal";

/**
 * Лендинг SaaS-продукта из тех же секций, что и лендинг студии.
 *
 * Показательно ровно это: две страницы с разным характером собраны из одного набора
 * блоков, а различаются они пропсами и ДВУМЯ переменными — тоном акцента и вертикальным
 * ритмом. Если бы каждая секция несла свои цвета и отступы, такого повторного
 * использования не получилось бы: пришлось бы форкать блоки под каждый проект.
 */
export function LandingProduct() {
  return (
    <div
      className="lpr ds-scope"
      style={{
        textAlign: "start",
        // тот же набор секций, другой характер — разница ровно в этом числе
        // (работает благодаря классу ds-scope из дизайн-системы)
        ["--ds-accent-h" as string]: "230",
        ["--ds-section-y" as string]: "clamp(44px, 6.5vw, 88px)",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <NavSticky brand="orbit" links={["Возможности", "Цены", "Документы", "Блог"]} cta="Попробовать" />

      <HeroSplit
        eyebrow="аналитика продукта"
        lines={["Метрики, которые"]}
        accentLine="объясняют себя сами"
        sub="Подключается за вечер, отвечает на вопросы за секунды. Без кубов, витрин и отдельного человека, который умеет их готовить."
        primary="Начать бесплатно"
        secondary="Смотреть демо"
      />

      <StatsBand
        items={[
          { value: 40, suffix: "мс", label: "медианный ответ запроса" },
          { value: 2400, suffix: "+", label: "команд подключено" },
          { value: 99, suffix: ",95%", label: "аптайм за год" },
          { value: 12, label: "минут на подключение" },
        ]}
      />

      <FeaturesBento
        eyebrow="возможности"
        title="Всё, что нужно, и ничего сверх"
        sub="Инструмент должен отвечать на вопрос, а не требовать курса по себе."
        items={[
          { title: "Запросы на человеческом", text: "Спрашиваешь словами — получаешь график и SQL под ним", span: 2, rows: 2, accent: "230" },
          { title: "Живые дашборды", text: "Обновляются потоком, без кнопки «обновить»", accent: "300" },
          { title: "Алерты", text: "Срабатывают на аномалию, а не на порог", accent: "150" },
          { title: "Свои данные", text: "Подключение к вашему хранилищу, копий не делаем", span: 2, accent: "60" },
        ]}
      />

      <PricingTiers
        eyebrow="тарифы"
        title="Платите за события, а не за места"
        sub="Команда любого размера на любом тарифе. Растёт объём — растёт счёт, растёт команда — нет."
        plans={[
          {
            name: "Старт",
            price: "$0",
            period: "навсегда",
            note: "до 100 тыс. событий в месяц",
            features: ["Все дашборды", "3 источника данных", "Хранение 3 месяца", "Сообщество в поддержку"],
            cta: "Начать",
          },
          {
            name: "Команда",
            price: "$99",
            period: "в месяц",
            note: "до 5 млн событий",
            features: ["Всё из «Старта»", "Неограниченно источников", "Хранение 2 года", "Алерты и вебхуки", "Поддержка за сутки"],
            cta: "Попробовать 14 дней",
            featured: true,
          },
          {
            name: "Компания",
            price: "договорная",
            note: "от 50 млн событий",
            features: ["Всё из «Команды»", "Свой контур или облако", "SSO и аудит действий", "Выделенный инженер"],
            cta: "Связаться",
          },
        ]}
      />

      <FaqAccordion
        eyebrow="частые вопросы"
        title="Что обычно спрашивают до подключения"
        items={[
          { q: "Как быстро подключается?", a: "Скрипт на страницу или SDK в приложение — первые события видно через несколько минут. Полная разметка ключевых действий обычно занимает вечер." },
          { q: "Где лежат данные?", a: "В вашем хранилище. Мы выполняем запросы к нему и не делаем копий: на тарифе «Компания» сервис вообще ставится в ваш контур." },
          { q: "Что считается событием?", a: "Любое действие, которое вы сами разметили. Просмотры страниц, клики, серверные вызовы — считаются одинаково, скрытых множителей нет." },
          { q: "Можно ли уйти?", a: "Да, в любой момент. Выгрузка разметки и дашбордов — одной кнопкой, в открытом формате." },
        ]}
      />

      <CtaGlow
        title="Первые ответы — сегодня"
        sub="Бесплатный тариф без карты и без звонка с менеджером. Подключитесь и посмотрите на свои данные."
        cta="Создать проект"
        note="или напишите нам — hello@orbit.dev"
      />

      <FooterMinimal
        brand="orbit"
        tagline="Аналитика продукта, которая объясняет себя сама"
        columns={[
          { title: "Продукт", links: ["Возможности", "Цены", "Дорожная карта", "Статус"] },
          { title: "Разработчикам", links: ["Документация", "SDK", "API", "Примеры"] },
          { title: "Компания", links: ["О нас", "Блог", "Вакансии", "hello@orbit.dev"] },
        ]}
      />
    </div>
  );
}