/* global React */
const { useState: useS_h } = React;

function Hero({ layout }) {
  return (
    <section id="home" className={`hero ${layout === 'centered' ? 'layout-b' : layout === 'vertical' ? 'layout-c' : ''}`}>
      <div className="meta-rail">
        <span>N° 01</span>
        <span className="bar"></span>
        <span>HARE-NO-HI NEESAN</span>
        <span className="bar"></span>
        <span>KIMONO ／ KITSUKE</span>
      </div>

      {layout === 'vertical' ? (
        <>
          <p className="vhead">
            着物って、<br/>
            <span className="accent">もっと気軽で</span>いい。
          </p>
          <div className="h-block">
            <span className="chip"><span className="dot"></span>ハレの日専門・着付け師</span>
            <p className="sub">
              知らなくて当然。<br/>
              だから、一緒に楽しもう。<br/>
              結婚式・七五三・入学卒業——<br/>
              人生の節目を、軽やかに。
            </p>
            <div className="actions">
              <a className="btn" href="#contact">
                ご予約はこちら <span className="arrow">→</span>
              </a>
              <a className="btn ghost" href="#services">サービスを見る</a>
            </div>
          </div>
        </>
      ) : (
        <>
          <div>
            <span className="chip"><span className="dot"></span>ハレの日専門・着付け師</span>
            <h1 style={{ marginTop: 28 }}>
              着物って、<br/>
              <span className="stroke">もっと</span>
              <span className="accent">気軽で</span>いい。
            </h1>
            <p className="sub">
              知らなくて当然。だから、一緒に楽しもう。<br/>
              結婚式・七五三・入学卒業——人生の節目を、軽やかに。
            </p>
            <div className="actions">
              <a className="btn" href="#contact">
                ご予約はこちら <span className="arrow">→</span>
              </a>
              <a className="btn ghost" href="#services">サービスを見る</a>
            </div>
          </div>
          <div className="hero-side">
            <div className="side-tag">
              <span>FIG. 001</span>
              <span>帯 ／ OBI</span>
            </div>
            <div className="img-slot">
              <div className="label">
                <span>IMAGE PLACEHOLDER</span>
                <span>1080 × 1440</span>
              </div>
              <div className="desc">帯と小物の<br/>クローズアップ写真</div>
              <div className="label">
                <span>後ろ姿でも可</span>
                <span>↗</span>
              </div>
            </div>
            <div className="vtext">一緒に、楽しもう。</div>
          </div>
        </>
      )}

      <div className="scroll-cue">
        <span>SCROLL</span>
        <span className="line"></span>
        <span>↓</span>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="scene about">
      <div className="left">
        <span className="eyebrow">ABOUT ／ N° 02</span>
        <h2>
          素人だった私が、<br/>
          着付け師になった理由。
        </h2>
        <p>
          着物の世界は、敷居が高い。私自身、最初はそう思っていました。
          ルールも、お作法も、難しい言葉も、たくさんある。
        </p>
        <p>
          でも、ハレの日に着物をまとうことは、本来もっと楽しくて、
          もっと自由なものだと思うのです。「知らなくて当然」を入り口に、
          肩の力を抜いて、その日を心から楽しんでもらえる着付けを。
        </p>
        <p>
          副業として始めて5年。年間200名近くのお客様の<br/>
          ハレの日に立ち会わせていただいています。
        </p>
      </div>

      <div className="right">
        <div className="stat-card">
          <div className="num">200<small>名／年</small></div>
          <div className="lbl">年間着付け実績</div>
          <span className="mono">ANNUAL CLIENTS</span>
        </div>
        <div className="stat-card">
          <div className="num">5<small>年</small></div>
          <div className="lbl">着付け師としての歩み</div>
          <span className="mono">EXPERIENCE</span>
        </div>
        <div className="stat-card">
          <div className="num">4<small>シーン</small></div>
          <div className="lbl">対応するハレの日</div>
          <span className="mono">OCCASIONS</span>
        </div>
        <div className="stat-card">
          <div className="num">98<small>%</small></div>
          <div className="lbl">「また頼みたい」の声</div>
          <span className="mono">REPEAT RATE</span>
        </div>

        <div className="quote-card">
          <div className="qmark">「</div>
          <p>
            着物は、知っていないと着られないもの——<br/>
            ではなく、知らないからこそ、誰かと一緒に<br/>
            楽しむもの。それが、私の信じていることです。
          </p>
          <div className="sig">— HARE-NO-HI NEESAN</div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.About = About;