// Landing page sections: Nav, Hero, Problem, Solution, Models, Pricing, CTA, Footer

const Nav = ({ heroCTA = 'Попробовать' }) => (
  <nav className="nav">
    <div className="nav-inner">
      <div className="nav-logo">
        <div className="mark"></div>
        <span>Nepl<span style={{ color: 'var(--ink-2)', marginLeft: 4 }}>AI Hub</span></span>
      </div>
      <div className="nav-links">
        <a href="#problem">Зачем</a>
        <a href="#solution">Возможности</a>
        <a href="#models">Модели</a>
        <a href="#pricing">Цена</a>
        <a href="#preview">Демо</a>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <a className="btn btn-ghost btn-sm" href="chat.html">Войти</a>
        <a className="btn btn-primary btn-sm" href="chat.html">{heroCTA}</a>
      </div>
    </div>
  </nav>
);

// Tiny mockup shown in hero (non-interactive preview)
const HeroMockup = () => (
  <div className="hero-mockup">
    <div className="glow"></div>
    <div className="mock">
      <div className="mock-titlebar">
        <div className="dot" style={{ background: '#ff5f57' }}></div>
        <div className="dot" style={{ background: '#febc2e' }}></div>
        <div className="dot" style={{ background: '#28c840' }}></div>
        <div className="url">neplgaming.pro / chat</div>
        <div style={{ width: 30 }}></div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', height: 440 }}>
        <div style={{
          borderRight: '1px solid var(--line)',
          padding: '14px 10px',
          display: 'flex', flexDirection: 'column', gap: 6,
        }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em',
            textTransform: 'uppercase', color: 'var(--ink-3)', padding: '0 6px',
          }}>Модели</div>
          {window.PROVIDER_REPS.slice(0, 5).map((m, i) => (
            <div key={m.id} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '7px 8px', borderRadius: 8,
              background: i === 2 ? 'linear-gradient(90deg, rgba(91, 140, 255, 0.2), transparent)' : 'transparent',
              border: i === 2 ? '1px solid rgba(91, 140, 255, 0.3)' : '1px solid transparent',
              fontSize: 11, color: i === 2 ? '#fff' : 'var(--ink-1)',
            }}>
              <window.ModelMark model={m} size={14} />
              {m.family}
            </div>
          ))}
        </div>
        <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{
              padding: '4px 10px', borderRadius: 999,
              background: 'linear-gradient(135deg, #4d6bfe, #7e96ff)',
              fontSize: 11, fontWeight: 500,
            }}>DeepSeek · code</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)' }}>online</div>
          </div>
          <div style={{
            alignSelf: 'flex-end', maxWidth: '85%',
            padding: '10px 14px',
            background: 'linear-gradient(135deg, rgba(91, 140, 255, 0.2), rgba(160, 107, 255, 0.16))',
            border: '1px solid rgba(91, 140, 255, 0.3)',
            borderRadius: 14, borderBottomRightRadius: 4,
            fontSize: 12, lineHeight: 1.5,
          }}>
            Перепиши этот код Python в TypeScript и объясни типы
          </div>
          <div style={{
            maxWidth: '92%',
            padding: '10px 14px',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid var(--line)',
            borderRadius: 14, borderBottomLeftRadius: 4,
            fontSize: 12, lineHeight: 1.5, color: 'var(--ink-1)',
          }}>
            Готово. Вот версия на TypeScript с явными типами:
            <pre style={{
              margin: '8px 0 0', padding: '8px 10px',
              background: 'rgba(0,0,0,0.4)', borderRadius: 6,
              fontFamily: 'var(--font-mono)', fontSize: 10.5, color: '#cfe3ff',
              whiteSpace: 'pre', overflow: 'hidden',
            }}>{`function sum(a: number, b: number): number {
  return a + b;
}`}</pre>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--ink-3)' }}>
            <span className="typing-dots"><span></span><span></span><span></span></span>
            Claude печатает ответ…
          </div>
          <div style={{
            marginTop: 'auto', display: 'flex', gap: 8, alignItems: 'center',
            padding: '8px 8px 8px 12px', borderRadius: 12,
            background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line-strong)',
            fontSize: 12, color: 'var(--ink-3)',
          }}>
            Спросить что-нибудь…
            <button style={{
              marginLeft: 'auto', width: 28, height: 28, borderRadius: 8, border: 0,
              background: 'linear-gradient(135deg, #5b8cff, #a06bff)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff',
            }}><Icon name="send" size={14} /></button>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Hero = ({ heroCTA = 'Попробовать' }) => (
  <section className="hero" id="hero">
    <div className="container">
      <div className="hero-grid">
        <div>
          <div className="hero-tag">
            <span className="pill">v1.0</span>
            <span>Все модели в одной подписке от $5</span>
          </div>
          <h1 className="h-display">
            Все нейросети<br/>
            <span className="gradient-text">в одном месте</span>
          </h1>
          <p className="lead" style={{ marginTop: 28, maxWidth: 540 }}>
            ChatGPT, Claude, DeepSeek и другие модели в одном удобном AI-хабе.
            Один чат, один интерфейс, одна подписка.
          </p>
          <div className="hero-actions">
            <a className="btn btn-primary btn-lg" href="chat.html">
              {heroCTA} <Icon name="arrow-right" size={16} />
            </a>
            <button className="btn btn-ghost btn-lg">
              <Icon name="play" size={12} /> Смотреть возможности
            </button>
          </div>
          <div className="hero-meta">
            <div className="item"><span className="check"><Icon name="check" size={10}/></span> 5+ моделей</div>
            <div className="item"><span className="check"><Icon name="check" size={10}/></span> Без VPN</div>
            <div className="item"><span className="check"><Icon name="check" size={10}/></span> Отмена в 1 клик</div>
          </div>
        </div>
        <HeroMockup />
      </div>
    </div>
  </section>
);

const Problem = () => (
  <section id="problem" className="reveal">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span>проблема</span>
        <h2 className="h-section">Сейчас всё устроено хаотично</h2>
        <p className="lead">
          Десять открытых вкладок, разные интерфейсы, несколько подписок и постоянный
          вопрос «а кто из них лучше ответит?». Мы убираем этот шум.
        </p>
      </div>
      <div className="problem-grid">
        <div className="chaos">
          <div className="chaos-card" style={{ top: 0, left: 0, transform: 'rotate(-4deg)' }}>
            <div className="ch-head">
              <span className="badge" style={{ background: 'rgba(16,163,127,0.2)', color: '#3ec4a3' }}>G</span>
              <span>ChatGPT</span>
            </div>
            <div className="ch-row"><span>план:</span><span>$20/мес</span></div>
            <div className="ch-row"><span>статус:</span><span className="err">limit</span></div>
          </div>
          <div className="chaos-card" style={{ top: 60, left: 180, transform: 'rotate(5deg)' }}>
            <div className="ch-head">
              <span className="badge" style={{ background: 'rgba(217,119,87,0.2)', color: '#e89070' }}>C</span>
              <span>Claude</span>
            </div>
            <div className="ch-row"><span>план:</span><span>$20/мес</span></div>
            <div className="ch-row"><span>гео:</span><span className="err">недоступно</span></div>
          </div>
          <div className="chaos-card" style={{ top: 180, left: 30, transform: 'rotate(-7deg)' }}>
            <div className="ch-head">
              <span className="badge" style={{ background: 'rgba(77,107,254,0.2)', color: '#7e96ff' }}>D</span>
              <span>DeepSeek</span>
            </div>
            <div className="ch-row"><span>аккаунт:</span><span>другой</span></div>
            <div className="ch-row"><span>оплата:</span><span className="err">нет карты</span></div>
          </div>
          <div className="chaos-card" style={{ top: 240, left: 220, transform: 'rotate(8deg)' }}>
            <div className="ch-head">
              <span className="badge" style={{ background: 'rgba(160,107,255,0.2)', color: '#c79dff' }}>G</span>
              <span>Gemini</span>
            </div>
            <div className="ch-row"><span>план:</span><span>$22/мес</span></div>
            <div className="ch-row"><span>история:</span><span className="err">потеряна</span></div>
          </div>
          <div className="chaos-card" style={{ top: 340, left: 60, transform: 'rotate(3deg)' }}>
            <div className="ch-head">
              <span className="badge" style={{ background: 'rgba(154,161,173,0.2)', color: '#dde1ea' }}>X</span>
              <span>Grok</span>
            </div>
            <div className="ch-row"><span>подписка:</span><span>через X</span></div>
            <div className="ch-row"><span>сравнение:</span><span className="err">—</span></div>
          </div>
        </div>
        <div className="problem-arrow">
          <Icon name="arrow-right" size={28} stroke={1.4} />
        </div>
        <div className="hub-card">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative', zIndex: 1 }}>
            <div className="nav-logo" style={{ fontSize: 16 }}>
              <div className="mark" style={{ width: 36, height: 36, borderRadius: 10 }}></div>
              <span>Nepl AI Hub</span>
            </div>
          </div>
          <div style={{ fontSize: 28, fontWeight: 600, lineHeight: 1.1, letterSpacing: '-0.02em', position: 'relative', zIndex: 1 }}>
            Один хаб.<br/>Все модели.<br/>Одна подписка.
          </div>
          <div className="hub-models">
            {window.PROVIDER_REPS.map(m => (
              <div key={m.id} className="hub-pill">
                <window.ModelMark model={m} size={16} />
                {m.family}
              </div>
            ))}
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            padding: '14px 16px', borderRadius: 12,
            background: 'rgba(0,0,0,0.3)', border: '1px solid var(--line)',
            position: 'relative', zIndex: 1, marginTop: 'auto',
          }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>СТОИМОСТЬ</div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 2 }}>$5<span style={{ fontSize: 13, color: 'var(--ink-2)', fontWeight: 400 }}> /мес</span></div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>МОДЕЛЕЙ</div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 2 }}>5+ <span style={{ fontSize: 13, color: 'var(--ink-2)', fontWeight: 400 }}>в одной</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Solution = () => {
  const features = [
    {
      icon: 'sliders',
      title: 'Выбор модели в один клик',
      desc: 'Переключайся между GPT, Claude и DeepSeek прямо в чате — без выхода и без новых вкладок.',
    },
    {
      icon: 'layers',
      title: 'Единая история чатов',
      desc: 'Все диалоги хранятся в одном месте. Возвращайся к старому разговору и продолжай с любой модели.',
    },
    {
      icon: 'mobile',
      title: 'Удобно на телефоне и компьютере',
      desc: 'Адаптивный интерфейс с быстрым выбором модели, подсказками и нижней навигацией на мобилке.',
    },
    {
      icon: 'wallet',
      title: 'Подписка от $5',
      desc: 'Один тариф вместо пяти. Без скрытых платежей и отдельных подписок на каждую модель.',
    },
  ];
  return (
    <section id="solution" className="reveal">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>решение</span>
          <h2 className="h-section">Один хаб вместо <br/>десяти вкладок</h2>
        </div>
        <div className="feature-grid">
          {features.map(f => (
            <div className="feature" key={f.title}>
              <div className="icon"><Icon name={f.icon} size={20} /></div>
              <div className="h-card">{f.title}</div>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Models = () => (
  <section id="models" className="reveal">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span>модели</span>
        <h2 className="h-section">Лучшие нейросети — <br/>и каждая для своего</h2>
        <p className="lead">
          От флагманов до быстрых и дешёвых вариантов. Переключайся между провайдерами
          в один клик и сравнивай ответы под задачу.
        </p>
      </div>
      <div className="provider-grid">
        {window.PROVIDERS.map(p => {
          const tierColor = (t) => window.TIERS[t]?.color || '#888';
          return (
            <div className="provider-card" key={p.id} style={{
              '--gradient-a': p.gradient[0], '--gradient-b': p.gradient[1],
            }}>
              <div className="pc-head">
                <div className="pc-glyph" style={{ color: p.markColor }}>
                  <window.ProviderMark providerId={p.id} size={28} color={p.markColor}/>
                </div>
                <div className="pc-title">
                  <div className="pc-provider">{p.name}</div>
                  <div className="pc-family">{p.family}</div>
                </div>
                <div className={`tag ${p.soon ? 'soon' : ''}`}>
                  {p.soon ? 'soon' : `${p.variants.length} моделей`}
                </div>
              </div>
              <p className="pc-desc">{p.desc}</p>
              <div className="pc-variants">
                {p.variants.map(v => (
                  <div key={v.id} className="pc-variant">
                    <span className="pc-variant-name">{v.name}</span>
                    <span className="pc-tier" style={{
                      color: tierColor(v.tier),
                      borderColor: `${tierColor(v.tier)}55`,
                      background: `${tierColor(v.tier)}1a`,
                    }}>{window.TIERS[v.tier]?.label || v.tier}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

const Pricing = () => (
  <section id="pricing" className="reveal">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"></span>тариф</span>
        <h2 className="h-section">Один простой тариф<br/>Никаких сюрпризов</h2>
      </div>
      <div className="pricing-wrap">
        <div className="price-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-2)', marginBottom: 8 }}>
                Start
              </div>
              <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--ink-1)' }}>Для всех задач</div>
            </div>
            <div className="tag" style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
              textTransform: 'uppercase', padding: '5px 10px', borderRadius: 999,
              background: 'rgba(75,227,208,0.12)', color: 'var(--accent-cyan)',
              border: '1px solid rgba(75,227,208,0.3)',
            }}>популярно</div>
          </div>
          <div className="price-tag">
            <span className="currency">$</span>
            <span className="price">5</span>
            <span className="period">/ месяц</span>
          </div>
          <ul className="price-list">
            <li><span className="ck"><Icon name="check" size={12}/></span> Доступ ко всем моделям OpenAI, Anthropic, Google, xAI, DeepSeek</li>
            <li><span className="ck"><Icon name="check" size={12}/></span> Единый чат с переключением между моделями</li>
            <li><span className="ck"><Icon name="check" size={12}/></span> Полная история диалогов и поиск по ней</li>
            <li><span className="ck"><Icon name="check" size={12}/></span> Версия для телефона и компьютера</li>
            <li><span className="ck"><Icon name="check" size={12}/></span> Новые модели появятся в следующих обновлениях</li>
          </ul>
          <a className="btn btn-primary btn-lg" href="chat.html" style={{ alignSelf: 'flex-start', marginTop: 8 }}>
            Начать за $5 <Icon name="arrow-right" size={16}/>
          </a>
        </div>
        <div className="price-side">
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}><span className="dot"></span>что внутри</div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.2 }}>
              За цену кофе — пять AI-моделей и одна история.
            </div>
            <p style={{ marginTop: 14, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6 }}>
              Подписка — это не «доступ к одной модели», а к целому набору. Включаешь нужную
              под задачу и продолжаешь общение в том же чате.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
            <div style={{ padding: 16, borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>ОТМЕНА</div>
              <div style={{ fontSize: 16, fontWeight: 500 }}>в один клик</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FinalCTA = () => (
  <section className="cta">
    <div className="container">
      <div className="cta-card">
        <span className="eyebrow" style={{ position: 'relative', zIndex: 1 }}><span className="dot"></span>попробуй сегодня</span>
        <h2 className="h-section gradient-text" style={{
          marginTop: 22, fontSize: 'clamp(40px, 5vw, 72px)', position: 'relative', zIndex: 1, maxWidth: 880, margin: '22px auto 0',
        }}>
          Попробуй AI-хаб<br/>нового поколения
        </h2>
        <p className="lead" style={{ maxWidth: 580, margin: '22px auto 0', position: 'relative', zIndex: 1 }}>
          Один сайт для работы, учёбы, кода, идей и творчества.
          Без переключений между десятком сервисов.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 38, flexWrap: 'wrap', position: 'relative', zIndex: 1 }}>
          <a className="btn btn-primary btn-lg" href="chat.html">
            Получить доступ <Icon name="arrow-right" size={16}/>
          </a>
          <button className="btn btn-ghost btn-lg">
            neplgaming.pro
          </button>
        </div>
        <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.06em', position: 'relative', zIndex: 1 }}>
          $5 / месяц · отмена в один клик
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="container">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div className="nav-logo" style={{ fontSize: 14 }}>
          <div className="mark" style={{ width: 22, height: 22, borderRadius: 6 }}></div>
          <span>Nepl AI Hub · neplgaming.pro</span>
        </div>
      </div>
      <div className="links">
        <a href="#">Конфиденциальность</a>
        <a href="#">Условия</a>
        <a href="#">Контакты</a>
        <a href="#">Telegram</a>
      </div>
      <div>© 2026 Nepl AI Hub</div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Problem, Solution, Models, Pricing, FinalCTA, Footer });