/* ===== BrewOS Landing app ===== */
const { useState, useRef, useEffect, useMemo, useContext } = React;

/* ---------- icons ---------- */
function LIcon({ n, s = 22 }) {
  const p = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor',
    strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const M = {
    idle: <><path d="M7 3h10l-1 4v8l-4 6-4-6V7z" /><path d="M6 7h12" /><path d="M12 21v-6" /></>,
    waste: <><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" /><path d="M10 11v5M14 11v5" /></>,
    blind: <><path d="M3 3l18 18" /><path d="M10.6 10.6a2 2 0 0 0 2.8 2.8" /><path d="M9.4 5.3A9.5 9.5 0 0 1 12 5c6 0 10 7 10 7a16 16 0 0 1-2.6 3.1M6.6 6.6A16 16 0 0 0 2 12s4 7 10 7a9.5 9.5 0 0 0 3.1-.5" /></>,
    eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></>,
    cost: <><circle cx="12" cy="12" r="9" /><path d="M14.5 9a2.5 2.5 0 0 0-2.5-1.5C10.5 7.5 9.5 8.3 9.5 9.5c0 2.5 5 1.5 5 4 0 1.2-1 2-2.5 2A2.5 2.5 0 0 1 9.5 14" /><path d="M12 6v1.5M12 16.5V18" /></>,
    flow: <><path d="M4 7h11a3 3 0 0 1 0 6H7a3 3 0 0 0 0 6h13" /><path d="m17 16 3 3-3 3" /><path d="M2 7l3-3 3 3" /></>,
    bell: <><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 0 1-3.4 0" /></>,
    chart: <><path d="M3 3v18h18" /><path d="m7 14 3-4 3 3 4-6" /></>,
    plan: <><rect x="3" y="4" width="18" height="17" rx="2" /><path d="M3 9h18M8 2v4M16 2v4" /><path d="m9 15 2 2 4-4" /></>,
    phone: <><rect x="6" y="2" width="12" height="20" rx="3" /><path d="M11 18h2" /></>,
    bolt: <><path d="M13 2 4 14h7l-1 8 9-12h-7z" /></>,
    plug: <><path d="M9 2v6M15 2v6M7 8h10v3a5 5 0 0 1-10 0z" /><path d="M12 16v6" /></>,
    check: <><path d="M20 6 9 17l-5-5" /></>,
    brew: <><path d="M5 8h14l-1.5 11H6.5z" /><path d="M5 8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3" /><path d="M9 12v4M15 12v4" /></>,
    pour: <><path d="M5 4h9l-1 5H6z" /><path d="M13 6h4a2 2 0 0 1 2 2v2" /><path d="M8 9v6a3 3 0 0 0 6 0" /></>,
    store: <><path d="M3 9 5 4h14l2 5" /><path d="M4 9v11h16V9" /><path d="M9 20v-6h6v6" /></>,
    tank: <><path d="M7 3h10l-1 4v8l-4 6-4-6V7z" /><path d="M6 7h12" /></>
  };
  return <svg {...p}>{M[n] || null}</svg>;
}

/* ---------- number helpers ---------- */
const ru = (n) => Math.round(n).toLocaleString('ru-RU');
function useCountUp(target, dur = 600) {
  const [v, setV] = useState(target);const prev = useRef(target);
  useEffect(() => {
    const from = prev.current,to = target,t0 = performance.now();
    let raf;
    const tick = (now) => {const k = Math.min(1, (now - t0) / dur);const e = 1 - Math.pow(1 - k, 3);
      setV(from + (to - from) * e);if (k < 1) raf = requestAnimationFrame(tick);else prev.current = to;};
    raf = requestAnimationFrame(tick);return () => cancelAnimationFrame(raf);
  }, [target]);
  return v;
}

/* ---------- reveal on scroll ---------- */
function useReveal() {
  useEffect(() => {
    const els = [...document.querySelectorAll('.reveal')];
    const io = new IntersectionObserver((es) => es.forEach((e) => {
      if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}
    }), { threshold: .12 });
    els.forEach((e) => io.observe(e));return () => io.disconnect();
  }, []);
}

/* ---------- slider control ---------- */
function Slider({ label, value, set, min, max, step, fmt, unit, steps }) {
  if (steps) {
    const idx = Math.max(0, steps.indexOf(value));
    const pct = idx / (steps.length - 1) * 100;
    return (
      <div className="ctrl">
        <div className="row">
          <span className="lbl">{label}</span>
          <span className="val">{fmt ? fmt(value) : value}{unit && <small> {unit}</small>}</span>
        </div>
        <input type="range" min={0} max={steps.length - 1} step={1} value={idx}
        style={{ '--p': pct + '%' }}
        onChange={(e) => set(steps[parseInt(e.target.value)])} />
      </div>);

  }
  const pct = (value - min) / (max - min) * 100;
  return (
    <div className="ctrl">
      <div className="row">
        <span className="lbl">{label}</span>
        <span className="val">{fmt ? fmt(value) : value}{unit && <small> {unit}</small>}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
      style={{ '--p': pct + '%' }}
      onChange={(e) => set(parseFloat(e.target.value))} />
    </div>);

}

/* ========== CALCULATOR ========== */
/* ---------- shared calculator model (context) ---------- */
const CalcCtx = React.createContext(null);
window.CalcCtx = CalcCtx;

function useCalcModel() {
  const [tanks, setTanks] = useState(8);
  const [vol, setVol] = useState(1000);
  const [cycle, setCycle] = useState(24);
  const [price, setPrice] = useState(250); // отпускная цена ₽/л
  const [cost, setCost] = useState(130); // себестоимость ₽/л
  const margin = Math.max(0, price - cost); // прибыль с литра = цена − себес

  const r = useMemo(() => {
    const baseUtil = 0.61,newUtil = 0.83; // загрузка танков до/после (крафт)
    const cyclesYr = 365 / cycle;
    const perTankYr = cyclesYr * vol;
    const extraLiters = tanks * perTankYr * (newUtil - baseUtil);
    const gainUtil = extraLiters * margin;
    const producedNew = tanks * perTankYr * newUtil;
    const brakLiters = producedNew * 0.025;
    const gainBrak = brakLiters * margin;
    const gainTime = 8 * 52 * 500;
    const total = gainUtil + gainBrak + gainTime;
    const price2 = 12900 * 12; // условная годовая подписка
    const payback = price2 / (total / 12); // в месяцах
    // proof-of-story derived figures (от тех же вводных)
    const varkiBase = Math.round(cyclesYr * baseUtil);
    const varkiNew = Math.round(cyclesYr * newUtil);
    return { extraLiters, gainUtil, gainBrak, gainTime, total, payback, price: price2, varkiBase, varkiNew };
  }, [tanks, vol, cycle, margin]);

  return { tanks, setTanks, vol, setVol, cycle, setCycle, price, setPrice, cost, setCost, margin, r };
}

function Calculator() {
  const { tanks, setTanks, vol, setVol, cycle, setCycle, price, setPrice, cost, setCost, margin, r } = useContext(CalcCtx);const totalAnim = useCountUp(r.total);

  return (
    <div className="calc-wrap reveal">
      <div className="calc">
        <div className="calc-l">
          <h3>Сколько вы недозарабатываете прямо сейчас</h3>
          <p className="hint">Подвигайте ползунки под свой завод — расчёт пересчитается мгновенно.</p>
          <Slider label="Цилиндро-конических танков (ЦКТ)" value={tanks} set={setTanks}
          min={3} max={30} step={1} unit="шт" />
          <Slider label="Средний объём танка" value={vol} set={setVol}
          steps={[500, 1000, 2000, 4000, 5000]} fmt={ru} unit="л" />
          <Slider label="Длительность цикла партии" value={cycle} set={setCycle}
          min={10} max={30} step={1} unit="дней" />
          <Slider label="Отпускная цена за литр" value={price} set={setPrice}
          min={100} max={600} step={10} fmt={ru} unit="₽/л" />
          <Slider label="Себестоимость литра" value={cost} set={setCost}
          min={50} max={400} step={10} fmt={ru} unit="₽/л" />
          <div className={'calc-derived' + (margin <= 0 ? ' warn' : '')}>
            <span className="cd-l">Прибыль с литра <em>(цена − себестоимость)</em></span>
            <span className="cd-v">{margin > 0 ? ru(margin) + ' ₽/л' : 'Цена ниже себеса'}</span>
          </div>
        </div>
        <div className="calc-r">
          <div className="rh">Дополнительная прибыль в год с BrewOS</div>
          <div className="bignum"><span className="cur">+ </span>{ru(totalAnim)}<span className="cur"> ₽</span></div>
          <div className="bigsub">≈ {ru(r.total / 12)} ₽ каждый месяц — деньги, которые сейчас теряются на простоях и ручном учёте.</div>

          <div className="calc-break">
            <div className="brk">
              <span className="sw" style={{ background: 'var(--brand)' }}></span>
              <span className="t">Рост оборачиваемости танков <b className="mono">(+{ru(r.extraLiters)} л/год)</b></span>
              <span className="v brand-c">+{ru(r.gainUtil)} ₽</span>
            </div>
            <div className="brk">
              <span className="sw" style={{ background: 'var(--amber)' }}></span>
              <span className="t">Меньше брака и списаний</span>
              <span className="v amber">+{ru(r.gainBrak)} ₽</span>
            </div>
            <div className="brk">
              <span className="sw" style={{ background: 'var(--sky)' }}></span>
              <span className="t">Экономия времени команды</span>
              <span className="v" style={{ color: 'var(--sky)' }}>+{ru(r.gainTime)} ₽</span>
            </div>
          </div>

          <div className="calc-anchor">
            <div className="ca-row">
              <span className="ca-l">Одна простаивавшая партия, возвращённая в работу</span>
              <span className="ca-v">≈ {ru(vol * margin)} ₽</span>
            </div>
            <div className="ca-note">Это в разы больше месячной стоимости системы. Поэтому окупаемость
              считается неделями: достаточно вернуть в оборот всего одну партию за год.</div>
          </div>
          <div className="calc-foot">
            <a href="#cta" className="btn btn-pri" onClick={(e) => {
              e.preventDefault();
              openBot(`calc_${tanks}-${vol}-${cycle}-${price}-${cost}-${Math.round(r.total)}`);
            }}>Получить расчёт под мой завод</a>
            <span className="payback">Стоимость системы ≈ <b>{Math.max(1, Math.round(r.price / r.total * 100))}%</b> от этой выгоды</span>
          </div>
          <div className="calc-disc">Расчёт оценочный, под крафтовое производство. Прибыль с литра считается как
            отпускная цена минус себестоимость. В основе: рост загрузки ЦКТ с 61% до 83%,
            снижение брака на ~2,5% объёма, ~8 ч/нед сэкономленного времени команды.
            Реальные цифры зависят от ассортимента и процессов — посчитаем точно на демо.</div>
        </div>
      </div>
    </div>);

}

/* ---------- mini tank for preview ---------- */
function PvTank({ state, fill, color, foam }) {
  return <Tank state={state} fill={fill} color={color} foam={foam} glossy={true} bubbles={true} glow={true} />;
}

/* ---------- usage flow: lifecycle stages + per-module mini screens ---------- */
const FLOW = [
{ step: '01', stage: 'Варка', mods: 'Варочный порядок · Рецепты · Задачи', screen: 'brew',
  sys: 'Сменам ставятся задачи по плану, варка идёт по рецепту' },
{ step: '02', stage: 'Брожение', mods: 'ЦКТ · Замеры · Алерты', screen: 'ferment',
  sys: 'Замеры плотности и температуры по графику, риски подсвечены' },
{ step: '03', stage: 'Дозревание / охлаждение', mods: 'ЦКТ · Маршрут партии', screen: 'cold',
  sys: 'Статусы и сроки видны, партия идёт по техмаршруту' },
{ step: '04', stage: 'Розлив', mods: 'План розлива · Склад · Задачи', screen: 'pour',
  sys: 'Готовая партия встаёт в план розлива, продукт приходует склад' }];


function TankMini({ num, cap, nm, kv, state, fill, color, foam, badge }) {
  return (
    <div className="pv-card">
      <div className="ph"><span className="num">№ {num}</span><span className="cap">{cap} л</span></div>
      <div className="pv-tank">
        <div className="v"><PvTank state={state} fill={fill} color={color} foam={foam} /></div>
        <div className="i">
          <div className="nm">{nm}</div>
          <div className="kv">{kv}</div>
          <span className="pv-badge" style={badge.style}><span style={{ width: 5, height: 5, borderRadius: '50%', background: 'currentColor' }}></span>{badge.t}</span>
        </div>
      </div>
    </div>);

}

function renderFlowScreen(s) {
  if (s.screen === 'brew') return (
    <div className="mini-screen">
      <div className="ms-h"><LIcon n="brew" s={14} />Варочный порядок</div>
      <div className="ms-row"><span className="ms-chk on"></span>Гёзе абрикос<span className="ms-when">сегодня</span></div>
      <div className="ms-row"><span className="ms-chk"></span>APA Сосна<span className="ms-when">завтра</span></div>
      <div className="ms-row dim"><span className="ms-chk"></span>IPA Цитра<span className="ms-when">чт</span></div>
    </div>);

  if (s.screen === 'ferment') return (
    <div className="ms-stack">
      <TankMini num="1" cap="1000" nm="Светлый лагер" kv="°P 8,2 · 19,5°" state="ferment" fill={0.9}
      color="#e6b13a" foam="#fbf2d2" badge={{ t: 'Fermenting', style: { background: '#f59e0b', color: '#3a2400' } }} />
      <div className="ms-alert"><LIcon n="bell" s={12} />Замер плотности · завтра 10:00</div>
    </div>);

  if (s.screen === 'cold') return (
    <div className="ms-stack">
      <TankMini num="15" cap="2000" nm="Пшеничное" kv="cold crash · 1,0°" state="cold" fill={0.84}
      color="#e7c357" foam="#fdf6da" badge={{ t: 'Cold crash', style: { background: 'rgba(34,211,238,.16)', color: '#67e8f9' } }} />
      <div className="ms-track">
        <span className="dotdone"></span><span className="ln on"></span><span className="dotnow"></span><span className="ln"></span><span className="dottodo"></span>
        <span className="ms-track-l">до розлива 3 дн</span>
      </div>
    </div>);

  // pour
  return (
    <div className="mini-screen">
      <div className="ms-h"><LIcon n="pour" s={14} />План розлива</div>
      <div className="ms-row"><span className="ms-tag ready">готов</span>Стаут · 4500 л<span className="ms-when">сегодня</span></div>
      <div className="ms-row"><span className="ms-tag">готов</span>Груша · 500 л<span className="ms-when">пт</span></div>
      <div className="ms-store"><LIcon n="store" s={13} />Склад<b>+180 кег</b></div>
    </div>);

}

/* ========== DATA for static sections ========== */
const LEAKS = [
{ ic: 'idle', h: 'Танки простаивают', p: 'Пустой или передержанный ЦКТ — это деньги, которые не работают. Без живой картины цеха планируют «на глаз».', cost: 'до 20% оборачиваемости мимо кассы' },
{ ic: 'waste', h: 'Брак и списания', p: 'Пропущенный замер плотности или температуры — и партия уходит в слив. Узнаёте об этом постфактум.', cost: '3–5% объёма в отходы' },
{ ic: 'blind', h: 'Нет прозрачной себестоимости', p: 'Сколько реально стоит партия и с какой наценкой её продавать? В таблицах Excel это считают неделями.', cost: 'продажи ниже маржи' }];

const FEATURES = [
{ ic: 'eye', h: 'Цех как на ладони', p: 'Каждый ЦКТ — живая иконка с уровнем, сортом и состоянием: брожение, дозревание, cold crash, готов. Один экран — весь завод.' },
{ ic: 'bell', h: 'Замеры и алерты', p: 'Система ведёт график замеров плотности и температуры, напоминает о шагах и подсвечивает партии в зоне риска.' },
{ ic: 'cost', h: 'Себестоимость партии', p: 'Стоимость каждой варки считается автоматически — видно маржу и рекомендованную цену ещё до розлива.' },
{ ic: 'plan', h: 'Планирование розлива', p: 'Готовые партии сами встают в план розлива и варочный порядок. Никаких конфликтов за танк.' },
{ ic: 'chart', h: 'Оборачиваемость и аналитика', p: 'Загрузка танков, выход продукта, длительность циклов — метрики, которые напрямую двигают прибыль.' },
{ ic: 'flow', h: 'Маршрут партии', p: 'Весь путь от залива сусла до розлива — на одном таймлайне. Видно, что происходит и что дальше.' }];

const METRICS = [
{ n: '+33%', l: 'партий в год с тех же танков', am: false,
  why: 'Загрузка ЦКТ растёт с 61% до 83% — тот же парк танков вмещает на треть больше варок (9→12 с танка).' },
{ n: '−63%', l: 'брака и списаний', am: true,
  why: 'Замеры по графику и алерты по партиям в риске: доля списаний падает с 4,0% до 1,5% объёма.' },
{ n: '+22 п.п.', l: 'загрузка ЦКТ (61→83%)', am: false,
  why: 'Освобождение танка видно в день готовности — следующая варка встаёт без простоя между партиями.' },
{ n: '<1 мес', l: 'окупаемость системы', am: true,
  why: 'Стоимость системы — лишь несколько процентов от возвращаемой прибыли. Даже одна спасённая партия (≈ 120 000 ₽ маржи) перекрывает месяцы подписки.' }];

const METHOD = [
{ k: 'Загрузка ЦКТ', t: 'Крафтовые цеха часто работают на 55–70%: танк ждёт розлива, мойки, лабораторных замеров. Видимость освобождения танков поднимает загрузку на 10–22 п.п. В калькуляторе — средний сценарий, не максимум.' },
{ k: 'Брак', t: 'Бо́льшая часть списаний на крафте — из-за пропущенных или поздних замеров, а не рецептуры. График и алерты убирают именно эту причину — поэтому снижение реальное, а не «магическое».' },
{ k: 'Маржа', t: 'Система не повышает цену за вас. Она показывает реальную себестоимость каждой партии — а где не продавать ниже маржи, решаете вы.' },
{ k: 'Окупаемость', t: 'Стоимость системы — несколько процентов от возвращаемой прибыли. Одна возвращённая в работу партия (≈ 120 000 ₽ маржи) перекрывает месяцы подписки. Точную цену под ваш цех считаем на демо.' }];

const STEPS = [
{ h: 'Заводим ваш цех', p: 'Переносим все ЦКТ, сорта и текущие партии в систему — обычно за один день вместе с вашим технологом.' },
{ h: 'Команда работает в BrewOS', p: 'Операторы ведут замеры, директор видит весь завод в реальном времени. Excel и блокноты больше не нужны.' },
{ h: 'Считаем прибыль', p: 'Через месяц сверяем: выросла загрузка танков, упал брак, видна себестоимость. Прибыль — в отчёте.' }];


/* ---------- preview card ---------- */
function PvCard({ num, cap, nm, kv, state, fill, color, foam, badge, bcls }) {
  return (
    <div className="pv-card">
      <div className="ph"><span className="num">№ {num}</span><span className="cap">{cap} л</span></div>
      <div className="pv-tank">
        <div className="v"><PvTank state={state} fill={fill} color={color} foam={foam} /></div>
        <div className="i">
          <div className="nm">{nm}</div>
          <div className="kv">{kv}</div>
          <span className="pv-badge" style={badge.style}>{badge.led && <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'currentColor' }}></span>}{badge.t}</span>
        </div>
      </div>
    </div>);

}

/* ========== DEMO FORM (152-ФЗ согласие) ========== */
// ВНИМАНИЕ (для дизайнера): endpoint заявок и реквизиты оператора берутся из
// внешнего файла config.js (window.BREWOS_CONFIG). НЕ хардкодить сюда и НЕ
// удалять чтение из BREWOS_CONFIG ниже — иначе форма перестанет слать на бэкенд.
const __CFG = (typeof window !== 'undefined' && window.BREWOS_CONFIG) || {};

// URL входа в веб-приложение (кнопка «Войти»). Берётся из config.js.
const LOGIN_URL = __CFG.appLoginUrl || 'http://localhost:15173/login';

// Открыть бот заявок (для CTA-кнопок вне App: «Получить расчёт» и т.п.).
// start — payload deep-link: 'demo' (просто демо) или 'calc_<ЦКТ>-<объём>-<цикл>-<цена>-<себес>-<выгода>'.
const DEMO_BOT_URL = __CFG.demoBotUrl || 'https://t.me/Scan2Action_requiestbot?start=demo';
const BOT_BASE = DEMO_BOT_URL.split('?')[0];
function openBot(start) {
  window.open(BOT_BASE + '?start=' + (start || 'demo'), '_blank', 'noopener');
}
function goDemo(e) {
  if (e) e.preventDefault();
  openBot('demo');
}

// Реквизиты оператора ПДн (152-ФЗ). Реальные значения — в config.js.
const OPERATOR = __CFG.operator || {
  name: 'ООО «БрюОС»',
  inn: '0000000000',
  address: 'г. Москва, ул. Примерная, д. 1',
  email: 'privacy@brewos.ru',
  retention: '6 месяцев'
};

// Куда отправлять заявки — из config.js (window.BREWOS_CONFIG).
// endpoint — URL бэкенда (рекомендуется), telegram — прямая отправка (только тест).
const LEADS = {
  endpoint: __CFG.leadEndpoint || '',
  telegram: __CFG.telegram || { botToken: '', chatId: '' }
};

async function sendLead({ name, phone }){
  const text = `🍺 Заявка на демо BrewOS\n👤 ${name}\n📞 ${phone}\n🕒 ${new Date().toLocaleString('ru-RU')}`;
  if (LEADS.endpoint){
    const res = await fetch(LEADS.endpoint, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ name, phone, ts: Date.now() })
    });
    if(!res.ok) throw new Error('endpoint '+res.status);
    return;
  }
  if (LEADS.telegram.botToken && LEADS.telegram.chatId){
    const res = await fetch(`https://api.telegram.org/bot${LEADS.telegram.botToken}/sendMessage`, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ chat_id: LEADS.telegram.chatId, text })
    });
    if(!res.ok) throw new Error('telegram '+res.status);
    return;
  }
  // ничего не настроено — демо-режим (без реальной отправки)
  await new Promise(r=>setTimeout(r,500));
}

function fmtPhone(v) {
  let d = v.replace(/\D/g, '');
  if (d.startsWith('8')) d = '7' + d.slice(1);
  if (!d.startsWith('7')) d = '7' + d;
  d = d.slice(0, 11);
  const p = d.slice(1);
  let out = '+7';
  if (p.length > 0) out += ' (' + p.slice(0, 3);
  if (p.length >= 3) out += ') ' + p.slice(3, 6);
  if (p.length >= 6) out += '-' + p.slice(6, 8);
  if (p.length >= 8) out += '-' + p.slice(8, 10);
  return out;
}

function DemoForm({ open, onClose }) {
  const [view, setView] = useState('form'); // form | policy | done
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [agree, setAgree] = useState(false);
  const [touched, setTouched] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState(false);

  useEffect(() => {
    if (open) {setView('form');setTouched(false);}
  }, [open]);
  useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    if (open) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const phoneDigits = phone.replace(/\D/g, '').length;
  const nameOk = name.trim().length >= 2;
  const phoneOk = phoneDigits >= 11;
  const canSubmit = nameOk && phoneOk && agree;

  const submit = async (e) => {
    e.preventDefault();
    setTouched(true);
    if (!canSubmit || sending) return;
    setErr(false);
    setSending(true);
    try {
      await sendLead({ name: name.trim(), phone });
      setView('done');
    } catch (_e) {
      setErr(true);
    } finally {
      setSending(false);
    }
  };

  if (!open) return null;
  return (
    <div className="demo-scrim show" onMouseDown={(e) => {if (e.target === e.currentTarget) onClose();}}>
      <div className="demo-modal" role="dialog" aria-modal="true" aria-label="Запись на демо">
        <button className="demo-x" onClick={onClose} aria-label="Закрыть">✕</button>

        {view === 'form' &&
        <form className="demo-body" onSubmit={submit} noValidate>
            <div className="demo-head">
              <div className="demo-eyebrow"><span className="pip"></span>Демонстрация BrewOS</div>
              <h3>Записаться на демо</h3>
              <p>Покажем систему на примере вашего цеха и посчитаем выгоду. Перезвоним в рабочее время — без спама и обязательств.</p>
            </div>

            <label className={'demo-field' + (touched && !nameOk ? ' err' : '')}>
              <span className="df-l">Как к вам обращаться<i>*</i></span>
              <input type="text" value={name} placeholder="Имя"
            onChange={(e) => setName(e.target.value)} autoComplete="name" />
              {touched && !nameOk && <span className="df-e">Укажите имя</span>}
            </label>

            <label className={'demo-field' + (touched && !phoneOk ? ' err' : '')}>
              <span className="df-l">Телефон<i>*</i></span>
              <input type="tel" value={phone} placeholder="+7 (___) ___-__-__"
            onChange={(e) => setPhone(fmtPhone(e.target.value))} autoComplete="tel" inputMode="tel" />
              {touched && !phoneOk && <span className="df-e">Введите корректный номер</span>}
            </label>

            <label className="demo-consent">
              <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
              <span className="dc-box" aria-hidden="true"></span>
              <span className="dc-t">Я даю <button type="button" className="dc-link" onClick={() => setView('policy')}>согласие на обработку персональных данных</button> (имени и телефона) для обработки этой заявки и связи со мной. Ознакомлен(а) с условиями обработки.</span>
            </label>

            <button type="submit" className={'btn btn-pri demo-submit' + (canSubmit && !sending ? '' : ' off')}>{sending ? 'Отправляем…' : 'Записаться'}</button>
            {err && <p className="demo-err">Не удалось отправить заявку. Попробуйте ещё раз или позвоните нам.</p>}
            <p className="demo-fine">Нажимая «Записаться», вы подтверждаете согласие. Данные не передаются третьим лицам для рекламы и не распространяются. Отозвать согласие — письмом на {OPERATOR.email}.</p>
          </form>
        }

        {view === 'policy' &&
        <div className="demo-body policy">
            <button className="demo-back" onClick={() => setView('form')}>← Назад к форме</button>
            <h3 className="policy-h">Согласие на обработку персональных данных</h3>
            <div className="policy-scroll">
              <p>Настоящее согласие даётся в соответствии с Федеральным законом от 27.07.2006 № 152-ФЗ «О персональных данных» свободно, своей волей и в своём интересе, является конкретным, предметным, информированным, сознательным и однозначным.</p>
              <dl className="policy-dl">
                <dt>Оператор</dt><dd>{OPERATOR.name}, ИНН {OPERATOR.inn}, {OPERATOR.address}. Контакт по вопросам ПДн: {OPERATOR.email}.</dd>
                <dt>Цель обработки</dt><dd>Обработка заявки на демонстрацию продукта BrewOS и связь с вами для её исполнения.</dd>
                <dt>Перечень персональных данных</dt><dd>Имя и номер телефона, указанные вами в форме.</dd>
                <dt>Перечень действий</dt><dd>Сбор, запись, систематизация, хранение, уточнение, использование, удаление и уничтожение — смешанным способом (с использованием средств автоматизации и без).</dd>
                <dt>Передача третьим лицам</dt><dd>Данные не распространяются и не передаются третьим лицам, кроме случаев, прямо предусмотренных законом. Распространение (публикация) персональных данных не осуществляется.</dd>
                <dt>Срок и хранение</dt><dd>Данные обрабатываются до достижения цели, но не дольше {OPERATOR.retention} с момента обращения, либо до отзыва согласия. Хранение и обработка — на территории Российской Федерации.</dd>
                <dt>Отзыв согласия</dt><dd>Согласие можно отозвать в любой момент, направив заявление на {OPERATOR.email}. Обращение рассматривается в срок не более 30 дней.</dd>
              </dl>
              <p className="policy-note">Подробнее — в Политике обработки персональных данных оператора.</p>
            </div>
            <button className="btn btn-pri demo-submit" onClick={() => {setAgree(true);setView('form');}}>Принимаю — вернуться к форме</button>
          </div>
        }

        {view === 'done' &&
        <div className="demo-body done">
            <div className="done-ic">
              <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
            </div>
            <h3>Заявка принята</h3>
            <p>Спасибо, {name.trim().split(' ')[0] || 'будем знакомы'}! Свяжемся с вами по указанному номеру в ближайшее рабочее время.</p>
            <button className="btn btn-pri demo-submit" onClick={onClose}>Готово</button>
          </div>
        }
      </div>
    </div>);

}

/* ========== APP ========== */
function App() {
  useReveal();
  const calcModel = useCalcModel();
  // «Записаться на демо» → сразу в Telegram-бот заявок (deep-link), без формы.
  const openDemo = (e) => {
    if (e) e.preventDefault();
    const url = (window.BREWOS_CONFIG && window.BREWOS_CONFIG.demoBotUrl)
      || 'https://t.me/Scan2Action_requiestbot?start=demo';
    window.open(url, '_blank', 'noopener');
  };
  return (
    <CalcCtx.Provider value={calcModel}>
      <div className="bgfx"><div className="g1"></div><div className="g2"></div><div className="grid"></div></div>

      {/* NAV */}
      <header className="nav">
        <div className="nav-in">
          <div className="logo"><span className="glyph">B</span><span>Brew<b>OS</b></span></div>
          <nav className="nav-links">
            <a href="#problem">Проблема</a>
            <a href="#calc">Калькулятор выгоды</a>
            <a href="#proof">Пруф</a>
            <a href="#method">Как считаем</a>
            <a href="#features">Возможности</a>
            <a href="#how">Как внедряем</a>
          </nav>
          <div className="nav-sp"></div>
          <span className="ph">для заводов напитков</span>
          {/* Кнопка «Войти» временно скрыта (вернуть — раскомментировать строку ниже) */}
          {/* <a href={LOGIN_URL} className="btn btn-ghost btn-sm" target="_blank" rel="noopener">Войти</a> */}
          <a href="#cta" className="btn btn-pri btn-sm" onClick={openDemo}>Записаться на демо</a>
        </div>
      </header>

      {/* HERO */}
      <section className="hero">
        <div className="wrap hero-in">
          <div>
            <div className="eyebrow"><span className="pip"></span>СИСТЕМА УПРАВЛЕНИЯ КРАФТОВЫМ ПРОИЗВОДСТВОМ</div>
            <h1>Ваша пивоварня зарабатывает <span className="hl">БОЛЬШЕ</span>,<br />когда каждый ЦКТ <span className="hl2">под контролем</span></h1>
            <p className="lede">BrewOS превращает цех брожения в управляемую систему: меньше простоев ЦКТ,
              меньше брака, прозрачная себестоимость партии. Прибыль, которая раньше утекала — остаётся у вас.</p>
            <div className="hero-cta">
              <a href="#calc" className="btn btn-pri btn-lg">Посчитать мою выгоду</a>
              <a href="#cta" className="btn btn-ghost btn-lg" onClick={openDemo}>Записаться на демо</a>
            </div>
            <div className="hero-note"><span className="dot"></span>Внедрение за 1 день · работает на любом ассортименте</div>
          </div>

          <div className="hero-vis">
            <div className="hero-tankwrap">
              <img className="hero-img" src="images/hero-tank.png" alt="Цилиндро-конический танк с пивом" />
              <div className="hero-float f1"><div className="ft-l">Состояние</div><div className="ft-v amber">FERMENTING</div></div>
              <div className="hero-float f2"><div className="ft-l">До розлива</div><div className="ft-v brand-c">6 дней</div></div>
              <div className="hero-float f3"><div className="ft-l">Загрузка цеха</div><div className="ft-v">84%</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* METRICS */}
      <section className="sec" style={{ paddingTop: 30 }}>
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="sec-tag">Результат</div>
            <h2 className="sec-h">Что меняется на пивоварне <span className="hl">за первый квартал</span></h2>
          </div>
          <div className="metrics">
            {METRICS.map((m, i) =>
            <div className="metric-c reveal" key={i} style={{ transitionDelay: i * 70 + 'ms' }}>
                <div className={'n' + (m.am ? ' am' : '')}>{m.n}</div>
                <div className="l">{m.l}</div>
                <div className="why">{m.why}</div>
              </div>
            )}
          </div>
          <div className="method-note">
            <span className="pip"></span>Диапазон пилота на крафтовом цехе 8 ЦКТ. Свои цифры — в калькуляторе ниже; модель открыта дальше.
          </div>
        </div>
      </section>

      {/* PROBLEM */}
      <section className="sec" id="problem">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="sec-tag">Где утекают деньги</div>
            <h2 className="sec-h">На крафтовом производстве прибыль <span className="hl">теряется тихо</span> — по литру за раз</h2>
            <p className="sec-sub">Пока цех живёт в голове технолога и таблицах Excel, эти потери невидимы.
              Их не замечают — но в конце года они складываются в миллионы.</p>
          </div>
          <div className="leaks">
            {LEAKS.map((l, i) =>
            <div className="leak reveal" key={i} style={{ transitionDelay: i * 80 + 'ms' }}>
                <div className="ic"><LIcon n={l.ic} /></div>
                <h4>{l.h}</h4><p>{l.p}</p>
                <div className="cost">↘ {l.cost}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CALCULATOR */}
      <section className="sec" id="calc" style={{ paddingTop: 10 }}>
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="sec-tag">Калькулятор выгоды</div>
            <h2 className="sec-h">Посчитайте, сколько <span className="hl">BrewOS</span> принесёт именно вашему заводу</h2>
          </div>
          <Calculator />
        </div>
      </section>

      <ProofStory />

      {/* FEATURES */}
      <section className="sec" id="features">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="sec-tag">Что внутри</div>
            <h2 className="sec-h">Весь цех брожения — <span className="hl">в одной системе</span></h2>
            <p className="sec-sub">Не очередная «таблица в облаке», а инструмент управления, заточенный под ЦКТ и партии напитков.</p>
          </div>
          <div className="feat">
            {FEATURES.map((f, i) =>
            <div className="fcard reveal" key={i} style={{ transitionDelay: i % 3 * 70 + 'ms' }}>
                <div className="ic"><LIcon n={f.ic} /></div>
                <h4>{f.h}</h4><p>{f.p}</p>
              </div>
            )}
          </div>

          {/* usage flow scheme */}
          <div className="flowsys reveal">
            <div className="pv-bar">
              <span className="dot" style={{ background: '#ff5f57' }}></span>
              <span className="dot" style={{ background: '#febc2e' }}></span>
              <span className="dot" style={{ background: '#28c840' }}></span>
              <span className="t">BrewOS · как партия проходит через систему</span>
            </div>
            <div className="flow-body">
              {FLOW.map((s, i, arr) =>
              <React.Fragment key={s.step}>
                  <div className="flow-node">
                    <div className="fn-act"><span className="fn-step">{s.step}</span>{s.stage}</div>
                    <div className="fn-mods">{s.mods}</div>
                    <div className="fn-screen">{renderFlowScreen(s)}</div>
                    <div className="fn-sys">{s.sys}</div>
                  </div>
                  {i < arr.length - 1 && <div className="flow-arrow"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></svg></div>}
                </React.Fragment>
              )}
            </div>
            <div className="flow-foot"><span className="pip"></span>Одна система ведёт партию через все цеха — варка, ЦКТ, розлив и склад связаны, без блокнотов и Excel.</div>
          </div>

          {/* module mockups: план розлива + задачи */}
          <div className="mod-intro reveal"><span className="sec-tag" style={{ margin: 0 }}>Не только танки</span>
            <span className="mod-intro-t">Планирование розлива и задачи смен — в той же системе</span>
          </div>
          <div className="modgallery">
            <div className="modwin reveal">
              <div className="pv-bar">
                <span className="dot" style={{ background: '#ff5f57' }}></span>
                <span className="dot" style={{ background: '#febc2e' }}></span>
                <span className="dot" style={{ background: '#28c840' }}></span>
                <span className="t">BrewOS · План розлива</span>
              </div>
              <div className="mod-body">
                <div className="pp-row head"><span>Дата</span><span>Партия</span><span>Объём</span><span>Статус</span></div>
                {[
                { when: 'сегодня', nm: 'Стаут имперский', tara: 'кега 30 л', vol: '4500 л', st: 'готов', cls: 'ready' },
                { when: 'сегодня', nm: 'Шорле груша', tara: 'банка 0,5', vol: '500 л', st: 'в работе', cls: 'work' },
                { when: 'завтра', nm: 'Пшеничное', tara: 'кега 30 л', vol: '2000 л', st: 'ждёт', cls: 'wait' },
                { when: 'пт', nm: 'Montmorency', tara: 'банка 0,33', vol: '1000 л', st: 'план', cls: 'plan' }].
                map((r, i) =>
                <div className="pp-row" key={i}>
                    <span className="pp-when">{r.when}</span>
                    <span className="pp-name">{r.nm}<em>{r.tara}</em></span>
                    <span className="pp-vol">{r.vol}</span>
                    <span className={'pp-st ' + r.cls}>{r.st}</span>
                  </div>
                )}
                <div className="pp-foot"><LIcon n="store" s={13} />На розлив сегодня <b>5000 л</b> · свободных кег <b>120</b></div>
              </div>
            </div>

            <div className="modwin reveal">
              <div className="pv-bar">
                <span className="dot" style={{ background: '#ff5f57' }}></span>
                <span className="dot" style={{ background: '#febc2e' }}></span>
                <span className="dot" style={{ background: '#28c840' }}></span>
                <span className="t">BrewOS · Задачи</span>
              </div>
              <div className="mod-body">
                {[
                { t: 'Замер плотности · ЦКТ №1', who: 'ТЛ', clr: '#34d399', meta: 'Технолог · сегодня 10:00', pri: 'срочно', done: false },
                { t: 'Мойка CIP · ЦКТ №3', who: 'СА', clr: '#38bdf8', meta: 'Смена А · сегодня', pri: null, done: false },
                { t: 'Подготовить розлив · Стаут', who: 'СБ', clr: '#a78bfa', meta: 'Смена Б · сегодня', pri: null, done: false },
                { t: 'Принять солод Pilsner', who: 'СН', clr: '#f59e0b', meta: 'Снабжение · вчера', pri: null, done: true }].
                map((r, i) =>
                <div className={'tk-row' + (r.done ? ' done' : '')} key={i}>
                    <span className={'tk-chk' + (r.done ? ' on' : '')}></span>
                    <div className="tk-main">
                      <div className="tk-t">{r.t}</div>
                      <div className="tk-meta">{r.meta}</div>
                    </div>
                    {r.pri && <span className="tk-pri">{r.pri}</span>}
                    <span className="tk-who" style={{ background: r.clr + '22', color: r.clr, borderColor: r.clr + '55' }}>{r.who}</span>
                  </div>
                )}
                <div className="tk-foot"><LIcon n="check" s={13} />3 активных · 1 выполнена сегодня</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* METHODOLOGY */}
      <section className="sec" id="method">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="sec-tag">Честно о расчётах</div>
            <h2 className="sec-h">Откуда берутся <span className="hl">эти цифры</span></h2>
            <p className="sec-sub">Никакой магии — четыре допущения, каждое можно проверить на своём цехе.
              Поэтому в калькуляторе мы даём диапазон, а не одну красивую цифру.</p>
          </div>
          <div className="method">
            {METHOD.map((m, i) =>
            <div className="mrow reveal" key={i} style={{ transitionDelay: i % 2 * 70 + 'ms' }}>
                <div className="mc"><LIcon n="check" s={17} /></div>
                <div><div className="mk">{m.k}</div><div className="mt">{m.t}</div></div>
              </div>
            )}
          </div>
          <div className="method-note">
            <span className="pip"></span>Мы сознательно берём консервативные допущения. На демо подставим ваши реальные данные и сверим цифры вместе.
          </div>
        </div>
      </section>
      <section className="sec" id="how">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="sec-tag">Как внедряем</div>
            <h2 className="sec-h">От первого экрана до прибыли — <span className="hl">три шага</span></h2>
          </div>
          <div className="steps">
            {STEPS.map((s, i) =>
            <div className="step reveal" key={i} style={{ transitionDelay: i * 80 + 'ms' }}>
                <div className="no">0{i + 1}</div>
                <h4>{s.h}</h4><p>{s.p}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta" id="cta">
        <div className="wrap">
          <div className="cta-box reveal">
            <div className="in">
              <h2>Получи свою выгоду с BrewOS
</h2>
              <p>Покажем BrewOS на примере вашего цеха и вместе посчитаем, сколько прибыли он вернёт.
                Без обязательств.</p>
              <div className="row">
                <a href="#" className="btn btn-pri btn-lg" onClick={openDemo}>Записаться на демо</a>
                <a href="#calc" className="btn btn-ghost btn-lg">Сначала посчитать выгоду</a>
              </div>
              <div className="hero-note" style={{ justifyContent: 'center', marginTop: 22 }}>
                <span className="dot"></span>Внедрение за 1 день · первый месяц — с поддержкой технолога BrewOS
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="wrap in">
          <div className="logo" style={{ fontSize: 16 }}><span className="glyph" style={{ width: 24, height: 24, fontSize: 14 }}>B</span><span>Brew<b>OS</b></span></div>
          <span className="sp"></span>
          <span>Система управления производством напитков</span>
          <span style={{ color: 'var(--ink-4)' }}>© 2026 BrewOS</span>
        </div>
      </footer>
    </CalcCtx.Provider>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);