/* global React */

function HeroEditorial() {
  return (
    <section id="top" className="hero-editorial">
      <div className="hero-corner tl">AIS塾 — Est. Tokyo</div>
      <div className="hero-corner tr">定額制美容室<br/>の創り方</div>
      <div className="container">
        <div className="grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>ALL INCLUSIVE SALON ACADEMY</div>
            <h1 style={{marginTop: 28}}>
              <span className="line">愛され続けるサロンは、</span>
              <span className="line"><em>仕組み</em>でつくられる。</span>
            </h1>
            <p className="lede">
              「売上至上主義からの脱却」——<br/>
              定額制美容室の創り方を学ぶ、AIS塾（オールインクルーシブサロン®塾）。<br/>
              <strong style={{color: "var(--gold-deep)"}}>月初に売上の80%が決まる</strong>、安定経営へ。
            </p>
            <div className="meta-row">
              <a href="https://www.youtube.com/watch?v=ix1-JqAXvCE" target="_blank" rel="noopener" className="btn btn-primary">▶ 無料説明を見る（LINE） <span className="arrow"></span></a>
              <a href="https://lin.ee/7w8vxiJ" target="_blank" rel="noopener" className="btn btn-ghost">申込みはこちら <span className="arrow"></span></a>
            </div>
          </div>
          <div className="side">
            <div className="plate plate-photo" style={{aspectRatio: "16/10"}}>
              <img src="images/hero.png" alt="AIS塾 — 定額制美容室をつくる" />
            </div>
            <div className="spec">
              <div className="k">Model</div>
              <div className="v">定額制（サブスク型）<small>オールインクルーシブサロン®</small></div>
            </div>
            <div className="spec">
              <div className="k">Structure</div>
              <div className="v">全6回・2Step構成<small>顧客教育 → 定額制モデル構築</small></div>
            </div>
            <div className="spec">
              <div className="k">Venue</div>
              <div className="v">Attina 恵比寿店<small>リアル参加推奨</small></div>
            </div>
          </div>
        </div>
      </div>
      <div className="marquee-bg">All Inclusive Salon</div>
    </section>
  );
}

function HeroPhoto() {
  return (
    <section id="top" className="hero-photo">
      <div className="hero-photo-img">
        <img src="images/hero.png" alt="AIS塾 — 定額制美容室をつくる" />
      </div>
      <div className="hero-photo-content">
        <div className="container">
          <div className="eyebrow" style={{color: "var(--gold-soft)"}}>
            <span className="dot" style={{background: "var(--gold-soft)"}}></span>
            ALL INCLUSIVE SALON ACADEMY
          </div>
          <h1 className="hero-photo-h1">
            愛され続けるサロンは、<em>仕組み</em>でつくられる。
          </h1>
          <p className="hero-photo-lede">
            「売上至上主義からの脱却」——定額制美容室の創り方。<br/>
            <span style={{color: "var(--gold-soft)"}}>月初に売上の80%が決まる</span>、安定経営へ。
          </p>
          <div className="actions" style={{marginTop: 40, display: "flex", gap: 16, flexWrap: "wrap"}}>
            <a href="https://www.youtube.com/watch?v=ix1-JqAXvCE" target="_blank" rel="noopener" className="btn btn-primary" style={{background: "var(--gold)", borderColor: "var(--gold)", color: "var(--ink)"}}>▶ 無料説明を見る <span className="arrow"></span></a>
            <a href="https://lin.ee/7w8vxiJ" target="_blank" rel="noopener" className="btn btn-ghost" style={{color: "var(--ivory)", borderColor: "rgba(250,247,242,0.4)"}}>申込みはこちら <span className="arrow"></span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCenter() {
  return (
    <section id="top" className="hero-center">
      <div className="container">
        <div className="mini"><span className="bar"></span>ALL INCLUSIVE SALON ACADEMY<span className="bar"></span></div>
        <h1>
          愛され続けるサロンは、
          <span className="big">by Design.</span>
          仕組みでつくる。
        </h1>
        <p className="tag">
          「売上至上主義からの脱却」——定額制美容室の創り方。<br/>
          月初に売上の80%が決まる、安定経営へ。
        </p>
        <div className="actions">
          <a href="https://www.youtube.com/watch?v=ix1-JqAXvCE" target="_blank" rel="noopener" className="btn btn-primary">▶ 無料説明を見る <span className="arrow"></span></a>
          <a href="#about" className="btn btn-ghost">塾について <span className="arrow"></span></a>
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "center") return <HeroCenter />;
  if (variant === "editorial") return <HeroEditorial />;
  return <HeroPhoto />;
}
window.Hero = Hero;