// paywall.jsx — «Доступ по подписке»: вошёл через Hakku ID, но в таблице участников
// его нет или подписка закончилась. Тарифы и цены — из тарифной сетки (спека §0),
// покупка — на hakku.ai/community. Публичные материалы базы при этом открыты.

const PLANS = [
  { id:'enthusiast', name:'Enthusiast', price:'1 490 ₽', per:'/мес', note:'15 000 ₽ за год',
    d:'Для тех, кто хочет уверенно применять ИИ в работе и жизни.',
    f:['База знаний: гайды, подборки, кейсы', 'Вебинар со спецгостем', 'Ответы основателей в чате', 'Random Coffee'] },
  { id:'pro', name:'PRO', price:'4 900 ₽', per:'/мес', note:'47 040 ₽ за год', accent: true,
    d:'Для тех, кто внедряет ИИ в бизнес или команду либо делает свой ИИ-продукт.',
    f:['Всё из Enthusiast и расширенная база', 'Q&A с основателями раз в месяц', 'Гость с сетапом и мастермайнд', 'Офлайн-встречи раз в два месяца'] },
];

function PlanCards() {
  return (
    <div className="cm-plans">
      {PLANS.map(p => (
        <div key={p.id} className={`cm-plan${p.accent ? ' accent' : ''}`}>
          <div className="cm-plan-n">{p.name}</div>
          <div className="cm-plan-p"><b>{p.price}</b><span>{p.per}</span></div>
          <div className="cm-plan-note">{p.note}</div>
          <p className="cm-plan-d">{p.d}</p>
          <ul>{p.f.map((x, i) => <li key={i}>{Icons.check()}<span>{x}</span></li>)}</ul>
          <a className={`os-btn ${p.accent ? 'tg' : 'ghost'} block`} href={CFG().pricing_url} target="_blank" rel="noopener noreferrer"
             style={{ justifyContent:'center', textDecoration:'none', marginTop: 'auto' }}>Выбрать {p.name} ↗</a>
        </div>
      ))}
    </div>
  );
}

function Paywall({ nav }) {
  const { user, member } = ME();
  const kb = useKB();
  const open = ((kb && kb.items) || []).filter(i => !i.locked).slice(0, 5);
  const expired = member.state === 'expired';
  return (
    <div className="os-frame">
      <Sidebar active="home" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Доступ по подписке']}/>
        <div className="os-content">
          <div>
            <div className="os-eyebrow" style={{ marginBottom: 10 }}>Доступ по подписке</div>
            <h1 className="os-h1">{expired ? 'Подписка закончилась.' : 'Вступите в сообщество.'}</h1>
            <p className="os-sub" style={{ marginTop: 8, maxWidth: 640 }}>
              {expired
                ? <>Подписка для <b style={{ color:'var(--ink)' }}>{user.email}</b> {member.status === 'paused' ? 'на паузе' : member.status === 'cancelled' ? 'отменена' : 'не продлена'}
                    {member.paid_until ? ` (оплачено до ${fmtDate(member.paid_until)})` : ''}. Продлите — и закрытые материалы откроются снова.</>
                : <>Почты <b style={{ color:'var(--ink)' }}>{user.email}</b> нет среди участников сообщества.
                    Закрытая часть базы, эфиры и чат открываются по подписке.</>}
            </p>
          </div>

          <PlanCards/>

          <div className="os-card tight cm-note">
            <div style={{ fontWeight: 600, fontSize: 14 }}>Не знаете, какой тариф подойдёт?</div>
            <div style={{ fontSize: 13, color:'var(--ink-55)', lineHeight: 1.5, marginTop: 4 }}>
              Пройдите тест «Каких ИИ-навыков тебе не хватает» — он порекомендует тариф.
            </div>
            <a className="os-btn ghost sm" href={CFG().quiz_url} target="_blank" rel="noopener noreferrer"
               style={{ marginTop: 12, textDecoration:'none' }}>Пройти тест ↗</a>
          </div>

          <div className="os-card tight cm-note">
            <div style={{ fontWeight: 600, fontSize: 14 }}>Уже оплатили?</div>
            <div style={{ fontSize: 13, color:'var(--ink-55)', lineHeight: 1.55, marginTop: 4 }}>
              Доступ открывается в течение 10 минут после того, как вас внесут в список участников.
              Если вошли не с той почтой, что указали при оплате, —{' '}
              <a className="os-wiki-link" href="#" onClick={(e)=>{ e.preventDefault(); osLogout(); }}>выйдите</a> и войдите с нужной.
            </div>
          </div>

          <div>
            <div className="cm-h2row">
              <h2 className="os-h2">Открытые материалы</h2>
              <a className="cm-more" href="/os/?view=kb" onClick={(e)=>{ e.preventDefault(); nav('kb'); }}>Вся база →</a>
            </div>
            <div className="os-card" style={{ padding: 0, overflow:'hidden' }}>
              {open.map((it, i) => <MatRow key={it.slug} it={it} nav={nav} first={i === 0}/>)}
            </div>
          </div>
        </div>
      </div>
      <MemberRail/>
    </div>
  );
}
Object.assign(window, { Paywall, PlanCards });