/* Desktop hi-fi blocks part 2: Monetization, Providers, AI setup, Agents */

const HfdMonetTile = ({ n, color, icon, title, desc }) => (
  <div className="hfd-monet">
    <div className="hfd-monet-icon" style={{ background: color, boxShadow: `0 6px 16px ${color}44` }}>
      <span>{icon}</span>
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <span className="hfd-monet-num">0{n}</span>
      <h3>{title}</h3>
      <p>{desc}</p>
    </div>
  </div>
);

const HfdMonetization = () => (
  <div className="hfd-section">
    <div className="hfd-container">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56 }}>
        <div>
          <div className="hfd-eyebrow-row"><span className="eyebrow">монетизация · из коробки</span></div>
          <h2>Все способы продаж.<br/>Сразу.</h2>
        </div>
        <p className="lead" style={{ maxWidth: 420 }}>
          Любая логика монетизации твоего бизнеса — уже встроена. Ничего не докручиваешь руками.
        </p>
      </div>

      <div className="hfd-grid-2">
        <HfdMonetTile n={1} color="#2aabee" icon="🛍" title="Каталог · клиент сам"
          desc="Зашёл в бота → полистал каталог → купил. AI не вмешивается, если не нужно." />
        <HfdMonetTile n={2} color="#16a085" icon="💬" title="AI-консультация → оплата"
          desc="AI-администратор отвечает на вопросы, подбирает товар и отправляет ссылку на оплату." />
        <HfdMonetTile n={3} color="#f39c12" icon="🪜" title="Воронка с отложенной оплатой"
          desc="Клиент оставил заявку → ведёшь по этапам → в нужный момент уходит ссылка → после оплаты — авто-сообщение." />
        <HfdMonetTile n={4} color="#6c5ce7" icon="↻" title="Подписка с автопродлением"
          desc="Рекуррентные платежи, прогрев перед списанием, мягкий churn-recovery." />
        <HfdMonetTile n={5} color="#0f1419" icon="📦" title="Автовыдача цифрового товара"
          desc="После оплаты — мгновенно файл, ссылка, лицензия, доступ к курсу. Без участия человека." />
        <HfdMonetTile n={6} color="#d63384" icon="🔒" title="Доступ в закрытый канал"
          desc="Платный или по подписке. Можно требовать подписку на основной канал — проверим автоматически." />
        <HfdMonetTile n={7} color="#ff6b6b" icon="↳" title="Ручная продажа оператором"
          desc="Оператор в Open Lines: согласовал → выставил счёт → отправил ссылку. Для премиум-сделок." />
        <div className="hfd-card tg-soft" style={{ display: "flex", gap: 16, alignItems: "center", padding: 28 }}>
          <div style={{ fontSize: 36, lineHeight: 1, color: "var(--hf-tg)" }}>+</div>
          <div>
            <h3 style={{ color: "var(--hf-tg-deep)" }}>Можно комбинировать</h3>
            <p className="body" style={{ marginTop: 8 }}>
              Каталог + воронка + подписка — одновременно, для разных продуктов.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const HfdProviderTile = ({ name, color, mark, slug }) => (
  <div className="hfd-provider">
    {slug ? (
      <img src={`https://cdn.simpleicons.org/${slug}`} width="22" height="22" alt={name}/>
    ) : (
      <span className="hfd-provider-mark" style={{ background: color }}>{mark}</span>
    )}
    {name}
  </div>
);

const HfdProviders = () => (
  <div className="hfd-section alt">
    <div className="hfd-container">
      <div className="hfd-eyebrow-row"><span className="eyebrow">платежи · одна интеграция</span></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "flex-start" }}>
        <div>
          <h2>7 провайдеров.<br/>Все способы.</h2>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 32 }}>
            <HfdProviderTile name="ЮKassa"    color="#5469D4" mark="Ю"/>
            <HfdProviderTile name="Robokassa" color="#1F8F3D" mark="R"/>
            <HfdProviderTile name="TG Stars"  color="#FFB700" mark="★" slug="telegram"/>
            <HfdProviderTile name="CryptoBot" color="#0098EA" mark="₿"/>
            <HfdProviderTile name="Stripe"    color="#635BFF" mark="S" slug="stripe"/>
            <HfdProviderTile name="PayPal"    color="#003087" mark="P" slug="paypal"/>
            <HfdProviderTile name="Paddle"    color="#FDB833" mark="P"/>
          </div>
        </div>

        <div className="hfd-card" style={{ padding: 32 }}>
          <p className="meta" style={{ marginBottom: 20, fontFamily: "var(--hf-font-mono)", letterSpacing: "0.08em", textTransform: "uppercase", fontSize: 11 }}>под капотом — все способы оплаты</p>
          <div className="hfd-stack tight">
            <div>
              <span className="hfd-chip ok dot">Россия</span>
              <p className="body" style={{ fontSize: 14, marginTop: 8 }}>
                Мир · СБП · СберPay · T-Pay · ЮMoney · Яндекс Pay · АльфаClick · UnionPay
              </p>
            </div>
            <div style={{ height: 1, background: "var(--hf-line)", margin: "8px 0" }}/>
            <div>
              <span className="hfd-chip" style={{ background: "rgba(108,92,231,0.1)", color: "var(--hf-violet)", borderColor: "rgba(108,92,231,0.2)" }}>Зарубеж</span>
              <p className="body" style={{ fontSize: 14, marginTop: 8 }}>
                Visa · Mastercard · Amex · Discover · Apple Pay · Google Pay · PayPal
              </p>
            </div>
            <div style={{ height: 1, background: "var(--hf-line)", margin: "8px 0" }}/>
            <div>
              <span className="hfd-chip" style={{ background: "rgba(243,156,18,0.12)", color: "#c87900", borderColor: "rgba(243,156,18,0.25)" }}>Крипта · in-Telegram</span>
              <p className="body" style={{ fontSize: 14, marginTop: 8 }}>
                USDT · BTC · ETH · Telegram Stars
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const HfdTool = ({ slug, name, tag, fallback, bg }) => (
  <div className="hfd-tool">
    {slug && (
      <img src={`https://cdn.simpleicons.org/${slug}`} width="22" height="22" alt={name}
        onError={(e) => {
          e.target.style.display = 'none';
          const fb = e.target.nextElementSibling;
          if (fb) fb.style.display = 'flex';
        }}/>
    )}
    <span className="hfd-tool-mark" style={{
      background: bg || "#0f1419",
      display: slug ? "none" : "flex"
    }}>{fallback || name[0]}</span>
    <span>{name}</span>
    {tag && <span style={{ fontSize: 10, fontFamily: "var(--hf-font-mono)", background: "var(--hf-surface-2)", padding: "2px 6px", borderRadius: 4, color: "var(--hf-ink-3)" }}>{tag}</span>}
  </div>
);

const HfdAISetup = () => (
  <div className="hfd-section">
    <div className="hfd-container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "flex-start" }}>
        <div>
          <div className="hfd-eyebrow-row"><span className="eyebrow">вход · ~15 минут</span></div>
          <h2>Уже пользуешься AI?<br/>Дай ему нашу<br/><span className="display-italic h-accent">секретную ссылку</span>.</h2>
          <p className="lead" style={{ marginTop: 22, maxWidth: 500 }}>
            Любой твой AI-инструмент прочитает её, разберётся в нашей документации и поможет настроить платформу за один разговор. Тебе остаётся только утверждать.
          </p>

          <div className="hf-secretlink" style={{ marginTop: 32 }}>
            <div className="hf-secretlink-head">
              <span>скопируй эту ссылку</span>
              <span className="hf-secretlink-dot"/>
            </div>
            <code className="hf-secretlink-code">
              https://telegafirst.ru/ai-setup?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>

          <div className="hfd-card" style={{ marginTop: 24, padding: 24 }}>
            <p className="meta" style={{ marginBottom: 14, fontFamily: "var(--hf-font-mono)", letterSpacing: "0.08em", textTransform: "uppercase", fontSize: 11 }}>что произойдёт</p>
            <div className="hfd-stack tight">
              {[
                "AI читает нашу документацию",
                "задаёт пару вопросов про твой бизнес",
                "собирает каталог, AI-промпты и настройки",
                "ты только говоришь «ок»"
              ].map((t, i) => (
                <div key={i} style={{ display: "flex", gap: 14, alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--hf-font-mono)", fontSize: 12, color: "var(--hf-ink-3)", fontWeight: 600, minWidth: 20 }}>0{i+1}</span>
                  <span style={{ fontSize: 15, color: "var(--hf-ink)" }}>{t}</span>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 22, paddingTop: 22, borderTop: "1px solid var(--hf-line)" }}>
              <span className="num" style={{ fontSize: 36, fontWeight: 800, color: "var(--hf-ink)", fontFamily: "var(--hf-font-display)" }}>~15&nbsp;мин</span>
              <span className="meta">до первой оплаты</span>
            </div>
          </div>
        </div>

        <div>
          <div className="hfd-stack">
            <div>
              <p className="meta" style={{ marginBottom: 12, fontFamily: "var(--hf-font-mono)", letterSpacing: "0.08em", textTransform: "uppercase", fontSize: 11 }}>в&nbsp;терминале</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                <HfdTool slug="warp"      name="Warp"/>
                <HfdTool slug="iterm2"    name="iTerm"/>
                <HfdTool slug="anthropic" name="Claude Code"/>
                <HfdTool fallback="{}" bg="#10A37F" name="Codex CLI"/>
              </div>
            </div>
            <div>
              <p className="meta" style={{ marginBottom: 12, fontFamily: "var(--hf-font-mono)", letterSpacing: "0.08em", textTransform: "uppercase", fontSize: 11 }}>в&nbsp;браузере</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                <HfdTool fallback="◯" bg="#10A37F" name="ChatGPT"/>
                <HfdTool slug="anthropic"    name="Claude.ai"/>
                <HfdTool fallback="DS" bg="#4D6BFE"  name="DeepSeek"/>
                <HfdTool slug="googlegemini" name="Gemini"/>
              </div>
            </div>
            <div>
              <p className="meta" style={{ marginBottom: 12, fontFamily: "var(--hf-font-mono)", letterSpacing: "0.08em", textTransform: "uppercase", fontSize: 11 }}>в&nbsp;приложениях</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                <HfdTool slug="cursor"           name="Cursor"/>
                <HfdTool slug="anthropic"        name="Claude Desktop"/>
                <HfdTool fallback="◐" bg="#4285F4" name="Antigravity" tag="GOOGLE"/>
                <HfdTool fallback="〰" bg="#00B894" name="Windsurf"/>
                <HfdTool slug="zedindustries"    name="Zed"/>
                <HfdTool fallback="</>" bg="#007ACC" name="VS Code · Copilot"/>
              </div>
            </div>
            <div className="hfd-card tg-soft" style={{ display: "flex", alignItems: "center", gap: 14, padding: 20 }}>
              <div style={{ fontSize: 28, lineHeight: 1, color: "var(--hf-tg)" }}>+</div>
              <p className="body" style={{ fontSize: 14.5 }}>
                <strong style={{ color: "var(--hf-tg-deep)" }}>любой другой</strong> — YandexGPT, GigaChat, DeepSeek-R1 и всё что появится завтра.
              </p>
            </div>
            <p className="meta" style={{ textAlign: "center", fontStyle: "italic" }}>
              нет своего AI? — запустим тебя руками за тот&nbsp;же вечер
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const HfdAIAgents = () => (
  <div className="hfd-section alt">
    <div className="hfd-container">
      <div className="hfd-eyebrow-row"><span className="eyebrow">3 роли AI</span></div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
        <h2>Что AI делает<br/>за тебя.</h2>
        <p className="lead" style={{ maxWidth: 420 }}>
          Не один общий бот — а три специализированных агента под три бизнес-задачи.
        </p>
      </div>

      <div className="hfd-grid-3">
        <div className="hfd-card" style={{ padding: 32 }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: "linear-gradient(135deg, #f39c12, #e67e22)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, marginBottom: 18 }}>🎯</div>
          <h3 style={{ fontSize: 20 }}>AI&nbsp;Квалификатор</h3>
          <p className="body" style={{ marginTop: 10 }}>
            Отсеивает нецелевых, выявляет горячих. Понимает с первых сообщений, кому показать каталог, а кого пометить как «не наш».
          </p>
        </div>
        <div className="hfd-card" style={{ padding: 32 }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: "linear-gradient(135deg, #2aabee, #1f8fc9)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, marginBottom: 18 }}>💬</div>
          <h3 style={{ fontSize: 20 }}>AI&nbsp;Консультант-продавец</h3>
          <p className="body" style={{ marginTop: 10 }}>
            Отвечает по каталогу, рекомендует, обрабатывает возражения, доводит до оплаты. Знает всю твою базу знаний.
          </p>
        </div>
        <div className="hfd-card" style={{ padding: 32 }}>
          <div style={{ width: 56, height: 56, borderRadius: 16, background: "linear-gradient(135deg, #d63384, #b8336a)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, marginBottom: 18 }}>💖</div>
          <h3 style={{ fontSize: 20 }}>AI&nbsp;Коуч</h3>
          <p style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.5, color: "var(--hf-ink-2)" }}>
            Твой универсальный сотрудник. <strong style={{ color: "var(--hf-ink)" }}>Можно настроить под любую роль</strong> — наградить функционалом, дать доступ к твоим инструментам.
          </p>
          <div className="hfd-card bare" style={{ marginTop: 16, padding: 14, background: "var(--hf-surface-2)", border: "none" }}>
            <p className="meta" style={{ marginBottom: 4, fontWeight: 600 }}>например — техподдержка</p>
            <p style={{ fontSize: 13, color: "var(--hf-ink-2)", lineHeight: 1.5 }}>
              AI сам пойдёт в твою систему, посмотрит логи и скажет клиенту реальную причину.
            </p>
          </div>
        </div>
      </div>

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

window.HfdMonetization = HfdMonetization;
window.HfdProviders = HfdProviders;
window.HfdAISetup = HfdAISetup;
window.HfdAIAgents = HfdAIAgents;