// hero.jsx — ヒーローセクション + 緊急バー

const Hero = ({ tweaks }) => {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="hero-eyebrow">
              <span className="dot"></span>
              名古屋・愛知の予防工事専門チーム
            </div>
            <h1>
              5年に1度の<br />
              <span className="accent">シロアリ予防工事</span>で<br />
              大切なお家を守ります。
            </h1>
            <p className="lead">
              名古屋シロアリ駆除センターは、地域に根ざした予防工事の専門会社です。<br />
              床下の点検から施工まで、経験豊富な職人がていねいに対応いたします。
            </p>
            <div className="hero-cta">
              <a href="#contact" className="btn btn-accent">
                <Icon name="mail" size={16} />無料点検を申し込む
              </a>
              <a href="tel:0120456789" className="btn btn-ghost">
                <Icon name="phone" size={15} />0120-456-789
              </a>
            </div>
            <div className="hero-trust">
              <div className="item">
                <span className="num">15<span className="unit">年</span></span>
                <span className="lab">地域での<br />施工実績</span>
              </div>
              <div className="item">
                <span className="num">3,200<span className="unit">件</span></span>
                <span className="lab">これまでの<br />施工件数</span>
              </div>
              <div className="item">
                <span className="num">5<span className="unit">年</span></span>
                <span className="lab">予防工事の<br />保証期間</span>
              </div>
            </div>
          </div>

          <div className="hero-visual">
            <div className="hero-photo">
              <PhotoPlaceholder kind="house" />
            </div>
            <div className="hero-card">
              <div className="check"><Icon name="check" size={16} stroke={3} color="white" /></div>
              <span>無料点検<br/>実施中</span>
            </div>
            <div className="hero-badge">
              <div className="ring">5年<br/>保証</div>
              <div className="text">
                <b>59㎡まで 45,000円</b>
                <span>追加料金一切なし</span>
              </div>
            </div>
          </div>
        </div>

        <svg className="hero-wave" viewBox="0 0 1440 60" preserveAspectRatio="none" style={{ height: 40 }}>
          <path d="M0,40 C240,10 480,50 720,30 C960,10 1200,40 1440,25 L1440,60 L0,60 Z" fill="white" />
        </svg>
      </div>
    </section>
  );
};

const UrgentBar = () => (
  <section className="urgent-bar">
    <div className="container">
      <div className="urgent-grid">
        <div className="urgent-text">
          <b>シロアリかな？と思ったら、まずはお電話を</b>
          <span>無料点検 / お見積り無料 / 強引な営業はいたしません</span>
        </div>
        <div className="urgent-tel">
          <div className="icon-circle"><Icon name="phone" size={20} stroke={2.5} color="white" /></div>
          0120-456-789
        </div>
        <a href="#contact" className="btn btn-accent">
          <Icon name="mail" size={15} />フォームで相談
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, UrgentBar });