// V4 Home — architecture fp-slide, scroll hint via document.body (hors fp-root overflow)
const { useState, useEffect, useRef } = React;

const FP_SLIDES = [
  { id: 'hero',       label: 'Accueil'    },
  { id: 'expertises', label: 'Expertises' },
  { id: 'chiffres',   label: 'Chiffres'   },
  { id: 'methode',    label: 'Manifeste'  },
  { id: 'domaines',   label: 'Réseau'     },
  { id: 'ia',         label: 'Cas client' },
  { id: 'temoignage', label: 'Témoignage' },
  { id: 'contact',    label: 'Contact'    },
];

function FpNav({ active, slides, onSlideClick }) {
  const items = slides || FP_SLIDES;
  const compact = items.length > 9;

  function goTo(idx) {
    if (onSlideClick) { onSlideClick(idx); return; }
    const s = FP_SLIDES[idx];
    if (!s) return;
    const el = document.getElementById('fp-' + s.id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }

  return (
    <nav className={'fp-nav' + (compact ? ' fp-nav-compact' : '')} aria-label="Navigation sections">
      {items.map((s, i) => (
        <button key={s.id || i}
          className={'fp-nav-item' + (active === i ? ' fp-nav-active' : '')}
          onClick={() => goTo(i)} aria-label={s.label}>
          <span className="fp-nav-dot"></span>
          {!compact && <span className="fp-nav-label">{s.label}</span>}
        </button>
      ))}
    </nav>
  );
}

function V4Home({ navigate, openModal, tweaks }) {
  const [active, setActive] = useState(0);
  const rootRef = useRef(null);

  // Scroll hint en position:fixed sur body — indépendant de tout stacking context
  useEffect(() => {
    const c = 'rgba(30,30,50,0.72)';
    const hint = document.createElement('div');
    hint.id = 'v4-scroll-hint';
    hint.style.cssText = 'position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:99999;pointer-events:none;transition:opacity 0.4s;opacity:1;background:rgba(255,255,255,0.55);backdrop-filter:blur(8px);border-radius:20px;padding:6px 14px';
    hint.innerHTML = `<span style="font-family:var(--f-mono);font-size:7px;letter-spacing:.22em;text-transform:uppercase;color:${c};display:block">SCROLL</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="${c}" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" style="animation:scrollBounce 1.9s ease-in-out infinite;display:block"><polyline points="6 9 12 15 18 9"/></svg>`;
    document.body.appendChild(hint);
    return () => hint.remove();
  }, []);

  useEffect(() => {
    const hint = document.getElementById('v4-scroll-hint');
    if (hint) hint.style.opacity = active >= FP_SLIDES.length - 1 ? '0' : '1';
  }, [active]);

  // IntersectionObserver : fade-in slides + dot actif + progress bar
  useEffect(() => {
    if (window.__fpProgressInit) window.__fpProgressInit();
    const root = rootRef.current;
    if (!root) return;

    const fallback = setTimeout(() => {
      root.querySelectorAll('.fp-slide').forEach(s => s.classList.add('fp-visible'));
    }, 600);

    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('fp-visible');
          const idx = FP_SLIDES.findIndex(s => 'fp-' + s.id === entry.target.id);
          if (idx >= 0) setActive(idx);
        }
      });
    }, { root, threshold: 0.1 });

    root.querySelectorAll('.fp-slide').forEach(s => io.observe(s));
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);

  return (
    <div id="fpRoot" ref={rootRef} className="fp-root">
      <div className="fp-progress" />

      <div id="fp-hero" className="fp-slide fp-visible">
        <HomeHero navigate={navigate} tweaks={tweaks} />
      </div>

      <div id="fp-expertises" className="fp-slide fp-auto" style={{ position: 'relative' }}>
        <HomeCards navigate={navigate} openModal={openModal} />
      </div>

      <div id="fp-chiffres" className="fp-slide fp-auto">
        <HomeStats />
        <HomeMarquee />
      </div>

      <div id="fp-methode" className="fp-slide">
        <HomeManifesto />
      </div>

      <div id="fp-domaines" className="fp-slide">
        <HoneycombSection navigate={navigate} />
      </div>

      <div id="fp-ia" className="fp-slide">
        <HomeDomain7 navigate={navigate} />
      </div>

      <div id="fp-temoignage" className="fp-slide">
        <HomeTestimonial />
      </div>

      <div id="fp-contact" className="fp-slide fp-auto">
        <HomeCTA navigate={navigate} />
        <Footer navigate={navigate} />
      </div>
    </div>
  );
}

Object.assign(window, { FP_SLIDES, FpNav, V4Home });