// Plazify · Supply landing — sticky header + hero (reuses the approved /reviews patterns)
// Site architecture (single domain): / = main platform · /reviews = reviews module · /supply = THIS page
// NAV mirrors /reviews; only the active state differs (Поставки is active here).
// Links use trailing-slash paths so the static preview resolves the directory index.
// TODO(route): production routes are / · /reviews · /supply (single domain).
const NAV_S = [
  { label: 'Поставки', href: '/supply/', active: true, sub: true },
  { label: 'Автоответы', href: '/reviews/', sub: true },
  { label: 'Тарифы', href: '#tarify' },                     // TODO(route): pricing page not created yet
  { label: 'О компании', href: '/about/' },
];

function Header() {
  // Mobile burger menu state. Burger + menu are display:none by default (inline) and only
  // revealed at <=620px by the Supply page CSS, so the desktop header is visually unaffected.
  const [menuOpen, setMenuOpen] = React.useState(false);
  const closeMenu = () => setMenuOpen(false);
  return (
    <div className="hdr-wrap" style={{ position: 'sticky', top: 0, zIndex: 30, padding: '20px 40px 0' }}>
      <div style={{ maxWidth: 1360, margin: '0 auto' }}>
        <header className="hdr-bar" style={{
          background: '#0A0A0A', borderRadius: 24, padding: '14px 16px 14px 24px',
          display: 'flex', alignItems: 'center', gap: 28, position: 'relative',
        }}>
          <a href="/" onClick={() => track('nav_click', { to: 'home' })} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
            <img src={window.__resources.mark} width="34" height="34" alt="Plazify" />
            <span className="plz-wordmark" style={{ fontSize: 23 }}>Plazify</span>
          </a>
          <nav className="hdr-nav" style={{ display: 'flex', gap: 26, marginLeft: 18 }}>
            {NAV_S.map((l) => (
              <a key={l.label} href={l.href} onClick={() => track('nav_click', { to: l.href })} style={{
                textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
                fontFamily: 'var(--plz-font-head)', fontWeight: 500, fontSize: 15,
                color: l.active ? '#fff' : 'rgba(255,255,255,.62)',
              }}>{l.label}{l.sub && <MIcon name="chevronDown" size={16} color={l.active ? '#fff' : 'rgba(255,255,255,.62)'} />}</a>
            ))}
          </nav>
          <div className="hdr-cta" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
            <a href="https://app.plazify.ru" onClick={() => track('nav_click', { to: 'login' })} style={{ textDecoration: 'none', fontFamily: 'var(--plz-font-head)', fontWeight: 500, fontSize: 15, color: 'rgba(255,255,255,.62)', padding: '0 10px' }}>Войти</a>
            <MBtn variant="dark" onClick={() => goForm('header_demo')}>Запросить демо</MBtn>
            <MBtn variant="primary" onClick={() => goForm('header_try')}>Попробовать</MBtn>
          </div>

          {/* mobile-only burger button (hidden by default; shown <=620px via Supply CSS) */}
          <button type="button" className="hdr-burger" aria-label="Меню" aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)} style={{ display: 'none', marginLeft: 'auto' }}>
            {menuOpen ? (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
            ) : (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
            )}
          </button>

          {/* mobile-only dropdown menu (hidden by default; shown <=620px when open via Supply CSS).
              Same links/actions as the Home burger menu — reuses existing goForm()/track() intents. */}
          <div className={'hdr-menu' + (menuOpen ? ' is-open' : '')} aria-label="Меню навигации" style={{ display: 'none' }}>
            <a className="hdr-menu-link" href="/supply/" onClick={() => { track('nav_click', { to: '/supply/' }); closeMenu(); }}>Поставки</a>
            <a className="hdr-menu-link" href="/reviews/" onClick={() => { track('nav_click', { to: '/reviews/' }); closeMenu(); }}>Автоответы</a>
            <a className="hdr-menu-link" href="/about/" onClick={() => { track('nav_click', { to: '/about/' }); closeMenu(); }}>О компании</a>
            <a className="hdr-menu-link" href="/about/#contacts" onClick={() => { track('nav_click', { to: '/about/#contacts' }); closeMenu(); }}>Контакты</a>
            <a className="hdr-menu-link" href="#faq" onClick={() => { track('nav_click', { to: '#faq' }); closeMenu(); }}>FAQ</a>
            <a className="hdr-menu-link" href="https://app.plazify.ru" onClick={() => { track('nav_click', { to: 'login' }); closeMenu(); }}>Личный кабинет</a>
            <div className="hdr-menu-cta">
              <MBtn variant="primary" full onClick={() => { goForm('header_try'); closeMenu(); }}>Попробовать 7 дней бесплатно</MBtn>
              <MBtn variant="dark" full onClick={() => { goForm('header_demo'); closeMenu(); }}>Запросить демо</MBtn>
            </div>
          </div>
        </header>
      </div>
    </div>
  );
}

const HERO_TRUST_S = ['Резидент Сколково', 'Официальное API Wildberries', 'Без привязки карты'];

function Hero() {
  return (
    <Section id="hero" style={{ paddingTop: 64, paddingBottom: 20 }} max={1280}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 22 }}>
        <span style={{ visibility: 'hidden' }} aria-hidden="true"><Eyebrow><span style={{ width: 7, height: 7, borderRadius: '50%', background: '#5E3EE5', display: 'inline-block' }}></span>Модуль «Логистика wb» · прогноз спроса и поставки</Eyebrow></span>
        <h1 className="plz-h1 hero-h1" style={{ margin: 0, fontSize: 54, lineHeight: '1.06', maxWidth: 1000, letterSpacing: '-0.02em' }}>
          Прогноз спроса и управление складскими остатками на базе ML
        </h1>
        <p className="plz-lead" style={{ margin: 0, maxWidth: 780, fontSize: 20 }}>
          ML-прогноз спроса, контроль out-of-stock и затоваривания, автосборка поставок по складам
          и кластерам. Система считает и предлагает решение — вам остаётся подтвердить.
        </p>
        <div className="hero-actions" style={{ display: 'flex', gap: 14, marginTop: 6, flexWrap: 'wrap', justifyContent: 'center' }}>
          <MBtn variant="primary" icon="arrowRight" big onClick={() => goForm('hero_try')}>Попробовать 7 дней бесплатно</MBtn>
          <MBtn variant="outline" big onClick={() => goForm('hero_demo')}>Запросить демо</MBtn>
        </div>
        <div className="hero-hidden-trust" style={{ display: 'flex', gap: 22, flexWrap: 'wrap', justifyContent: 'center', marginTop: 4, visibility: 'hidden' }} aria-hidden="true">
          {HERO_TRUST_S.map((t) => (
            <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--plz-font-head)', fontSize: 14, color: '#5C5C62' }}>
              <MIcon name="check" size={16} color="#5E3EE5" stroke={2.4} />{t}
            </span>
          ))}
        </div>
      </div>

      {/* floating product screenshot — flagship «Управление остатками и поставками» (Склад view) */}
      <div className="hero-shot" style={{ marginTop: 52, position: 'relative' }}>
        <div style={{
          borderRadius: 16, overflow: 'hidden',
          boxShadow: 'var(--plz-shadow-hero)', background: '#fff',
        }}>
          <img src={window.__resources.skladScreen} alt="Прогноз спроса и управление остатками Wildberries в интерфейсе Plazify" fetchpriority="high" style={{ width: '100%', display: 'block' }} />
        </div>
      </div>
    </Section>
  );
}
Object.assign(window, { Header, Hero });