// All landing-page sections for Trevoga.

const scrollToForm = (e) => {
  e.preventDefault();
  const el = document.getElementById('waitlist');
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
};

// ─── Waitlist Form ───────────────────────────────────────────────

const WaitlistForm = ({ compact }) => {
  const [state, setState] = React.useState({
    email: '', company: '', team: '5-20', sources: [],
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const toggleSource = (s) => {
    setState((prev) => ({
      ...prev,
      sources: prev.sources.includes(s)
        ? prev.sources.filter((x) => x !== s)
        : [...prev.sources, s],
    }));
  };

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setError('');
    setSubmitting(true);
    try {
      const apiBase = window.TREVOGA_API_BASE || 'https://trevoga.app';
      const resp = await fetch(`${apiBase}/v1/waitlist`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: state.email,
          company: state.company,
          team_size: state.team,
          sources: state.sources,
        }),
      });
      if (!resp.ok) {
        let msg = 'Не удалось отправить. Попробуйте ещё раз.';
        try {
          const data = await resp.json();
          if (data && data.error) msg = data.error;
        } catch (_) {}
        throw new Error(msg);
      }
      // Yandex.Metrika goal
      if (typeof window.ym === 'function' && window.TREVOGA_YM_ID) {
        try { window.ym(window.TREVOGA_YM_ID, 'reachGoal', 'waitlist_submit'); } catch (_) {}
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || 'Сетевая ошибка');
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div className={`form-card form-success ${compact ? 'form-card-compact' : ''}`}>
        <div className="form-success-mark">
          <IconCheck size={28} strokeWidth={2.4} />
        </div>
        <h3 className="form-success-title">Спасибо. Записали.</h3>
        <p className="form-success-desc">
          Свяжемся в&nbsp;течение пары&nbsp;дней. Для&nbsp;срочных вопросов&nbsp;—
          <a href="#" style={{ color: 'var(--accent)' }}> @trevoga_app</a> в&nbsp;Telegram.
        </p>
        <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setState({ email:'', company:'', team:'5-20', sources:[] }); }}>
          Отправить ещё одну
        </button>
      </div>
    );
  }

  const sources = ['Prometheus', 'Alertmanager', 'Grafana', 'Zabbix', 'Другое'];

  return (
    <form className={`form-card ${compact ? 'form-card-compact' : ''}`} onSubmit={submit}>
      <div className="form-head">
        <span className="form-eyebrow"><span className="dot" /> Early access · бесплатно</span>
        <h3 className="form-title">{compact ? 'Получите доступ' : 'Подключим вашу команду в порядке очереди'}</h3>
      </div>

      <div className="form-row">
        <label className="form-field">
          <span className="form-label">Рабочий email <em>*</em></span>
          <input type="email" required placeholder="you@company.ru"
            value={state.email}
            onChange={(e) => setState({ ...state, email: e.target.value })} />
        </label>
      </div>

      <div className={`form-row ${compact ? '' : 'form-row-2'}`}>
        <label className="form-field">
          <span className="form-label">Компания <em>*</em></span>
          <input type="text" required placeholder="ООО «Ромашка»"
            value={state.company}
            onChange={(e) => setState({ ...state, company: e.target.value })} />
        </label>

        <label className="form-field">
          <span className="form-label">Размер команды</span>
          <div className="form-select-wrap">
            <select value={state.team} onChange={(e) => setState({ ...state, team: e.target.value })}>
              <option value="1-5">1–5 инженеров</option>
              <option value="5-20">5–20 инженеров</option>
              <option value="20-50">20–50 инженеров</option>
              <option value="50+">50+ инженеров</option>
            </select>
            <IconChevronRight size={14} className="form-select-icon" />
          </div>
        </label>
      </div>

      <div className="form-row">
        <span className="form-label">Откуда прилетают алерты</span>
        <div className="form-checks">
          {sources.map((s) => (
            <label key={s} className={`form-check ${state.sources.includes(s) ? 'is-on' : ''}`}>
              <input type="checkbox" checked={state.sources.includes(s)} onChange={() => toggleSource(s)} />
              <span className="form-check-mark"><IconCheck size={11} strokeWidth={3} /></span>
              <span>{s}</span>
            </label>
          ))}
        </div>
      </div>

      {error && (
        <div className="form-error" role="alert">{error}</div>
      )}

      <button type="submit" className="btn btn-primary btn-lg form-submit" disabled={submitting}>
        {submitting ? 'Отправляем…' : 'Получить доступ'}
        {!submitting && <IconArrowRight size={14} strokeWidth={2.2} />}
      </button>

      <p className="form-fine">
        Не&nbsp;спамим. Не&nbsp;продаём контакты. Один человек&nbsp;ответит лично.
      </p>
    </form>
  );
};

// ─── Topbar ──────────────────────────────────────────────────────

const Topbar = () => (
  <header className="topbar">
    <div className="wrap topbar-inner">
      <a className="brand" href="#">
        <span className="brand-mark"><TrevogaMark size={20} /></span>
        <span>trevoga</span>
        <span style={{ color: 'var(--text-4)', marginLeft: 2, fontSize: 12 }}>.app</span>
      </a>
      <nav className="nav-links">
        <a href="#features">Возможности</a>
        <a href="#integrations">Интеграции</a>
        <a href="#why">Почему мы</a>
      </nav>
      <div className="nav-actions">
        <a className="btn btn-primary" href="#waitlist" onClick={scrollToForm}>
          Оставить заявку
          <IconArrowRight size={12} strokeWidth={2.2} />
        </a>
      </div>
    </div>
  </header>
);

// ─── Hero ────────────────────────────────────────────────────────

const Hero = () => (
  <section className="hero">
    <div className="wrap">
      <div className="hero-grid hero-grid-form">
        <div className="hero-text">
          <div className="hero-pill">
            <span className="tag">early access</span>
            <span>бесплатно сейчас · доступно из&nbsp;РФ</span>
            <IconArrowRight size={12} />
          </div>

          <h1 className="hero-h1">
            Дежурство, эскалации и&nbsp;уведомления.<br/>
            <em>Без хаоса в&nbsp;чатах.</em>
          </h1>

          <p className="hero-sub">
            Trevoga подхватывает алерты из&nbsp;Prometheus, Alertmanager и&nbsp;Grafana,
            поднимает дежурного и&nbsp;эскалирует, если он&nbsp;не&nbsp;отвечает.
            Никаких потерянных алертов в&nbsp;чатах и&nbsp;расписаний в&nbsp;Excel.
          </p>

          <div className="hero-meta">
            <span><span className="ok" /> Доступно из&nbsp;РФ без&nbsp;VPN</span>
            <span>SMS · Voice · Telegram</span>
            <span>iOS · Android · Apple Watch</span>
          </div>

          <div className="hero-mockup-mini">
            <PhoneMockup />
          </div>
        </div>

        <div id="waitlist" className="hero-form-wrap">
          <WaitlistForm compact />
        </div>
      </div>
    </div>
  </section>
);

// ─── Problems ────────────────────────────────────────────────────

const Problems = () => {
  const items = [
    { tag: 'PROBLEM 01', title: 'Алерты теряются в&nbsp;чатах', desc: 'Критический алерт прилетает в&nbsp;общий канал в&nbsp;3:47 ночи и&nbsp;тонет среди ботов и&nbsp;CI-уведомлений.' },
    { tag: 'PROBLEM 02', title: 'Дежурства ведутся в&nbsp;Excel', desc: 'Расписание живёт в&nbsp;общей таблице. Кто&nbsp;дежурит на&nbsp;этих выходных, никто точно не&nbsp;знает.' },
    { tag: 'PROBLEM 03', title: 'Эскалация — вручную', desc: 'Дежурный спит. Через 20&nbsp;минут руководитель пишет ему в&nbsp;личку. Через 40 — звонит. Время утекает.' },
    { tag: 'PROBLEM 04', title: 'Ночные сбои незаметны', desc: 'iOS и&nbsp;Android режут уведомления беззвучным режимом. Утром выясняется, что сервис лежал 6&nbsp;часов.' },
  ];

  return (
    <section id="problem">
      <div className="wrap">
        <div className="section-head">
          <div>
            <p className="section-eyebrow"><span className="dot" />Проблема</p>
            <h2 className="section-title">Большинство команд узнаёт о&nbsp;проде из&nbsp;жалоб клиентов.</h2>
          </div>
          <p className="section-desc">Знакомые ситуации, которые повторяются почти везде, где&nbsp;нет настоящей системы on-call. Trevoga закрывает каждую.</p>
        </div>

        <div className="problems">
          {items.map((p) => (
            <div className="problem" key={p.tag}>
              <span className="problem-mark"><IconX size={14} strokeWidth={2.4} />{p.tag}</span>
              <h3 className="problem-title" dangerouslySetInnerHTML={{ __html: p.title }} />
              <p className="problem-desc" dangerouslySetInnerHTML={{ __html: p.desc }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── How it works ────────────────────────────────────────────────

const HowItWorks = () => {
  const steps = [
    { n: '01', title: 'Подключите источники', desc: 'Webhook из Prometheus, Alertmanager, Grafana или любой системы, умеющей отправлять HTTP.', code: <><span className="k">POST</span> /api/v1/<span className="s">alerts</span></> },
    { n: '02', title: 'Настройте расписание', desc: 'Команда из 3+ инженеров. Ротация раз в неделю. Исключения на отпуска и оверрайды.', code: <>schedule: <span className="s">"sre-primary"</span></> },
    { n: '03', title: 'Опишите эскалацию', desc: 'Если дежурный не сделал ACK за 5 минут — передать следующему. Через 10 — позвонить.', code: <>escalate: <span className="k">+5m</span> → next</> },
    { n: '04', title: 'Получайте алерты', desc: 'Push с пробитием silent-режима, SMS, голосовой звонок, Telegram, Email — что удобно.', code: <><span className="k">notify</span>: push,sms,voice</> },
  ];

  return (
    <section id="how" className="flow">
      <div className="wrap">
        <div className="section-head">
          <div>
            <p className="section-eyebrow"><span className="dot" />Как это работает</p>
            <h2 className="section-title">От webhook до&nbsp;звонка дежурному — за&nbsp;четыре шага.</h2>
          </div>
          <p className="section-desc">Никакого волшебства. Trevoga — это&nbsp;маршрутизатор алертов с&nbsp;нормальным расписанием и&nbsp;эскалацией поверх.</p>
        </div>

        <FlowDiagram />

        <div className="steps">
          {steps.map((s) => (
            <div className="step" key={s.n}>
              <span className="step-num">{s.n}</span>
              <h3 className="step-title">{s.title}</h3>
              <p className="step-desc">{s.desc}</p>
              <div className="step-code">{s.code}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Features ────────────────────────────────────────────────────

const Features = () => {
  const items = [
    { Icon: IconVolumeX, title: 'Critical Alerts', badge: 'iOS · Android', desc: 'Пробивают беззвучный режим, фокус и Do Not Disturb. Дежурный получает алерт, даже если телефон в кармане у спящего.', tags: ['iOS Critical APNs', 'Android FULL_SCREEN_INTENT', 'Apple Watch'] },
    { Icon: IconBellRing, title: 'Multi-channel', desc: 'Мобильный пуш, SMS, голосовой звонок, Telegram-бот и Email. Каналы можно задавать на каждый шаг эскалации отдельно.', tags: ['Mobile app', 'SMS', 'Voice', 'Email', 'Telegram'] },
    { Icon: IconCalendar, title: 'Расписания', desc: 'Многослойные слои с ротациями. Смены по времени суток, отпуска и overrides.', tags: ['Layers', 'Ротация', 'Отпуска', 'Override'] },
    { Icon: IconArrowUp, title: 'Эскалация', desc: 'Если ACK не пришёл за N минут — передать следующему. Несколько уровней, разные каналы на каждом.', tags: ['Multi-level', 'Time-based', 'Round-robin'] },
    { Icon: IconRotate, title: 'iCal подписка', desc: 'Подписка на расписание дежурств в Google Calendar, Apple Calendar или Outlook. Всегда актуально.', tags: ['iCal', 'Google', 'Apple', 'Outlook'] },
    { Icon: IconWatch, title: 'Мобильные приложения', badge: 'ACK с часов', desc: 'Нативные приложения для iOS и Android на Flutter. ACK прямо с Apple Watch.', tags: ['iOS', 'Android', 'Apple Watch', 'Flutter'] },
  ];

  return (
    <section id="features">
      <div className="wrap">
        <div className="section-head">
          <div>
            <p className="section-eyebrow"><span className="dot" />Возможности</p>
            <h2 className="section-title">Всё, что нужно дежурному. Ничего лишнего.</h2>
          </div>
          <p className="section-desc">Шесть фич, без&nbsp;которых on-call не&nbsp;работает. Остальное — настраивается через API.</p>
        </div>

        <div className="features">
          {items.map((f) => (
            <div className="feature" key={f.title}>
              <div className="feature-icon"><f.Icon size={18} strokeWidth={1.8} /></div>
              <h3 className="feature-title">
                {f.title}
                {f.badge && <span className="badge">{f.badge}</span>}
              </h3>
              <p className="feature-desc">{f.desc}</p>
              <div className="feature-tags">
                {f.tags.map((t) => <span className="feature-tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Integrations ────────────────────────────────────────────────

const Integrations = () => {
  const integ = [
    { name: 'Prometheus', Logo: LogoPrometheus, sub: 'webhook' },
    { name: 'Alertmanager', Logo: LogoAlertmanager, sub: 'native' },
    { name: 'Grafana', Logo: LogoGrafana, sub: 'webhook' },
    { name: 'Webhook', Logo: LogoWebhook, sub: 'и любые HTTP' },
    { name: 'Telegram', Logo: LogoTelegram, sub: 'bot · DM' },
    { name: 'SMS / Voice', Logo: () => <div style={{ color: '#dc3545', display: 'flex', gap: 6, alignItems: 'center' }}><IconMessageSquare size={20} strokeWidth={1.8} /><IconPhone size={20} strokeWidth={1.8} /></div>, sub: 'РФ провайдеры' },
    { name: 'Mobile app', Logo: () => <div style={{ color: '#a8a8b3', display: 'flex', gap: 6, alignItems: 'center' }}><LogoIos /><LogoAndroid /></div>, sub: 'iOS · Android' },
    { name: 'Email', Logo: () => <div style={{ color: '#a8a8b3' }}><IconMail size={28} strokeWidth={1.6} /></div>, sub: 'SMTP' },
  ];

  return (
    <section id="integrations" className="integrations">
      <div className="wrap">
        <div className="section-head">
          <div>
            <p className="section-eyebrow"><span className="dot" />Интеграции</p>
            <h2 className="section-title">Работает с&nbsp;тем, что у&nbsp;вас уже&nbsp;есть.</h2>
          </div>
          <p className="section-desc">Российские провайдеры связи для&nbsp;SMS и&nbsp;голоса — никакого Twilio в&nbsp;РФ не&nbsp;надо.</p>
        </div>

        <div className="integ-grid">
          {integ.map((i) => (
            <div className="integ" key={i.name}>
              <div className="integ-logo"><i.Logo /></div>
              <div>
                <div style={{ fontSize: 13, color: 'var(--text)', fontWeight: 500 }}>{i.name}</div>
                <div className="integ-name">{i.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Why us ──────────────────────────────────────────────────────

const Yes = () => <span className="cell-yes"><IconCheck size={14} strokeWidth={2.6} /> да</span>;
const No = () => <span className="cell-no"><IconMinus size={14} strokeWidth={2.6} /> —</span>;
const Partial = ({ t }) => <span className="cell-partial"><IconAlert size={13} strokeWidth={2.4} /> {t}</span>;

const WhyUs = () => {
  const rows = [
    { feat: 'Доступен из РФ без VPN', sub: 'Домен, IP, инфраструктура — в&nbsp;РФ', us: <Yes/>, pd: <Partial t="через VPN"/>, ga: <Yes/>, gr: <Partial t="только OSS"/> },
    { feat: 'Российские SMS / Voice провайдеры', sub: 'Без Twilio и Vonage · из&nbsp;коробки', us: <Yes/>, pd: <No/>, ga: <No/>, gr: <No/> },
    { feat: 'Telegram-бот из коробки', sub: 'Уведомления · ACK скоро', us: <Yes/>, pd: <Partial t="webhook"/>, ga: <Partial t="webhook"/>, gr: <No/> },
    { feat: 'Critical Alerts (iOS / Android)', sub: 'Пробитие беззвучного режима', us: <Yes/>, pd: <Yes/>, ga: <No/>, gr: <No/> },
    { feat: 'Расписания и эскалации', sub: 'Ротация, оверрайды, multi-level', us: <Yes/>, pd: <Yes/>, ga: <Yes/>, gr: <Yes/> },
    { feat: 'Поддержка на русском', sub: 'Без 12-часовой разницы', us: <Yes/>, pd: <No/>, ga: <Partial t="community"/>, gr: <Partial t="community"/> },
    { feat: 'Управляемый сервис в РФ', sub: 'SaaS, без своего админа', us: <Yes/>, pd: <No/>, ga: <Partial t="нужен админ"/>, gr: <No/> },
  ];

  return (
    <section id="why">
      <div className="wrap">
        <div className="section-head">
          <div>
            <p className="section-eyebrow"><span className="dot" />Почему мы</p>
            <h2 className="section-title">Зарубежные аналоги отлично работают. Пока&nbsp;работают.</h2>
          </div>
          <p className="section-desc">
            <span style={{ color: 'var(--accent)' }}>Opsgenie</span> снят с&nbsp;продажи в&nbsp;2025, EOL — апрель 2027.{' '}
            <span style={{ color: 'var(--accent)' }}>Grafana OnCall&nbsp;OSS</span> в&nbsp;maintenance, архив в&nbsp;марте 2026.{' '}
            Рынок on-call в&nbsp;РФ сжимается до&nbsp;тех, кто работает.
          </p>
        </div>

        <div className="compare-wrap">
          <table className="compare">
            <thead>
              <tr>
                <th>Критерий</th>
                <th className="us">Trevoga<span className="th-sub">РФ · cloud</span></th>
                <th>PagerDuty<span className="th-sub">США · USD</span></th>
                <th>GoAlert<span className="th-sub">OSS · self-hosted</span></th>
                <th>Grafana OnCall<span className="th-sub">архив 03.2026</span></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.feat}>
                  <td>
                    <div className="feat-name">{r.feat}</div>
                    <div className="feat-sub" dangerouslySetInnerHTML={{ __html: r.sub }} />
                  </td>
                  <td className="us">{r.us}</td>
                  <td>{r.pd}</td>
                  <td>{r.ga}</td>
                  <td>{r.gr}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="compare-note">
            <IconAlert size={13} strokeWidth={2.2} />
            <span><b>Opsgenie</b> снят с&nbsp;продажи 4&nbsp;июня 2025, EOL&nbsp;— 5&nbsp;апреля 2027. Atlassian мигрирует пользователей в&nbsp;Jira Service Management.</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Social proof / Early access status ──────────────────────────

const EarlyAccess = () => {
  const stats = [
    { num: '~30', label: 'команд планируем подключить до&nbsp;конца лета' },
    { num: '1:1', label: 'онбординг — берём в&nbsp;работу по&nbsp;очереди' },
    { num: '0 ₽', label: 'на время early access · без&nbsp;карты' },
  ];

  return (
    <section id="status">
      <div className="wrap">
        <div className="early-block early-block-solo">
          <div className="early-side">
            <p className="section-eyebrow"><span className="dot" />Сейчас в early access</p>
            <h2 className="section-title">Подключаем команды по&nbsp;одной.</h2>
            <p className="section-desc" style={{ marginTop: 18, maxWidth: 560 }}>
              Берём в&nbsp;работу заявки в&nbsp;порядке очереди&nbsp;—
              чтобы каждая команда получила нормальный онбординг,
              а&nbsp;не&nbsp;«читайте доку и&nbsp;разберётесь».
            </p>
            <a className="btn btn-primary btn-lg" href="#waitlist" onClick={scrollToForm} style={{ marginTop: 24 }}>
              Оставить заявку
              <IconArrowRight size={14} strokeWidth={2.2} />
            </a>
          </div>

          <div className="early-stats">
            {stats.map((s) => (
              <div className="early-stat" key={s.num}>
                <div className="early-stat-num">{s.num}</div>
                <div className="early-stat-label" dangerouslySetInnerHTML={{ __html: s.label }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Final CTA — full form ───────────────────────────────────────

const CtaBlock = () => (
  <section style={{ borderTop: 0 }}>
    <div className="wrap">
      <div className="cta-block">
        <p className="cta-eyebrow">Trevoga · early access · бесплатно</p>
        <h2 className="cta-title">
          Сделайте дежурство нормальным.<br/>
          <span style={{ color: 'var(--accent)' }}>За&nbsp;один вечер.</span>
        </h2>
        <p className="cta-desc">
          Подключим вашу команду в&nbsp;порядке очереди.
          Без&nbsp;карты, без&nbsp;демо-звонка, без&nbsp;долгих созвонов.
        </p>

        <div className="cta-form">
          <WaitlistForm />
        </div>

        <div className="cta-meta">
          <span>hello@trevoga.app</span>
          <span>·</span>
          <span>@trevoga_app в&nbsp;Telegram</span>
        </div>
      </div>
    </div>
  </section>
);

// ─── Footer ──────────────────────────────────────────────────────

const Footer = () => (
  <footer>
    <div className="wrap">
      <div className="footer-grid footer-grid-slim">
        <div className="footer-brand-block">
          <div className="brand">
            <span className="brand-mark"><TrevogaMark size={20} /></span>
            <span>trevoga</span>
            <span style={{ color: 'var(--text-4)', marginLeft: 2, fontSize: 12 }}>.app</span>
          </div>
          <p className="footer-tagline">
            Российская система управления инцидентами и&nbsp;дежурствами.
            Сейчас в&nbsp;early access.
          </p>
        </div>

        <div className="footer-col">
          <h4>Продукт</h4>
          <ul>
            <li><a href="#features">Возможности</a></li>
            <li><a href="#integrations">Интеграции</a></li>
            <li><a href="#why">Почему мы</a></li>
            <li><a href="#waitlist" onClick={scrollToForm}>Оставить заявку</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <h4>Контакты</h4>
          <ul>
            <li><a href="mailto:hello@trevoga.app">hello@trevoga.app</a></li>
            <li><a href="#">@trevoga_app в&nbsp;Telegram</a></li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <span>© 2026 Trevoga</span>
        <span>trevoga.app · early access</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Topbar, Hero, Problems, HowItWorks, Features, Integrations, WhyUs,
  EarlyAccess, CtaBlock, Footer, WaitlistForm,
});