/* hero.jsx — ファーストビュー（全幅背景写真） */

const Hero = () => (
  <section className="hero" id="home">
    {/* 背景写真 */}
    <div className="hero-bg">
      <img src="images/hero.jpg" alt="" />
    </div>
    {/* 左側グラデーションオーバーレイ */}
    <div className="hero-overlay" />

    <div className="container hero-content-wrap">
      <Reveal className="hero-content">
        <div className="hero-eyebrow">身近な法律の専門家として、あなたの未来を支えます</div>
        <h1 className="hero-title">
          手続きの不安を安心に。<br/>
          信頼でつなぐ、最適なサポートを。
        </h1>
        <p className="hero-lead">
          各種許認可申請や相続・遺言、法人設立など、<br/>
          幅広いお手続きに丁寧・迅速に対応いたします。<br/>
          お気軽にご相談ください。
        </p>
        <div className="hero-actions">
          <a href="#contact" className="btn btn-primary btn-lg">
            <Icon name="mail" size={18} />無料で相談する
          </a>
          <a href="#services" className="btn btn-outline btn-lg">
            <Icon name="list" size={18} />サービス一覧を見る
          </a>
        </div>
      </Reveal>
    </div>

    <div className="hero-area-bar">
      <div className="container">
        <span className="label"><Icon name="pin" size={16}/>対応エリア</span>
        <span>東京都・神奈川県を中心に対応（全国オンライン相談対応可）</span>
      </div>
    </div>
  </section>
);

window.Hero = Hero;