function Hero() {
  return (
    <section className="hero container">
      <div className="hero-grid">
        <div>
          <div className="eyebrow">
            <span className="dot"></span>
            <span>FREE SLOTS — Q3 / 2026</span>
          </div>
          <h1>
            <span className="accent">Инженерия</span> для&nbsp;продуктов,<br/>
            которые <span className="italic">меняют рынок</span>
          </h1>
          <p className="lede">
            D-one studio — продуктовая инженерная студия. Проектируем и собираем сложные веб‑платформы,
            мобильные приложения и AI‑сервисы. Работаем как внутренняя команда: от
            гипотезы до релиза и поддержки.
          </p>
          <div className="hero-cta-row">
            <a href="#contact" className="btn-primary" data-magnetic>
              Обсудить проект
              <ArrowIcon/>
            </a>
            <a href="#cases" className="btn-ghost" data-magnetic>
              Смотреть кейсы
            </a>
          </div>
          <div className="hero-stats">
            <div className="stat">
              <div className="n"><span className="neon">26</span></div>
              <div className="l">релизов с&nbsp;2016&nbsp;г</div>
            </div>
            <div className="stat">
              <div className="n"><span className="neon">6</span></div>
              <div className="l">в&nbsp;команде</div>
            </div>
            <div className="stat">
              <div className="n"><span className="neon">14</span></div>
              <div className="l">клиенты</div>
            </div>
          </div>
          <div className="hero-sla">
            <div className="sla-pill">
              <span className="sla-dot"></span>
              <span className="sla-label">SLA</span>
              <span className="sla-value">99.98% uptime</span>
            </div>
            <div className="sla-pill">
              <span className="sla-label">p95</span>
              <span className="sla-value">118ms</span>
            </div>
            <div className="sla-pill">
              <span className="sla-label">релиз</span>
              <span className="sla-value">8–12 недель</span>
            </div>
            <div className="sla-pill">
              <span className="sla-label">оценка</span>
              <span className="sla-value">3–5 раб. дней</span>
            </div>
          </div>
        </div>

        <div className="hero-stage">
          <div className="ring r3"></div>
          <div className="ring r2"></div>
          <div className="ring"></div>
          <Scutoid3D/>
          <div className="hero-orbit-tag t1"><span className="tag-dot"></span>node://core‑a</div>
          <div className="hero-orbit-tag t2"><span className="tag-dot"></span>uptime 99.98%</div>
          <div className="hero-orbit-tag t3"><span className="tag-dot"></span>edge: fra‑02</div>
          <div className="hero-orbit-tag t4"><span className="tag-dot"></span>sync — ok</div>
        </div>
      </div>
    </section>
  );
}

function ArrowIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

window.Hero = Hero;
window.ArrowIcon = ArrowIcon;