function Hero({ onNavigate }) {
  return (
    <section className="hero" id="top">
      <div className="hero-paper" aria-hidden="true"></div>

      {/* Decorative enso, top right */}
      <div className="hero-enso" aria-hidden="true">
        <EnsoSVG size={360} color="var(--sumi)" opacity={0.08}/>
      </div>

      {/* Decorative vertical text, far right */}
      <div className="hero-vertical" aria-hidden="true">
        墨と紙、ひとつの灯
      </div>

      <div className="hero-inner">
        <div className="eyebrow">fudedokoro &nbsp;·&nbsp; watou</div>

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

        <p className="hero-lead">
          未経験からはじめられる、筆文字の教室。<br/>
          道具はすべて和灯でご用意しています。<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-rule"></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-rule"></div>
          <div className="hero-meta-item">
            <div className="hero-meta-num signature-num">手作り</div>
            <div className="hero-meta-lbl">命名書・色紙</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });