// Portal UI mockups — drawn as inline markup.
// Each mockup fills its parent at a fixed aspect.

function Mockup({ title, url = "portal.thdata.ru/dashboard", children, aspect = "16/10" }) {
  return (
    <div className="mockup-frame" style={{ aspectRatio: aspect }}>
      <div className="mockup-bar">
        <span className="dot"></span>
        <span className="dot"></span>
        <span className="dot"></span>
        <span className="url">{url}</span>
      </div>
      <div className="mockup-body" style={{ padding: "0", height: "calc(100% - 32px)", overflow: "hidden", background: "#FAFBF9" }}>
        {children}
      </div>
    </div>
  );
}

function ChaosMapMockup() {
  const nodes = [
    {x: "8%", y: "12%", l: "CRM", i: "Users", c: "#44990C"},
    {x: "66%", y: "10%", l: "Задачи", i: "CheckSquare", c: "#2563EB"},
    {x: "36%", y: "30%", l: "Документы", i: "FileText", c: "#7C3AED"},
    {x: "6%", y: "54%", l: "Чаты", i: "MessageCircle", c: "#0891B2"},
    {x: "70%", y: "52%", l: "Файлы", i: "FolderOpen", c: "#F97316"},
    {x: "30%", y: "72%", l: "1С", i: "Database", c: "#EAB308"},
    {x: "62%", y: "78%", l: "Excel", i: "Sheet", c: "#16A34A"},
  ];
  return (
    <div className="visual-card chaos-visual">
      <svg viewBox="0 0 420 310" className="chaos-lines">
        <g stroke="#384142" strokeWidth="1" fill="none" strokeDasharray="4 7">
          <path d="M86,72 Q210,34 334,82" />
          <path d="M102,236 Q226,278 352,216" />
          <path d="M62,160 Q208,150 356,148" />
          <path d="M126,88 L290,226" />
          <path d="M288,86 L126,224" />
        </g>
      </svg>
      <div className="chaos-center">
        <Icon name="Workflow" size={26} color="#44990C" />
        <strong>нет единого контура</strong>
        <small>данные расходятся по отделам</small>
      </div>
      {nodes.map(s => (
        <div key={s.l} className="chaos-node" style={{ left: s.x, top: s.y }}>
          <span style={{ color: s.c }}><Icon name={s.i} size={14} color="currentColor" /></span>{s.l}
        </div>
      ))}
      <div className="cost-tag cost-tag-a">
        <b>−15 000 ₽/мес</b>
        <span>дубли подписок</span>
      </div>
      <div className="cost-tag cost-tag-b">
        <b>−80 000 ₽/мес</b>
        <span>ручная работа</span>
      </div>
    </div>
  );
}

function SolutionStackMockup({ active = 0 }) {
  const stages = [
    { title: "Единый портал", icon: "LayoutDashboard", value: "12 модулей", text: "задачи, CRM, документы, файлы" },
    { title: "Автоматизация", icon: "Workflow", value: "−40%", text: "ручных согласований и пересылок" },
    { title: "ИИ-сценарии", icon: "Sparkles", value: "2 сек", text: "ответ по базе знаний и документам" },
  ];
  return (
    <div className="solution-visual">
      <div className="solution-orbit">
        {stages.map((s, i) => (
          <div key={s.title} className={`solution-stage solution-stage-${i} ${active === i ? "active" : ""}`}>
            <span><Icon name={s.icon} size={18} color="currentColor" /></span>
            <strong>{s.title}</strong>
          </div>
        ))}
        <svg viewBox="0 0 520 360" className="solution-lines">
          <path d="M100 92 C210 28 328 32 430 96" />
          <path d="M92 250 C204 326 330 326 440 250" />
          <path d="M112 102 C164 186 214 232 260 255 C320 226 376 176 424 102" />
        </svg>
      </div>
      <div className="solution-dashboard">
        <div className="solution-sidebar">
          <b>TH</b>
          <span></span><span></span><span></span><span></span>
        </div>
        <div className="solution-main">
          <div className="solution-head">
            <div>
              <small>Рабочий контур</small>
              <strong>{stages[active].title}</strong>
            </div>
            <span>{stages[active].value}</span>
          </div>
          <div className="solution-flow">
            {["Заявка", "Согласование", "Документ", "Отчёт"].map((item, i) => (
              <div key={item} className={i <= active + 1 ? "done" : ""}>
                <Icon name={i <= active + 1 ? "Check" : "Circle"} size={13} color="currentColor" />
                {item}
              </div>
            ))}
          </div>
          <div className="solution-card">
            <Icon name={stages[active].icon} size={18} color="#44990C" />
            <div>
              <strong>{stages[active].value}</strong>
              <span>{stages[active].text}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- Dashboard (всё-в-одном портал) ---
function DashboardMockup() {
  return (
    <Mockup url="portal.thdata.ru/dashboard">
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", height: "100%" }}>
        {/* Sidebar */}
        <div style={{ background: "#384142", padding: "16px 12px", display: "flex", flexDirection: "column", gap: 4 }}>
          <div style={{ color: "#C0DDAE", fontSize: 10, fontWeight: 700, letterSpacing: "0.1em", padding: "0 8px 10px", opacity: 0.6 }}>МЕНЮ</div>
          {[
            {i: "LayoutDashboard", l: "Дашборд", a: true},
            {i: "Users", l: "CRM"},
            {i: "FileText", l: "Документы"},
            {i: "MessageCircle", l: "Чат"},
            {i: "Calendar", l: "HR и отпуска"},
            {i: "FolderOpen", l: "Файлы"},
            {i: "BarChart3", l: "Отчётность"},
            {i: "Bot", l: "AI-ассистент"},
          ].map(it => (
            <div key={it.l} style={{
              display: "flex", alignItems: "center", gap: 8, padding: "8px 10px",
              borderRadius: 8, fontSize: 12,
              background: it.a ? "rgba(192,221,174,0.15)" : "transparent",
              color: it.a ? "#C0DDAE" : "rgba(192,221,174,0.7)",
              fontWeight: it.a ? 600 : 400,
            }}>
              <Icon name={it.i} size={14} color="currentColor" />
              {it.l}
            </div>
          ))}
        </div>
        {/* Main */}
        <div style={{ padding: 16, overflow: "hidden" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 11, color: "#6B7280" }}>Понедельник, 24 апреля</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: "#384142" }}>Добрый день, Анна</div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <span style={{ width: 26, height: 26, borderRadius: 8, background: "rgba(68,153,12,0.1)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#44990C" }}>
                <Icon name="Bell" size={13} color="currentColor" />
              </span>
              <span style={{ width: 26, height: 26, borderRadius: "50%", background: "#C0DDAE", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#44990C", fontSize: 11, fontWeight: 700 }}>АК</span>
            </div>
          </div>
          {/* KPI */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 12 }}>
            {[
              {l: "Задач в работе", v: "24", d: "+3"},
              {l: "Сделок открыто", v: "₽ 4.2М", d: "+18%"},
              {l: "Документы на согл.", v: "7", d: "−2"},
            ].map(k => (
              <div key={k.l} style={{ background: "white", border: "1px solid #C0DDAE", borderRadius: 10, padding: "10px 12px" }}>
                <div style={{ fontSize: 9, color: "#6B7280", marginBottom: 2 }}>{k.l}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                  <div style={{ fontSize: 16, fontWeight: 700, color: "#384142" }}>{k.v}</div>
                  <div style={{ fontSize: 10, color: "#44990C", fontWeight: 600 }}>{k.d}</div>
                </div>
              </div>
            ))}
          </div>
          {/* Two panels */}
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 8 }}>
            <div style={{ background: "white", border: "1px solid #C0DDAE", borderRadius: 10, padding: 12 }}>
              <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8, color: "#384142" }}>Активность команды</div>
              <svg viewBox="0 0 200 60" style={{ width: "100%", height: 60 }}>
                <defs><linearGradient id="gArea" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="#44990C" stopOpacity="0.35" />
                  <stop offset="100%" stopColor="#44990C" stopOpacity="0" />
                </linearGradient></defs>
                <path d="M0,50 L20,40 L40,45 L60,30 L80,35 L100,20 L120,25 L140,15 L160,22 L180,10 L200,18 L200,60 L0,60 Z" fill="url(#gArea)" />
                <path d="M0,50 L20,40 L40,45 L60,30 L80,35 L100,20 L120,25 L140,15 L160,22 L180,10 L200,18" fill="none" stroke="#44990C" strokeWidth="1.5" />
              </svg>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 9, color: "#9CA3AF", marginTop: 4 }}>
                <span>ПН</span><span>ВТ</span><span>СР</span><span>ЧТ</span><span>ПТ</span><span>СБ</span><span>ВС</span>
              </div>
            </div>
            <div style={{ background: "white", border: "1px solid #C0DDAE", borderRadius: 10, padding: 12 }}>
              <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8, color: "#384142" }}>Задачи на сегодня</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {["Согласовать договор №214", "Созвон с «Альфа-Продукт»", "Выгрузить отчёт за март"].map((t,i) => (
                  <div key={t} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10, color: "#384142" }}>
                    <span style={{ width: 10, height: 10, borderRadius: 3, border: `1.5px solid ${i===0?"#44990C":"#C0DDAE"}`, background: i===0?"#44990C":"white" }}></span>
                    <span style={{ textDecoration: i===0?"line-through":"none", color: i===0?"#9CA3AF":"inherit" }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Mockup>
  );
}

// --- Document flow ---
function DocflowMockup() {
  return (
    <Mockup url="portal.thdata.ru/docs">
      <div style={{ padding: 16, height: "100%", background: "#FAFBF9" }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#384142", marginBottom: 4 }}>Согласование: Договор №2026-0412</div>
        <div style={{ fontSize: 10, color: "#6B7280", marginBottom: 14 }}>ООО «Альфа-Продукт» · 1 280 000 ₽</div>
        {/* Pipeline */}
        <div style={{ display: "flex", alignItems: "center", gap: 4, marginBottom: 16 }}>
          {[
            {s: "Автор", d: "А. Козлова", state: "done"},
            {s: "Юрист", d: "М. Петров", state: "done"},
            {s: "Финансы", d: "И. Смирнова", state: "active"},
            {s: "Директор", d: "В. Иванов", state: "wait"},
            {s: "Подпись", d: "", state: "wait"},
          ].map((st, i, arr) => (
            <React.Fragment key={st.s}>
              <div style={{ flex: 1, textAlign: "center" }}>
                <div style={{
                  width: 28, height: 28, borderRadius: "50%", margin: "0 auto 6px",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  background: st.state === "done" ? "#44990C" : st.state === "active" ? "white" : "white",
                  color: st.state === "done" ? "white" : st.state === "active" ? "#44990C" : "#C0DDAE",
                  border: st.state === "active" ? "2px solid #44990C" : st.state === "wait" ? "1.5px solid #C0DDAE" : "none",
                  fontSize: 11, fontWeight: 700,
                }}>
                  {st.state === "done" ? <Icon name="Check" size={14} color="white" strokeWidth={3} /> : (i+1)}
                </div>
                <div style={{ fontSize: 10, fontWeight: 600, color: "#384142" }}>{st.s}</div>
                <div style={{ fontSize: 9, color: "#6B7280" }}>{st.d}</div>
              </div>
              {i < arr.length-1 && <div style={{ flex: 0.3, height: 2, background: st.state === "done" ? "#44990C" : "#C0DDAE", marginBottom: 22, borderRadius: 2 }}></div>}
            </React.Fragment>
          ))}
        </div>
        {/* Comments */}
        <div style={{ background: "white", border: "1px solid #C0DDAE", borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 8, color: "#384142" }}>Комментарии</div>
          {[
            {a: "М. Петров", t: "Юрист", m: "Формулировку п. 4.2 исправил — согласовано."},
            {a: "И. Смирнова", t: "Финансы", m: "Проверяю условия оплаты, вернусь сегодня до 18:00."},
          ].map((c, i) => (
            <div key={i} style={{ display: "flex", gap: 8, marginBottom: i === 0 ? 8 : 0 }}>
              <div style={{ flexShrink: 0, width: 22, height: 22, borderRadius: "50%", background: "#C0DDAE", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700, color: "#44990C" }}>
                {c.a.split(" ").map(w=>w[0]).join("")}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, fontWeight: 600, color: "#384142" }}>{c.a} <span style={{ color: "#9CA3AF", fontWeight: 400 }}>· {c.t}</span></div>
                <div style={{ fontSize: 10, color: "#6B7280", marginTop: 2 }}>{c.m}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Mockup>
  );
}

// --- AI chat ---
function AiChatMockup() {
  return (
    <Mockup url="portal.thdata.ru/ai">
      <div style={{ display: "grid", gridTemplateColumns: "1fr", height: "100%", background: "#FAFBF9" }}>
        <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10, overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, paddingBottom: 8, borderBottom: "1px solid #C0DDAE" }}>
            <div style={{ width: 26, height: 26, borderRadius: 8, background: "#44990C", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="Bot" size={14} color="white" />
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 700, color: "#384142" }}>AI-ассистент</div>
              <div style={{ fontSize: 9, color: "#44990C", display: "flex", alignItems: "center", gap: 4 }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#44990C" }}></span>
                Онлайн · отвечает за 2 сек
              </div>
            </div>
          </div>
          {/* messages */}
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <div style={{ background: "#384142", color: "white", padding: "8px 12px", borderRadius: "14px 14px 2px 14px", maxWidth: "75%", fontSize: 11 }}>
              Составь коммерческое предложение для «Альфа-Продукт» на основе наших стандартных тарифов
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <div style={{ flexShrink: 0, width: 22, height: 22, borderRadius: 7, background: "rgba(68,153,12,0.12)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="Sparkles" size={12} color="#44990C" />
            </div>
            <div style={{ background: "white", border: "1px solid #C0DDAE", padding: "10px 12px", borderRadius: "14px 14px 14px 2px", maxWidth: "78%", fontSize: 11, color: "#384142", lineHeight: 1.5 }}>
              Готов черновик КП на базе тарифа Business и вашего каталога услуг. Что скорректировать?
              <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 4 }}>
                {["Показать документ", "Изменить скидку", "Добавить модули"].map(a => (
                  <span key={a} style={{ fontSize: 10, color: "#44990C", fontWeight: 500, padding: "4px 8px", border: "1px solid #C0DDAE", borderRadius: 6, alignSelf: "flex-start" }}>→ {a}</span>
                ))}
              </div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <div style={{ flexShrink: 0, width: 22, height: 22, borderRadius: 7, background: "rgba(68,153,12,0.12)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="Sparkles" size={12} color="#44990C" />
            </div>
            <div style={{ background: "white", border: "1px solid #C0DDAE", padding: "10px 12px", borderRadius: "14px 14px 14px 2px", fontSize: 11, color: "#384142" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10, color: "#6B7280" }}>
                <Icon name="FileText" size={12} color="#44990C" />
                КП_Альфа-Продукт_2026-04.pdf · 2 стр.
              </div>
            </div>
          </div>
          {/* input */}
          <div style={{ marginTop: "auto", display: "flex", gap: 6, alignItems: "center", padding: "6px 10px", background: "white", border: "1px solid #C0DDAE", borderRadius: 10 }}>
            <div style={{ flex: 1, fontSize: 11, color: "#9CA3AF" }}>Спросите AI…</div>
            <div style={{ width: 24, height: 24, borderRadius: 6, background: "#44990C", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="ArrowUp" size={13} color="white" strokeWidth={2.5} />
            </div>
          </div>
        </div>
      </div>
    </Mockup>
  );
}

// --- Module placeholder: small tile with icon + label list ---
function ModuleTilesMockup({ tiles, highlight = 0 }) {
  const groups = [
    { label: "Клиенты", icon: "Users", count: "6" },
    { label: "Документы", icon: "FileText", count: "6" },
    { label: "Команда", icon: "UsersRound", count: "6" },
    { label: "AI", icon: "Sparkles", count: "6" },
  ];
  return (
    <div className="portal-panel module-visual">
      <div className="portal-panel-head">
        <div>
          <div className="panel-kicker">Каталог модулей</div>
          <strong>Содержимое портала по направлениям</strong>
        </div>
        <span>24 модуля</span>
      </div>
      <div className="module-visual-grid">
        <div className="module-visual-tabs">
          {groups.map((g, i) => (
            <div key={g.label} className={i === highlight ? "active" : ""}>
              <Icon name={g.icon} size={16} color="currentColor" />
              <span>{g.label}</span>
              <b>{g.count}</b>
            </div>
          ))}
        </div>
        <div className="module-visual-content">
          <div className="module-content-head">
            <span>Активная вкладка</span>
            <b>{groups[highlight]?.label || groups[0].label}</b>
          </div>
          <div className="module-mini-cards">
            {tiles.map((t, i) => (
              <div key={t.l} className={i < 2 ? "featured" : ""}>
                <Icon name={t.i} size={16} color="currentColor" />
                <strong>{t.l}</strong>
                <span>{t.d}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// --- Savings report mockup (block 5) ---
function SavingsMockup() {
  return (
    <div className="portal-panel savings-visual">
      <div className="portal-panel-head">
        <div>
          <div className="panel-kicker">Финансовая модель</div>
          <strong>Экономия за 12 месяцев</strong>
        </div>
        <span>−42%</span>
      </div>
      <div className="savings-summary">
        <div>
          <small>До внедрения</small>
          <strong>438 000 ₽</strong>
        </div>
        <Icon name="ArrowRight" size={20} color="#44990C" />
        <div>
          <small>После внедрения</small>
          <strong>254 000 ₽</strong>
        </div>
      </div>
      <div className="savings-chart">
        {[
          { l: "SaaS-подписки", before: 92, after: 45 },
          { l: "Ручные операции", before: 78, after: 34 },
          { l: "Документы", before: 64, after: 28 },
        ].map(row => (
          <div key={row.l} className="savings-row">
            <span>{row.l}</span>
            <div className="bar before"><i style={{ width: `${row.before}%` }}></i></div>
            <div className="bar after"><i style={{ width: `${row.after}%` }}></i></div>
          </div>
        ))}
      </div>
      <div className="savings-breakdown">
        <div className="savings-breakdown-title">Из чего складывается эффект</div>
        <div>
          {[
            {l: "Отменили лишние сервисы", v: "86 000 ₽"},
            {l: "Автоматизировали документы", v: "52 000 ₽"},
            {l: "Подключили AI к заявкам", v: "46 000 ₽"},
          ].map(row => (
            <div key={row.l}>
              <span>{row.l}</span>
              <b>{row.v}</b>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// --- Process / roadmap mockup (block 7) ---
function ProcessMockup() {
  return (
    <Mockup url="portal.thdata.ru/projects/roadmap" aspect="16/11">
      <div style={{ padding: 18, height: "100%", background: "#FAFBF9" }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#384142", marginBottom: 4 }}>План проекта: внедрение портала</div>
        <div style={{ fontSize: 10, color: "#6B7280", marginBottom: 16 }}>12 недель · команда 4 человека</div>
        {/* Gantt rows */}
        <div style={{ background: "white", border: "1px solid #C0DDAE", borderRadius: 12, padding: 12, position: "relative" }}>
          {/* header */}
          <div style={{ display: "grid", gridTemplateColumns: "120px repeat(12, 1fr)", gap: 2, marginBottom: 8, fontSize: 9, color: "#9CA3AF", fontWeight: 500 }}>
            <div></div>
            {Array.from({length: 12}).map((_, i) => <div key={i} style={{ textAlign: "center" }}>{i+1}</div>)}
          </div>
          {[
            {l: "1. Аудит", s: 0, w: 1, c: "#44990C"},
            {l: "2. План и смета", s: 1, w: 1, c: "#44990C"},
            {l: "3. Настройка", s: 2, w: 3, c: "#82BB5D"},
            {l: "4. Миграция данных", s: 3, w: 3, c: "#82BB5D"},
            {l: "5. Интеграции", s: 4, w: 4, c: "#82BB5D"},
            {l: "6. Обучение", s: 8, w: 2, c: "#C0DDAE"},
            {l: "7. Сопровождение", s: 10, w: 2, c: "#C0DDAE"},
          ].map((row, i) => (
            <div key={row.l} style={{ display: "grid", gridTemplateColumns: "120px repeat(12, 1fr)", gap: 2, alignItems: "center", marginBottom: 6, fontSize: 10 }}>
              <div style={{ color: "#384142", fontWeight: 500 }}>{row.l}</div>
              {Array.from({length: 12}).map((_, j) => {
                const inBar = j >= row.s && j < row.s + row.w;
                const first = j === row.s;
                const last  = j === row.s + row.w - 1;
                return <div key={j} style={{ height: 18, background: inBar ? row.c : "transparent", borderRadius: first && last ? 4 : first ? "4px 0 0 4px" : last ? "0 4px 4px 0" : 0 }}></div>;
              })}
            </div>
          ))}
          {/* today marker */}
          <div style={{ position: "absolute", left: `calc(120px + 12px + (100% - 144px) * 0.35)`, top: 32, bottom: 12, width: 2, background: "#EF4444", borderRadius: 1 }}>
            <div style={{ position: "absolute", top: -6, left: -16, background: "#EF4444", color: "white", fontSize: 8, fontWeight: 700, padding: "2px 6px", borderRadius: 4 }}>Сегодня</div>
          </div>
        </div>
      </div>
    </Mockup>
  );
}

function CasePreviewMockup({ industry, slug }) {
  const presets = {
    "proizvodstvo-1": { icon: "Factory", title: "Производство", rows: ["Заявки цехов", "Склад и закупки", "План-факт"], accent: "#44990C" },
    "retail-1": { icon: "ShoppingBag", title: "Ритейл", rows: ["Единая CRM", "Повторные продажи", "Кассовые отчёты"], accent: "#2563EB" },
    "uslugi-1": { icon: "BriefcaseBusiness", title: "Услуги", rows: ["AI-приём заявок", "Шаблоны ответов", "Контроль SLA"], accent: "#7C3AED" },
    "saas-1": { icon: "MonitorCheck", title: "B2B SaaS", rows: ["Онбординг", "Health score", "Автозадачи CSM"], accent: "#0891B2" },
    "proizvodstvo-2": { icon: "FileSignature", title: "Документооборот", rows: ["Договоры", "1С и ЭДО", "Подписи"], accent: "#F97316" },
    "retail-2": { icon: "ChartNoAxesCombined", title: "AI-прогноз", rows: ["Спрос 14 дней", "Запасы", "Поставки"], accent: "#16A34A" },
  };
  const data = presets[slug] || { icon: "LineChart", title: industry, rows: ["Процесс", "Автоматизация", "Отчёт"], accent: "#44990C" };
  return (
    <div className="case-preview" style={{ "--case-accent": data.accent }}>
      <div className="case-preview-top">
        <span><Icon name={data.icon} size={15} color="var(--case-accent)" /> {data.title}</span>
        <b>после внедрения</b>
      </div>
      <div className="case-preview-body">
        <div className="mini-sidebar">
          <span></span><span></span><span></span><span></span>
        </div>
        <div className="mini-board">
          {data.rows.map((r, i) => (
            <div key={r} className="mini-row">
              <span>{r}</span>
              <i style={{ width: `${78 - i * 12}%` }}></i>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function TestimonialVisual() {
  return (
    <div className="testimonial-visual">
      <div className="testimonial-header">
        <span><Icon name="MessagesSquare" size={16} color="#44990C" /> Клиентский контур</span>
        <b>+24%</b>
      </div>
      <div className="testimonial-chat">
        <div className="chat-line left">Документы теперь согласуются в портале</div>
        <div className="chat-line right">Срок упал с 5 дней до 1 дня</div>
        <div className="chat-line left">AI сам готовит черновик ответа</div>
      </div>
      <div className="testimonial-score">
        <span>Скорость процессов</span>
        <i><b></b></i>
      </div>
    </div>
  );
}

Object.assign(window, {
  Mockup, ChaosMapMockup, SolutionStackMockup, DashboardMockup, DocflowMockup, AiChatMockup,
  ModuleTilesMockup, SavingsMockup, ProcessMockup, CasePreviewMockup, TestimonialVisual,
});