/* ============================================================
   landing.jsx — публичный лендинг (10 секций)
   ============================================================ */

const { useState, useEffect, useRef } = React;

/* ─── Header ─── */
function LandingHeader() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const { navigate } = useNav();
  const { user } = useAuth();
  const BOT_URL = 'https://t.me/AITovarixBot';

  useEffect(() => {
    function onScroll() { setScrolled(window.scrollY > 40); }
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  function scrollTo(id) {
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  return (
    <header className={`lheader${scrolled ? ' on' : ''}`}>
      <div className="container">
        <div className="lheader-in">
          <button onClick={() => navigate('landing')} style={{ background: 'none', border: 'none', cursor: 'pointer' }}>
            <Logo size={17} />
          </button>

          <nav className="lnav">
            <a href="#features" onClick={e => { e.preventDefault(); scrollTo('features'); }}>Возможности</a>
            <a href="#models" onClick={e => { e.preventDefault(); scrollTo('models'); }}>Модели</a>
            <a href="#pricing" onClick={e => { e.preventDefault(); scrollTo('pricing'); }}>Тарифы</a>
            <a href="#faq" onClick={e => { e.preventDefault(); scrollTo('faq'); }}>FAQ</a>
          </nav>

          <div className="lheader-cta">
            <a href={BOT_URL} target="_blank" rel="noreferrer" className="btn btn-ghost btn-sm">Telegram-бот</a>
            {user ? (
              <button className="btn btn-accent btn-sm" onClick={() => navigate('studio')}>Студия →</button>
            ) : (
              <>
                <button className="btn btn-ghost btn-sm" onClick={() => navigate('login')}>Войти</button>
                <button className="btn btn-accent btn-sm" onClick={() => navigate('register')}>Начать бесплатно</button>
              </>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}

/* ─── Hero ─── */
function HeroSection() {
  const { navigate } = useNav();
  const BOT_URL = 'https://t.me/AITovarixBot';

  return (
    <section className="hero">
      <div className="container">
        <div className="hero-in">
          <span className="badge badge-accent reveal">
            ✨ 10 💎 бесплатно при регистрации
          </span>

          <h1 className="h-display gradient-text hero-h1 reveal">
            Создавай изображения,<br />видео и музыку<br />с ИИ
          </h1>

          <p className="hero-sub reveal">
            18+ AI-моделей. Прямо в браузере. За 5–60 секунд.<br />
            Никакой установки — зарегистрируйся и начинай.
          </p>

          <div className="hero-actions reveal">
            <button className="btn btn-accent btn-lg" onClick={() => navigate('register')}>
              🚀 Начать бесплатно
            </button>
            <a href={BOT_URL} target="_blank" rel="noreferrer" className="btn btn-ghost btn-lg">
              Telegram-бот ↗
            </a>
          </div>

          <div className="hero-strip reveal">
            {['Gemini Flash', 'GPT Image 2', 'FLUX 2 Pro', 'Veo 3', 'Kling 3.0', 'Suno V5.5', 'MiniMax Music'].map(t => (
              <span key={t} className="hero-chip">{t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── 3 суперсилы ─── */
function FeaturesSection() {
  const { navigate } = useNav();

  const cards = [
    {
      iconClass: 'gicon-img',
      icon: '🎨',
      eyebrow: '7 AI-моделей',
      title: 'Изображения',
      body: 'Gemini Flash, GPT Image 2, FLUX 2 Pro, Seedream 5, Imagen 4 Ultra — от 2 💎 за генерацию. Редактируй готовые фото или создавай с нуля.',
      tags: ['Gemini', 'GPT-4o', 'FLUX 2', 'Seedream', 'Imagen'],
      view: 'register',
    },
    {
      iconClass: 'gicon-vid',
      icon: '🎬',
      eyebrow: '8 видео-моделей',
      title: 'Видео',
      body: 'Veo 3, Kling 3.0, Hailuo 02, Pika 2.2, Seedance 1.5 — до 1080p, с аудио-дорожкой. От 79₽ за ролик.',
      tags: ['Veo 3', 'Kling', 'Hailuo', 'Seedance', 'Pika'],
      view: 'register',
    },
    {
      iconClass: 'gicon-mus',
      icon: '🎵',
      eyebrow: '3 провайдера',
      title: 'Музыка',
      body: 'MiniMax Music 2.6, Lyria 3 Pro, Suno V5.5 — треки до 4 минут с вокалом, оркестром или битом.',
      tags: ['MiniMax', 'Lyria', 'Suno'],
      view: 'register',
    },
  ];

  return (
    <section className="section sec-alt" id="features">
      <div className="container">
        <div className="sec-head text-center reveal" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">Возможности</div>
          <h2 className="sec-title h-display">Три суперсилы в одном месте</h2>
        </div>
        <div className="grid-3">
          {cards.map(card => (
            <div key={card.title} className="glass hov-lift card-pow reveal">
              <div className={`gicon ${card.iconClass}`}>{card.icon}</div>
              <div className="pow-head">{card.eyebrow}</div>
              <div className="pow-title">{card.title}</div>
              <p className="pow-body muted">{card.body}</p>
              <div className="pow-tags">
                {card.tags.map(t => <span key={t} className="tag">{t}</span>)}
              </div>
              <button
                className="btn btn-ghost btn-sm"
                style={{ marginTop: 20, alignSelf: 'flex-start' }}
                onClick={() => navigate(card.view)}
              >
                Попробовать →
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Как работает ─── */
function HowItWorksSection() {
  const steps = [
    {
      n: '01',
      title: 'Зарегистрируйся',
      body: 'Введи email и пароль — займёт 30 секунд. Сразу получишь 10 💎 бесплатно на первые генерации.',
    },
    {
      n: '02',
      title: 'Выбери тип контента',
      body: 'Изображение, видео или музыка. Выбери AI-модель, задай промпт или загрузи исходное фото.',
    },
    {
      n: '03',
      title: 'Получи результат',
      body: 'Результат появится прямо в браузере за 5–60 секунд. Скачай и используй как угодно.',
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="sec-head text-center reveal" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">Как работает</div>
          <h2 className="sec-title h-display">Три шага до результата</h2>
        </div>
        <div className="grid-3 steps">
          {steps.map(s => (
            <div key={s.n} className="step reveal">
              <div className="step-n gradient-text">{s.n}</div>
              <div className="step-t">{s.title}</div>
              <p className="muted" style={{ fontSize: 15, lineHeight: 1.6 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Модели ─── */
function ModelsSection() {
  const [tab, setTab] = useState('image');

  const tabItems = [
    { id: 'image', label: '🎨 Изображения' },
    { id: 'video', label: '🎬 Видео' },
    { id: 'music', label: '🎵 Музыка' },
  ];

  return (
    <section className="section sec-alt" id="models">
      <div className="container">
        <div className="sec-head reveal" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">AI-Модели</div>
          <h2 className="sec-title h-display">18+ моделей на выбор</h2>
        </div>

        <div className="reveal">
          <Tabs items={tabItems} active={tab} onChange={setTab} centered />
        </div>

        {tab === 'image' && (
          <div className="grid-models reveal">
            {IMAGE_MODELS.map(m => (
              <div key={m.id} className="glass hov-lift model-card">
                <div className="model-card-top">
                  <span className="model-emoji">{m.emoji}</span>
                  <TierBadge tier={m.tier} />
                </div>
                <div className="model-name">{m.name}</div>
                <p className="model-note muted">{m.note}</p>
                <div className="model-price">{m.price}</div>
                {m.resolutionOptions && (
                  <div className="model-meta">
                    {m.resolutionOptions.join(' / ')}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {tab === 'video' && (
          <div className="glass reveal vid-table">
            <div className="vid-row vid-head">
              <span>Модель</span>
              <span>Длительность</span>
              <span>Разрешение</span>
              <span>От</span>
            </div>
            {VIDEO_MODELS.map(m => (
              <div key={m.id} className="vid-row">
                <div>
                  <div className="vid-name">{m.emoji} {m.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 3 }}>{m.provider}</div>
                </div>
                <span style={{ fontSize: 14 }}>{m.durationLabel}</span>
                <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
                  {m.resolutions.length ? m.resolutions.join('/') : 'авто'}
                  {m.hasAudio ? ' · 🔊' : ''}
                </span>
                <span className="vid-price">{m.priceFrom}₽</span>
              </div>
            ))}
          </div>
        )}

        {tab === 'music' && (
          <div className="grid-3 reveal" style={{ gap: 16 }}>
            {MUSIC_MODELS.map(m => (
              <div key={m.id} className="glass hov-lift" style={{ padding: 28 }}>
                <div style={{ fontSize: 36, marginBottom: 14 }}>{m.emoji}</div>
                <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>{m.name}</div>
                <p className="muted" style={{ fontSize: 14, lineHeight: 1.5, marginBottom: 16 }}>{m.note}</p>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {m.durations.map(d => (
                    <span key={d} className="tag">{d}с</span>
                  ))}
                  {m.hasReference && <span className="tag">🎙 Референс</span>}
                </div>
                <div style={{ marginTop: 16, fontWeight: 700, color: '#22d3ee' }}>{m.pricePerTrack}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/* ─── Инструменты ─── */
function ToolsSection() {
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head reveal" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">Инструменты</div>
          <h2 className="sec-title h-display">Обработка изображений</h2>
        </div>
        <div className="grid-3">
          {TOOLS.map(t => (
            <div key={t.key} className="glass hov-lift tool-card reveal">
              <span className="tool-emoji">{t.emoji}</span>
              <div className="tool-body">
                <div className="tool-head">
                  <h4>{t.name}</h4>
                  <span className="badge badge-accent tool-price">{t.price}</span>
                </div>
                <p className="muted" style={{ fontSize: 14 }}>{t.note}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Тарифы ─── */
function PricingSection() {
  const { navigate } = useNav();

  return (
    <section className="section sec-alt" id="pricing">
      <div className="container">
        <div className="sec-head reveal" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">Тарифы</div>
          <h2 className="sec-title h-display">Выбери свой план</h2>
          <p className="muted" style={{ marginTop: 10 }}>Начни бесплатно, расширяй когда нужно</p>
        </div>

        <div className="grid-3 plans">
          {PLANS.map(plan => (
            <div key={plan.id} className={`glass plan${plan.hot ? ' plan-hot' : ''} reveal`}>
              {plan.badge && <div className="plan-badge">{plan.badge}</div>}
              <div className="plan-name">{plan.name}</div>
              <div className="plan-price">
                <span className="plan-amt">{plan.price === 0 ? '0' : plan.price + '₽'}</span>
                {plan.price > 0 && <span className="muted" style={{ fontSize: 14 }}>/{plan.period}</span>}
              </div>
              <div style={{ fontSize: 14, color: '#c4b5fd', fontWeight: 600, marginBottom: 20 }}>
                {plan.diamonds}
              </div>
              <ul className="plan-feats">
                {plan.features.map(f => (
                  <li key={f}>
                    <span className="check">✓</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <button
                className={`btn btn-block${plan.hot ? ' btn-accent' : ' btn-ghost'}`}
                onClick={() => navigate('register')}
              >
                {plan.cta}
              </button>
            </div>
          ))}
        </div>

        <p className="pricing-note muted reveal">
          💎 1 алмаз = 7₽ = 3 Telegram Stars · Оплата через ЮKassa
        </p>
      </div>
    </section>
  );
}

/* ─── FAQ ─── */
function FaqSection() {
  const [open, setOpen] = useState(null);

  return (
    <section className="section" id="faq">
      <div className="container container-narrow" style={{ margin: '0 auto' }}>
        <div className="sec-head reveal" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">FAQ</div>
          <h2 className="sec-title h-display">Частые вопросы</h2>
        </div>
        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) => (
            <div key={i} className={`faq-item reveal${open === i ? ' open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
                <span>{item.q}</span>
                <span className="faq-ic">{open === i ? '−' : '+'}</span>
              </button>
              <div className="faq-a-wrap">
                <div className="faq-a muted">{item.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── CTA ─── */
function CtaSection() {
  const { navigate } = useNav();

  return (
    <section className="section">
      <div className="container">
        <div className="cta-card reveal">
          <div className="cta-inner">
            <h2 className="h-display gradient-text cta-title">
              Начни создавать прямо сейчас
            </h2>
            <p className="muted cta-sub">
              Регистрация за 30 секунд. 10 💎 бесплатно. Никаких скрытых платежей.
            </p>
            <button className="btn btn-accent btn-lg" onClick={() => navigate('register')}>
              🚀 Создать аккаунт →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Footer ─── */
function LandingFooter() {
  const { navigate } = useNav();
  const BOT_URL = 'https://t.me/AITovarixBot';

  return (
    <footer className="lfooter">
      <div className="container">
        <div className="lfooter-in">
          <div className="lfooter-brand">
            <Logo size={17} />
            <p className="muted">
              Создавай изображения, видео и музыку с помощью лучших AI-моделей
            </p>
          </div>
          <div className="lfooter-cols">
            <div className="lfooter-col">
              <h5>Продукт</h5>
              <button className="lfooter-link" onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}>Возможности</button>
              <button className="lfooter-link" onClick={() => document.getElementById('models')?.scrollIntoView({ behavior: 'smooth' })}>Модели</button>
              <button className="lfooter-link" onClick={() => document.getElementById('pricing')?.scrollIntoView({ behavior: 'smooth' })}>Тарифы</button>
            </div>
            <div className="lfooter-col">
              <h5>Создать</h5>
              <button className="lfooter-link" onClick={() => navigate('register')}>Изображения</button>
              <button className="lfooter-link" onClick={() => navigate('register')}>Видео</button>
              <button className="lfooter-link" onClick={() => navigate('register')}>Музыка</button>
            </div>
            <div className="lfooter-col">
              <h5>Аккаунт</h5>
              <button className="lfooter-link" onClick={() => navigate('login')}>Войти</button>
              <button className="lfooter-link" onClick={() => navigate('register')}>Зарегистрироваться</button>
              <a className="lfooter-link" href={BOT_URL} target="_blank" rel="noreferrer">Telegram-бот ↗</a>
            </div>
          </div>
        </div>
        <div className="lfooter-bottom">
          <span className="muted">© 2025 AI Media Studio. Все права защищены.</span>
        </div>
      </div>
    </footer>
  );
}

/* ─── LandingPage — собирает всё ─── */
function LandingPage() {
  const pageRef = useRef(null);
  useReveal(pageRef);

  return (
    <div ref={pageRef} className="view-enter">
      <LandingHeader />
      <HeroSection />
      <FeaturesSection />
      <HowItWorksSection />
      <ModelsSection />
      <ToolsSection />
      <PricingSection />
      <FaqSection />
      <CtaSection />
      <LandingFooter />
    </div>
  );
}