// SECTION 00 (opening) + SECTION 01 (hero)
function Opening(){
  const [hidden, setHidden] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setHidden(true), 1100);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className={`opening ${hidden ? 'hidden' : ''}`} aria-hidden={hidden}>
      <div className="opening__logo">LUMIeRE</div>
    </div>
  );
}

function Hero(){
  return (
    <section className="hero" id="top">
      <div className="hero__photo">
        <img src="assets/tsuji_after.jpg" alt="ルミエールの仕上がり" />
      </div>
      <div className="hero__veil"/>
      <div className="hero__inner">
        <div className="hero__eng reveal is-in">
          <MaskLine delay={1}>NON-DAMAGE HAIR SALON</MaskLine>
          <br/>
          <MaskLine delay={2}>HIMEJI <span className="div"/> KOBE</MaskLine>
        </div>
        <h1 className="hero__title">
          <div><MaskLine delay={2}>本当に髪を綺麗にしたい人が、</MaskLine></div>
          <div><MaskLine delay={3}>最後に選ぶサロン。</MaskLine></div>
        </h1>
        <p className="hero__sub">
          <MaskLine delay={4}>傷んでから補うのではなく、</MaskLine><br/>
          <MaskLine delay={5}>そもそも傷ませないという選択。</MaskLine>
        </p>
        <Reveal delay={5} className="hero__cta">
          <a className="btn-primary" href="#salon" onClick={() => track('reservation_click', { location: 'hero' })}>
            <span>空き状況を見る</span><span className="arrow">→</span>
          </a>
          <a className="btn-ghost" href="#diagnosis" onClick={() => track('diagnosis_start', { location: 'hero' })}>
            <span>30秒で自分に合う施術を診断</span><span className="arrow">→</span>
          </a>
        </Reveal>
      </div>
      <div className="hero__scroll">SCROLL</div>
    </section>
  );
}

window.Opening = Opening;
window.Hero = Hero;