// SECTION 12 Salons / SECTION 13 Final / Footer / Sticky CTA

function Salons(){
  return (
    <section className="section bg-paper" id="salon">
      <div className="container wide">
        <Reveal><div className="kicker">SALON</div></Reveal>
        <Reveal delay={1}>
          <h2 className="h-display">お近くの店舗から、<br/>ご予約ください。</h2>
        </Reveal>
        <div className="salon-stack">
          {SALONS.map((s, i) => (
            <article key={s.id} className="salon-card">
              <MaskImage className="salon-card__photo" src={s.image} alt={s.name}/>
              <Reveal delay={Math.min(i+1, 3)}>
                <div>
                  <div className="salon-card__area">{s.area}</div>
                  <h3 className="salon-card__name">{s.name.replace('Lumiere ', '')}</h3>
                  <dl className="salon-card__info">
                    <dt>ADDRESS</dt><dd>{s.address}</dd>
                    <dt>OPEN</dt><dd>{s.hours}</dd>
                    <dt>CLOSED</dt><dd>{s.closed}</dd>
                  </dl>
                  <a className="btn-primary gold" href={s.bookingUrl} target="_blank" rel="noopener noreferrer"
                     onClick={() => { track('store_select', { store: s.id }); track('hotpepper_click', { store: s.id, source: 'salon' }); track('reservation_click', { store: s.id }); }}>
                    <span>この店舗で予約する</span><span className="arrow">→</span>
                  </a>
                </div>
              </Reveal>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Final(){
  return (
    <section className="final">
      <div className="final__bg">
        <img src="assets/tsuji_after.jpg" alt=""/>
      </div>
      <div className="final__inner">
        <Reveal><div className="kicker" style={{color:'#e8d9b9'}}><span style={{background:'#e8d9b9',width:24,height:1,display:'inline-block'}}/> &nbsp; CHANGE STARTS HERE &nbsp; <span style={{background:'#e8d9b9',width:24,height:1,display:'inline-block'}}/></div></Reveal>
        <Reveal delay={1}>
          <h2 className="final__title">髪が変わると、<br/>毎日が変わる。</h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="final__body">朝のスタイリングが、楽になる。</p>
          <p className="final__body">乾かすだけで、まとまりやすくなる。</p>
          <p className="final__body">湿気のある日も、髪を気にせず過ごせる。</p>
          <p className="final__body">「髪、綺麗ですね」と言われる瞬間が、増える。</p>
        </Reveal>
        <Reveal delay={3}>
          <p className="final__body" style={{marginTop:32}}>
            そんな毎日につながる施術を、<br/>
            ルミエールはご提案します。
          </p>
        </Reveal>
        <Reveal delay={4} className="final__cta">
          <a className="btn-ghost" href="#diagnosis" onClick={() => track('diagnosis_start', { location: 'final' })}>
            <span>30秒診断を始める</span><span className="arrow">→</span>
          </a>
          <a className="btn-ghost" href="#salon" onClick={() => track('reservation_click', { location: 'final' })}>
            <span>お近くの店舗を予約する</span><span className="arrow">→</span>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer className="footer">
      <div className="footer__brand">LUMIeRE</div>
      <div className="footer__cols">
        <div className="footer__col">
          <h4>CONCEPT</h4>
          <p>本当に髪を綺麗にしたい人が、最後に選ぶサロン。<br/>姫路・神戸のノンダメージサロン®認定店。</p>
        </div>
        {SALONS.map(s => (
          <div className="footer__col" key={s.id}>
            <h4>{s.area}</h4>
            <p style={{marginBottom:8}}>{s.name.replace('Lumiere ', '')}</p>
            <p style={{fontSize:11,lineHeight:1.7,color:'#a1957f'}}>{s.address}</p>
            <a href={s.bookingUrl} target="_blank" rel="noopener noreferrer" style={{marginTop:8,letterSpacing:'.18em',fontSize:11,color:'#e3d6b9'}}>
              RESERVATION →
            </a>
          </div>
        ))}
      </div>
      <div className="footer__bottom">
        <p>© Lumiere. All rights reserved.</p>
      </div>
    </footer>
  );
}

function StickyCTA(){
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.5);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${show ? 'show' : ''}`}>
      <a href="#diagnosis" onClick={() => track('diagnosis_start', { location: 'sticky' })}>
        <span>
          <span className="ja">30秒診断</span>
          <span className="en">DIAGNOSIS</span>
        </span>
      </a>
      <a href="#salon" onClick={() => track('reservation_click', { location: 'sticky' })}>
        <span>
          <span className="ja">空き状況を見る</span>
          <span className="en">RESERVE</span>
        </span>
      </a>
    </div>
  );
}

window.Salons = Salons;
window.Final = Final;
window.Footer = Footer;
window.StickyCTA = StickyCTA;