const Hero = ({ variant = "portrait" }) => {
  if (variant === "full") {
    return (
      <section className="hero hero-full" id="top">
        <div className="hero-full-bg">
          <ImgPh src="img/hero-full.jpg" label="美如玉學員結業合影" focus="center 30%" />
          <div className="hero-full-scrim" />
        </div>
        <div className="container hero-full-inner">
          <div className="hero-full-copy reveal">
            <div className="kicker">
              <span className="line" />
              <span className="eyebrow">From License · To Studio</span>
            </div>
            <h1>
              開一家<span className="hero-accent">屬於自己的店</span>
              <em>A studio of your own.</em>
            </h1>
            <p className="sub">
              <span className="brand-mark">美如玉</span> 從證照到創業一條龍。花蓮合法立案，多年技術底蘊，陪你從零開始，輔導取得國家乙丙級證照，一路走到開店創業那天。
            </p>
          </div>
          <div className="hero-full-marks">美 · 如 · 玉 · 東方手藝</div>
        </div>
        <div className="hero-full-strip">
          <div className="container hero-full-strip-inner">
            <div className="strip-stat">
              <div className="n">96<sup>%</sup></div><div className="l">乙級通過率</div>
            </div>
            <div className="strip-stat">
              <div className="n">多年</div><div className="l">辦學資歷</div>
            </div>
            <div className="strip-stat">
              <div className="n">3,200<sup>+</sup></div><div className="l">結業學員</div>
            </div>
            <div className="strip-stat">
              <div className="n">EST<sup>·</sup></div><div className="l">1980 創校</div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-copy reveal">
          <div className="kicker">
            <span className="line" />
            <span className="eyebrow">From License · To Studio</span>
          </div>
          <h1>
            開一家<span className="accent">屬於自己的店</span>。
            <em>A studio of your own.</em>
          </h1>
          <p className="sub">
            <span className="brand-mark">美如玉</span> 從證照到創業一條龍。<br/>
            花蓮合法立案，多年技術底蘊，<br/>
            陪你從零開始，輔導取得國家乙丙級證照，<br/>
            一路走到開店創業那天。
          </p>
          <div className="hero-stats">
            <div className="hero-stat">
              <div className="n">96<sup>%</sup></div><div className="l">乙級通過率</div>
            </div>
            <div className="hero-stat">
              <div className="n">多年</div><div className="l">辦學資歷</div>
            </div>
            <div className="hero-stat">
              <div className="n">3,200<sup>+</sup></div><div className="l">結業學員</div>
            </div>
          </div>
        </div>

        <div className="hero-visual reveal" style={{ animationDelay: ".15s" }}>
          <div className="hero-main">
            <ImgPh src="img/hero-main.jpg" label="李秀裡老師親自示範美容課程" focus="center 35%" />
          </div>
          <div className="hero-sub">
            <ImgPh src="img/hero-sub.jpg" label="美髮剪燙教學實作" tone="dark" focus="center 30%" />
          </div>
          <div className="hero-badge">
            <div>
              <div className="zh">政府立案<br/>合法補習班</div>
              <div className="en">Official · Since 1980</div>
            </div>
          </div>
          <div className="hero-marks">美 · 如 · 玉 · 東方手藝</div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;