// Витрина тарифов — компактная секция на главной с переходом в каталог.
// Стиль повторяет брутальную карточно-билетную сетку из Philosophy.

function Pricing({ minH }) {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const tiers = [
    {
      name: 'Тир-1',
      sub: 'для одной соцсети, до 10 постов',
      price: '8 900',
      popular: false,
      features: [
        '1 соцсеть на выбор (VK или Telegram)',
        '10 постов в месяц',
        'Контент-план на месяц',
        'Анализ конкурентов',
        '1 идея для контента',
        'Отчёт в конце месяца',
      ],
    },
    {
      name: 'Тир-2',
      sub: 'для двух соцсетей, до 15 постов',
      price: '13 900',
      popular: true,
      features: [
        '2 соцсети (VK + Telegram, кросспостинг)',
        '15 постов в месяц',
        '2 истории',
        '2 внеплановых поста',
        'Контент-план на месяц',
        'Анализ конкурентов',
        '2 идеи для контента',
        'Отчёт в конце месяца',
      ],
    },
    {
      name: 'Тир-3',
      sub: 'для двух соцсетей, до 20 постов',
      price: '18 500',
      popular: false,
      features: [
        '2 соцсети (VK + Telegram, кросспостинг)',
        '20 постов в месяц',
        '4 истории',
        '2 графических рилса',
        '4 внеплановых поста',
        'Контент-план на месяц',
        'Анализ конкурентов',
        '5 идей для контента',
        'Отчёт в конце месяца',
      ],
    },
  ];

  return (
    <section id="pricing" style={{
      padding: isMobile ? '40px 18px' : '40px 32px', borderBottom: '2px solid var(--ink)',
      background: 'var(--sub)',
      minHeight: isMobile ? 'auto' : minH, display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}>
      {/* Заголовок */}
      <h2 style={{
        fontWeight: 900, fontSize: 'clamp(40px, 4.4vw, 56px)', letterSpacing: '-0.04em',
        lineHeight: 0.95, textTransform: 'uppercase', margin: '0 0 14px',
        textAlign: 'center', paddingBottom: '0.05em',
      }}>
        Тарифы
      </h2>

      {/* Подзаголовок */}
      <div style={{
        fontFamily: 'Georgia,serif', fontStyle: 'italic', fontWeight: 400,
        fontSize: 'clamp(17px, 1.4vw, 21px)', lineHeight: 1.3,
        color: 'rgb(26, 26, 30)', opacity: 0.75,
        textAlign: 'center', marginBottom: 36,
      }}>
        выберите подписку под объём вашего бизнеса
      </div>

      {/* Карточки */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 22,
        alignItems: 'stretch',
      }}>
        {tiers.map((t) => <PriceTicket key={t.name} t={t} />)}
      </div>

      {/* CTA в каталог */}
      <div style={{
        marginTop: 36, display: 'flex', justifyContent: 'center',
      }}>
        <a href="/catalog" className="pricing-catalog-btn"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            padding: '20px 44px',
            background: 'transparent', color: 'var(--ink)',
            border: '2px solid var(--ink)',
            fontFamily: 'JetBrains Mono,monospace', fontWeight: 700,
            fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
            textDecoration: 'none', cursor: 'pointer',
            transition: 'background .2s, color .2s, transform .2s, box-shadow .2s',
          }}>
          все тарифы и услуги
          <span aria-hidden="true" style={{ fontSize: 16 }}>→</span>
        </a>
      </div>

      <style>{`
        .price-ticket{
          position: relative;
          padding: 28px 26px 26px;
          background: var(--bg);
          border: 1.5px solid var(--ink);
          display: flex; flex-direction: column;
          transition: transform .28s, box-shadow .28s;
        }
        .price-ticket:hover{ transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--accent); }
        .price-ticket.popular{ border: 2px solid var(--accent); padding: 27.5px 25.5px 25.5px; }
        .price-ticket.popular:hover{ box-shadow: 6px 6px 0 var(--ink); }

        .price-ticket-corner{
          position: absolute; top: 0; right: 0; width: 28px; height: 28px;
          background: var(--sub);
          clip-path: polygon(0 0, 100% 0, 100% 100%);
          border-left: 1.5px solid var(--ink);
        }

        .pricing-catalog-btn:hover{
          background: var(--ink); color: var(--bg);
          transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent);
        }
      `}</style>
    </section>
  );
}

function PriceTicket({ t }) {
  return (
    <div className={`price-ticket${t.popular ? ' popular' : ''}`}>
      {/* перфорация-уголок справа сверху, как в Philosophy */}
      {!t.popular && <div aria-hidden="true" className="price-ticket-corner" />}

      {/* Бейдж «популярный» — только у Тир-2 */}
      {t.popular && (
        <span style={{
          position: 'absolute', top: -14, right: 24,
          padding: '7px 12px',
          background: 'var(--accent)', color: '#fff',
          border: '1.5px solid var(--ink)',
          fontFamily: 'JetBrains Mono,monospace', fontWeight: 700, fontSize: 10,
          letterSpacing: '0.24em', textTransform: 'uppercase',
        }}>популярный</span>
      )}

      {/* Название */}
      <div style={{
        fontWeight: 900, fontSize: 'clamp(26px, 2.2vw, 32px)', letterSpacing: '-0.04em',
        lineHeight: 0.95, textTransform: 'uppercase', paddingBottom: '0.05em',
      }}>{t.name}</div>

      {/* Подзаголовок */}
      <div style={{
        marginTop: 8, fontSize: 13.5, lineHeight: 1.45,
        opacity: 0.7, minHeight: 38,
      }}>{t.sub}</div>

      {/* Цена */}
      <div style={{ marginTop: 18 }}>
        <div style={{
          fontWeight: 900, fontSize: 'clamp(38px, 3.6vw, 48px)',
          letterSpacing: '-0.04em', lineHeight: 0.9,
          fontFeatureSettings: '"tnum"',
        }}>{t.price}</div>
        <div style={{
          marginTop: 6, fontFamily: 'JetBrains Mono,monospace',
          fontSize: 10.5, fontWeight: 700,
          letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.6,
        }}>₽ в месяц</div>
      </div>

      {/* Разделитель */}
      <div style={{
        marginTop: 20, marginBottom: 16,
        height: 1.5, background: 'var(--ink)', opacity: 0.85,
      }} />

      {/* Фичи */}
      <ul style={{
        margin: 0, padding: 0, listStyle: 'none',
        display: 'flex', flexDirection: 'column', gap: 10, flex: 1,
      }}>
        {t.features.map((f, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <span aria-hidden="true" style={{
              flex: '0 0 18px', width: 18, height: 18, marginTop: 2,
              color: 'var(--accent)', display: 'inline-flex',
              alignItems: 'center', justifyContent: 'center',
            }}>
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none"
                stroke="currentColor" strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12.5 10 17.5 19 7.5" />
              </svg>
            </span>
            <span style={{ fontSize: 14, lineHeight: 1.45 }}>{f}</span>
          </li>
        ))}
      </ul>

      {/* Кнопка */}
      <a href="/catalog" className={`price-ticket-btn${t.popular ? ' solid' : ''}`}
        style={{
          marginTop: 22,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          width: '100%', height: 48,
          background: t.popular ? 'var(--ink)' : 'transparent',
          color: t.popular ? 'var(--bg)' : 'var(--ink)',
          border: '2px solid var(--ink)',
          fontFamily: 'JetBrains Mono,monospace', fontWeight: 700,
          fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
          textDecoration: 'none', cursor: 'pointer',
          transition: 'background .2s, color .2s',
        }}
        onMouseOver={(e) => {
          if (t.popular) { e.currentTarget.style.background = 'var(--accent)'; }
          else { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'var(--bg)'; }
        }}
        onMouseOut={(e) => {
          if (t.popular) { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'var(--bg)'; }
          else { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink)'; }
        }}
      >
        подробнее
        <span aria-hidden="true" style={{ fontSize: 14 }}>→</span>
      </a>
    </div>
  );
}

window.Pricing = Pricing;