/* Hi-fi blocks part 2:
   Monetization → Providers → AI setup → AI agents */

/* ─────────────── MONETIZATION ─────────────── */
const MonetTile = ({ n, color, icon, title, desc }) => (
  <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: 16 }}>
    <div className="hf-icobox" style={{ background: color, color: "white", border: "none", boxShadow: `0 4px 12px ${color}44` }}>
      <span style={{ fontSize: 18 }}>{icon}</span>
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <h3>{title}</h3>
        <span className="mono" style={{ fontSize: 11, color: "var(--hf-ink-3)" }}>0{n}</span>
      </div>
      <p className="body" style={{ marginTop: 4, fontSize: 13.5 }}>{desc}</p>
    </div>
  </div>
);

const HfMonetization = () => (
  <div className="hf-section">
    <div className="hf-eyebrow-row"><span className="eyebrow">монетизация · из коробки</span></div>
    <h2>Все способы продаж.<br/>Сразу.</h2>
    <p className="body" style={{ marginTop: 12 }}>
      Любая логика монетизации твоего бизнеса — уже встроена.
      Ничего не докручиваешь руками.
    </p>

    <div className="hf-stack tight" style={{ marginTop: 22 }}>
      <MonetTile n={1} color="#2aabee" icon="🛍"
        title="Каталог · клиент сам"
        desc="Зашёл в бота → полистал каталог → купил. AI не вмешивается, если не нужно." />
      <MonetTile n={2} color="#16a085" icon="💬"
        title="AI-консультация → оплата"
        desc="AI-администратор отвечает на вопросы, подбирает товар и отправляет ссылку на оплату." />
      <MonetTile n={3} color="#f39c12" icon="🪜"
        title="Воронка с отложенной оплатой"
        desc="Клиент оставил заявку → ведёшь по этапам → в нужный момент уходит ссылка → после оплаты — авто-сообщение." />
      <MonetTile n={4} color="#6c5ce7" icon="↻"
        title="Подписка с автопродлением"
        desc="Рекуррентные платежи, прогрев перед списанием, мягкий churn-recovery." />
      <MonetTile n={5} color="#0f1419" icon="📦"
        title="Автовыдача цифрового товара"
        desc="После оплаты — мгновенно файл, ссылка, лицензия, доступ к курсу. Без участия человека." />
      <MonetTile n={6} color="#d63384" icon="🔒"
        title="Доступ в закрытый канал"
        desc="Платный или по подписке. Можно требовать подписку на основной канал — проверим автоматически." />
      <MonetTile n={7} color="#ff6b6b" icon="↳"
        title="Ручная продажа оператором"
        desc="Оператор в Open Lines: согласовал → выставил счёт → отправил ссылку. Для премиум-сделок." />
    </div>

    <div className="hf-card tg-soft" style={{ marginTop: 16, display: "flex", gap: 12, alignItems: "center" }}>
      <div style={{ fontSize: 22 }}>+</div>
      <div>
        <h3 style={{ color: "var(--hf-tg-deep)" }}>Можно комбинировать</h3>
        <p className="body" style={{ marginTop: 2, fontSize: 13, color: "var(--hf-ink-2)" }}>
          Каталог + воронка + подписка — одновременно, для разных продуктов.
        </p>
      </div>
    </div>
  </div>
);

/* ─────────────── PROVIDERS ─────────────── */
const ProviderLogo = ({ name, color, mark, slug }) => (
  <div style={{
    display: "inline-flex", alignItems: "center", gap: 8,
    padding: "8px 14px",
    background: "var(--hf-surface)",
    border: "1px solid var(--hf-line)",
    borderRadius: 12,
    boxShadow: "var(--hf-shadow-sm)",
    fontSize: 13,
    fontWeight: 600
  }}>
    {slug ? (
      <img src={`https://cdn.simpleicons.org/${slug}`} width="20" height="20" alt={name}
        style={{ display: "block", objectFit: "contain" }}/>
    ) : (
      <span style={{
        height: 22, padding: "0 6px", minWidth: 22, borderRadius: 5,
        background: color,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        color: "white", fontWeight: 800, fontSize: 11,
        fontFamily: "var(--hf-font-display)", letterSpacing: "-0.02em"
      }}>{mark}</span>
    )}
    {name}
  </div>
);

const HfProviders = () => (
  <div className="hf-section alt">
    <div className="hf-eyebrow-row"><span className="eyebrow">платежи · одна интеграция</span></div>
    <h2>7 провайдеров.<br/>Все способы.</h2>

    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 20 }}>
      <ProviderLogo name="ЮKassa"    color="#5469D4" mark="Ю"/>
      <ProviderLogo name="Robokassa" color="#1F8F3D" mark="R"/>
      <ProviderLogo name="TG Stars"  color="#FFB700" mark="★" slug="telegram"/>
      <ProviderLogo name="CryptoBot" color="#0098EA" mark="₿"/>
      <ProviderLogo name="Stripe"    color="#635BFF" mark="S"     slug="stripe"/>
      <ProviderLogo name="PayPal"    color="#003087" mark="P"     slug="paypal"/>
      <ProviderLogo name="Paddle"    color="#FDB833" mark="P"/>
    </div>

    {/* What's under the hood */}
    <div className="hf-card" style={{ marginTop: 22, padding: 18 }}>
      <p className="meta" style={{ marginBottom: 14 }}>под капотом — все способы оплаты</p>
      <div className="hf-stack tight">
        <div>
          <div className="hf-row" style={{ marginBottom: 6 }}>
            <span className="hf-chip dot ok" style={{ background: "rgba(22,160,133,0.1)" }}>Россия</span>
          </div>
          <p className="body" style={{ fontSize: 12.5 }}>
            Мир · СБП · СберPay · T-Pay · ЮMoney · Яндекс Pay · АльфаClick · UnionPay
          </p>
        </div>
        <div className="hf-divider" style={{ margin: "10px 0" }}></div>
        <div>
          <div className="hf-row" style={{ marginBottom: 6 }}>
            <span className="hf-chip" style={{ background: "rgba(108,92,231,0.1)", color: "var(--hf-violet)", borderColor: "rgba(108,92,231,0.2)" }}>Зарубеж</span>
          </div>
          <p className="body" style={{ fontSize: 12.5 }}>
            Visa · Mastercard · Amex · Discover · Apple Pay · Google Pay · PayPal
          </p>
        </div>
        <div className="hf-divider" style={{ margin: "10px 0" }}></div>
        <div>
          <div className="hf-row" style={{ marginBottom: 6 }}>
            <span className="hf-chip" style={{ background: "rgba(243,156,18,0.12)", color: "#c87900", borderColor: "rgba(243,156,18,0.25)" }}>Крипта · in-Telegram</span>
          </div>
          <p className="body" style={{ fontSize: 12.5 }}>
            USDT · BTC · ETH · Telegram Stars
          </p>
        </div>
      </div>
    </div>
  </div>
);

/* AI-tool tile with real brand icons via simpleicons CDN.
   Fallback always rendered (hidden) so onError can reveal it for any slug. */
const AiTool = ({ slug, name, tag, fallback, bg }) => (
  <div className="hf-tool">
    {slug && (
      <img
        src={`https://cdn.simpleicons.org/${slug}`}
        width="18" height="18" alt={name}
        style={{ display: "block", objectFit: "contain" }}
        onError={(e) => {
          e.target.style.display = 'none';
          const fb = e.target.nextElementSibling;
          if (fb) fb.style.display = 'flex';
        }}
      />
    )}
    <span className="hf-tool-mark" style={{
      background: bg || "#0f1419",
      display: slug ? "none" : "flex"
    }}>{fallback || name[0]}</span>
    <span>{name}</span>
    {tag && <span style={{ fontSize: 9, fontFamily: "var(--hf-font-mono)", background: "var(--hf-surface-2)", padding: "2px 5px", borderRadius: 4, color: "var(--hf-ink-3)", marginLeft: 2 }}>{tag}</span>}
  </div>
);

const HfAISetup = () => (
  <div className="hf-section">
    <div className="hf-eyebrow-row"><span className="eyebrow">вход · ~15 минут</span></div>
    <h2>
      Уже пользуешься AI?<br/>
      Дай ему нашу<br/>
      <span className="display-italic h-accent">секретную ссылку</span>.
    </h2>
    <p className="body" style={{ marginTop: 12 }}>
      Любой твой AI-инструмент прочитает её, разберётся в нашей документации и поможет настроить платформу за один разговор. Тебе остаётся только утверждать.
    </p>

    {/* secret link slot */}
    <div className="hf-secretlink" style={{ marginTop: 20 }}>
      <div className="hf-secretlink-head">
        <span>скопируй эту ссылку</span>
        <span className="hf-secretlink-dot"/>
      </div>
      <code className="hf-secretlink-code">
        https://telegafirst.ru/ai-setup<br/>
        ?token=sk_setup_••••••
      </code>
      <button className="hf-secretlink-copy">
        <span className="hf-secretlink-copy-icon">
          <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
            <rect x="4" y="4" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
            <path d="M9 4V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h1" stroke="currentColor" strokeWidth="1.4"/>
          </svg>
        </span>
        Копировать
      </button>
    </div>

    {/* tools */}
    <div style={{ marginTop: 22 }}>
      <p className="meta" style={{ marginBottom: 10 }}>в&nbsp;терминале</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        <AiTool slug="warp"      name="Warp"/>
        <AiTool slug="iterm2"    name="iTerm"/>
        <AiTool slug="anthropic" name="Claude Code"/>
        <AiTool fallback="{}" bg="#10A37F" name="Codex CLI"/>
      </div>
    </div>
    <div style={{ marginTop: 14 }}>
      <p className="meta" style={{ marginBottom: 10 }}>в&nbsp;браузере</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        <AiTool fallback="◯" bg="#10A37F" name="ChatGPT"/>
        <AiTool slug="anthropic"    name="Claude.ai"/>
        <AiTool fallback="DS" bg="#4D6BFE"  name="DeepSeek"/>
        <AiTool slug="googlegemini" name="Gemini"/>
      </div>
    </div>
    <div style={{ marginTop: 14 }}>
      <p className="meta" style={{ marginBottom: 10 }}>в&nbsp;приложениях</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        <AiTool slug="cursor"           name="Cursor"/>
        <AiTool slug="anthropic"        name="Claude Desktop"/>
        <AiTool fallback="◐" bg="#4285F4" name="Antigravity" tag="GOOGLE"/>
        <AiTool fallback="〰" bg="#00B894" name="Windsurf"/>
        <AiTool slug="zedindustries"    name="Zed"/>
        <AiTool fallback="</>" bg="#007ACC" name="VS Code · Copilot"/>
      </div>
    </div>

    {/* any other */}
    <div className="hf-card tg-soft" style={{ marginTop: 18, padding: 14, display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{ fontSize: 20 }}>+</div>
      <p className="body" style={{ fontSize: 13 }}>
        <strong style={{ color: "var(--hf-tg-deep)" }}>любой другой</strong> — YandexGPT, GigaChat, DeepSeek-R1 и всё что появится завтра.
      </p>
    </div>

    {/* steps */}
    <div className="hf-card" style={{ marginTop: 18, padding: 16 }}>
      <p className="meta" style={{ marginBottom: 12 }}>что произойдёт</p>
      <div className="hf-stack tight">
        {[
          "AI читает нашу документацию",
          "задаёт пару вопросов про твой бизнес",
          "собирает каталог, AI-промпты и настройки",
          "ты только говоришь «ок»"
        ].map((t, i) => (
          <div key={i} className="hf-row" style={{ gap: 10 }}>
            <span style={{ fontFamily: "var(--hf-font-mono)", fontSize: 11, color: "var(--hf-ink-3)", fontWeight: 600, minWidth: 16 }}>0{i+1}</span>
            <span style={{ fontSize: 13.5, color: "var(--hf-ink) " }}>{t}</span>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--hf-line)" }}>
        <span className="num" style={{ fontSize: 26, fontWeight: 700, color: "var(--hf-ink)" }}>~15 мин</span>
        <span className="meta">до первой оплаты</span>
      </div>
    </div>

    <p className="meta" style={{ textAlign: "center", marginTop: 14, fontStyle: "italic" }}>
      нет своего AI? — запустим тебя руками за тот&nbsp;же вечер
    </p>
  </div>
);

/* ─────────────── AI AGENTS ─────────────── */
const HfAIAgents = () => (
  <div className="hf-section alt">
    <div className="hf-eyebrow-row"><span className="eyebrow">3 роли AI</span></div>
    <h2>Что AI делает<br/>за тебя.</h2>
    <p className="body" style={{ marginTop: 12 }}>
      Не один общий бот — а три специализированных агента под три бизнес-задачи.
    </p>

    <div className="hf-stack" style={{ marginTop: 20 }}>
      <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
        <div className="hf-icobox" style={{ background: "linear-gradient(135deg, #f39c12, #e67e22)", color: "white", border: "none" }}>🎯</div>
        <div>
          <h3>AI&nbsp;Квалификатор</h3>
          <p className="body" style={{ marginTop: 4, fontSize: 13.5 }}>
            Отсеивает нецелевых, выявляет горячих. Понимает с первых сообщений, кому показать каталог, а кого пометить как «не наш».
          </p>
        </div>
      </div>
      <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
        <div className="hf-icobox" style={{ background: "linear-gradient(135deg, #2aabee, #1f8fc9)", color: "white", border: "none" }}>💬</div>
        <div>
          <h3>AI&nbsp;Консультант-продавец</h3>
          <p className="body" style={{ marginTop: 4, fontSize: 13.5 }}>
            Отвечает по каталогу, рекомендует, обрабатывает возражения, доводит до оплаты. Знает всю твою базу знаний.
          </p>
        </div>
      </div>
      <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
        <div className="hf-icobox" style={{ background: "linear-gradient(135deg, #d63384, #b8336a)", color: "white", border: "none" }}>💖</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h3>AI&nbsp;Коуч · твой универсальный сотрудник</h3>
          <p className="body" style={{ marginTop: 4, fontSize: 13.5 }}>
            Возвращает клиентов, прогревает на повторные продажи. <strong style={{ color: "var(--hf-ink)" }}>Можно настроить под любую роль</strong> — наградить функционалом, дать доступ к твоим инструментам и данным.
          </p>
          <div className="hf-card bare" style={{ marginTop: 12, padding: 12, background: "var(--hf-surface)" }}>
            <p className="meta" style={{ marginBottom: 4 }}>например — реальная техподдержка</p>
            <p className="body" style={{ fontSize: 12.5 }}>
              AI сам пойдёт в твою систему, посмотрит логи и скажет клиенту реальную причину проблемы. А не «обратитесь позже».
            </p>
          </div>
        </div>
      </div>
    </div>

    <p className="meta" style={{ textAlign: "center", marginTop: 16, fontStyle: "italic" }}>
      все три — на твоём LLM-токене (Claude · GPT · DeepSeek · …)
    </p>
  </div>
);

window.HfMonetization = HfMonetization;
window.HfProviders = HfProviders;
window.HfAISetup = HfAISetup;
window.HfAIAgents = HfAIAgents;