// Hero for saku — editorial, image-led split
function Hero({ onNavigate }) {
  return (
    <section className="hero" id="top">
      <div className="hero-inner">
        <div className="hero-text">
          <div className="eyebrow">issue 01 &nbsp;·&nbsp; fudedokoro watou</div>

          <h1 className="hero-title">
            筆をとる、<br/>
            <span className="ink-accent">静かな時間</span><HankoStamp chars="灯" size={56}/>
          </h1>

          <p className="hero-lead">
            未経験からはじめられる、筆文字の教室。<br/>
            墨と紙、ひとつの灯のあかりのもとで。
          </p>

          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={() => onNavigate("classes")}>
              講座を見る <span aria-hidden="true">→</span>
            </button>
            <button className="btn btn-outline btn-lg" onClick={() => onNavigate("contact")}>
              体験 ¥500 を申し込む
            </button>
          </div>

          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="hero-meta-num">¥500</div>
              <div className="hero-meta-lbl">体験講座</div>
            </div>
            <div className="hero-meta-item">
              <div className="hero-meta-num">¥3,000</div>
              <div className="hero-meta-lbl">本講座 / 回</div>
            </div>
            <div className="hero-meta-item">
              <div className="hero-meta-num signature-num">手作り</div>
              <div className="hero-meta-lbl">命名書・色紙</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });