// Nav · Hero · Stats — top of the page.

function SBNav() {
  const mob = useIsMobile();
  const items = [
    ['Как работает', '#what'],
    ['Примеры',      '#works'],
    ['Цены',         '#pricing'],
    ['Контакты',     '#contact'],
  ];
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: SB.bg + 'ee', backdropFilter: 'blur(10px)',
      borderBottom: `1px solid ${SB.line}`,
    }}>
      <SBContainer style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 60 }}>
        <a href="#top" style={{ display: 'inline-flex' }}>
          <SBLogo size={20} fontSize={20} />
        </a>
        <nav style={{ display: 'flex', gap: mob ? 0 : 28, alignItems: 'center' }}>
          {!mob && items.map(([label, href]) => (
            <a key={href} href={href} style={{
              fontFamily: sbSans, fontSize: 14, fontWeight: 500,
              color: SB.inkSoft, letterSpacing: '-0.01em',
            }}>
              {label}
            </a>
          ))}
          <SBButton kind="primary" href="#form" style={{ padding: '10px 18px', fontSize: 13 }}>
            Оставить заявку
          </SBButton>
        </nav>
      </SBContainer>
    </div>
  );
}

function SBHero() {
  const mob = useIsMobile();
  const stats = [
    ['60', 'сек', 'один портрет'],
    ['до 40', '', 'портретов в час'],
    ['100–150', '', 'гостей за 4 часа'],
    ['логотип', '', 'на каждом скетче'],
  ];
  return (
    <SBSection id="top" pad="56px 0 64px">
      <SBEyebrow>новинка в&nbsp;Иркутске · 2026</SBEyebrow>

      <div style={{
        display: 'grid',
        gridTemplateColumns: mob ? '1fr' : '1.25fr 1fr',
        gap: mob ? 24 : 48, alignItems: 'end', marginTop: 22,
      }}>
        <h1 style={{
          margin: 0, fontWeight: 700,
          fontSize: mob ? 'clamp(36px, 9vw, 56px)' : 'clamp(48px, 6.5vw, 88px)',
          lineHeight: 0.95, letterSpacing: '-0.05em',
        }}>
          Робот-художник нарисует шарж каждого гостя <span style={{ background: SB.accent, padding: '0 6px' }}>за&nbsp;60 секунд.</span>
        </h1>
        <div>
          <p style={{ margin: 0, fontSize: mob ? 15 : 17, lineHeight: 1.55, color: SB.inkSoft }}>
            Аренда скетчбота на&nbsp;корпоративы, свадьбы и&nbsp;выставки в&nbsp;Иркутске. Современная робототехника и&nbsp;искусственный интеллект на&nbsp;вашей площадке.
          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 24, alignItems: 'center', flexWrap: 'wrap' }}>
            <SBButton kind="primary" href="#form">Оставить заявку&nbsp;→</SBButton>
            {!mob && <SBButton kind="ghost" href="#video">Посмотреть, как работает&nbsp;→</SBButton>}
          </div>
        </div>
      </div>

      {/* HERO VIDEO */}
      <div id="video" style={{ marginTop: 32, position: 'relative', overflow: 'hidden', background: SB.ink, aspectRatio: mob ? '4 / 3' : '21 / 9' }}>
        <video
          autoPlay muted loop playsInline preload="metadata"
          src="assets/site/hero-video.mp4"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
        <div style={{
          position: 'absolute', top: 12, left: 12,
          fontFamily: sbMono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: SB.bg, background: SB.ink, padding: '6px 10px',
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: SB.accent }} />
          робот в&nbsp;работе · live
        </div>
      </div>

      {/* STATS */}
      <div style={{
        marginTop: 20,
        display: 'grid',
        gridTemplateColumns: mob ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
        gap: 0, borderTop: `2px solid ${SB.ink}`,
      }}>
        {stats.map(([num, unit, label], i) => (
          <div key={i} style={{
            padding: mob ? '16px 14px' : '20px 22px',
            borderRight: mob
              ? (i % 2 === 0 ? `1px solid ${SB.line}` : 'none')
              : (i < 3 ? `1px solid ${SB.line}` : 'none'),
            borderBottom: mob && i < 2 ? `1px solid ${SB.line}` : 'none',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: mob ? 90 : 130,
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{
                fontWeight: 700,
                fontSize: mob ? 'clamp(22px, 6vw, 32px)' : 'clamp(32px, 3.6vw, 48px)',
                letterSpacing: '-0.05em', lineHeight: 1,
              }}>{num}</span>
              {unit && (
                <span style={{ fontFamily: sbMono, fontSize: 12, color: SB.mute, letterSpacing: '0.04em' }}>{unit}</span>
              )}
            </div>
            <div style={{
              fontFamily: sbMono, fontSize: 9, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: SB.inkSoft, marginTop: 8,
            }}>
              {label}
            </div>
          </div>
        ))}
      </div>
    </SBSection>
  );
}

Object.assign(window, { SBNav, SBHero });