/* Desktop hi-fi blocks part 1 */

const HfdHeader = () => (
  <div className="hfd-header">
    <div style={{ display: "flex", alignItems: "center", gap: 48 }}>
      <div className="hfd-logo">
        <span className="hfd-logo-mark">T</span>
        <span>TelegaFirst</span>
      </div>
      <nav className="hfd-nav">
        <a>Возможности</a>
        <a>Монетизация</a>
        <a>Интеграции</a>
        <a>Тарифы</a>
        <a>Документация</a>
      </nav>
    </div>
    <div className="hfd-header-actions">
      <a style={{ fontSize: 14, color: "var(--hf-ink-2)", textDecoration: "none", fontWeight: 500 }}>Войти</a>
      <button className="hfd-header-cta">
        Попробовать <span className="hfd-header-cta-dot"/>
      </button>
    </div>
  </div>
);

const HfdHero = () => (
  <div className="hfd-hero">
    <div className="hfd-hero-left">
      <div className="eyebrow" style={{ marginBottom: 22 }}>
        Telegram · VK · Max — фронт-офис в одном
      </div>
      <h1>
        Смотри как<br/>
        клиент<br/>
        <span className="display-italic h-accent">платит сам.</span>
      </h1>
      <p className="lead" style={{ marginTop: 28, maxWidth: 540 }}>
        Платформа ловит входящие из&nbsp;Telegram, VK и&nbsp;Max, ведёт диалог,
        принимает оплату и&nbsp;отдаёт материал — пока ты пьёшь кофе.
      </p>

      <div className="hfd-cta-row">
        <button className="hfd-btn-primary">
          <span className="hfd-btn-primary-label">
            <span>Попробовать бесплатно</span>
            <span className="hfd-btn-primary-sub">7 дней · без карты · отмена в один клик</span>
          </span>
          <span className="hfd-btn-primary-arrow">
            <svg width="20" height="20" viewBox="0 0 18 18" fill="none">
              <path d="M3 9h12M10 4l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </button>
        <button className="hfd-btn-secondary">
          <span className="hfd-btn-secondary-play">
            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 2l7 4-7 4V2z" fill="currentColor"/></svg>
          </span>
          Посмотреть видео
          <span className="hfd-btn-secondary-meta">1:30</span>
        </button>
      </div>
    </div>

    <div className="hfd-hero-right">
      <div className="hfd-video">
        <svg viewBox="0 0 600 380" preserveAspectRatio="xMidYMid slice"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.4 }}>
          <defs>
            <linearGradient id="hfd-vid-g" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#2aabee" stopOpacity="0.4"/>
              <stop offset="100%" stopColor="#2aabee" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <circle cx="120" cy="120" r="100" fill="url(#hfd-vid-g)"/>
          <circle cx="480" cy="260" r="120" fill="url(#hfd-vid-g)"/>
          {[...Array(14)].map((_, i) => (
            <circle key={i} cx={50 + i*40} cy={320 - (i%3)*10} r="2.5" fill="white" opacity="0.4"/>
          ))}
        </svg>
        <div className="hfd-video-play">
          <div className="hfd-video-play-btn">
            <svg width="34" height="34" viewBox="0 0 18 18"><path d="M5 3l10 6-10 6V3z" fill="white"/></svg>
          </div>
        </div>
        <div style={{ position: "absolute", top: 18, left: 20, fontSize: 12, color: "rgba(255,255,255,0.85)",
          background: "rgba(0,0,0,0.4)", backdropFilter: "blur(8px)", padding: "5px 12px", borderRadius: 999,
          fontFamily: "var(--hf-font-mono)" }}>
          обложка · мотион-объяснялка
        </div>
        <div className="hfd-video-controls">
          <span>0:00</span>
          <div className="hfd-video-bar"></div>
          <span>1:30</span>
        </div>
      </div>
      <p className="meta" style={{ textAlign: "center", marginTop: 14 }}>
        внутри: чат «клиент&nbsp;→&nbsp;AI&nbsp;→&nbsp;оплата» + все ключевые смыслы
      </p>
    </div>
  </div>
);

const HfdChannels = () => (
  <div className="hfd-section alt">
    <div className="hfd-container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="hfd-eyebrow-row"><span className="eyebrow">откуда угодно</span></div>
          <h2>Диалог придёт<br/>откуда угодно.</h2>
          <p className="lead" style={{ marginTop: 22, maxWidth: 480 }}>
            Telegram, VK и&nbsp;Max — это <strong style={{ color: "var(--hf-ink)" }}>99% всей аудитории РФ</strong>.
            Один настроил — три канала закрыл.
          </p>
        </div>
        <div className="hfd-channels-grid">
          <div className="hfd-channel tg">
            <img src="https://cdn.simpleicons.org/telegram" width="28" height="28" alt="Telegram"/>
            <div>
              Telegram
              <span className="hfd-channel-meta">основной канал</span>
            </div>
          </div>
          <div className="hfd-channel">
            <img src="https://cdn.simpleicons.org/vk/0077FF" width="28" height="28" alt="VK"/>
            <div>
              VK
              <span className="hfd-channel-meta">соц-аудитория</span>
            </div>
          </div>
          <div className="hfd-channel">
            <span style={{ width: 28, height: 28, borderRadius: 6, background: "#1ED660", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "white", fontWeight: 800 }}>M</span>
            <div>
              Max
              <span className="hfd-channel-meta">страховка РФ</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const HfdTransparency = () => (
  <div className="hfd-section">
    <div className="hfd-container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="hfd-eyebrow-row"><span className="eyebrow">прозрачность · контроль</span></div>
          <h2>Всё прозрачно.<br/>Без отдельных<br/>CRM-кабинетов.</h2>
          <p className="lead" style={{ marginTop: 22, maxWidth: 540 }}>
            Никуда заходить не нужно. Каждый диалог AI с&nbsp;клиентом — у&nbsp;тебя
            <strong style={{ color: "var(--hf-ink)" }}> прямо в&nbsp;Telegram</strong>,
            в&nbsp;реальном времени. Привычное место, привычный интерфейс.
          </p>

          <div className="hfd-stack" style={{ marginTop: 32 }}>
            <div className="hfd-card" style={{ display: "flex", gap: 18, alignItems: "flex-start", padding: 20 }}>
              <div style={{ width: 48, height: 48, borderRadius: 14, background: "linear-gradient(135deg, #2aabee, #1f8fc9)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <svg width="22" height="22" viewBox="0 0 20 20" fill="none">
                  <path d="M10 4C5 4 2 10 2 10s3 6 8 6 8-6 8-6-3-6-8-6z" stroke="currentColor" strokeWidth="1.5"/>
                  <circle cx="10" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.5"/>
                </svg>
              </div>
              <div>
                <h3>Видишь каждый диалог</h3>
                <p className="body" style={{ marginTop: 6 }}>
                  AI отвечает — ты читаешь параллельно. Никаких «чёрных ящиков».
                </p>
              </div>
            </div>
            <div className="hfd-card" style={{ display: "flex", gap: 18, alignItems: "flex-start", padding: 20 }}>
              <div style={{ width: 48, height: 48, borderRadius: 14, background: "var(--hf-ink)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <svg width="22" height="22" viewBox="0 0 20 20" fill="none">
                  <path d="M10 2L3 5v5c0 4 3 7 7 8 4-1 7-4 7-8V5l-7-3z" stroke="currentColor" strokeWidth="1.5"/>
                  <path d="M7 10l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <div>
                <h3>Безопасно для бизнеса</h3>
                <p className="body" style={{ marginTop: 6 }}>
                  Менеджер не пишет с личного аккаунта. При увольнении контакты остаются у компании.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Topic mock with switcher */}
        <TopicMockSwitcher size="lg"/>
      </div>
    </div>
  </div>
);

const HfdHandoff = () => (
  <div className="hfd-section dark">
    <div className="hfd-container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="hfd-eyebrow-row"><span className="eyebrow" style={{ color: "var(--hf-tg)" }}>перехват · live</span></div>
          <h2 style={{ color: "white" }}>Хочешь — смотришь.<br/>Хочешь — вмешиваешься.</h2>
          <p className="lead" style={{ marginTop: 22, maxWidth: 480 }}>
            Видишь как AI-администратор переписывается с клиентом в реальном времени.
            В любой момент можешь дополнить, поправить или забрать диалог себе.
          </p>

          <div className="hfd-card bare" style={{ marginTop: 32, padding: 24, border: "1px dashed rgba(255,255,255,0.18)" }}>
            <h3 style={{ color: "white" }}>Сам — или с командой</h3>
            <p style={{ marginTop: 10, color: "rgba(255,255,255,0.7)", fontSize: 15, lineHeight: 1.55 }}>
              Сегодня всё тащишь сам. Завтра подключаешь ассистента или менеджера — он работает в&nbsp;тех&nbsp;же топиках, без обучения новой CRM.
            </p>
          </div>
        </div>

        <div style={{ background: "rgba(255,255,255,0.04)", borderRadius: 22, padding: 24, border: "1px solid rgba(255,255,255,0.08)" }}>
          {/* topic header */}
          <div style={{ display: "flex", alignItems: "center", gap: 12, paddingBottom: 14, marginBottom: 14, borderBottom: "1px dashed rgba(255,255,255,0.12)" }}>
            <div style={{ width: 36, height: 36, borderRadius: 999, background: "#2aabee", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16, fontWeight: 700 }}>А</div>
            <div style={{ flex: 1 }}>
              <div style={{ color: "white", fontWeight: 600, fontSize: 14 }}>Анна · клиент</div>
              <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 12, fontFamily: "var(--hf-font-mono)" }}>topic · 🤖 AI ведёт</div>
            </div>
          </div>

          {/* messages */}
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ alignSelf: "flex-start", background: "rgba(255,255,255,0.1)", padding: "11px 16px", borderRadius: "20px 20px 20px 4px", maxWidth: "75%", fontSize: 15, color: "white" }}>
              Привет! есть курс по дизайну?
            </div>
            <div style={{ alignSelf: "flex-end", background: "var(--hf-tg)", padding: "11px 16px", borderRadius: "20px 20px 4px 20px", maxWidth: "75%", fontSize: 15, color: "white" }}>
              Привет, Анна 👋 есть 3 курса. Какой уровень?
              <div style={{ fontSize: 11, fontFamily: "var(--hf-font-mono)", opacity: 0.7, marginTop: 6 }}>AI · 0.4s</div>
            </div>

            {/* operator types /menu */}
            <div style={{ alignSelf: "flex-end", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4, marginTop: 10 }}>
              <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", fontFamily: "var(--hf-font-mono)" }}>Лена · оператор</div>
              <div style={{ background: "rgba(255,255,255,0.14)", padding: "10px 14px", borderRadius: "20px 20px 4px 20px", fontSize: 14, color: "white", fontFamily: "var(--hf-font-mono)" }}>
                /menu
              </div>
            </div>

            {/* bot reply with inline keyboard — replying to /menu */}
            <div style={{ alignSelf: "flex-start", maxWidth: "78%", marginTop: 6 }}>
              <div style={{
                background: "rgba(255,255,255,0.06)",
                borderLeft: "3px solid rgba(255,255,255,0.35)",
                padding: "6px 10px",
                margin: "0 0 4px 8px",
                borderRadius: "0 6px 6px 0",
                fontSize: 11,
                fontFamily: "var(--hf-font-mono)",
                color: "rgba(255,255,255,0.55)"
              }}>↩ reply на: /menu</div>
              <div style={{ background: "rgba(255,255,255,0.1)", padding: "11px 14px", borderRadius: "20px 20px 20px 4px", fontSize: 14, color: "white" }}>
                <div style={{ marginBottom: 10, color: "rgba(255,255,255,0.7)", fontSize: 12, fontFamily: "var(--hf-font-mono)", letterSpacing: "0.04em" }}>МЕНЮ ДИАЛОГА</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <button style={{ background: "var(--hf-tg)", color: "white", border: "none", borderRadius: 10, padding: "10px 14px", fontWeight: 600, fontSize: 13.5, textAlign: "left", cursor: "pointer", fontFamily: "var(--hf-font-body)", display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ fontSize: 16 }}>🤝</span>
                    Забрать диалог
                  </button>
                  <button style={{ background: "rgba(255,255,255,0.08)", color: "white", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 10, padding: "10px 14px", fontWeight: 500, fontSize: 13.5, textAlign: "left", cursor: "pointer", fontFamily: "var(--hf-font-body)", display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ fontSize: 16 }}>⚙️</span>
                    Настройки
                  </button>
                  <button style={{ background: "transparent", color: "rgba(255,255,255,0.6)", border: "none", borderRadius: 10, padding: "8px 14px", fontWeight: 500, fontSize: 13, textAlign: "left", cursor: "pointer", fontFamily: "var(--hf-font-body)", display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ fontSize: 16 }}>✕</span>
                    Закрыть меню
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* hint footer */}
          <div style={{ marginTop: 18, padding: "14px 0 0", borderTop: "1px dashed rgba(255,255,255,0.15)", color: "rgba(255,255,255,0.6)", fontSize: 12.5, fontFamily: "var(--hf-font-mono)", textAlign: "center" }}>
            оператор пишет <span style={{ background: "rgba(255,255,255,0.08)", padding: "2px 8px", borderRadius: 4, color: "white" }}>/menu</span> в&nbsp;ответ — и получает кнопки управления диалогом
          </div>
        </div>
      </div>
    </div>
  </div>
);

window.HfdHeader = HfdHeader;
window.HfdHero = HfdHero;
window.HfdChannels = HfdChannels;
window.HfdTransparency = HfdTransparency;
window.HfdHandoff = HfdHandoff;