/* ──────────────────────────────────────────────────────────────
   V2 — Interactive Use Cases block (tabs + scenario visualizations)
   Replaces the static use-case grid. Same content area on each tab:
   left  = текст + bullets (scenario card)
   right = workflow visualization

   Built so it works at both desktop (1440 — 2 columns)
   and mobile (390 — stacked) via container queries / wrapper class.
────────────────────────────────────────────────────────────── */

const UC_TABS = [
  { id: "expert",    label: "Эксперт" },
  { id: "school",    label: "Онлайн-школа" },
  { id: "salon",     label: "Салон / услуги" },
  { id: "shop",      label: "Мини-магазин" },
  { id: "digital",   label: "Цифровые услуги" },
  { id: "multi",     label: "Несколько проектов", isNew: true },
  { id: "vibe",      label: "Разработчик / vibe-coder", isNew: true },
];

/* shared bullets — checkmark list */
const UcBullets = ({ items }) => (
  <ul className="ucv2-bullets">
    {items.map((t, i) => (
      <li key={i}>
        <span className="ucv2-check">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 6.5l2.5 2.5L10 3" stroke="#1F8F3D" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
        <span dangerouslySetInnerHTML={{ __html: t }}/>
      </li>
    ))}
  </ul>
);

/* ─────────── per-scenario content ─────────── */

const UC_CONTENT = {
  expert: {
    title: "Эксперт",
    desc: "Ты — продукт. Продаёшь консультации, мини-курсы, подписки. AI ведёт клиента от первого вопроса до оплаты от твоего имени.",
    bullets: [
      "AI отвечает по&nbsp;твоей методике 24/7",
      "Запись на&nbsp;консультацию с&nbsp;предоплатой",
      "Подписка на&nbsp;закрытый канал/чат",
      "Прогрев новых лидов между сессиями",
    ],
    vizLabel: "workflow",
    vizTitle: "Конверсия в платную консультацию",
    viz: ({ scale = 1 }) => (
      <div className="ucv2-viz-stack">
        <div className="ucv2-chat-mini">
          <div className="ucv2-msg client">«Хочу разобрать стратегию с тобой»</div>
          <div className="ucv2-msg ai">
            Привет 👋 У меня 2 формата: 60 мин — 8 000 ₽, диагностика — 3 000 ₽
            <div className="ucv2-msg-meta">AI · 0.4s</div>
          </div>
          <div className="ucv2-msg client">давай 60 мин</div>
          <div className="ucv2-sys">
            <span>📅</span> Календарь · среда 15:00 → оплата ЮKassa
          </div>
          <div className="ucv2-sys ok">
            <span>✓</span> Оплачено · 8 000 ₽ · подтверждение клиенту
          </div>
        </div>
      </div>
    )
  },

  school: {
    title: "Онлайн-школа",
    desc: "Каталог программ, оплата, авто-выдача доступа в&nbsp;LMS, удержание подписчиков.",
    bullets: [
      "Каталог курсов прямо в&nbsp;боте",
      "Мгновенная выдача доступа после оплаты",
      "Интеграция с&nbsp;GetCourse / любой LMS",
      "AI-коуч возвращает «забросивших»",
    ],
    vizLabel: "workflow",
    vizTitle: "От заявки до доступа в курс",
    viz: ({ scale = 1 }) => (
      <div className="ucv2-viz-stack">
        <div className="ucv2-flow">
          {[
            ["📝","Заявка","Имя · цель"],
            ["💳","Оплата","ЮKassa"],
            ["🔓","Доступ","в LMS"],
            ["💬","Прогрев","AI-коуч"]
          ].map(([i,t,s], idx) => (
            <React.Fragment key={idx}>
              <div className="ucv2-flow-step">
                <div className="ucv2-flow-icon">{i}</div>
                <div className="ucv2-flow-t">{t}</div>
                <div className="ucv2-flow-s">{s}</div>
              </div>
              {idx < 3 && <div className="ucv2-flow-arr">→</div>}
            </React.Fragment>
          ))}
        </div>
        <div className="ucv2-chat-mini" style={{ marginTop: 14 }}>
          <div className="ucv2-msg client">купил «Дизайн с нуля»</div>
          <div className="ucv2-sys ok"><span>✓</span> Доступ в&nbsp;LMS выдан · урок 1 разблокирован</div>
          <div className="ucv2-msg ai">Поздравляю с покупкой! Готов начать? 🎓</div>
        </div>
      </div>
    )
  },

  salon: {
    title: "Салон / услуги",
    desc: "Запись, напоминания, предоплата за&nbsp;услугу, повторные касания после визита.",
    bullets: [
      "Запись на&nbsp;слот в&nbsp;диалоге",
      "Предоплата 20–100% по&nbsp;настройке",
      "Напоминания за&nbsp;день и&nbsp;за&nbsp;час",
      "Возврат клиента через 30 дней",
    ],
    vizLabel: "workflow",
    vizTitle: "Запись и удержание",
    viz: ({ scale = 1 }) => (
      <div className="ucv2-viz-stack">
        <div className="ucv2-cal">
          <div className="ucv2-cal-head">Маникюр · мастер Аня</div>
          <div className="ucv2-cal-row">
            {["пн","вт","ср","чт","пт"].map((d, i) => (
              <div key={i} className={`ucv2-cal-day ${i===2?"sel":""}`}>
                <span className="d">{d}</span>
                <span className="dn">{12+i}</span>
              </div>
            ))}
          </div>
          <div className="ucv2-cal-slots">
            <span className="ucv2-cal-slot">11:00</span>
            <span className="ucv2-cal-slot active">14:30</span>
            <span className="ucv2-cal-slot">16:00</span>
            <span className="ucv2-cal-slot busy">18:00</span>
          </div>
        </div>
        <div className="ucv2-chat-mini" style={{ marginTop: 14 }}>
          <div className="ucv2-sys"><span>📅</span> Запись · ср 14:30 · предоплата 500 ₽</div>
          <div className="ucv2-sys ok"><span>✓</span> Оплачено. Завтра в 13:30 напомню.</div>
        </div>
      </div>
    )
  },

  shop: {
    title: "Мини-магазин",
    desc: "Каталог из&nbsp;5–100 позиций. Корзина, оплата, доставка — в&nbsp;одном диалоге.",
    bullets: [
      "Карточки товаров с&nbsp;фото и&nbsp;ценой",
      "Корзина и&nbsp;промокоды",
      "Доставка / самовывоз — выбор в&nbsp;боте",
      "Авто-уведомления о&nbsp;статусе заказа",
    ],
    vizLabel: "workflow",
    vizTitle: "Каталог → корзина → оплата",
    viz: ({ scale = 1 }) => (
      <div className="ucv2-viz-stack">
        <div className="ucv2-products">
          {[
            ["☕","Эспрессо","180 ₽","#8B4513"],
            ["🥐","Круассан","220 ₽","#D4A574"],
            ["🍰","Чизкейк","380 ₽","#E8C5B0"],
          ].map(([i,n,p,c], idx) => (
            <div key={idx} className="ucv2-product">
              <div className="ucv2-product-img" style={{ background: c }}>{i}</div>
              <div className="ucv2-product-name">{n}</div>
              <div className="ucv2-product-price">{p}</div>
            </div>
          ))}
        </div>
        <div className="ucv2-cart">
          <div className="ucv2-cart-row">
            <span>Корзина · 3 товара</span>
            <span className="ucv2-cart-sum">780 ₽</span>
          </div>
          <div className="ucv2-sys ok"><span>✓</span> Оплачено · собираем заказ</div>
        </div>
      </div>
    )
  },

  digital: {
    title: "Цифровые услуги",
    desc: "Купил → мгновенно получил. Файлы, лицензии, ссылки на&nbsp;доступ. Без участия человека.",
    bullets: [
      "Авто-выдача файлов после оплаты",
      "Лицензионные ключи на&nbsp;генерацию",
      "Доступы к&nbsp;закрытым ресурсам",
      "Доступы по&nbsp;подписке с&nbsp;автопродлением",
    ],
    vizLabel: "workflow",
    vizTitle: "Оплатил → получил",
    viz: ({ scale = 1 }) => (
      <div className="ucv2-viz-stack">
        <div className="ucv2-chat-mini">
          <div className="ucv2-msg client">беру шаблон Notion</div>
          <div className="ucv2-msg ai">Ссылка на оплату ↗ · 990 ₽</div>
          <div className="ucv2-sys ok"><span>💳</span> Оплачено · ЮKassa · 990 ₽</div>
          <div className="ucv2-file">
            <div className="ucv2-file-ico">📄</div>
            <div className="ucv2-file-info">
              <div className="ucv2-file-name">notion-template-v3.zip</div>
              <div className="ucv2-file-meta">2.4 MB · доступ навсегда</div>
            </div>
            <div className="ucv2-file-dl">↓</div>
          </div>
          <div className="ucv2-msg ai">Файл выдан · удачи! 🎉</div>
        </div>
      </div>
    )
  },

  multi: {
    title: "Несколько проектов",
    desc: "Агентство + личный бренд? Несколько направлений? Все проекты — в&nbsp;одной папке Telegram. Переключение в&nbsp;один тап, цифры везде растут параллельно.",
    bullets: [
      "Папка «Мои проекты» в&nbsp;Telegram",
      "Каждый проект — своя супергруппа",
      "Каждый — со&nbsp;своим AI и&nbsp;каталогом",
      "Дашборд по&nbsp;всем — в&nbsp;одном экране",
    ],
    vizLabel: "telegram folder",
    vizTitle: "Несколько проектов · один экран",
    viz: ({ scale = 1 }) => (
      <div className="ucv2-folder">
        <div className="ucv2-folder-tabs">
          <div className="ucv2-folder-tab active">
            <span className="ucv2-folder-tab-i">🗂</span>
            Операторская
            <span className="ucv2-folder-tab-c">5</span>
          </div>
          <div className="ucv2-folder-tab">
            <span className="ucv2-folder-tab-i">💬</span>
            Открытые линии
            <span className="ucv2-folder-tab-c muted">5</span>
          </div>
        </div>
        <div className="ucv2-folder-grid">
          <div className="ucv2-folder-col">
            {[
              ["#3B5BFC","🏢","Дизайн-агентство","Заказы 24 · Оплаты 7","104 930 ₽","3"],
              ["#16a085","🧘","Школа йоги","Заказы 12 · Оплаты 9","950 ₽","1"],
              ["#8B4513","☕","Кофейня","Заказы 18 · Оплаты 14","800 ₽","5"],
              ["#d63384","⭐","Личный бренд","Заказы 56 · Оплаты 56","279 440 ₽",""],
              ["#6c5ce7","🎓","Менторство","Заказы 11 · Оплаты 8","64 000 ₽",""],
            ].map(([c, em, n, k, sum, b], i) => (
              <div key={i} className={`ucv2-prj ${i===0?'sel':''}`}>
                <div className="ucv2-prj-ava" style={{ background: c }}>{em}</div>
                <div className="ucv2-prj-text">
                  <div className="ucv2-prj-name">{n}</div>
                  <div className="ucv2-prj-meta">{k}</div>
                  <div className="ucv2-prj-sum">{sum}</div>
                </div>
                {b && <span className="ucv2-prj-badge">{b}</span>}
              </div>
            ))}
          </div>
          <div className="ucv2-folder-col">
            <div className="ucv2-prj-header">
              <div className="ucv2-prj-ava sm" style={{ background: "#3B5BFC" }}>🏢</div>
              <div>
                <div className="ucv2-prj-name" style={{ color: "white" }}>Дизайн-агентство · операторская</div>
                <div className="ucv2-prj-meta">5 топиков · live</div>
              </div>
            </div>
            {[
              ["#2aabee","📥","Заказы","24","@ivanov: «сколько стоит курс?»","+3"],
              ["#16a085","💳","Оплаты","7 · 104 930 ₽","YooKassa · 14 990 ₽","+2"],
              ["#6c5ce7","👥","Активные","12","AI: 9 · оператор: 3",""],
              ["#0f1419","🤖","AI","198 · 1240","диалогов · ответов · 75% квалификация",""],
              ["#f39c12","⭐","Отзывы","41","средняя 4.8",""],
            ].map(([c, em, n, count, snip, b], i) => (
              <div key={i} className="ucv2-topic">
                <div className="ucv2-prj-ava sm" style={{ background: c }}>{em}</div>
                <div className="ucv2-prj-text">
                  <div className="ucv2-topic-name">{n} <span className="ucv2-topic-count">{count}</span></div>
                  <div className="ucv2-prj-meta">{snip}</div>
                </div>
                {b && <span className="ucv2-prj-badge sm">{b}</span>}
              </div>
            ))}
          </div>
        </div>
        <div className="ucv2-folder-foot">
          <span className="ucv2-pulse-dot"/>
          Тыкай между папками · операторская: KPI по&nbsp;топикам
        </div>
      </div>
    )
  },

  vibe: {
    title: "Разработчик / vibe-coder",
    desc: "Веду 5 пет-проектов и не успеваю отвечать в чатах. TelegaFirst даёт продажи, подписки и техподдержку из коробки. А через MCP-сервер AI-агент достаёт реальные логи твоего сервиса по userId — без отписок.",
    bullets: [
      "Каждый проект монетизирован с&nbsp;дня 1",
      "Подписки + автопродление",
      "Техподдержка через ваш MCP-сервер",
      "AI-агент видит логи по&nbsp;конкретному userId",
      "Авторизация и&nbsp;безопасность на&nbsp;нашей стороне",
    ],
    vizLabel: "workflow",
    vizTitle: "AI-техподдержка через ваш MCP",
    viz: ({ scale = 1 }) => (
      <div className="ucv2-viz-stack">
        <p className="ucv2-viz-lead">
          Клиент задаёт вопрос — AI обращается к&nbsp;вашему MCP-серверу с&nbsp;авторизацией,
          читает логи и&nbsp;настройки конкретного пользователя, отвечает по&nbsp;фактам.
        </p>
        <div className="ucv2-mcp-flow">
          <div className="ucv2-mcp-node">
            <div className="ucv2-mcp-label">Клиент</div>
            <div className="ucv2-mcp-q">«Почему не работает экспорт?»</div>
          </div>
          <div className="ucv2-mcp-arr">→</div>
          <div className="ucv2-mcp-node tg">
            <div className="ucv2-mcp-label">TelegaFirst AI</div>
            <div className="ucv2-mcp-q">+ userId · auth-token</div>
          </div>
          <div className="ucv2-mcp-arr">→</div>
          <div className="ucv2-mcp-node">
            <div className="ucv2-mcp-label">Ваш MCP-сервер</div>
            <div className="ucv2-mcp-q">/logs · /settings · /usage</div>
          </div>
        </div>
        <div className="ucv2-chat-mini">
          <div className="ucv2-msg client">Почему мой экспорт CSV вчера не пришёл?</div>
          <div className="ucv2-tool">
            <span className="ucv2-tool-i">🔧</span>
            <span>AI вызвал ваш MCP · <code>GET /logs?userId=u_8421</code></span>
          </div>
          <div className="ucv2-msg ai">
            Посмотрел логи: 18 ноября в 23:14 экспорт упал по&nbsp;таймауту (3.2 ГБ, лимит 1 ГБ).
            Сейчас разбил его на&nbsp;части и&nbsp;поставил в&nbsp;очередь — придёт в&nbsp;течение 5 минут.
            <div className="ucv2-msg-meta">14:21</div>
          </div>
          <div className="ucv2-sys ok">
            <span>✓</span> Запрос обработан · /logs прочитаны · ответ по&nbsp;фактам
          </div>
        </div>
      </div>
    )
  },
};

/* ─────────── Tabbed Use Cases — single component, works on both ─────────── */

const UseCasesV2 = ({ flavor = "desktop" }) => {
  const [active, setActive] = React.useState("multi");
  const c = UC_CONTENT[active];

  return (
    <div className={`ucv2 ucv2-${flavor}`}>
      <div className="ucv2-eyebrow-row">
        <span className="ucv2-eyebrow">кому подойдёт</span>
        <span className="ucv2-eyebrow-line"/>
      </div>
      <h2 className="ucv2-h2">Это работает для:</h2>

      {/* Tabs */}
      <div className="ucv2-tabs">
        {UC_TABS.map(t => (
          <button key={t.id}
            className={`ucv2-tab ${active===t.id ? "active" : ""}`}
            onClick={() => setActive(t.id)}>
            {t.label}
            {t.isNew && <span className="ucv2-tab-new">NEW</span>}
          </button>
        ))}
      </div>

      {/* Content */}
      <div className="ucv2-content">
        <div className="ucv2-content-left">
          <span className="ucv2-content-tag">СЦЕНАРИЙ</span>
          <h3 className="ucv2-content-h">{c.title}</h3>
          <p className="ucv2-content-desc" dangerouslySetInnerHTML={{ __html: c.desc }}/>
          <UcBullets items={c.bullets}/>
        </div>
        <div className="ucv2-content-right">
          <span className="ucv2-content-tag">{c.vizLabel.toUpperCase()}</span>
          <h3 className="ucv2-content-h">{c.vizTitle}</h3>
          <div className="ucv2-viz-wrap">
            {c.viz({})}
          </div>
        </div>
      </div>
    </div>
  );
};

window.UseCasesV2 = UseCasesV2;
window.HfUseCasesV2 = () => (
  <div className="hf-section">
    <UseCasesV2 flavor="mobile"/>
  </div>
);
window.HfdUseCasesV2 = () => (
  <div className="hfd-section">
    <div className="hfd-container">
      <UseCasesV2 flavor="desktop"/>
    </div>
  </div>
);