// Hero — centered composition. AI-focus, single primary CTA.
function Hero({ onNav }) {
  return (
    <section id="top" className="hero" data-screen-label="hero">
      <div className="hero__pattern" aria-hidden="true" />
      <div className="hero__watermark" aria-hidden="true" />

      <div className="hero__center">
        <div className="hero__avatar">
          <img src="assets/portrait-roma-outdoor.webp" alt="Рома Райт" width="640" height="640" decoding="async" fetchpriority="high" />
        </div>

        <h1 className="hero__h1">
          <span className="hero__h1-line">Рома</span>
          <span className="hero__h1-line a">Райт</span>
        </h1>

        <p className="hero__subhead">
          Строю SaaS-продукты, управляю несколькими бизнесами и&nbsp;создаю&nbsp;контент&nbsp;— всё через ИИ-систему.
        </p>

        <div className="hero__ctas">
          <a href="https://youtube.com/@romarayt" target="_blank" rel="noopener noreferrer"
             className="btn-primary btn-primary--copper">
            Смотреть на&nbsp;YouTube <Icon name="arrow" size={18}/>
          </a>
          <a href="#projects" className="btn-secondary"
             onClick={(e)=>{ e.preventDefault(); onNav("projects"); }}>
            Посмотреть проекты
          </a>
        </div>

        <div className="hero__divider" aria-hidden="true" />

        <div className="hero__trust" role="list">
          <div className="hero__trust-cell" role="listitem">
            <div className="hero__trust-eyebrow">Yoolip&nbsp;AI</div>
            <div className="hero__trust-fact">700+ магазинов</div>
            <div className="hero__trust-sub">Оборот пользователей 3&nbsp;млрд&nbsp;₽</div>
          </div>
          <div className="hero__trust-cell" role="listitem">
            <div className="hero__trust-eyebrow">Система Райта</div>
            <div className="hero__trust-fact">Закрытый клуб</div>
            <div className="hero__trust-sub">AI-стек: Claude, MCP, Skills</div>
          </div>
          <div className="hero__trust-cell" role="listitem">
            <div className="hero__trust-eyebrow">YouTube</div>
            <div className="hero__trust-fact">90&nbsp;000 подписчиков</div>
            <div className="hero__trust-sub">3 канала</div>
          </div>
        </div>

        <a href="#manifest" className="hero__scroll"
           onClick={(e)=>{ e.preventDefault(); onNav("manifest"); }}>
          <span className="hero__scroll-arrow"><Icon name="arrowDown" size={14}/></span>
          или посмотреть, как я это строил
        </a>
      </div>
    </section>
  );
}

window.Hero = Hero;