/* Root app */

const { useState: useStateA, useEffect: useEffectA } = React;

function BgSlider() {
  const imgs = [
    IMG.case13, IMG.case11, IMG.case4, IMG.case6,
    IMG.case10, IMG.case12, IMG.case8,
  ].filter(Boolean);
  if (!imgs.length) return null;
  const set = [...imgs, ...imgs]; // duplicate for seamless loop
  return (
    <div className="bg-slider" aria-hidden="true">
      <div className="bg-row bg-row-fwd">
        {set.map((src, i) => (
          <div key={i} className="bg-item"><img src={src} alt=""/></div>
        ))}
      </div>
    </div>
  );
}

function App() {
  const [tw, setTw] = useTweaks();
  const [tweaksOn, setTweaksOn] = useStateA(false);
  const [footerReached, setFooterReached] = useStateA(false);

  useEffectA(() => {
    const handler = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOn(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e){}
    return () => window.removeEventListener('message', handler);
  }, []);

  useEffectA(() => {
    const footer = document.querySelector('.site-footer');
    if (!footer) return;
    const observer = new IntersectionObserver(
      ([entry]) => setFooterReached(entry.isIntersecting),
      { threshold: 0 }
    );
    observer.observe(footer);
    return () => observer.disconnect();
  }, []);

  return (
    <>
      {IMG.hamon && (
        <div className="hamon-layer" aria-hidden="true">
          <img src={IMG.hamon} className="hamon hamon-top" alt=""/>
          <img src={IMG.hamon} className="hamon hamon-br" alt=""/>
        </div>
      )}
      <BgSlider/>
      <div className="lp-deco-left" aria-hidden="true">
        <div className="lp-deco-text-pair">
          <p className="lp-deco-main">木と暮らす</p>
          <p className="lp-deco-main">無垢の家</p>
        </div>
      </div>

      <div className="shell">
        {/* <Header/> */}
        <main>
          <Hero />
          <AmazonBanner/>
          <EventDetails/>
          <Recommend/>
          <Guides/>
          <TakeYourTime/>
          <Highlights/>
          <BuildInfo/>
          <Gallery/>
          <About/>
          <EventDetails/>
          <Steps/>
          <Works/>
          <Voices/>
          <Message/>
          <Faq/>
          <EventDetails alt/>
          <Company/>
        </main>
        <Footer/>
      </div>

      {tw.showFloatingCta && (
        <div className={`cta-float${footerReached ? ' is-hidden' : ''}`}>
          <a href={window.JICOO_URL} target="_blank" rel="noopener" className="btn">
            <span>予約の空き状況をみる</span>
            <span className="arrow">→</span>
          </a>
        </div>
      )}

      <TweaksPanel tw={tw} setTw={setTw} visible={tweaksOn}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);