// Маркет рекламы — витрина партнёрских каналов (размещение рекламы). Заменяет старый MarketTeaser.
// Фильтр по тематике + поиск, карточки каналов, партнёрский CTA. Демо-данные.
const { Card: AdCard, Button: AdButton, Badge: AdBadge } = window.OctanexDesignSystem_0e3b75;

const AD_TOPICS = ['все', 'крипта', 'e-com', 'дизайн', 'тех', 'трейдинг', 'нейросети'];
const AD_CHANNELS = [
  { name: 'крипто-радар', topic: 'крипта', subs: '48 200', er: '11%', price: '9 800 ₽', guarantee: true },
  { name: 'ecom-сводка', topic: 'e-com', subs: '104 000', er: '7%', price: '18 500 ₽', guarantee: true },
  { name: 'дизайн-борда', topic: 'дизайн', subs: '22 900', er: '19%', price: '6 400 ₽', guarantee: false },
  { name: 'ночной тех', topic: 'тех', subs: '15 400', er: '23%', price: '4 900 ₽', guarantee: true },
  { name: 'сигналы про', topic: 'трейдинг', subs: '61 300', er: '9%', price: '12 000 ₽', guarantee: false },
  { name: 'нейро-дайджест', topic: 'нейросети', subs: '38 700', er: '14%', price: '8 200 ₽', guarantee: true },
];

function AdAvatar({ name }) {
  return (
    <span style={{
      width: 40, height: 40, borderRadius: 10, flex: 'none', display: 'grid', placeItems: 'center',
      background: 'var(--accent-dim-2)', border: '1px solid var(--border-accent-dim)',
      fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--green-300)',
    }}>{name[0]}</span>
  );
}

function AdMarket({ onStart }) {
  const [topic, setTopic] = React.useState('все');
  const [q, setQ] = React.useState('');
  const nq = q.trim().toLowerCase();
  const list = AD_CHANNELS.filter((c) =>
    (topic === 'все' || c.topic === topic) &&
    (!nq || c.topic.includes(nq) || c.name.includes(nq)));

  return (
    <section id="market" style={{ padding: '88px 32px', background: 'var(--surface-1)', borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', marginBottom: 24 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--green-400)', marginBottom: 16 }}>// маркет рекламы</div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.01em', margin: '0 0 12px' }}>
                реклама в telegram-каналах
              </h2>
              <p style={{ fontSize: 16, color: 'var(--text-secondary)', maxWidth: 580, margin: 0 }}>
                прямые размещения у проверенных пабликов. деньги в эскроу до размещения, гарантия — неделя. комиссия <span className="ox-neon">9%</span>.
              </p>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green-400)', boxShadow: '0 0 8px var(--green-400)' }}></span>
              {list.length} каналов в подборке
            </span>
          </div>
        </Reveal>

        <Reveal delay={60}>
          {/* фильтр по тематике + поиск */}
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 20 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {AD_TOPICS.map((t) => {
                const active = t === topic;
                return (
                  <button key={t} type="button" onClick={() => setTopic(t)} style={{
                    appearance: 'none', cursor: 'pointer', padding: '7px 14px', borderRadius: 999,
                    fontFamily: 'var(--font-mono)', fontSize: 12.5,
                    background: active ? 'var(--accent-dim)' : 'transparent',
                    border: `1px solid ${active ? 'var(--border-accent-dim)' : 'var(--border-hairline)'}`,
                    color: active ? 'var(--green-300)' : 'var(--text-secondary)',
                    transition: 'all var(--dur-fast) var(--ease-out)',
                  }}>{t}</button>
                );
              })}
            </div>
            <div style={{ marginLeft: 'auto', position: 'relative' }}>
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="поиск по тематике…" style={{
                appearance: 'none', width: 220, padding: '9px 14px', borderRadius: 8,
                background: 'var(--surface-input)', border: '1px solid var(--border-hairline)',
                color: 'var(--text-primary)', fontFamily: 'var(--font-mono)', fontSize: 12.5, outline: 'none',
              }} />
            </div>
          </div>

          {/* карточки */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 16 }}>
            {list.map((c) => (
              <AdCard key={c.name} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <AdAvatar name={c.name} />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{c.name}</div>
                    <AdBadge tone="neutral">{c.topic}</AdBadge>
                  </div>
                  {c.guarantee && <AdBadge tone="green" dot>гарантия</AdBadge>}
                </div>
                <div style={{ display: 'flex', gap: 20 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)' }}>подписчики <b style={{ color: 'var(--text-primary)' }}>{c.subs}</b></span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)' }}>er <b style={{ color: 'var(--text-primary)' }}>{c.er}</b></span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--border-hairline)' }}>
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <span className="ox-label">размещение</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 600, color: 'var(--green-300)' }}>{c.price}</span>
                  </div>
                  <AdButton size="sm" onClick={onStart}>заказать рекламу</AdButton>
                </div>
              </AdCard>
            ))}
          </div>
          {list.length === 0 && (
            <div style={{ padding: 40, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)' }}>ничего не нашлось по «{q}»</div>
          )}

          {/* партнёрский CTA */}
          <a href="mailto:partner@octanex.cc" style={{
            marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
            padding: '18px 22px', borderRadius: 'var(--radius-md)', textDecoration: 'none',
            background: 'rgba(0, 226, 114, 0.08)', border: '1px solid rgba(0, 226, 114, 0.28)',
          }}>
            <span style={{ fontSize: 15, color: 'var(--text-primary)' }}>
              <b>хочешь продавать рекламу с нами?</b> <span style={{ color: 'var(--text-secondary)' }}>заводи свой канал в октанекс и принимай заказы через бота.</span>
            </span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13.5, color: 'var(--green-300)', whiteSpace: 'nowrap' }}>partner@octanex.cc →</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { AdMarket });