/* Hero — emotional opener: eyebrow, serif headline, lead, two CTAs,
   trust badges, and the pet illustration on a soft sand disc. */
function Hero() {
  const badges = ["台灣製造", "精油植萃", "無香精添加"];
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-copy reveal">
          <span className="eyebrow">Natural Pet Care · 天然寵物清潔</span>
          <h1>給毛孩的溫柔，<br />從每一次清潔開始。</h1>
          <p className="lead">
            以精油與植萃為核心，溫和呵護你家寶貝的肌膚與毛髮。
            不刺激、不浮誇，只想陪牠舒服地度過每一天。
          </p>
          <div className="hero-cta">
            <a className="btn btn--clay" href="#contact">聯絡我們</a>
            <a className="btn btn--ghost" href="#products">看看產品</a>
          </div>
          <div className="hero-badges">
            {badges.map((b) => (
              <span className="pill" key={b}><span className="dot"></span>{b}</span>
            ))}
          </div>
        </div>

        <div className="hero-art reveal">
          <div className="disc"></div>
          <img src="assets/illustration-pets.png"
            alt="戴著花圈的紅貴賓與白貓插畫" />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;