// landing.jsx — Главная страница ДЕЛЕГАТА
// Editorial, document-style. Not a SaaS landing.

function Landing({ navigate }) {
  return (
    <div className="page">
      <Hero navigate={navigate} />
      <ManifestoStrip />
      <CaseDirectory navigate={navigate} />
      <Differentiation />
      <HowItWorks />
      <Comparison />
      <PricingBrief navigate={navigate} />
      <FAQ />
      <FinalCTA navigate={navigate} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// HERO — editorial statement, not a "screenshot of chat"
// ─────────────────────────────────────────────────────────────────────────────

function Hero({ navigate }) {
  return (
    <section style={{ padding: '72px 0 88px', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        {/* top-strip: like a document header */}
        <div className="m-row-stack" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
            Делегат · Дело № 2026 / 001
          </div>
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
            9 специалистов в реестре · Работаем онлайн по РФ
          </div>
        </div>

        {/* the headline */}
        <h1 className="serif" style={{
          fontSize: 'var(--fs-display)',
          fontWeight: 700,
          letterSpacing: '-0.02em',
          lineHeight: 0.98,
          maxWidth: 1100,
          marginBottom: 32,
        }}>
          Не нейросеть.<br />
          Не чат-бот.<br />
          <span style={{ fontStyle: 'italic', color: 'var(--forest)' }}>Специалист.</span>
        </h1>

        <div className="m-grid-stack" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end', marginTop: 48 }}>
          <div>
            <p style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 640 }}>
              «Делегат» — бюро девяти ИИ-специалистов для бизнеса в РФ. Юрист, бухгалтер, маркетолог, дизайнер, продажник&nbsp;— каждый агент работает в своей роли, со своим контекстом и своей зоной ответственности. Не «70&nbsp;ботов в одном окне». Не обёртка над GPT.
            </p>
            <div style={{ display: 'flex', gap: 16, marginTop: 36 }}>
              <button className="btn btn-primary" onClick={() => navigate('catalog')}>
                Картотека агентов <Glyph name="arrow" size={16} />
              </button>
              <button className="btn btn-secondary" onClick={() => navigate('dossier')}>
                Открыть досье № 01
              </button>
            </div>
          </div>

          {/* Right side: a "specimen card" — not a chat screenshot, a stylized document specimen */}
          <SpecimenCard />
        </div>
      </div>
    </section>
  );
}

function SpecimenCard() {
  return (
    <div className="m-full m-specimen" style={{
      background: 'var(--paper-2)',
      border: '1px solid var(--rule)',
      padding: '24px 28px',
      position: 'relative',
    }}>
      {/* corner mark */}
      <div className="mono" style={{ position: 'absolute', top: 12, right: 16, fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-3)' }}>
        ОБРАЗЕЦ · SPECIMEN
      </div>

      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
        Личное дело № 01
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 14, marginBottom: 18 }}>
        <Monogram agent={AGENTS[0]} size={72} />
        <div>
          <div className="serif" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1 }}>
            AI-Юрист
          </div>
          <div className="muted" style={{ fontSize: 14, marginTop: 4 }}>
            Юриспруденция · Старший специалист
          </div>
        </div>
      </div>

      <div className="rule-dotted" style={{ marginBottom: 16 }} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13 }}>
        <Field label="Зона ответственности">Договоры, претензии, ГК&nbsp;РФ</Field>
        <Field label="Опыт обучения">12&nbsp;млн страниц права&nbsp;РФ</Field>
        <Field label="Условия найма" mono>от 1 900&nbsp;₽/мес</Field>
        <Field label="Разовое дело" mono>от 490&nbsp;₽</Field>
        <Field label="Безопасность">152-ФЗ · РФ</Field>
        <Field label="Каналы">TG · веб · API</Field>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 20 }}>
        <span className="stamp" style={{ color: 'var(--forest)' }}>
          в работе с 14:32
        </span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
          подп. /Гл. бюро/
        </span>
      </div>
    </div>
  );
}

function Field({ label, mono, children }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 3 }}>
        {label}
      </div>
      <div className={mono ? 'mono' : ''} style={{ fontSize: 13, color: 'var(--ink)', fontWeight: mono ? 500 : 400 }}>
        {children}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// MANIFESTO STRIP — running text, between sections
// ─────────────────────────────────────────────────────────────────────────────

function ManifestoStrip() {
  return (
    <section style={{ padding: '32px 0', background: 'var(--ink)', color: 'var(--paper)', overflow: 'hidden' }}>
      <div style={{
        display: 'flex',
        gap: 64,
        whiteSpace: 'nowrap',
        animation: 'marquee 50s linear infinite',
        fontFamily: 'var(--font-display)',
        fontStyle: 'italic',
        fontSize: 28,
        letterSpacing: '-0.01em',
      }}>
        {[...Array(3)].map((_, i) => (
          <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 64 }}>
            <span>Девять специалистов.</span>
            <span style={{ opacity: 0.5 }}>✦</span>
            <span>Не семьдесят посредников.</span>
            <span style={{ opacity: 0.5 }}>✦</span>
            <span>Кураторская картотека.</span>
            <span style={{ opacity: 0.5 }}>✦</span>
            <span>Серверы в РФ.</span>
            <span style={{ opacity: 0.5 }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CASE DIRECTORY — the showcase of agents, formatted like a table of contents
// ─────────────────────────────────────────────────────────────────────────────

function CaseDirectory({ navigate }) {
  return (
    <section className="section" style={{ borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <SectionLabel no="I" label="Реестр специалистов" />

        <div className="m-grid-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 56 }}>
          <h2 className="serif" style={{ fontSize: 'var(--fs-h1)', maxWidth: 700 }}>
            Девять дел.<br />
            Каждое&nbsp;— профессия,<br />
            а не функция.
          </h2>
          <p className="muted-2" style={{ fontSize: 17, lineHeight: 1.6, maxWidth: 480 }}>
            Каждый агент знает контекст своей роли: юрист&nbsp;— право РФ, бухгалтер&nbsp;— НК и&nbsp;ПБУ, маркетолог&nbsp;— unit-экономику. Это не «спросите у GPT», это нанятый специалист с дисциплиной отрасли.
          </p>
        </div>

        {/* Table-of-contents style listing */}
        <div className="rule-thick" />
        {AGENTS.map((a, i) => (
          <AgentRow key={a.id} agent={a} navigate={navigate} />
        ))}

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
          <button className="btn btn-secondary" onClick={() => navigate('catalog')}>
            Открыть полную картотеку <Glyph name="arrow" size={16} />
          </button>
        </div>
      </div>
    </section>
  );
}

function AgentRow({ agent, navigate }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      className="m-agent-row"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => navigate('dossier', { id: agent.id })}
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 1fr 2fr auto auto',
        alignItems: 'center',
        gap: 32,
        padding: '24px 8px',
        borderBottom: '1px solid var(--rule)',
        cursor: 'pointer',
        background: hover ? 'var(--paper-2)' : 'transparent',
        transition: 'background 180ms',
        marginLeft: hover ? 8 : 0,
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <Monogram agent={agent} size={48} />
      </div>

      <div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 4 }}>
          № {agent.no} · {agent.speciality}
        </div>
        <div className="serif" style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.015em' }}>
          AI-{agent.title}
        </div>
      </div>

      <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.5 }}>
        {agent.headline}
      </p>

      <div className="mono" style={{ fontSize: 14, color: 'var(--ink)', whiteSpace: 'nowrap' }}>
        от {rub(agent.price)}/мес
      </div>

      <div style={{ width: 32, textAlign: 'right', color: hover ? 'var(--forest)' : 'var(--ink-3)' }}>
        <Glyph name="arrow" size={20} />
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// DIFFERENTIATION — three pillars
// ─────────────────────────────────────────────────────────────────────────────

function Differentiation() {
  const pillars = [
    {
      n: '01',
      title: 'Кураторская картотека',
      body: '8 проверенных специалистов вместо 70 безымянных ботов. Каждый агент собран командой бюро под конкретный класс задач и протестирован на 200+ кейсах малого бизнеса РФ.',
      foot: 'Принимаем нового агента в реестр только после публичного аудита.',
    },
    {
      n: '02',
      title: 'Профессиональный контекст',
      body: 'Юрист знает структуру ГК и АПК, бухгалтер — НК и ПБУ, маркетолог — методики и unit-экономику. Это не один промт, это дисциплина: онтология, инструменты, образцы работ, ограничения роли.',
      foot: 'Каждый агент сопровождается публичным описанием границ компетенции.',
    },
    {
      n: '03',
      title: 'Прозрачные условия',
      body: 'Подписка на специалиста, как на штатного сотрудника. Никаких «токенов», скрытых лимитов, доплат за длинный ответ. Что в цене указано — то и работает.',
      foot: 'Закрывающие документы для бухгалтерии, работа от ИП и ООО.',
    },
  ];

  return (
    <section className="section" style={{ background: 'var(--paper-2)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <SectionLabel no="II" label="В чём отличие" />
        <h2 className="serif" style={{ fontSize: 'var(--fs-h1)', maxWidth: 800, marginBottom: 56 }}>
          Не маркетплейс.<br />
          Бюро.
        </h2>

        <div className="m-grid-3to1" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--rule)', borderLeft: '1px solid var(--rule)' }}>
          {pillars.map((p) => (
            <div key={p.n} style={{ padding: 32, borderRight: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
              <div className="serif" style={{ fontSize: 72, lineHeight: 0.9, color: 'var(--forest)', letterSpacing: '-0.04em', fontWeight: 400, fontStyle: 'italic', marginBottom: 20 }}>
                {p.n}
              </div>
              <h3 className="serif" style={{ fontSize: 24, marginBottom: 14, letterSpacing: '-0.01em' }}>
                {p.title}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', marginBottom: 18 }}>
                {p.body}
              </p>
              <p className="marginalia" style={{ paddingTop: 16, borderTop: '1px solid var(--rule)' }}>
                <em>Прим.</em> {p.foot}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// HOW IT WORKS — procedural steps, document style
// ─────────────────────────────────────────────────────────────────────────────

function HowItWorks() {
  const steps = [
    { n: '§ 1', title: 'Выберите специалиста', body: 'Откройте картотеку. Каждое досье содержит образцы работ и границы компетенции — вы знаете, что покупаете.', time: '3 мин.' },
    { n: '§ 2', title: 'Заполните дело', body: 'О компании, сфере, типовых задачах. Эта информация — контекст, которым агент пользуется во всех ответах.', time: '5 мин.' },
    { n: '§ 3', title: 'Подключите канал', body: 'Telegram (QR-код), веб-кабинет или API. Можно начать с одного — добавить остальные позже.', time: '1 мин.' },
    { n: '§ 4', title: 'Поручайте дела', body: 'Каждый запрос — это «дело» в кабинете. Видны статус, цитаты, источники, документы. Без чёрного ящика.', time: 'ежедневно' },
  ];

  return (
    <section className="section" style={{ borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <SectionLabel no="III" label="Порядок работы" />
        <h2 className="serif" style={{ fontSize: 'var(--fs-h1)', maxWidth: 900, marginBottom: 56 }}>
          От заявки до результата&nbsp;—<br />
          в&nbsp;тот&nbsp;же&nbsp;день.
        </h2>

        <div style={{ position: 'relative' }}>
          {steps.map((s, i) => (
            <div key={i} className="m-grid-stack" style={{
              display: 'grid',
              gridTemplateColumns: '120px 1fr 1fr 120px',
              gap: 32,
              alignItems: 'start',
              padding: '32px 0',
              borderBottom: '1px solid var(--rule)',
              borderTop: i === 0 ? '2px solid var(--ink)' : 'none',
            }}>
              <div className="mono" style={{ fontSize: 13, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>
                {s.n}
              </div>
              <h3 className="serif" style={{ fontSize: 28, letterSpacing: '-0.015em' }}>{s.title}</h3>
              <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.55 }}>{s.body}</p>
              <div className="mono" style={{ fontSize: 13, color: 'var(--ink-3)', textAlign: 'right' }}>
                ≈ {s.time}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// COMPARISON — Делегат vs ChatGPT vs hire
// ─────────────────────────────────────────────────────────────────────────────

function Comparison() {
  const rows = [
    ['Стоимость в месяц', 'от 1 900\u00A0₽', 'от 2 200\u00A0₽', 'от 60 000\u00A0₽'],
    ['Время запуска', '2 минуты', '2 минуты', '2–6 недель'],
    ['Оплата для бизнеса', 'ИП, ООО · счёт + УПД', 'нет', 'трудовой договор'],
    ['Специализация под роль', 'да, для каждого агента', 'нет, общая модель', 'да, человек'],
    ['Контекст компании', 'хранится в базе знаний', 'надо передавать вручную', 'усваивает за месяцы'],
    ['Работа с PDF, DOCX, XLSX', 'нативно', 'через расширения', 'да'],
    ['Закрывающие документы', 'УПД, акты, ФЗ-152', 'нет', 'трудовой пакет'],
    ['Серверы и данные', 'РФ', 'США', '—'],
  ];

  return (
    <section className="section" style={{ background: 'var(--paper-2)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <SectionLabel no="IV" label="Сравнительная справка" />
        <h2 className="serif" style={{ fontSize: 'var(--fs-h1)', maxWidth: 900, marginBottom: 56 }}>
          Делегат · ChatGPT · Найм в штат
        </h2>

        <div className="m-table-wrap" style={{ border: '1px solid var(--rule)', background: 'var(--paper)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', borderBottom: '2px solid var(--ink)', minWidth: 720 }}>
            <div style={{ padding: '20px 24px' }}>
              <div className="eyebrow">Критерий</div>
            </div>
            <div style={{ padding: '20px 24px', background: 'var(--forest)', color: 'var(--paper)' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.8 }}>
                Вариант А
              </div>
              <div className="serif" style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>ДЕЛЕГАТ</div>
            </div>
            <div style={{ padding: '20px 24px', borderLeft: '1px solid var(--rule)' }}>
              <div className="eyebrow">Вариант Б</div>
              <div className="serif" style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>ChatGPT</div>
            </div>
            <div style={{ padding: '20px 24px', borderLeft: '1px solid var(--rule)' }}>
              <div className="eyebrow">Вариант В</div>
              <div className="serif" style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>Сотрудник</div>
            </div>
          </div>

          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
              borderBottom: i < rows.length - 1 ? '1px solid var(--rule)' : 'none',
              fontSize: 15,
              minWidth: 720,
            }}>
              <div style={{ padding: '18px 24px', color: 'var(--ink-2)' }}>{r[0]}</div>
              <div style={{ padding: '18px 24px', background: 'var(--forest-tint)', fontWeight: 500, color: 'var(--forest)' }}>{r[1]}</div>
              <div style={{ padding: '18px 24px', borderLeft: '1px solid var(--rule)', color: 'var(--ink-2)' }}>{r[2]}</div>
              <div style={{ padding: '18px 24px', borderLeft: '1px solid var(--rule)', color: 'var(--ink-2)' }}>{r[3]}</div>
            </div>
          ))}
        </div>

        <p className="marginalia" style={{ marginTop: 24, textAlign: 'right' }}>
          <em>Прим.</em> Стоимость штатного сотрудника указана с учётом налогов и накладных расходов среднего МСП в РФ.
        </p>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PRICING BRIEF
// ─────────────────────────────────────────────────────────────────────────────

function PricingBrief({ navigate }) {
  const plans = [
    { name: 'Одно дело', price: 'от 290 ₽', sub: 'разовая задача', features: ['Один запрос, один результат', 'Без подписки', 'Чек на email'] },
    { name: 'Специалист', price: 'от 1 900 ₽', sub: 'в месяц, один агент', features: ['1 агент, 1 пользователь', 'База знаний', 'Telegram + веб'], highlight: false },
    { name: 'Команда', price: '7 900 ₽', sub: 'в месяц, до 3 агентов', features: ['3 агента, 3 пользователя', 'Расширенная база знаний', 'Интеграции CRM'], highlight: true },
    { name: 'Корпус', price: '19 900 ₽', sub: 'в месяц, всё включено', features: ['Все 9 агентов', 'До 10 пользователей', 'API, приоритет, SLA'] },
  ];

  return (
    <section className="section" style={{ borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <SectionLabel no="V" label="Условия найма" />
        <div className="m-row-stack" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 56 }}>
          <h2 className="serif" style={{ fontSize: 'var(--fs-h1)', maxWidth: 700 }}>
            Платите за&nbsp;роль, не&nbsp;за&nbsp;токены.
          </h2>
          <p className="muted-2" style={{ fontSize: 17, maxWidth: 380, lineHeight: 1.6 }}>
            Подписка работает как наём сотрудника на ставку: знаете заранее, сколько стоит месяц.
          </p>
        </div>

        <div className="grid grid-4" style={{ gap: 0, borderTop: '1px solid var(--rule)', borderLeft: '1px solid var(--rule)' }}>
          {plans.map((p) => (
            <div key={p.name} style={{
              padding: 28,
              borderRight: '1px solid var(--rule)',
              borderBottom: '1px solid var(--rule)',
              background: p.highlight ? 'var(--ink)' : 'transparent',
              color: p.highlight ? 'var(--paper)' : 'inherit',
              position: 'relative',
            }}>
              {p.highlight && (
                <span className="stamp" style={{ position: 'absolute', top: 14, right: 14, color: 'var(--ochre)', borderColor: 'var(--ochre)', fontSize: 9, padding: '4px 8px' }}>
                  чаще выбирают
                </span>
              )}
              <div className="eyebrow" style={{ color: p.highlight ? 'rgba(244,240,230,0.6)' : 'var(--ink-3)' }}>{p.sub}</div>
              <div className="serif" style={{ fontSize: 30, fontWeight: 700, marginTop: 6, letterSpacing: '-0.01em' }}>{p.name}</div>
              <div className="mono" style={{ fontSize: 22, marginTop: 18, marginBottom: 24, color: p.highlight ? 'var(--paper)' : 'var(--ink)' }}>
                {p.price}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
                {p.features.map((f, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: p.highlight ? 'rgba(244,240,230,0.8)' : 'var(--ink-2)' }}>
                    <Glyph name="check" size={16} color={p.highlight ? 'var(--ochre)' : 'var(--forest)'} />
                    <span>{f}</span>
                  </div>
                ))}
              </div>
              <button
                onClick={() => navigate('pricing')}
                style={{
                  background: 'transparent',
                  color: 'inherit',
                  border: 0,
                  borderBottom: '1px solid currentColor',
                  padding: '6px 0',
                  fontSize: 14,
                  cursor: 'pointer',
                  fontFamily: 'var(--font-body)',
                }}
              >
                Подробные условия →
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FAQ — accordion, document-style
// ─────────────────────────────────────────────────────────────────────────────

function FAQ() {
  const items = [
    { q: 'Чем вы отличаетесь от ChatGPT?', a: 'ChatGPT — общая модель без контекста вашего бизнеса. Агент бюро — это роль с дисциплиной отрасли (юрист знает ГК, бухгалтер — НК), памятью о вашей компании и инструментами под задачу: загрузка договоров, работа с XLSX, шаблоны документов.' },
    { q: 'Безопасны ли мои данные?', a: 'Серверы и обработка — в РФ. Документы хранятся в защищённом контуре, не используются для дообучения моделей. Соответствие 152-ФЗ. По вашему запросу можем подписать NDA и подключить логирование.' },
    { q: 'Можно ли подключить CRM или 1С?', a: 'Да. На тарифах «Команда» и «Корпус» доступны интеграции: amoCRM, Битрикс24, 1С (через коннектор), Google Drive, Яндекс.Диск, hh.ru. Полный список — на странице интеграций в кабинете.' },
    { q: 'Что если агент ошибётся?', a: 'Каждый ответ агента сопровождается ссылками на источники: статьи закона, цитаты из документа, конкретные строки в данных. Это позволяет проверить за 30 секунд. Для критичных решений агент сам рекомендует обратиться к человеку — это часть его роли.' },
    { q: 'Как оплатить от ООО или ИП?', a: 'Принимаем оплату по счёту от юридического лица. Исполнитель — ИП Низамов Д.Ф. на УСН 6%, работаем без НДС. После оплаты приходят УПД и акт. Для частных лиц — карта и СБП. Закрывающие документы автоматически уходят в раздел «Бухгалтерия» вашего кабинета.' },
    { q: 'Можно ли использовать в команде?', a: 'На тарифе «Команда» — до 3 пользователей, на тарифе «Корпус» — до 10. У каждого свой вход, своя история диалогов и роли (администратор / пользователь). База знаний компании — общая.' },
    { q: 'Что если мне нужен агент, которого нет в реестре?', a: 'Напишите нам — для тарифа «Корпус» мы делаем кастомных агентов под отрасль или роль. Если запрос типовой и будет полезен другим, добавим в публичную картотеку.' },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" style={{ background: 'var(--paper-2)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-wide">
        <SectionLabel no="VI" label="Часто задаваемые вопросы" />
        <h2 className="serif" style={{ fontSize: 'var(--fs-h1)', maxWidth: 800, marginBottom: 56 }}>
          Справочник по делу.
        </h2>

        <div style={{ borderTop: '1px solid var(--ink)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--rule)' }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%',
                  display: 'grid',
                  gridTemplateColumns: '50px 1fr 30px',
                  alignItems: 'center',
                  gap: 24,
                  padding: '24px 8px',
                  background: 'transparent',
                  border: 0,
                  cursor: 'pointer',
                  textAlign: 'left',
                  fontFamily: 'var(--font-body)',
                }}
              >
                <span className="mono" style={{ fontSize: 13, color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
                  № {String(i + 1).padStart(2, '0')}
                </span>
                <span className="serif" style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>
                  {it.q}
                </span>
                <span style={{ fontSize: 24, color: 'var(--ink-3)', transition: 'transform 200ms', transform: open === i ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 8px 28px', paddingLeft: 82, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, maxWidth: 800 }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FINAL CTA — closing statement
// ─────────────────────────────────────────────────────────────────────────────

function FinalCTA({ navigate }) {
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | done | error

  async function handleSubmit(e) {
    e.preventDefault();
    if (!email.trim()) return;
    setStatus('sending');

    // Я.Метрика goal — fires even if backend not ready
    if (window.dlgGoal) window.dlgGoal('waitlist_signup', { has_company: company.length > 0 });

    try {
      // FORMSPREE_ENDPOINT — placeholder. После регистрации на formspree.io / getform.io заменить на реальный.
      const FORMSPREE_ENDPOINT = 'FORMSPREE_ENDPOINT_PLACEHOLDER';
      if (FORMSPREE_ENDPOINT && FORMSPREE_ENDPOINT !== 'FORMSPREE_ENDPOINT_PLACEHOLDER') {
        const res = await fetch(FORMSPREE_ENDPOINT, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
          body: JSON.stringify({ email, company, source: 'landing-final-cta', timestamp: new Date().toISOString() }),
        });
        if (!res.ok) throw new Error('Network error');
      } else {
        // Fallback: пока endpoint не настроен — пишем в console + localStorage чтобы лиды не терялись
        const leads = JSON.parse(localStorage.getItem('dlg_waitlist') || '[]');
        leads.push({ email, company, ts: new Date().toISOString() });
        localStorage.setItem('dlg_waitlist', JSON.stringify(leads));
        console.log('[waitlist] saved locally:', { email, company });
        // имитация задержки сетевого запроса
        await new Promise((r) => setTimeout(r, 600));
      }
      setStatus('done');
      setEmail('');
      setCompany('');
    } catch (err) {
      console.error('[waitlist] error:', err);
      setStatus('error');
    }
  }

  return (
    <section className="m-cta-section" style={{ padding: '120px 0', background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container-wide" style={{ textAlign: 'center' }}>
        <div className="mono" style={{ fontSize: 12, letterSpacing: '0.2em', color: 'rgba(244,240,230,0.5)', textTransform: 'uppercase', marginBottom: 32 }}>
          Дело № 2026 / 001 · Запись в реестр открыта
        </div>
        <h2 className="serif" style={{ fontSize: 'var(--fs-display)', fontWeight: 700, letterSpacing: '-0.02em', maxWidth: 1100, margin: '0 auto', lineHeight: 0.98 }}>
          Соберите бюро<br />
          <span style={{ fontStyle: 'italic', color: 'var(--ochre)' }}>под себя&nbsp;—</span><br />
          за один вечер.
        </h2>
        <p style={{ fontSize: 19, color: 'rgba(244,240,230,0.7)', maxWidth: 600, margin: '32px auto 16px', lineHeight: 1.55 }}>
          Запись на закрытый запуск. 14 дней пробного периода. Без карты. Без обязательств.
        </p>
        <p className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'rgba(244,240,230,0.4)', textTransform: 'uppercase', marginBottom: 36 }}>
          Сообщим письмом, когда откроем доступ
        </p>

        {status === 'done' ? (
          <div style={{ maxWidth: 540, margin: '0 auto', padding: '24px 28px', background: 'rgba(184,138,58,0.12)', border: '1px solid var(--ochre)', borderRadius: 6 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--ochre)', textTransform: 'uppercase', marginBottom: 6 }}>
              Запись принята
            </div>
            <div className="serif" style={{ fontSize: 22, color: 'var(--paper)' }}>
              Спасибо. Напишем первыми.
            </div>
            <p style={{ fontSize: 13, color: 'rgba(244,240,230,0.65)', marginTop: 10 }}>
              Дамир лично свяжется с вами по указанной почте за 24 часа до запуска.
            </p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="m-cta-form" style={{ maxWidth: 560, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 10 }}>
            <input
              type="email"
              required
              placeholder="ваш@email.ru"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              style={{
                padding: '14px 16px', fontSize: 15, fontFamily: 'var(--font-body)',
                background: 'rgba(244,240,230,0.06)', color: 'var(--paper)',
                border: '1px solid rgba(244,240,230,0.25)', borderRadius: 4, outline: 0,
              }}
              onFocus={(e) => e.target.style.borderColor = 'var(--ochre)'}
              onBlur={(e) => e.target.style.borderColor = 'rgba(244,240,230,0.25)'}
            />
            <input
              type="text"
              placeholder="компания (опционально)"
              value={company}
              onChange={(e) => setCompany(e.target.value)}
              style={{
                padding: '14px 16px', fontSize: 15, fontFamily: 'var(--font-body)',
                background: 'rgba(244,240,230,0.06)', color: 'var(--paper)',
                border: '1px solid rgba(244,240,230,0.25)', borderRadius: 4, outline: 0,
              }}
              onFocus={(e) => e.target.style.borderColor = 'var(--ochre)'}
              onBlur={(e) => e.target.style.borderColor = 'rgba(244,240,230,0.25)'}
            />
            <button
              type="submit"
              disabled={status === 'sending'}
              style={{
                background: 'var(--paper)', color: 'var(--ink)', border: 0,
                padding: '14px 28px', borderRadius: 4, fontSize: 15, fontWeight: 500,
                cursor: status === 'sending' ? 'wait' : 'pointer',
                fontFamily: 'var(--font-body)', whiteSpace: 'nowrap',
                opacity: status === 'sending' ? 0.6 : 1,
              }}
            >
              {status === 'sending' ? 'Записываем…' : 'Записаться'}
            </button>
          </form>
        )}

        <div style={{ marginTop: 32 }}>
          <button
            onClick={() => navigate('catalog')}
            style={{
              background: 'transparent', color: 'rgba(244,240,230,0.7)',
              border: 0, fontSize: 14, cursor: 'pointer', fontFamily: 'var(--font-body)',
              borderBottom: '1px solid rgba(244,240,230,0.3)', paddingBottom: 2,
            }}
          >
            Сначала посмотреть картотеку специалистов →
          </button>
        </div>

        <p className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'rgba(244,240,230,0.35)', textTransform: 'uppercase', marginTop: 48 }}>
          Нажимая «Записаться», вы соглашаетесь с <a href="/oferta.html" style={{ color: 'inherit', borderBottom: '1px dotted currentColor' }}>офертой</a> и <a href="/privacy.html" style={{ color: 'inherit', borderBottom: '1px dotted currentColor' }}>политикой 152-ФЗ</a>
        </p>
      </div>
    </section>
  );
}

window.Landing = Landing;