// Hero override for tomoshi variant — vertical-text dramatic
function Hero({ onNavigate }) {
  return (
    <section className="hero" id="top">
      <div className="hero-paper" aria-hidden="true"></div>
      <div className="hero-enso" aria-hidden="true">
        <EnsoSVG size={320} color="var(--tomoshi)" opacity={0.5}/>
      </div>

      <div className="hero-inner">
        {/* Left: vertical Japanese title */}
        <div className="hero-vertical">
          墨と紙、<br/><em>ひとつの灯</em>。
        </div>

        {/* Right: framing copy */}
        <div className="hero-right">
          <div className="eyebrow">fudedokoro &nbsp;·&nbsp; watou</div>

          <p className="hero-lead">
            未経験からはじめられる、<br/>
            筆文字の教室。<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>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });