const { Button: HeroButton, Globe: HeroGlobe } = window.OctanexDesignSystem_0e3b75;
const HeroIcon = window.OxIcon;

function HeroStat({ target, decimals, suffix, label }) {
  const [ref, val] = useCountUp(target, { decimals: decimals || 0 });
  return (
    <div ref={ref} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 28, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1 }}>
        {val}{suffix && <span style={{ fontSize: 15, color: 'var(--text-muted)', marginLeft: 4 }}>{suffix}</span>}
      </span>
      <span className="ox-label">{label}</span>
    </div>
  );
}

function Hero({ onStart }) {
  return (
    <section className="ox-grid-bg" style={{ position: 'relative', overflow: 'hidden', padding: '96px 32px 72px' }}>
      <span className="ox-glow-spot" style={{ top: -220, left: '12%', width: 560, height: 560 }}></span>
      <span className="ox-glow-spot" style={{ bottom: -320, right: '6%', width: 520, height: 520, opacity: 0.6 }}></span>
      {HeroGlobe && (
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', pointerEvents: 'none' }}>
          <HeroGlobe size={760} opacity={0.34} speed={0.1} style={{ transform: 'translateY(-4%)' }} />
        </div>
      )}
      <div style={{ position: 'relative', maxWidth: 1000, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px',
          border: '1px solid var(--border-accent-dim)', borderRadius: 999, background: 'var(--accent-dim)',
          boxShadow: 'var(--glow-accent)',
        }}>
          <TypeLine text="o/ начать продвижение" style={{ fontSize: 12.5, color: 'var(--text-secondary)' }} />
        </span>

        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(40px, 6vw, 76px)', letterSpacing: '-0.01em', lineHeight: 1.06, margin: 0 }}>
          рутина продвижения —<br /><span className="ox-neon">одна команда</span>
        </h1>

        <p style={{ fontSize: 'clamp(16px, 2vw, 20px)', color: 'var(--text-secondary)', maxWidth: 620, lineHeight: 1.55, margin: 0 }}>
          aio-панель под смм и e-com: накрутка в telegram, маркет юзернеймов и каналов, ии-студия — с одного баланса и одной команды.
        </p>

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 4 }}>
          <HeroButton size="lg" onClick={onStart}><HeroIcon name="zap" size={16} /> начать — бесплатно</HeroButton>
          <HeroButton variant="secondary" size="lg" onClick={() => scrollToId('services')}>смотреть услуги</HeroButton>
        </div>

        <div style={{
          marginTop: 40, display: 'flex', gap: 'clamp(28px, 6vw, 72px)', flexWrap: 'wrap', justifyContent: 'center',
          padding: '24px 36px', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)',
          background: 'rgba(8, 13, 10, 0.6)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
        }}>
          <HeroStat target={128} label="лотов на маркете" />
          <HeroStat target={2400} label="заказов за сутки" />
          <HeroStat target={99.9} decimals={1} suffix="%" label="аптайм" />
          <HeroStat target={4} decimals={0} suffix="%" label="комиссия маркета" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });