// SECTION 02 Numbers / SECTION 03 First BA / SECTION 04 Troubles / SECTION 05 Answer

function Numbers(){
  return (
    <section className="numbers" id="trust">
      <div className="container wide">
        <Reveal>
          <div className="kicker">PROOF IN NUMBERS</div>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">数字で見る、ルミエールの<br/>これまで。</h2>
        </Reveal>
        <div className="numbers__grid">
          <Reveal className="num-card" delay={1}>
            <div className="label">CERTIFIED</div>
            <div className="figure">全国<CountUp to={1}/><span className="pct">%</span></div>
            <div className="lead">ノンダメージサロン®認定店</div>
            <div className="divider"/>
            <div className="desc">全国でも限られたサロンのみが認定される、髪を傷ませない技術基準。</div>
          </Reveal>
          <Reveal className="num-card" delay={2}>
            <div className="label">PREMIUM SALON</div>
            <div className="figure"><CountUp to={3}/><span className="unit">年連続</span></div>
            <div className="lead">プレミアムゴールドサロン受賞</div>
            <div className="divider"/>
            <div className="desc">上質なサロン体験と確かな技術が評価され、連続して認定をいただいています。</div>
          </Reveal>
          <Reveal className="num-card" delay={3}>
            <div className="label">AWARD</div>
            <div className="figure"><CountUp to={4}/><span className="unit">年連続</span></div>
            <div className="lead">HOT PEPPER Beauty AWARD 受賞</div>
            <div className="divider"/>
            <div className="desc">技術と顧客満足の両面で、業界全体から評価をいただいています。</div>
          </Reveal>
          <Reveal className="num-card" delay={4}>
            <div className="label">VISITORS / YEAR</div>
            <div className="figure"><CountUp to={9000} duration={2000}/><span className="unit">名以上</span></div>
            <div className="lead">姫路・神戸エリアでの年間ご来店</div>
            <div className="divider"/>
            <div className="desc">本気で髪を綺麗にしたい、多くのお客様にお選びいただいています。</div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FirstBA(){
  const items = [
    {
      before: 'assets/sugino_before.jpg',
      after:  'assets/sugino_after.jpg',
      age: '20代',
      concern: 'うねり・広がり・ツヤ不足',
      menu: '髪質改善ストレート × 超高濃度水素カラー',
      time: '4時間'
    },
    {
      before: 'assets/tsuji_before.jpg',
      after:  'assets/tsuji_after.jpg',
      age: '30代',
      concern: 'パサつき・まとまり不足',
      menu: '超高濃度水素ケアカラー＋カット',
      time: '3時間'
    },
  ];
  return (
    <section className="section bg-ivory" id="before-after">
      <div className="container wide">
        <Reveal><div className="kicker">BEFORE / AFTER</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">まずは、<br/>仕上がりをご覧ください。</h2>
        </Reveal>
        <div style={{marginTop:64}}>
          {items.map((it, i) => (
            <div key={i} style={{marginBottom: i < items.length - 1 ? 80 : 0}}>
              <Reveal>
                <div className="ba-pair">
                  <figure><img src={it.before} alt="施術前" loading="lazy"/><figcaption>BEFORE</figcaption></figure>
                  <figure><img src={it.after} alt="施術後" loading="lazy"/><figcaption>AFTER</figcaption></figure>
                </div>
              </Reveal>
              <Reveal delay={1}>
                <div className="ba-detail">
                  <dl>
                    <dt>AGE</dt><dd>{it.age}</dd>
                    <dt>CONCERN</dt><dd>{it.concern}</dd>
                    <dt>MENU</dt><dd>{it.menu}</dd>
                    <dt>TIME</dt><dd>{it.time}</dd>
                  </dl>
                </div>
              </Reveal>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Troubles(){
  const lines = [
    <>カラーをするたびに、<span className="em">毛先が乾燥する</span>。</>,
    <>縮毛矯正をしても、<span className="em">しばらくすると広がってくる</span>。</>,
    <>髪質改善を続けているのに、<span className="em">思っていた仕上がりにならない</span>。</>,
    <>毎朝アイロンをしても、<span className="em">湿気ですぐに崩れてしまう</span>。</>,
    <>年齢とともに、<span className="em">うねりやツヤの低下</span>が気になってきた。</>,
  ];
  return (
    <section className="section bg-paper">
      <div className="container">
        <Reveal><div className="kicker">HAIR TROUBLES</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">何度ケアしても、<br/>なぜか髪が綺麗にならない。</h2>
        </Reveal>
        <ul className="trouble-list">
          {lines.map((l, i) => (
            <Reveal key={i} as="li" delay={Math.min(i+1,5)}>{l}</Reveal>
          ))}
        </ul>
        <Reveal>
          <p className="trouble-conclusion">
            髪が綺麗にならない原因は、<br/>
            トリートメントが足りないからとは限りません。
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function Answer(){
  return (
    <section className="section bg-ivory">
      <div className="container">
        <Reveal><div className="kicker">OUR ANSWER</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">髪の表面だけではなく、<br/>綺麗にならない原因を見る。</h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lede" style={{marginTop:32}}>
            くせなのか。<br/>
            ダメージなのか。<br/>
            カラー履歴による負担なのか。<br/>
            髪内部の水分不足なのか。
          </p>
        </Reveal>
        <Reveal delay={3}>
          <p className="lede" style={{marginTop:24}}>
            ルミエールは、現在の髪の状態とこれまでの施術履歴から、<br/>本当に必要な施術を見極めます。
          </p>
        </Reveal>
        <Reveal delay={4}>
          <p className="trouble-conclusion" style={{marginTop:48}}>
            傷んでから補うだけではなく、<br/>
            <span style={{color:'var(--accent)'}}>そもそも傷ませず</span>、髪そのものを綺麗にする。
          </p>
        </Reveal>
      </div>
    </section>
  );
}

window.Numbers = Numbers;
window.FirstBA = FirstBA;
window.Troubles = Troubles;
window.Answer = Answer;