Landing Agency

import { NavBlend } from "@/components/nav-blend";
import { HeroCentered } from "@/components/hero-centered";
import { LightRays } from "@/components/light-rays";
import { ShowcaseMasonry } from "@/components/showcase-masonry";
import { StepsFlow } from "@/components/steps-flow";
import { TeamGrid } from "@/components/team-grid";
import { BlogIndex } from "@/components/blog-index";
import { TestimonialsMarquee } from "@/components/testimonials-marquee";
import { ContactSplit } from "@/components/contact-split";
import { FooterCta } from "@/components/footer-cta";

/**
 * Лендинг креативного агентства — четвёртая страница каталога и ПЕРВАЯ с живым
 * фоном в сокете: hero держит `light-rays` через проп `background`, ровно так же,
 * как это делает конструктор. Секция сама гасит свою заливку и ставит скрим
 * (`tone="dark"`), странице для этого не нужно ни строчки своего CSS.
 *
 * Характер — тёплый янтарный: акцент задан ЗДЕСЬ одним числом (`--ds-accent-h: 62`),
 * и лучи в hero настроены в тот же тон (`hue` 0.16 — это янтарь на цветовом круге
 * шейдера). Шапка — `nav-blend`: над тёмным hero она светлая, над светлыми
 * секциями сама выворачивается — тоже без единого скрипта страницы.
 */
export function LandingAgency() {
  return (
    <div
      className="lag ds-scope"
      style={{
        textAlign: "start",
        ["--ds-accent-h" as string]: "62",
        ["--ds-section-y" as string]: "clamp(52px, 7.5vw, 104px)",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <NavBlend brand="ember" links={["Работы", "Процесс", "Команда", "Журнал"]} cta="Обсудить проект" />

      <HeroCentered
        badge="агентство цифровых продуктов"
        title="Делаем сайты, которые не путают с чужими"
        accentWords={4}
        sub="Айдентика, продуктовый дизайн и разработка одной командой. Берём три проекта в квартал, чтобы каждый доводить руками."
        primary="Обсудить проект"
        secondary="Смотреть работы"
        note="ближайшее окно — ноябрь"
        background={<LightRays hue={0.16} spread={0.62} intensity={0.85} />}
        tone="dark"
      />

      {/* работы — masonry: рваный пинтерест-ритм подаёт живую съёмку лучше ровной сетки */}
      <ShowcaseMasonry
        eyebrow="работы"
        title="Последний год — в восьми проектах"
        sub="Айдентика, продукты и сайты. Кликните — обсудим, как сделать девятый."
        items={[
          { src: "https://motiva.pages.dev/img/1015-600x800.jpg", ratio: 0.75, title: "Nordwind", tag: "айдентика + сайт" },
          { src: "https://motiva.pages.dev/img/1035-600x400.jpg", ratio: 1.5, title: "Kernel", tag: "продукт" },
          { src: "https://motiva.pages.dev/img/1024-600x900.jpg", ratio: 0.6667, title: "Luma", tag: "моушен" },
          { src: "https://motiva.pages.dev/img/1050-600x400.jpg", ratio: 1.5, title: "Vertex", tag: "платформа" },
          { src: "https://motiva.pages.dev/img/1039-600x750.jpg", ratio: 0.8, title: "Okapi", tag: "бренд" },
          { src: "https://motiva.pages.dev/img/1069-600x450.jpg", ratio: 1.3333, title: "Solaris", tag: "упаковка" },
          { src: "https://motiva.pages.dev/img/1044-600x850.jpg", ratio: 0.7059, title: "Meridian", tag: "айдентика" },
          { src: "https://motiva.pages.dev/img/1080-600x500.jpg", ratio: 1.2, title: "Cardamom", tag: "съёмка" },
        ]}
      />

      <StepsFlow
        eyebrow="процесс"
        title="Пять шагов без сюрпризов"
        sub="Смета не растёт по дороге, демо каждую пятницу, исходники ваши."
        items={[
          { title: "Разговор", note: "60 минут", text: "Слушаем задачу и ограничения. К концу звонка понятно, берёмся ли мы — или честно советуем другого подрядчика." },
          { title: "Смета", note: "3 дня", text: "Объём, сроки и цена одним документом. Фиксируем в договоре — сверх сметы ничего не появляется." },
          { title: "Дизайн", note: "2–3 недели", text: "Показываем кликабельный прототип, а не картинки: как это работает, видно до вёрстки." },
          { title: "Сборка", note: "3–5 недель", text: "Демо каждую пятницу, правки собираем списком — чтобы не переделывать одно и то же дважды." },
          { title: "Запуск", note: "1 неделя", text: "Переносим на ваши серверы, обучаем команду, месяц поддержки без доплат." },
        ]}
      />

      <TeamGrid
        eyebrow="команда"
        title="Четверо, и все делают руками"
        sub="Без менеджеров-передатчиков: вы говорите с теми, кто делает."
        items={[
          { name: "Jane Doe", role: "дизайн", photo: "https://motiva.pages.dev/img/1027-400x400.jpg", about: "Считает, что макет без состояний — картинка, а не дизайн." },
          { name: "John Roe", role: "фронтенд", photo: "https://motiva.pages.dev/img/91-400x400.jpg", about: "Делает так, чтобы интерфейс не дёргался ни на каком железе." },
          { name: "Mary Major", role: "моушен", photo: "https://motiva.pages.dev/img/823-400x400.jpg", about: "Анимация у неё объясняет, а не украшает." },
          { name: "Alex Poe", role: "продюсер", photo: "https://motiva.pages.dev/img/1005-400x400.jpg", about: "Переводит «хочется красиво» в план с датами." },
        ]}
      />

      <BlogIndex
        eyebrow="журнал"
        title="Пишем, как думаем"
        items={[
          { title: "Почему интерфейс дёргается, хотя код правильный", tag: "разбор", date: "12.08", image: "https://motiva.pages.dev/img/1015-600x800.jpg" },
          { title: "Тёмная тема — не инверсия светлой", tag: "дизайн", date: "02.07", image: "https://motiva.pages.dev/img/1019-600x750.jpg" },
          { title: "Анимации, которые не мешают читать", tag: "моушен", date: "15.07", image: "https://motiva.pages.dev/img/1018-600x400.jpg" },
          { title: "Скролл как источник силы, а не событий", tag: "разбор", date: "18.06", image: "https://motiva.pages.dev/img/1021-600x750.jpg" },
        ]}
      />

      <TestimonialsMarquee
        eyebrow="отзывы"
        title="Что говорят после запуска"
        items={[
          { text: "Сделали за шесть недель то, что мы год не могли сформулировать сами.", name: "Jane D.", role: "директор по продукту" },
          { text: "Первый подрядчик, который спорил с нами по делу — и оказался прав.", name: "John R.", role: "основатель" },
          { text: "Отдали исходники и дизайн-систему. Через год всё ещё живём на них.", name: "Alex P.", role: "техлид" },
          { text: "Смета не выросла ни на рубль. Мы такого раньше не видели.", name: "Mary M.", role: "операционный директор" },
          { text: "Демо по пятницам затягивает: команда стала приходить смотреть сама.", name: "Sam D.", role: "маркетинг" },
        ]}
      />

      <ContactSplit
        eyebrow="контакт"
        title="Расскажите, что строите"
        sub="Отвечаем в течение дня. Если проект не наш — скажем сразу и посоветуем, к кому идти."
        contacts={[
          { label: "почта", value: "hello@ember.studio", href: "mailto:hello@ember.studio" },
          { label: "телеграм", value: "@ember_studio", href: "#" },
          { label: "офис", value: "Лиссабон · удалённо" },
        ]}
      />

      <FooterCta
        title="Ноябрьское окно — одно"
        sub="Оставьте почту: пришлём три свежих кейса с цифрами и вилку бюджета."
        brand="ember"
        note="© ember, 2026. Делаем меньше, но руками."
        columns={[
          { title: "Агентство", links: ["Работы", "Процесс", "Команда", "Журнал"] },
          { title: "Услуги", links: ["Айдентика", "Продукт", "Сайты", "Моушен"] },
          { title: "Связаться", links: ["hello@ember.studio", "@ember_studio"] },
        ]}
      />
    </div>
  );
}