/* Sections.jsx — Hero, KPIs, Manifeste, Ce qui ne change pas, Ce que vous gagnez */

function Hero() {
  const videoRef = useRef(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return undefined;

    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    let observer;
    let interactionFallbackArmed = false;

    const removeInteractionFallback = () => {
      if (!interactionFallbackArmed) return;
      interactionFallbackArmed = false;
      window.removeEventListener('pointerdown', retryAfterInteraction);
      window.removeEventListener('touchstart', retryAfterInteraction);
      window.removeEventListener('keydown', retryAfterInteraction);
    };

    const armInteractionFallback = () => {
      if (interactionFallbackArmed || reducedMotion.matches) return;
      interactionFallbackArmed = true;
      window.addEventListener('pointerdown', retryAfterInteraction, { once:true, passive:true });
      window.addEventListener('touchstart', retryAfterInteraction, { once:true, passive:true });
      window.addEventListener('keydown', retryAfterInteraction, { once:true });
    };

    const startPlayback = () => {
      if (reducedMotion.matches || document.visibilityState !== 'visible') return;
      video.muted = true;
      video.defaultMuted = true;
      try {
        const playback = video.play();
        if (playback && typeof playback.then === 'function') {
          playback.then(removeInteractionFallback).catch(armInteractionFallback);
        }
      } catch (_) {
        armInteractionFallback();
      }
    };

    function retryAfterInteraction() {
      removeInteractionFallback();
      startPlayback();
    }

    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') startPlayback();
    };

    const handleMotionPreference = () => {
      if (reducedMotion.matches) video.pause();
      else startPlayback();
    };

    if ('IntersectionObserver' in window) {
      observer = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) startPlayback();
      }, { threshold: 0.05 });
      observer.observe(video);
    }

    video.addEventListener('loadeddata', startPlayback);
    video.addEventListener('canplay', startPlayback);
    window.addEventListener('pageshow', startPlayback);
    document.addEventListener('visibilitychange', handleVisibilityChange);
    if (typeof reducedMotion.addEventListener === 'function') reducedMotion.addEventListener('change', handleMotionPreference);
    else if (typeof reducedMotion.addListener === 'function') reducedMotion.addListener(handleMotionPreference);
    startPlayback();

    return () => {
      if (observer) observer.disconnect();
      removeInteractionFallback();
      video.removeEventListener('loadeddata', startPlayback);
      video.removeEventListener('canplay', startPlayback);
      window.removeEventListener('pageshow', startPlayback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      if (typeof reducedMotion.removeEventListener === 'function') reducedMotion.removeEventListener('change', handleMotionPreference);
      else if (typeof reducedMotion.removeListener === 'function') reducedMotion.removeListener(handleMotionPreference);
    };
  }, []);

  return (
    <section style={{ position:'relative', minHeight:'100svh', display:'flex', alignItems:'flex-end',
      background:'#161616', overflow:'hidden' }}>
      <picture>
        <source media="(max-width: 640px)" srcSet="assets/img/hero-poster-mobile.jpg" />
        <img className="pf-hero-poster" src="assets/img/hero-poster.jpg" alt="" aria-hidden="true" />
      </picture>
      <video ref={videoRef} className="pf-hero-video" autoPlay muted loop playsInline preload="auto" aria-hidden="true" tabIndex="-1">
        <source media="(max-width: 640px)" src="assets/video/hero-mobile.mp4?v=20260904j" type="video/mp4" />
        <source src="assets/video/hero-desktop.mp4?v=20260904j" type="video/mp4" />
      </video>
      <div style={{ position:'absolute', zIndex:2, inset:0, background:'linear-gradient(180deg, rgba(18,18,18,.56) 0%, rgba(18,18,18,.18) 34%, rgba(18,18,18,.62) 66%, rgba(18,18,18,.94) 100%)' }} />
      <div className="pf-hero-inner" style={{ position:'relative', zIndex:3, maxWidth:1280, margin:'0 auto', padding:'0 40px 92px', width:'100%' }}>
        <Reveal>
          <Eyebrow style={{ color:'#BCB2A6' }}>Croissance externe - Groupe Patrimmofi</Eyebrow>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="pf-display-1" style={{ color:'#F2EEE8', maxWidth:'22ch', marginTop:18 }}>
            Nous rachetons des cabinets de gestion de patrimoine <em style={{ color:'#F2EEE8' }}>que l'on admire&nbsp;!</em>
          </h1>
        </Reveal>
        <Reveal delay={240}>
          <p className="pf-title-sec" style={{ color:'#F2EEE8', maxWidth:'54ch', marginTop:24 }}>
            Vous réinvestissez à nos côtés pour une nouvelle mi-temps professionnelle.
          </p>
        </Reveal>
        <Reveal delay={300}>
          <p className="pf-body-lg" style={{ color:'rgba(242,238,232,.82)', maxWidth:'57ch', marginTop:16 }}>
            Et nous les aidons à grandir, sans jamais les dénaturer. Vous gardez votre nom, votre équipe et vos clients. Vous gagnez la force d'un groupe.
          </p>
        </Reveal>
        <Reveal delay={360}>
          <p className="pf-title-sec" style={{ color:'#F2EEE8', marginTop:16 }}>
            Entrepreneur avant. Entrepreneur après. En mieux entouré.
          </p>
        </Reveal>
        <Reveal delay={420}>
          <div style={{ display:'flex', flexWrap:'wrap', alignItems:'center', gap:'18px 26px', marginTop:30 }}>
            <button onClick={()=>scrollToId('contact')} style={{
              fontFamily:'var(--font-sans)', fontSize:'var(--small-size)', fontWeight:500, letterSpacing:'.02em',
              color:'#161616', background:'#F2EEE8', border:'none', borderRadius:3, padding:'15px 28px', cursor:'pointer', transition:'background .3s' }}
              onMouseEnter={e=>e.currentTarget.style.background='#FFFFFF'} onMouseLeave={e=>e.currentTarget.style.background='#F2EEE8'}>
              Parlons de votre cabinet
            </button>
            <a onClick={()=>scrollToId('pourquoi')} style={{ display:'inline-flex', alignItems:'center', gap:12, cursor:'pointer',
              fontFamily:'var(--font-sans)', fontSize:'var(--caption-size)', letterSpacing:'.14em', textTransform:'uppercase', color:'#F2EEE8' }}>
              <span style={{ width:30, height:30, border:'1px solid rgba(242,238,232,.5)', borderRadius:'50%', display:'grid', placeItems:'center' }}>↓</span>
              Pourquoi nous
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* KPI band — public credibility figures (deck, partie 1) */
function Kpis() {
  const stats = [
    ['4 Md€', "d'actifs sous gestion"],
    ['150', 'talents'],
    ['6 000+', 'familles conseillées'],
    ['500 M€+', 'de collecte par an'],
  ];
  return (
    <section style={{ position:'relative', background:'#161616', padding:'110px 40px', overflow:'hidden' }}>
      <Bg src="assets/img/group.jpg" position="center" opacity={0.5} />
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(18,18,18,.82), rgba(18,18,18,.9))' }} />
      <div style={{ position:'relative', maxWidth:1180, margin:'0 auto' }}>
        <Reveal>
          <p className="pf-h3" style={{ color:'rgba(242,238,232,.8)', textAlign:'center', maxWidth:'30ch', margin:'0 auto 56px', fontStyle:'italic' }}>
            Une famille que l'on rejoint, pas un fonds qui absorbe.
          </p>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:40, textAlign:'center' }} className="pf-stats">
            {stats.map(([n,l])=>(
              <div key={l}>
                <div className="pf-metric" style={{ color:'#F2EEE8' }}>{n}</div>
                <div className="pf-small" style={{ color:'rgba(242,238,232,.62)', marginTop:14, maxWidth:'18ch', marginInline:'auto' }}>{l}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* Manifeste - acquérir pour se réinvestir */
const MANIFESTO = [
  ["Reprendre un cabinet, ce n'est pas le faire disparaître.", "Chez nous, c'est le faire naître !", "On fait l'acquisition de votre cabinet, vous réinvestissez dans le Groupe à nos côtés… On repart de plus belle ensemble, pour servir toujours mieux nos clients, mais dans un collectif d'entrepreneurs soudés et engagés dans une vision commune.", '', 'assets/img/liberte.jpg', 'center'],
  ['Votre conseil', 'ne se standardise pas.', "Liberté totale de conseil. Pas de produit imposé, pas de quota : vous recommandez ce qui est juste, pour chaque client, à chaque instant. Et parce que la liberté n'exclut pas la rigueur, un comité de pilotage et un comité d'investissement veillent au grain : due diligence blindée, sélection de produits sans compromis.", 'Libre. Jamais seul.', 'assets/img/authenticite.jpg', 'center'],
  ['Vous restez', 'aux commandes.', "Forte autonomie des dirigeants. Développement, recrutement, croissance externe : les clés restent entre vos mains. Rejoindre une vision commune, ce n'est pas la subir : c'est aller plus loin, plus vite, ensemble.", 'Nous donnons les moyens. Vous gardez le volant.', 'assets/img/engagement.jpg', 'center'],
];

function Manifesto() {
  return (
    <section id="pourquoi" style={{ background:'#F2EEE8', padding:'120px 40px' }}>
      <div style={{ maxWidth:1140, margin:'0 auto' }}>
        <Reveal><Eyebrow>On ne reprend pas. On s'associe.</Eyebrow></Reveal>
        <Reveal delay={100}>
          <h2 className="pf-display-2" style={{ maxWidth:'20ch', marginTop:14 }}>
            Acquérir pour <em>se réinvestir.</em>
          </h2>
        </Reveal>
        <div style={{ display:'flex', flexDirection:'column', gap:80, marginTop:84 }}>
          {MANIFESTO.map(([a,b,body,closing,img,pos],i)=>(
            <Reveal key={i}>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'center' }} className="pf-conv-row">
                <div style={{ order: i%2 ? 2 : 1 }}>
                  <Img src={img} position={pos} ratio="4 / 3" radius={4} overlay="linear-gradient(160deg, rgba(0,0,0,0) 55%, rgba(78,68,59,.22) 100%)" />
                </div>
                <div style={{ order: i%2 ? 1 : 2 }}>
                  <h3 className="pf-display-3">{a}<br/><em>{b}</em></h3>
                  <p className="pf-body-lg" style={{ color:'#5C5246', marginTop:22 }}>{body}</p>
                  {closing && <p className="pf-title-sec" style={{ marginTop:18 }}>{closing}</p>}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Ce qui ne change pas (dark) */
const KEEP = [
  ['maison', 'Votre réussite', "Votre réussite ne s'efface pas. Elle rayonne. On ne la dilue pas, au contraire on la met au service de tous les clients du Groupe. Votre histoire continue de s'écrire. Juste plus grand."],
  ['beneficiaires', 'Vos clients', "La relation que vous avez bâtie vous appartient. Rien ne change pour vos clients, mais tout s'améliore : conformité simplifiée, IA, offre produit, qualité du conseil, partage d'expérience..."],
  ['associes', 'Votre équipe', "Vos équipes restent. Elles gagnent des outils, des pratiques, du temps, une communauté de pairs et forcément des amitiés à créer. Le terrain de jeu a changé : seuls les grands clubs peuvent s'offrir les meilleurs joueurs. Foulez cette pelouse à nos côtés."],
  ['cles', 'Votre autonomie', "Autonomie pleine et entière. On ne s'associe pas à des cabinets à dresser : on s'associe à des entrepreneurs qui ont déjà réussi. Notre rôle : vous permettre d'aller plus loin. Jamais vous mettre en cage."],
];

function Autonomie() {
  return (
    <section id="autonomie" style={{ background:'#161616', padding:'120px 40px' }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <Reveal><Eyebrow style={{ color:'#BCB2A6' }}>Ce qui ne change pas</Eyebrow></Reveal>
        <Reveal delay={100}>
          <h2 className="pf-display-2" style={{ color:'#F2EEE8', marginTop:12, maxWidth:'18ch' }}>
            Votre maison reste <em style={{ color:'#F2EEE8' }}>votre maison.</em>
          </h2>
        </Reveal>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:28, marginTop:64 }} className="pf-keep-grid">
          {KEEP.map(([icon,t,body],i)=>(
            <Reveal key={t} delay={i*90}>
              <div style={{ background:'#211F1D', border:'1px solid rgba(255,255,255,.08)', borderRadius:4, padding:'34px 28px', height:'100%' }}>
                <PfIcon name={icon} size={44} tone="creme" />
                <h3 className="pf-h3" style={{ color:'#F2EEE8', fontStyle:'italic', marginTop:22 }}>{t}</h3>
                <p className="pf-body" style={{ color:'rgba(242,238,232,.74)', marginTop:12 }}>{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Ce que vous gagnez (cream) — l'accompagnement du Groupe (deck slides 17-19) */
const GAINS = [
  ['croissance', 'Synergies commerciales', "Les bonnes pratiques du Groupe, taillées pour votre cabinet. Une collecte qui accélère."],
  ['contrat', 'Kit réglementaire', "Procédures, modèles, référentiels à jour : une conformité Groupe qui veille avec vous, pas sur vous."],
  ['rouages', 'Outils en quelques semaines', "Datalake boosté à l'IA, intégré en moins d'un mois. Zéro rupture pour vos clients."],
  ['ampoule', 'Expertise du Groupe', "Gestion privée, gestion de fortune, family office."],
  ['associes', "Communauté d'entrepreneurs", "Le collège des associés : un casting hors norme qui combine toutes les expertises et travaille de concert."],
  ['institutionnel', 'Plateforme nationale', "Présents partout en France, épaulés par 60 personnes en support. Vous n'êtes plus seul."],
];

function Gains() {
  return (
    <section style={{ background:'#F2EEE8', padding:'120px 40px' }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <Reveal><Eyebrow>Ce que le Groupe apporte</Eyebrow></Reveal>
        <Reveal delay={100}>
          <h2 className="pf-display-2" style={{ marginTop:12, maxWidth:'16ch' }}>
            La liberté d'un cabinet. <em>La force d'un groupe.</em>
          </h2>
        </Reveal>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:26, marginTop:64 }} className="pf-gains-grid">
          {GAINS.map(([icon,t,body],i)=>(
            <Reveal key={t} delay={(i%3)*90}>
              <div style={{ background:'#FAF8F4', border:'1px solid #E7E0D5', borderRadius:4, padding:'36px 32px', height:'100%' }}>
                <PfIcon name={icon} size={44} tone="rouge" />
                <h3 className="pf-h3" style={{ marginTop:22 }}>{t}</h3>
                <p className="pf-body" style={{ color:'#5C5246', marginTop:12 }}>{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Kpis, Manifesto, Autonomie, Gains });