Landing Fintech

import { NavSticky } from "@/components/nav-sticky";
import { HeroCentered } from "@/components/hero-centered";
import { GradientMesh } from "@/components/gradient-mesh";
import { StatsBand } from "@/components/stats-band";
import { FeaturesBento } from "@/components/features-bento";
import { IntegrationsOrbit } from "@/components/integrations-orbit";
import { PricingToggle } from "@/components/pricing-toggle";
import { FaqAccordion } from "@/components/faq-accordion";
import { CtaSplit } from "@/components/cta-split";
import { FooterCta } from "@/components/footer-cta";

/**
 * Финтех — архетип «деньги»: странице платят доверием, поэтому тон банковский —
 * тихий градиент в сокете hero (gradient-mesh: премиум без аттракциона; своя
 * тёмная подложка — грабля светлой темы не грозит), цифры с аптаймом сразу
 * после, безопасность — самая большая плитка bento, а не сноска мелким.
 * Интеграции орбитой (банки и сервисы вокруг одного счёта), тарифы тумблером
 * «месяц/год», финальный CTA — split: открыть счёт против «поговорить
 * с человеком» — в деньгах второй путь обязателен.
 *
 * Акцент — банковский синий (--ds-accent-h: 250).
 */
export function LandingFintech() {
  return (
    <div
      className="lft ds-scope"
      style={{
        textAlign: "start",
        ["--ds-accent-h" as string]: "250",
        ["--ds-section-y" as string]: "clamp(44px, 6.5vw, 88px)",
        background: "var(--ds-bg, oklch(0.14 0.02 275))",
      }}
    >
      <NavSticky brand="перо" links={["Возможности", "Тарифы", "Безопасность", "Помощь"]} cta="Открыть счёт" />

      <HeroCentered
        badge="счёт для самозанятых и ИП"
        title="Деньги дела — под одним пером"
        accentWords={3}
        sub="Счёт, карта и налоги в одном приложении: доход упал — налог посчитан, декларация собрана, резерв отложен. Бухгалтер не нужен, спокойствие включено."
        primary="Открыть счёт за 10 минут"
        secondary="Как это работает"
        note="без визита в банк · паспорт и 10 минут"
        background={<GradientMesh />}
        tone="dark"
        scrim={0.5}
      />

      <StatsBand
        items={[
          { value: 84, suffix: " тыс.", label: "предпринимателей ведут счёт у нас" },
          { value: 99, suffix: ",98%", label: "аптайм платежей за год" },
          { value: 7, suffix: " сек", label: "медиана исходящего платежа" },
          { value: 0, suffix: " ₽", label: "за обслуживание на старте" },
        ]}
      />

      <FeaturesBento
        eyebrow="возможности"
        title="Всё, что делает бухгалтер, — само"
        sub="Мы не «ещё один банк». Мы то, что вы делали руками по воскресеньям."
        items={[
          { title: "Безопасность прежде всего", text: "Деньги застрахованы, вход по биометрии, каждый платёж подтверждается, а лимиты вы задаёте сами", span: 2, rows: 2, accent: "250" },
          { title: "Налоги сами", text: "Считаются с каждого поступления, резервируются и платятся в срок", accent: "150" },
          { title: "Счета и акты", text: "Выставить счёт — 20 секунд, акт соберётся сам", accent: "60" },
          { title: "Карта к счёту", text: "Виртуальная сразу, пластик — курьером завтра", span: 2, accent: "300" },
        ]}
      />

      <IntegrationsOrbit
        eyebrow="интеграции"
        title="Дело крутится — «перо» подключено"
        sub="Деньги приходят отовсюду; собираем их в одну картину без выгрузок."
        hubMark="⌁"
        hubLabel="перо"
        items={[
          { name: "Маркетплейсы", mark: "М", note: "выплаты и комиссии" },
          { name: "Эквайринг", mark: "Э", note: "касса и онлайн-оплата" },
          { name: "Налоговая", mark: "Н", note: "декларации сами" },
          { name: "CRM", mark: "C", note: "счета из сделок" },
          { name: "Такси и доставка", mark: "Т", note: "агрегаторы доходов" },
          { name: "Другой банк", mark: "Б", note: "видим и его остатки" },
        ]}
        foot="Нет вашего сервиса? Открытое API и вебхуки — подключите сами."
      />

      <PricingToggle
        eyebrow="тарифы"
        title="Платите, когда зарабатываете"
        plans={[
          {
            name: "Старт",
            monthly: 0,
            yearly: 0,
            note: "до 300 тыс. ₽ оборота в месяц",
            features: ["Счёт и карта", "Налоги сами", "5 счетов клиентам в месяц", "Поддержка в чате"],
            cta: "Открыть бесплатно",
          },
          {
            name: "Дело",
            monthly: 990,
            yearly: 790,
            note: "оборот без ограничений",
            features: ["Всё из «Старта»", "Счета и акты без лимита", "Интеграции и API", "Приоритетная поддержка", "Второй пользователь"],
            cta: "Попробовать месяц",
            featured: true,
          },
        ]}
      />

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

      <CtaSplit
        title="Откройте счёт сегодня"
        sub="Десять минут — и налоги больше не ваша суббота. Останутся вопросы — на линии люди, а не бот."
        primary="Открыть счёт"
        secondary="Поговорить с человеком"
      />

      <FooterCta
        title="Новости продукта — раз в месяц"
        sub="Изменения тарифов и законов — заранее и человеческим языком."
        action="Подписаться"
        brand="перо"
        columns={[
          { title: "Продукт", links: ["Возможности", "Тарифы", "Безопасность", "Статус"] },
          { title: "Помощь", links: ["База знаний", "API", "Поддержка 24/7"] },
          { title: "Компания", links: ["О нас", "Пресса", "hello@pero.money"] },
        ]}
        note="Не является публичной офертой"
      />
    </div>
  );
}