Landing Game

import { BannerCountdown } from "@/components/banner-countdown";
import { NavMinimal } from "@/components/nav-minimal";
import { HeroCentered } from "@/components/hero-centered";
import { Metaballs } from "@/components/metaballs";
import { VideoFacade } from "@/components/video-facade";
import { ShowcaseMasonry } from "@/components/showcase-masonry";
import { SpecsGrid } from "@/components/specs-grid";
import { TimelineRail } from "@/components/timeline-rail";
import { FaqColumns } from "@/components/faq-columns";
import { CtaGlow } from "@/components/cta-glow";
import { FooterMinimal } from "@/components/footer-minimal";

/**
 * Инди-игра — пятнадцатый архетип и самая ТЁМНАЯ страница каталога: у игры
 * продаёт атмосфера, поэтому единственная страница, где живой фон уместен
 * прямо в hero без оговорок (metaballs — плазма, дышащая под курсором).
 * Дальше порядок игрового маркетинга: трейлер выше скриншотов (его смотрят
 * первым), скриншоты масонри, СИСТЕМНЫЕ ТРЕБОВАНИЯ на specs-grid (секция
 * «цифры» в новой роли — вторая реальная сборка), дорожная карта раннего
 * доступа на timeline-rail и один CTA — вишлист: у неизданной игры других
 * конверсий нет, отсчёт в баннере ведёт к нему же.
 */
export function LandingGame() {
  return (
    <div
      className="lgm ds-scope"
      style={{
        textAlign: "start",
        ["--ds-accent-h" as string]: "285",
        ["--ds-section-y" as string]: "clamp(44px, 6.5vw, 88px)",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <BannerCountdown
        label="ранний доступ"
        text="Выходим через"
        doneText="Ранний доступ открыт — забирайте"
        ctaLabel="В вишлист"
      />

      <NavMinimal brand="СТУЖА" links={["Трейлер", "Скриншоты", "Дорожная карта"]} cta="В вишлист" />

      <HeroCentered
        badge="инди-экшен · один разработчик"
        title="Дожить до рассвета и не остыть"
        accentWords={3}
        sub="Полярная станция замолчала. Вы — техник, у которого есть гаечный ключ, генератор на последнем издыхании и шесть часов ночи. Тепло — ресурс, тишина — враньё."
        primary="Добавить в вишлист"
        secondary="Смотреть трейлер"
        note="ПК · выходит в ранний доступ этой зимой"
        // backdrop явный: дефолтная подложка эффекта берёт фон ТЕМЫ, и в светлой
        // теме hero с tone="dark" стал бы серой кашей (грабля в AGENTS)
        background={<Metaballs hue={0.78} speed={0.3} backdrop="oklch(0.1 0.03 285)" />}
        tone="dark"
        scrim={0.56}
      />

      <VideoFacade
        eyebrow="трейлер"
        title="Полторы минуты холода"
        sub="Геймплей без монтажа из кат-сцен: всё, что видите, — играется."
        src="https://motiva.pages.dev/video/smoke-1280x720.mp4"
        poster="https://motiva.pages.dev/video/smoke-1280x720-poster.jpg"
        duration="1:24"
        caption="запись с билда раннего доступа"
      />

      <ShowcaseMasonry
        eyebrow="настроение"
        title="Свет и погода, по которым строится игра"
        sub="Скриншоты покажем ближе к раннему доступу. Пока — референсы: какой видит станцию художник."
        items={[
          { src: "https://motiva.pages.dev/img/1015-1600x1000.jpg", ratio: 1.6, title: "Большая вода", tag: "холод учится у неё" },
          { src: "https://motiva.pages.dev/img/1022-600x750.jpg", ratio: 0.8, title: "Сияние", tag: "единственный свет смены" },
          { src: "https://motiva.pages.dev/img/1019-600x750.jpg", ratio: 0.8, title: "Шторм подходит", tag: "с моря, как всегда" },
          { src: "https://motiva.pages.dev/img/1021-600x750.jpg", ratio: 0.8, title: "Туман", tag: "съедает станцию первым" },
          { src: "https://motiva.pages.dev/img/1016-900x675.jpg", ratio: 1.333, title: "Последний тёплый час", tag: "перед сменой" },
        ]}
      />

      <SpecsGrid
        eyebrow="системные требования"
        title="Пойдёт почти на всём"
        items={[
          { value: "8", unit: "ГБ", label: "оперативной памяти" },
          { value: "2.5", unit: "ГБ", label: "на диске" },
          { value: "60", unit: "fps", label: "на встроенной графике" },
          { value: "3", label: "платформы: Win · Mac · Linux" },
        ]}
      />

      <TimelineRail
        eyebrow="дорожная карта"
        title="Что будет после раннего доступа"
        sub="Обещаем только то, что уже в работе. Остальное — по вашим рукам в Discord."
        periods={[
          {
            label: "Ранний доступ",
            events: [
              { title: "Станция целиком", text: "Все четыре контура, шесть часов ночи, один режим", when: "зима" },
              { title: "Локализация", text: "Русский и английский, субтитры радиопереговоров", when: "зима" },
            ],
          },
          {
            label: "Версия 1.0",
            events: [
              { title: "Режим «Смена»", text: "Бесконечная ночь с нарастающей поломкой — для тех, кому мало", when: "весна" },
              { title: "Геймпад и Deck", text: "Полная раскладка и проверка на Steam Deck", when: "весна" },
            ],
          },
          {
            label: "После релиза",
            events: [
              { title: "Кооператив на двоих", text: "Второй техник — если ранний доступ покажет спрос", when: "обсуждаем" },
            ],
          },
        ]}
      />

      <FaqColumns
        eyebrow="вопросы"
        title="Что спрашивают в Discord"
        items={[
          { q: "Это хоррор?", a: "Скорее триллер выживания: пугает не скример, а стрелка температуры. Джампскейров нет, тревога — есть." },
          { q: "Сколько длится игра?", a: "Одна ночь — шесть часов игрового времени, реальных — четыре-пять. Режим «Смена» в 1.0 будет бесконечным." },
          { q: "Будет ли на геймпаде?", a: "Да, полная поддержка — в версии 1.0. В раннем доступе — клавиатура и мышь." },
          { q: "Почему ранний доступ?", a: "Игру делает один человек. Ранний доступ — способ доделать «Смену» и кооператив на ваши деньги, а не на кредит." },
        ]}
        contact="Остальное — в Discord"
        contactHref="#"
      />

      <CtaGlow
        title="Вишлист решает судьбу игры"
        sub="Алгоритмы магазина показывают игру тем больше, чем длиннее вишлист. Один клик сейчас — заметность на релизе."
        cta="Добавить в вишлист"
        note="выходим этой зимой · ПК"
      />

      <FooterMinimal
        brand="СТУЖА"
        tagline="Инди-экшен о тепле, которого не хватит на всех"
        columns={[
          { title: "Игра", links: ["Трейлер", "Скриншоты", "Дорожная карта", "Пресс-кит"] },
          { title: "Сообщество", links: ["Discord", "Steam", "devlog@stuzha.games"] },
        ]}
      />
    </div>
  );
}