// SECTION 06 Menus / SECTION 07 Gallery / SECTION 08 Voice

function Menus(){
  const menus = [
    {
      id: 'menu-straight',
      eng: 'TREATMENT 01',
      tag: 'STRAIGHT',
      name: '髪質改善ストレート',
      photo: 'assets/togai_after.jpg',
      body: 'うねり、ねじれ、広がりによって艶が出にくくなっている髪へ。髪の状態に合わせて薬剤を使い分け、硬さを感じにくい、自然で柔らかなストレートを目指します。'
    },
    {
      id: 'menu-color',
      eng: 'TREATMENT 02',
      tag: 'COLOR',
      name: '超高濃度水素カラー',
      photo: 'assets/sugino_after.jpg',
      body: 'カラーを楽しみながら、毛先の乾燥やゴワつきも気になる方へ。髪の状態に合わせて施術方法を調整し、艶と柔らかさのある仕上がりを目指します。'
    },
    {
      id: 'menu-treatment',
      eng: 'TREATMENT 03',
      tag: 'REPAIR',
      name: '毛髪復元トリートメント',
      photo: 'assets/tsuji_after.jpg',
      body: 'パサつき、広がり、手触り、艶不足が気になる髪へ。現在のダメージ状態を見極め、必要なケアを行います。'
    }
  ];
  return (
    <section className="section bg-paper" id="menu">
      <div className="container wide">
        <Reveal><div className="kicker">TREATMENTS</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">必要なのは、<br/>トリートメントなのか。<br/>ストレートなのか。</h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lede" style={{marginTop:28}}>髪の状態に合わせて、必要な施術だけをご提案します。</p>
        </Reveal>
        <div className="menu-stack">
          {menus.map((m, i) => (
            <article key={m.id} id={m.id} className={`menu-card ${i % 2 === 1 ? 'reverse' : ''}`}>
              <MaskImage className="menu-card__photo" src={m.photo} alt={m.name}/>
              <Reveal delay={1}>
                <div>
                  <div className="menu-card__name-eng">{m.eng}</div>
                  <span className="menu-card__tag">{m.tag}</span>
                  <h3 className="menu-card__name">{m.name}</h3>
                  <p className="menu-card__body">{m.body}</p>
                </div>
              </Reveal>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery(){
  const items = [
    { before:'assets/sugino_before.jpg', after:'assets/sugino_after.jpg', concern:'うねり・広がり', menu:'髪質改善ストレート × 水素カラー', time:'4時間' },
    { before:'assets/tsuji_before.jpg',  after:'assets/tsuji_after.jpg',  concern:'パサつき・乾燥', menu:'超高濃度水素ケアカラー', time:'3時間' },
    { before:'assets/sugino_before.jpg', after:'assets/togai_after.jpg', concern:'エイジング毛・うねり', menu:'美髪フルケアストレート', time:'4時間30分' },
    { before:'assets/tsuji_before.jpg',  after:'assets/sugino_after.jpg', concern:'カラーダメージ・乾燥', menu:'毛髪復元トリートメント＋カラー', time:'3時間30分' },
  ];
  return (
    <section className="section bg-ivory" id="gallery">
      <div className="container wide">
        <Reveal><div className="kicker">REAL RESULTS</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">理想ではなく、<br/>実際の仕上がり。</h2>
        </Reveal>
        <div className="gallery">
          {items.map((it, i) => (
            <article key={i} className="gallery-item">
              <Reveal>
                <figure>
                  <img src={it.before} alt="施術前" loading="lazy"/>
                  <figcaption>BEFORE</figcaption>
                </figure>
              </Reveal>
              <Reveal delay={1}>
                <figure>
                  <img src={it.after} alt="施術後" loading="lazy"/>
                  <figcaption>AFTER</figcaption>
                </figure>
              </Reveal>
              <Reveal as="dl" className="gallery-item__detail" delay={2}>
                <dt>CONCERN</dt><dd>{it.concern}</dd>
                <dt>MENU</dt><dd>{it.menu}</dd>
                <dt>TIME</dt><dd>{it.time}</dd>
              </Reveal>
            </article>
          ))}
        </div>
        <div className="gallery-cta">
          <Reveal>
            <a className="btn-primary gold" style={{display:'inline-flex'}} href="#diagnosis" onClick={() => track('diagnosis_start', { location: 'gallery' })}>
              <span>自分の髪に合う施術を 30秒で確認する</span><span className="arrow">→</span>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Voice({ reviews }){
  if (!reviews || !reviews.length) return null;
  return (
    <section className="section bg-paper" id="voice">
      <div className="container">
        <Reveal><div className="kicker">CUSTOMER VOICE</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">実際に通われている、<br/>お客様の言葉。</h2>
        </Reveal>
        <div className="voice-stack">
          {reviews.map((r, i) => (
            <Reveal key={i} as="article" className="voice-card">
              <p className="quote">「{r.headline}」</p>
              <p className="body">{r.body}</p>
              <div className="meta">
                {r.name}（{r.meta}） <span style={{color:'var(--muted-2)'}}>／ {r.date}</span>
                <span className="menu">{r.menu}</span>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal className="voice-cta">
          {SALONS.map(s => (
            <a key={s.id} className="btn-ghost dark" href={s.reviewUrl} target="_blank" rel="noopener noreferrer" onClick={() => track('review_click', { store: s.id })}>
              {s.name.replace('Lumiere ', '')}の口コミ
            </a>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

window.Menus = Menus;
window.Gallery = Gallery;
window.Voice = Voice;