Landing Device

import { NavSticky } from "@/components/nav-sticky";
import { HeroProduct } from "@/components/hero-product";
import { SpecsGrid } from "@/components/specs-grid";
import { StorySticky } from "@/components/story-sticky";
import { FeaturesColumns } from "@/components/features-columns";
import { CtaSplit } from "@/components/cta-split";
import { FooterMinimal } from "@/components/footer-minimal";

/**
 * Продуктовая страница в духе больших витрин Apple — и это не «ещё один лендинг», а
 * проверка дизайн-системы на прочность.
 *
 * Айдентика здесь другая, чем у студии и у SaaS: холодный синий акцент, крупные радиусы,
 * много воздуха, средняя насыщенность шрифта вместо жирной. Всё это задано ЗДЕСЬ,
 * восемью переменными — ни одна секция не форкнута:
 *
 *   акцент  --ds-accent-h/c/l  синий вместо фиолетового, глубже и спокойнее
 *   форма   --ds-radius-lg     28px: крупная скруглённость читается как «дорого»
 *   ритм    --ds-section-y     секции дышат заметно шире обычного
 *   кривая  --ds-ease-out      длиннее и почти без торможения в конце
 *
 * Что отличает премиальную витрину от обычной — три вещи, и ни одна не про эффекты:
 *
 * 1. ВОЗДУХ ВМЕСТО РАМОК. Блоки разделены расстоянием и сменой фона. Единственные линии
 *    на странице — волосяные разделители характеристик.
 * 2. ОДНО ДВИЖЕНИЕ ЗА РАЗ. Текст, потом продукт, потом характеристики — по мере
 *    прокрутки. Ничего не анимируется «за компанию».
 * 3. ТИПОГРАФИКА, А НЕ УКРАШЕНИЯ. Крупный кегль, сжатый трекинг, вес 600–640.
 *    Жирный шрифт в таком размере кричит, а сжатие и умеренный вес — нет.
 */
export function LandingDevice() {
  return (
    <div
      className="ldv ds-scope"
      style={{
        textAlign: "start",
        // синий и глубокий: тон, насыщенность и светлота задаются вместе, потому что
        // «синий Apple» — это не только другой угол на круге, но и другая плотность
        ["--ds-accent-h" as string]: "255",
        ["--ds-accent-c" as string]: "0.19",
        ["--ds-accent-l" as string]: "0.58",
        // крупная скруглённость и много воздуха — половина ощущения премиума
        ["--ds-radius-lg" as string]: "28px",
        ["--ds-section-y" as string]: "clamp(72px, 10vw, 140px)",
        // движение длиннее и мягче общего: доезжает, а не тормозит
        ["--ds-ease-out" as string]: "cubic-bezier(0.16, 1, 0.24, 1)",
        ["--ds-slow" as string]: "0.7s",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <NavSticky brand="aurora" links={["Обзор", "Характеристики", "Сравнение", "Поддержка"]} cta="Купить" />

      <HeroProduct
        eyebrow="Новинка"
        title="Aurora Pro"
        accentLine="Свет, который слушается"
        tagline="Матрица нового поколения, шесть часов автономной работы и корпус, который не боится дороги."
        price="от $1 299 · доставка со среды"
        primary="Купить"
        secondary="Смотреть обзор"
      />

      <SpecsGrid />

      <StorySticky />

      <FeaturesColumns
        eyebrow="в коробке"
        title="Всё, что нужно, уже внутри"
        numbered={false}
        items={[
          { title: "Зарядка 65 Вт", text: "Компактный блок с двумя портами: заряжает ноутбук и телефон одновременно." },
          { title: "Кабель в оплётке", text: "Два метра, выдерживает 25 тысяч перегибов. Не путается и не ломается у разъёма." },
          { title: "Чехол из фетра", text: "Держит форму, не собирает пыль и не царапает корпус при переноске." },
          { title: "Год гарантии", text: "Замена в течение суток в 40 городах. Продлевается до трёх лет отдельно." },
          { title: "Перенос данных", text: "Мастер переноса поднимает рабочий стол со старой машины за один вечер." },
          { title: "Возврат 30 дней", text: "Не подошло — вернём деньги без вопросов и без комиссии за доставку." },
        ]}
      />

      <CtaSplit
        title="Aurora Pro — от $1 299"
        sub="Доставка со среды, настройка при получении, обмен в течение 30 дней."
        primary="Купить"
        secondary="Сравнить модели"
      />

      <FooterMinimal
        brand="aurora"
        tagline="Инструменты для тех, кто работает в дороге"
        columns={[
          { title: "Продукты", links: ["Aurora Pro", "Aurora Air", "Аксессуары", "Сравнение"] },
          { title: "Поддержка", links: ["Гарантия", "Ремонт", "Инструкции", "Статус заказа"] },
          { title: "Компания", links: ["О нас", "Магазины", "Вакансии", "hello@aurora.dev"] },
        ]}
      />
    </div>
  );
}