/* Hi-fi blocks part 1:
   Hero → Channels → Transparency → Topic stats → Handoff */

/* ─────────────── HERO ─────────────── */
const HfHero = () => (
  <div className="hf-section" style={{ paddingTop: 32 }}>
    <div className="eyebrow" style={{ marginBottom: 14 }}>
      Telegram · VK · Max — фронт-офис в одном
    </div>
    <h1>
      Смотри как клиент<br/>
      <span className="display-italic h-accent">платит сам.</span>
    </h1>
    <p className="lead" style={{ marginTop: 16 }}>
      Платформа ловит входящие из Telegram, VK и Max, ведёт диалог,
      принимает оплату и отдаёт материал — пока ты пьёшь кофе.
    </p>

    {/* Video block */}
    <div className="hf-video" style={{ marginTop: 22 }}>
      {/* sketchy motion-vector underlay */}
      <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.4 }}>
        <defs>
          <linearGradient id="hf-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="80" cy="80" r="60" fill="url(#hf-vid-g)"/>
        <circle cx="320" cy="180" r="80" fill="url(#hf-vid-g)"/>
        {[...Array(10)].map((_, i) => (
          <circle key={i} cx={40 + i*36} cy={210 - (i%3)*8} r="2" fill="white" opacity="0.4"/>
        ))}
      </svg>
      <div className="hf-video-play">
        <div className="hf-video-play-btn">
          {HfIco.play(22)}
        </div>
      </div>
      <div style={{ position: "absolute", top: 14, left: 14, fontSize: 11, color: "rgba(255,255,255,0.85)",
        background: "rgba(0,0,0,0.4)", backdropFilter: "blur(8px)", padding: "4px 10px", borderRadius: 999,
        fontFamily: "var(--hf-font-mono)" }}>
        обложка · мотион-объяснялка
      </div>
      <div className="hf-video-controls">
        <span>0:00</span>
        <div className="hf-video-bar"></div>
        <span>1:30</span>
      </div>
    </div>
    <p className="meta" style={{ textAlign: "center", marginTop: 10 }}>
      внутри: чат «клиент&nbsp;→&nbsp;AI&nbsp;→&nbsp;оплата» + все ключевые смыслы
    </p>

    {/* CTAs */}
    <div data-comment-anchor="cc-6" style={{ marginTop: 22 }}>
      <button className="hf-btn-hero primary">
        <span className="hf-btn-hero-label">
          <span>Попробовать бесплатно</span>
          <span className="hf-btn-hero-sub">7 дней · без карты</span>
        </span>
        <span className="hf-btn-hero-arrow">
          <svg width="18" height="18" 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="hf-btn-hero secondary">
        <span className="hf-btn-hero-play">
          <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
            <path d="M3 2.5l6 3-6 3v-6z" fill="currentColor"/>
          </svg>
        </span>
        <span>Посмотреть видео</span>
        <span className="hf-btn-hero-meta">1:30</span>
      </button>
    </div>
  </div>
);

/* ─────────────── CHANNELS ─────────────── */
const HfChannels = () => (
  <div className="hf-section alt">
    <div className="hf-eyebrow-row"><span className="eyebrow">откуда угодно</span></div>
    <h2>Диалог придёт<br/>откуда угодно.</h2>
    <p className="body" style={{ marginTop: 12 }}>
      Telegram, VK и Max — это <strong style={{ color: "var(--hf-ink)" }}>99% всей аудитории РФ</strong>.
      Один настроил — три канала закрыл.
    </p>

    {/* Channels diagram */}
    <div className="hf-card" style={{ marginTop: 20, padding: 18 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <div className="hf-channel-pill tg" style={{ gap: 8 }}>
          <img src="https://cdn.simpleicons.org/telegram" width="16" height="16" alt="Telegram" style={{ display: "block" }}/>
          Telegram
        </div>
        <div className="hf-channel-pill vk" style={{ gap: 8 }}>
          <img src="https://cdn.simpleicons.org/vk" width="16" height="16" alt="VK" style={{ display: "block" }}/>
          VK
        </div>
        <div className="hf-channel-pill max" style={{ gap: 8 }}>
          <span className="dot" style={{ borderRadius: "50%" }}/>
          Max
        </div>
      </div>
      <svg viewBox="0 0 320 30" width="100%" style={{ marginTop: 14 }}>
        <defs>
          <linearGradient id="hf-ch-grad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#2aabee" stopOpacity="0.7"/>
            <stop offset="100%" stopColor="#2aabee"/>
          </linearGradient>
        </defs>
        <path d="M20 15 L 280 15" stroke="url(#hf-ch-grad)" strokeWidth="2" strokeLinecap="round"/>
        <path d="M280 15 L 273 11 M280 15 L 273 19" stroke="#2aabee" strokeWidth="2" strokeLinecap="round"/>
        <text x="290" y="19" fontFamily="var(--hf-font-mono)" fontSize="11" fill="#1f8fc9" fontWeight="600">→ ты</text>
      </svg>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "12px 0 0", marginTop: 8, borderTop: "1px solid var(--hf-line)" }}>
        <span className="meta">в одном окне</span>
        <span className="hf-chip ok dot">live</span>
      </div>
    </div>
  </div>
);

/* ─────────────── TRANSPARENCY ─────────────── */
const HfTransparency = () => (
  <div className="hf-section">
    <div className="hf-eyebrow-row"><span className="eyebrow">прозрачность · контроль</span></div>
    <h2>Всё прозрачно.<br/>Без отдельных<br/>CRM-кабинетов.</h2>
    <p className="body" style={{ marginTop: 12 }}>
      Никуда заходить не нужно. Каждый диалог AI с клиентом — у тебя
      <strong style={{ color: "var(--hf-ink)" }}> прямо в Telegram</strong>,
      в реальном времени. Привычное место, привычный интерфейс.
    </p>

    <div className="hf-stack" style={{ marginTop: 18 }}>
      <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
        <div className="hf-icobox tg">
          <svg width="20" height="20" 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: 4, fontSize: 13.5 }}>
            AI отвечает — ты читаешь параллельно. Никаких «чёрных ящиков», ничего не происходит без твоего ведома.
          </p>
        </div>
      </div>
      <div className="hf-card" style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
        <div className="hf-icobox dark">
          <svg width="20" height="20" 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" strokeLinejoin="round"/>
            <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: 4, fontSize: 13.5 }}>
            Менеджер не пишет с личного аккаунта. При увольнении контакты и переписки остаются у компании.
          </p>
        </div>
      </div>
    </div>
  </div>
);

/* ─────────────── TOPIC STATS ─────────────── */
const HfTopicStats = () => (
  <div className="hf-section alt">
    <div className="hf-eyebrow-row"><span className="eyebrow">показатели</span></div>
    <h2>Цифры там,<br/>где ты их<br/>уже видишь.</h2>
    <p className="body" style={{ marginTop: 12 }}>
      Никаких сложных дашбордов и отчётов. Главные показатели бизнеса напечатаны
      прямо в названиях разделов твоего Telegram.
    </p>

    {/* Telegram topic mock with switcher */}
    <div style={{ marginTop: 18 }}>
      <TopicMockSwitcher size="sm"/>
    </div>

    <p className="meta" style={{ textAlign: "center", marginTop: 12, fontStyle: "italic" }}>
      ↑ так выглядит сайдбар твоего Telegram
    </p>
  </div>
);

/* ─────────────── HANDOFF ─────────────── */
const HfHandoff = () => (
  <div className="hf-section dark" style={{ borderRadius: "0 0 38px 38px", marginBottom: -1 }}>
    <div className="hf-eyebrow-row"><span className="eyebrow" style={{ color: "var(--hf-tg)" }}>перехват · live</span></div>
    <h2 style={{ color: "white" }}>Хочешь — смотришь.<br/>Хочешь — вмешиваешься.</h2>
    <p className="body" style={{ marginTop: 12 }}>
      Видишь как AI-администратор переписывается с клиентом в реальном времени.
      В любой момент можешь дополнить, поправить или забрать диалог себе.
    </p>

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

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

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

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

      <div style={{ marginTop: 12, padding: "10px 0 0", borderTop: "1px dashed rgba(255,255,255,0.15)", color: "rgba(255,255,255,0.6)", fontSize: 11.5, fontFamily: "var(--hf-font-mono)", textAlign: "center" }}>
        оператор пишет <span style={{ background: "rgba(255,255,255,0.08)", padding: "1px 6px", borderRadius: 3, color: "white" }}>/menu</span> — получает кнопки управления
      </div>
    </div>

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

window.HfHero = HfHero;
window.HfChannels = HfChannels;
window.HfTransparency = HfTransparency;
window.HfTopicStats = HfTopicStats;
window.HfHandoff = HfHandoff;