import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Bot,
  BrainCircuit,
  CheckCircle2,
  ChevronRight,
  Clock3,
  Database,
  Facebook,
  FileSearch,
  Filter,
  Gauge,
  Image as ImageIcon,
  Instagram,
  LayoutGrid,
  LineChart,
  Linkedin,
  Mail,
  MessageCircle,
  ShieldCheck,
  Sparkles,
  Workflow,
} from "lucide-react";

const pages = [
  { id: "home", label: "Главная" },
  { id: "architecture", label: "Архитектура" },
  { id: "demo", label: "Demo / CTA" },
];

const pill =
  "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/85 px-3 py-1.5 text-sm text-slate-600 shadow-sm";
const card =
  "rounded-3xl border border-slate-200 bg-white shadow-[0_20px_60px_rgba(15,23,42,0.08)]";
const sectionTitle =
  "text-4xl font-semibold tracking-[-0.05em] text-slate-950 lg:text-5xl";

const socialLinks = [
  { label: "Facebook", icon: Facebook, href: "#", hint: "добавим ссылку" },
  { label: "Instagram", icon: Instagram, href: "#", hint: "добавим ссылку" },
  { label: "Telegram", icon: MessageCircle, href: "#", hint: "канал / бот" },
  { label: "LinkedIn", icon: Linkedin, href: "#", hint: "профиль / страница" },
];

function LogoMark() {
  return (
    <div className="relative h-12 w-12 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#2348a5_0%,#20b8c9_100%)] shadow-[0_16px_34px_rgba(35,72,165,0.24)]">
      <div className="absolute inset-[8px] rounded-[14px] border border-white/70" />
      <div className="absolute left-[12px] top-[22px] h-[2px] w-[18px] rotate-[-32deg] rounded-full bg-white/90" />
      <div className="absolute left-[25px] top-[10px] h-0 w-0 border-b-[11px] border-l-[8px] border-r-[8px] border-b-white border-l-transparent border-r-transparent" />
      <div className="absolute bottom-[11px] left-[12px] h-2.5 w-2.5 rounded-full bg-white/90" />
      <div className="absolute -left-1 top-4 h-5 w-3 rounded-r-full border border-white/55 border-l-0" />
      <div className="absolute -right-1 top-4 h-5 w-3 rounded-l-full border border-white/55 border-r-0" />
    </div>
  );
}

function Header({ page, setPage }: { page: string; setPage: (page: string) => void }) {
  return (
    <header className="sticky top-0 z-40 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-10">
        <div className="flex items-center gap-3">
          <LogoMark />
          <div>
            <div className="text-lg font-semibold tracking-[-0.03em] text-slate-900">TenderSystem</div>
            <div className="text-xs uppercase tracking-[0.18em] text-slate-500">AI operations for tenders</div>
          </div>
        </div>

        <nav className="hidden items-center gap-2 lg:flex">
          {pages.map((item) => (
            <button
              key={item.id}
              onClick={() => setPage(item.id)}
              className={`rounded-full px-4 py-2 text-sm font-medium transition ${
                page === item.id
                  ? "bg-slate-900 text-white shadow-sm"
                  : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
              }`}
            >
              {item.label}
            </button>
          ))}
        </nav>

        <button className="inline-flex items-center gap-2 rounded-full bg-[linear-gradient(135deg,#2348a5_0%,#20b8c9_100%)] px-4 py-2.5 text-sm font-semibold text-white shadow-[0_16px_34px_rgba(35,72,165,0.22)]">
          Запросить demo-precheck
          <ArrowRight className="h-4 w-4" />
        </button>
      </div>
    </header>
  );
}

function ChannelsStrip() {
  return (
    <div className="mt-8 flex flex-wrap gap-3">
      {socialLinks.map((item) => {
        const Icon = item.icon;
        return (
          <a
            key={item.label}
            href={item.href}
            className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50"
          >
            <Icon className="h-4 w-4" />
            {item.label}
          </a>
        );
      })}
    </div>
  );
}

function VisualCard() {
  return (
    <div className={`${card} relative overflow-hidden p-6 lg:p-8`}>
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(32,184,201,0.10),transparent_30%),radial-gradient(circle_at_bottom_right,rgba(35,72,165,0.08),transparent_28%)]" />
      <div className="relative">
        <div className="mb-4 flex items-center justify-between">
          <span className={pill}><ImageIcon className="h-4 w-4 text-cyan-600" /> Визуальный блок</span>
          <span className="text-xs uppercase tracking-[0.18em] text-slate-400">preview</span>
        </div>

        <div className="rounded-[28px] border border-slate-200 bg-[linear-gradient(180deg,#f8fbff_0%,#ffffff_100%)] p-5 shadow-inner">
          <div className="grid gap-4 lg:grid-cols-[0.95fr_1.05fr]">
            <div className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
              <div className="mb-4 flex items-center gap-3">
                <LogoMark />
                <div>
                  <div className="text-sm uppercase tracking-[0.16em] text-slate-500">AI System · 24/7</div>
                  <div className="text-2xl font-semibold tracking-[-0.04em] text-slate-950">ops_architect / TenderSystem style</div>
                </div>
              </div>
              <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-600">
                Здесь в следующей версии можно показать финальный логотип, обложку hero-блока,
                mockup Telegram summary, схему intake → extraction → AI precheck и брендовые иллюстрации.
              </div>
            </div>

            <div className="grid gap-4">
              <div className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
                <div className="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Telegram summary preview</div>
                <div className="mt-4 rounded-3xl border border-slate-200 bg-slate-950 p-4 text-white shadow-lg shadow-slate-900/10">
                  <div className="mb-3 text-sm text-slate-300">TenderSystem Bot</div>
                  <div className="space-y-2 text-sm leading-6">
                    <div>📌 Тендер: Поставка оборудования</div>
                    <div>🏢 Заказчик: ООО «СтройМонтаж»</div>
                    <div>⏱ Срок: до 15.04.2026</div>
                    <div className="text-emerald-300">🟢 Exact match: VM-785</div>
                    <div className="text-amber-300">🟡 Manual review: кабель ВВГ</div>
                    <div className="text-rose-300">🔴 No match: насос погружной</div>
                  </div>
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
                  <div className="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Контакт</div>
                  <div className="mt-3 text-lg font-semibold tracking-[-0.03em] text-slate-950">julianvanzik@tendersystem.pro</div>
                  <div className="mt-2 text-sm leading-6 text-slate-600">Почтовый адрес для сайта. Потом можно подключить реальную доменную почту.</div>
                </div>
                <div className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
                  <div className="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Telegram bot</div>
                  <div className="mt-3 text-lg font-semibold tracking-[-0.03em] text-slate-950">@TenderSystemContactBot</div>
                  <div className="mt-2 text-sm leading-6 text-slate-600">Рабочее название для контактного канала. Можно заменить на твой финальный нейминг.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="relative overflow-hidden px-6 pb-12 pt-10 lg:px-10 lg:pb-16 lg:pt-14">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(32,184,201,0.10),transparent_28%),radial-gradient(circle_at_top_left,rgba(35,72,165,0.08),transparent_30%)]" />
      <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[1.05fr_0.95fr]">
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.45 }}
          className={`${card} relative overflow-hidden p-7 lg:p-10`}
        >
          <div className="mb-5 flex flex-wrap gap-3">
            <span className={pill}><Sparkles className="h-4 w-4 text-cyan-600" /> AI system</span>
            <span className={pill}><Clock3 className="h-4 w-4 text-blue-700" /> 24/7 precheck</span>
            <span className={pill}><Workflow className="h-4 w-4 text-slate-700" /> До базы и до менеджера</span>
          </div>

          <h1 className="max-w-4xl text-5xl font-semibold leading-[0.95] tracking-[-0.06em] text-slate-950 md:text-6xl lg:text-7xl">
            Операционная AI-система для первичного разбора тендеров
          </h1>
          <p className="mt-6 max-w-3xl text-lg leading-8 text-slate-600 lg:text-xl">
            Не чат-бот и не красивая демка. TenderSystem принимает входящий поток,
            делает screening, запускает AI precheck, фильтрует шум и передает в работу уже
            структурированный кейс.
          </p>

          <div className="mt-8 flex flex-wrap gap-4">
            <button className="inline-flex items-center gap-2 rounded-full bg-slate-950 px-6 py-3.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/15">
              Посмотреть demo-flow
              <ArrowRight className="h-4 w-4" />
            </button>
            <button className="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-6 py-3.5 text-sm font-semibold text-slate-700">
              Архитектура системы
            </button>
          </div>

          <div className="mt-10 grid gap-4 md:grid-cols-3">
            {[
              ["2–3 минуты", "на один лот вместо длительного ручного precheck"],
              ["95%+ покрытия", "по извлечению и первичной структуризации данных"],
              ["24/7", "работа без очередей, смен и ручной сортировки входящего"],
            ].map(([title, desc]) => (
              <div key={title} className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                <div className="text-lg font-semibold tracking-[-0.03em] text-slate-950">{title}</div>
                <div className="mt-2 text-sm leading-6 text-slate-600">{desc}</div>
              </div>
            ))}
          </div>

          <ChannelsStrip />
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 0.99, y: 0 }}
          transition={{ duration: 0.55, delay: 0.08 }}
          className={`${card} p-7 lg:p-8`}
        >
          <div className="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500">Как выглядит поток</div>
          <div className="mt-5 grid gap-4">
            {[
              [Mail, "Intake", "Письма, ссылки и вложения попадают в единый входящий контур."],
              [FileSearch, "Extraction", "Система забирает фактуру из ТЗ, файлов и структуры лота."],
              [BrainCircuit, "AI precheck", "Появляется первичная интерпретация, релевантность и статус."],
              [Database, "Routing / DB", "В рабочую очередь попадает уже собранный кейс, а не сырой шум."],
            ].map(([Icon, title, text], idx) => (
              <div key={title} className="relative rounded-2xl border border-slate-200 bg-white p-5">
                {idx < 3 && <div className="absolute bottom-[-18px] left-10 h-9 border-l border-dashed border-slate-300" />}
                <div className="flex items-start gap-4">
                  <div className="grid h-11 w-11 place-items-center rounded-2xl bg-slate-100 text-slate-900">
                    <Icon className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-lg font-semibold tracking-[-0.03em] text-slate-950">{title}</div>
                    <div className="mt-1 text-sm leading-6 text-slate-600">{text}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div className="space-y-8 pb-16">
      <Hero />

      <section className="px-6 lg:px-10">
        <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-2">
          <div className={`${card} p-8`}>
            <div className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">
              <Filter className="h-4 w-4" /> Проблема
            </div>
            <h2 className={sectionTitle}>Найм не решает рутинный хаос</h2>
            <p className="mt-4 text-lg leading-8 text-slate-600">
              Если тендерный screening устроен плохо, новые люди просто масштабируют ту же дорогую рутину.
              Потери рождаются на этапе чтения, копирования, ручного поиска и позднего решения. Тогда часы на ручной работе = упущенная прибыль.
            </p>
            <div className="mt-6 grid gap-3">
              {[
                "Часы менеджера уходят на PDF, таблицы и сверку вместо стратегии и маржинальности.",
                "Часть выгодных лотов упускается из-за перегруза и неидеальной первичной фильтрации.",
                "Высокая доля рутинных действий создает риск ошибок и позднего решения.",
              ].map((item) => (
                <div key={item} className="flex gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-slate-700">
                  <CheckCircle2 className="mt-0.5 h-5 w-5 text-cyan-600" />
                  <span className="text-sm leading-6">{item}</span>
                </div>
              ))}
            </div>
          </div>

          <div className={`${card} p-8`}>
            <div className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">
              <Gauge className="h-4 w-4" /> Результат
            </div>
            <h2 className={sectionTitle}>AI — это архитектура, а не чат-бот</h2>
            <p className="mt-4 text-lg leading-8 text-slate-600">
              Настоящая ценность — в скрытой управленческой системе: intake, extraction, screening,
              правила, маршрутизация, сводка и следующий шаг. Не красивая игрушка, а предсказуемая операционная механика.
            </p>

            <div className="mt-6 grid gap-4 md:grid-cols-2">
              <div className="rounded-3xl border border-rose-100 bg-rose-50 p-5">
                <div className="text-lg font-semibold tracking-[-0.03em] text-slate-950">Модная игрушка</div>
                <ul className="mt-3 space-y-2 text-sm leading-6 text-slate-600">
                  <li>• Демка ради эффекта</li>
                  <li>• Текст без операционной логики</li>
                  <li>• Нет понятного следующего шага</li>
                </ul>
              </div>
              <div className="rounded-3xl border border-emerald-100 bg-emerald-50 p-5">
                <div className="text-lg font-semibold tracking-[-0.03em] text-slate-950">Управленческая система</div>
                <ul className="mt-3 space-y-2 text-sm leading-6 text-slate-600">
                  <li>• Разгружает людей</li>
                  <li>• Снижает риск пропуска</li>
                  <li>• Дает предсказуемый контур работы</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="px-6 lg:px-10">
        <div className="mx-auto max-w-7xl">
          <VisualCard />
        </div>
      </section>

      <section className="px-6 lg:px-10">
        <div className="mx-auto max-w-7xl">
          <div className={`${card} p-8 lg:p-10`}>
            <div className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">
              <LayoutGrid className="h-4 w-4" /> Кому подходит
            </div>
            <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
              {[
                ["Оптовики и дистрибьюторы", "Компании с принципом «заказал — продал» и высокой стоимостью ручного precheck."],
                ["Высокая нагрузка", "Команды, которые обрабатывают десятки тендерных заявок и лотов ежедневно."],
                ["Объемные каталоги", "Где ручной поиск аналогов по номенклатуре занимает часы и тянет решение вниз."],
                ["Сложный входящий поток", "Многостраничные приложения, скрытые требования и неоднородная фактура входящего."],
              ].map(([title, text]) => (
                <div key={title} className="rounded-3xl border border-slate-200 bg-slate-50 p-5">
                  <div className="text-lg font-semibold tracking-[-0.03em] text-slate-950">{title}</div>
                  <div className="mt-2 text-sm leading-6 text-slate-600">{text}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ArchitecturePage() {
  const blocks = useMemo(
    () => [
      { icon: Mail, title: "Intake & Extract", text: "Автоматический перехват письма, разворот ссылок и открытие документов." },
      { icon: Filter, title: "Normalize", text: "Приведение сырой фактуры к единому стандарту: сроки, адреса, состав." },
      { icon: Bot, title: "AI Precheck", text: "Автономное screening-решение: релевантность, риски и целесообразность участия." },
      { icon: Database, title: "Catalog Match", text: "Семантический и правиловый поиск по номенклатуре и бизнес-каталогу." },
      { icon: LineChart, title: "Manager Summary", text: "Четкая деловая сводка вместо JSON, хаоса и технического мусора." },
    ],
    []
  );

  return (
    <div className="space-y-8 px-6 pb-16 pt-10 lg:px-10">
      <div className="mx-auto max-w-7xl">
        <div className={`${card} p-8 lg:p-10`}>
          <div className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">
            <ShieldCheck className="h-4 w-4" /> Архитектура
          </div>
          <h1 className="max-w-4xl text-5xl font-semibold leading-[0.96] tracking-[-0.06em] text-slate-950 md:text-6xl">
            Предсказуемая AI-архитектура вместо ручного хаоса
          </h1>
          <p className="mt-5 max-w-4xl text-lg leading-8 text-slate-600">
            Базовая идея: не тянуть весь тендерный шум в каталог. Сначала система делает screening и precheck,
            затем только релевантный поток идет дальше в рабочий контур. Так меняется не только скорость, но и качество входящего решения.
          </p>
        </div>
      </div>

      <div className="mx-auto grid max-w-7xl gap-5 lg:grid-cols-5">
        {blocks.map((block, idx) => {
          const Icon = block.icon;
          return (
            <div key={block.title} className={`${card} p-6`}>
              <div className="mb-4 flex items-center justify-between">
                <div className="grid h-11 w-11 place-items-center rounded-2xl bg-slate-100 text-slate-900">
                  <Icon className="h-5 w-5" />
                </div>
                <div className="text-sm font-semibold text-slate-400">0{idx + 1}</div>
              </div>
              <div className="text-xl font-semibold tracking-[-0.03em] text-slate-950">{block.title}</div>
              <div className="mt-2 text-sm leading-6 text-slate-600">{block.text}</div>
            </div>
          );
        })}
      </div>

      <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-2">
        <div className={`${card} p-8`}>
          <h2 className="text-3xl font-semibold tracking-[-0.05em] text-slate-950">Почему это работает 24/7</h2>
          <div className="mt-5 grid gap-4">
            {[
              ["Автономный intake", "Нет ожидания, пока человек откроет письмо и скачает ТЗ."],
              ["Контур правил", "Система держится не на интуиции, а на guardrails и маршрутах."],
              ["Безопасный fallback", "Если документы не открылись, поток не падает и собирается минимально допустимый контекст."],
            ].map(([title, text]) => (
              <div key={title} className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                <div className="font-semibold text-slate-950">{title}</div>
                <div className="mt-1 text-sm leading-6 text-slate-600">{text}</div>
              </div>
            ))}
          </div>
        </div>

        <div className={`${card} p-8`}>
          <h2 className="text-3xl font-semibold tracking-[-0.05em] text-slate-950">Как подать это на сайте</h2>
          <div className="mt-5 rounded-[28px] border border-slate-200 bg-[linear-gradient(135deg,#f8fbff_0%,#eef6ff_100%)] p-6">
            <div className="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Executive message</div>
            <div className="mt-3 text-2xl font-semibold tracking-[-0.04em] text-slate-950">
              Не вопрос «кого еще нанять?», а вопрос «что должна делать система?»
            </div>
            <div className="mt-4 text-sm leading-7 text-slate-600">
              Именно эту мысль стоит поднимать на уровне hero, problem section и архитектурного экрана. Она быстро переводит разговор из плоскости найма в плоскость операционного дизайна.
            </div>
          </div>

          <div className="mt-5 rounded-[28px] border border-slate-200 bg-white p-6">
            <div className="text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">Контакты и каналы</div>
            <div className="mt-4 grid gap-3">
              <div className="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                <span>Email</span>
                <span className="font-medium text-slate-950">julianvanzik@tendersystem.pro</span>
              </div>
              <div className="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                <span>Telegram bot</span>
                <span className="font-medium text-slate-950">@TenderSystemContactBot</span>
              </div>
              <div className="grid gap-3 md:grid-cols-2">
                {socialLinks.map((item) => (
                  <div key={item.label} className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                    <div className="font-medium text-slate-950">{item.label}</div>
                    <div className="mt-1 text-slate-500">{item.hint}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DemoPage() {
  return (
    <div className="space-y-8 px-6 pb-16 pt-10 lg:px-10">
      <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[1.05fr_0.95fr]">
        <div className={`${card} p-8 lg:p-10`}>
          <div className="mb-4 flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.16em] text-slate-500">
            <Sparkles className="h-4 w-4" /> Demo / next step
          </div>
          <h1 className="text-5xl font-semibold leading-[0.96] tracking-[-0.06em] text-slate-950 md:text-6xl">
            Проверим систему на ваших лотах
          </h1>
          <p className="mt-5 max-w-3xl text-lg leading-8 text-slate-600">
            Лучший способ продавать этот продукт — не спорить о концепции, а показать demo-precheck на реальных или исторических кейсах:
            что извлекается, где виден сигнал и как быстро появляется деловая сводка.
          </p>

          <div className="mt-8 grid gap-4 md:grid-cols-3">
            {[
              ["1–2 лота", "для старта достаточно"],
              ["1 сценарий", "один тип источника и один рабочий маршрут"],
              ["1 встреча", "чтобы обсудить вывод и следующий шаг"],
            ].map(([title, text]) => (
              <div key={title} className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
                <div className="text-2xl font-semibold tracking-[-0.04em] text-slate-950">{title}</div>
                <div className="mt-2 text-sm leading-6 text-slate-600">{text}</div>
              </div>
            ))}
          </div>
        </div>

        <div className={`${card} p-8`}>
          <div className="rounded-[30px] border border-slate-200 bg-white p-5 shadow-sm">
            <div className="text-lg font-semibold tracking-[-0.03em] text-slate-950">Форма / CTA-макет</div>
            <div className="mt-5 grid gap-4">
              {[
                "Имя",
                "Компания",
                "Email или Telegram",
                "Коротко о типе входящего потока",
              ].map((field) => (
                <div key={field}>
                  <div className="mb-2 text-sm font-medium text-slate-700">{field}</div>
                  <div className="h-12 rounded-2xl border border-slate-200 bg-slate-50" />
                </div>
              ))}
              <div>
                <div className="mb-2 text-sm font-medium text-slate-700">Что прислать для demo</div>
                <div className="min-h-28 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-500">
                  1–2 исторических лота, тип источника, короткое описание номенклатуры и того, какой результат нужен команде на выходе.
                </div>
              </div>
              <button className="mt-2 inline-flex items-center justify-center gap-2 rounded-2xl bg-slate-950 px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/15">
                Запросить demo-precheck
                <ArrowRight className="h-4 w-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function TenderSystemLightSiteMockups() {
  const [page, setPage] = useState("home");

  return (
    <div className="min-h-screen bg-[linear-gradient(180deg,#f8fafc_0%,#f3f7fb_100%)] text-slate-900">
      <div className="pointer-events-none fixed inset-0 opacity-60 [background-image:linear-gradient(rgba(148,163,184,0.12)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.12)_1px,transparent_1px)] [background-size:32px_32px]" />
      <div className="relative">
        <Header page={page} setPage={setPage} />
        {page === "home" && <HomePage />}
        {page === "architecture" && <ArchitecturePage />}
        {page === "demo" && <DemoPage />}
      </div>
    </div>
  );
}
nginx -t && systemctl reload nginx