/* global React */
const { useEffect, useRef, useState } = React;

/* ============================================
   NAVIGATION
   ============================================ */
function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    padding: scrolled ? '14px 0' : '24px 0',
    transition: 'all 0.5s cubic-bezier(0.2, 0.7, 0.2, 1)',
    background: scrolled ? 'rgba(8, 7, 10, 0.72)' : 'transparent',
    backdropFilter: scrolled ? 'blur(24px) saturate(140%)' : 'none',
    WebkitBackdropFilter: scrolled ? 'blur(24px) saturate(140%)' : 'none',
    borderBottom: scrolled ? '1px solid rgba(47,133,90,0.12)' : '1px solid transparent',
  };

  return (
    <nav style={navStyle}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#hero" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--vp-cream)' }}>
              Vivo <span className="display-italic" style={{ color: 'var(--vp-gold-light)' }}>Partner</span>
            </span>
            <span className="mono" style={{ fontSize: 9, letterSpacing: '0.18em', color: 'var(--vp-cream-faint)', marginTop: 4, textTransform: 'uppercase' }}>
              IA · Automation · Growth
            </span>
          </div>
        </a>

        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }} className="nav-links">
          {['Services', 'Process', 'Résultats', 'Tarifs'].map((l, i) => (
            <a key={l} href={`#${['services','process','proof','urgence'][i]}`} style={{
              color: 'var(--vp-cream-dim)', textDecoration: 'none', fontSize: 14, fontWeight: 450,
              transition: 'color 0.3s',
            }} onMouseEnter={e=>e.target.style.color='var(--vp-gold-light)'}
               onMouseLeave={e=>e.target.style.color='var(--vp-cream-dim)'}>
              {l}
            </a>
          ))}
        </div>

        <a href="#booking" className="btn btn-primary" style={{ height: 44, fontSize: 14, padding: '0 22px' }}>
          Réserver un appel
          <span className="btn-arrow">→</span>
        </a>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

/* ============================================
   ANIMATED COUNTER
   ============================================ */
function Counter({ to, prefix = '', suffix = '', decimals = 0, duration = 1800 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);

  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min((t - start) / duration, 1);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(to * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);

  return (
    <span ref={ref}>
      {prefix}{decimals > 0 ? val.toFixed(decimals) : Math.floor(val).toLocaleString('fr-FR')}{suffix}
    </span>
  );
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
function useReveal() {
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('in-view');
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -80px 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

Object.assign(window, { Navbar, Counter, useReveal });