// sovereignty.jsx — Section "Coffre-fort" full-bleed sombre.
// Le SVG est chargé via <object> (pas <img>) pour que ses animations
// SMIL (animateMotion) s'exécutent — <img> les bloque par design.

function useInView(ref, threshold) {
  const [v, setV] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    if (!('IntersectionObserver' in window)) { setV(true); return; }
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setV(true); io.disconnect(); } },
      { threshold: threshold || 0.12 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return v;
}

function Sovereignty() {
  const ref    = React.useRef(null);
  const active = useInView(ref, 0.12);

  const pillars = [
    {
      h: 'Une clé. La vôtre.',
      p: 'Le token de votre NAS reste sur vos appareils. Il n\'est ni stocké, ni transmis, ni connu de qui que ce soit d\'autre que vous.',
    },
    {
      h: 'Aucun intermédiaire.',
      p: 'Pas de cloud BudGi, pas de prestataire DSP2, pas d\'analytics. La trajectoire de vos données est triviale : appareil ↔ votre NAS.',
    },
    {
      h: 'Hors-ligne ready.',
      p: 'Tout fonctionne sans internet. La PWA est autonome, persiste localement, et synchronise quand le réseau revient.',
    },
  ];

  return (
    <section
      id="sovereignty"
      ref={ref}
      style={{
        background: '#0E1116',
        color: '#FFFFFF',
        width: '100vw',
        marginLeft: 'calc(50% - 50vw)',
        padding: 'clamp(4rem,10vw,9rem) 0',
        overflowX: 'hidden',
        position: 'relative',
        opacity: active ? 1 : 0,
        transition: 'opacity .9s ease',
      }}
    >
      <div style={{
        maxWidth: 1100,
        margin: '0 auto',
        padding: '0 clamp(1.25rem,4vw,2.5rem)',
      }}>

        {/* Eyebrow + Titre + sous-titre, centrés */}
        <div style={{
          textAlign: 'center',
          maxWidth: 720,
          margin: '0 auto clamp(2.5rem,5vw,4rem)',
        }}>
          <div style={{
            fontSize: 11, fontWeight: 600, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: '#9CA3AF',
            marginBottom: 18,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <span style={{
              width: 5, height: 5, borderRadius: '50%',
              background: 'currentColor', display: 'inline-block',
            }}/>
            Souveraineté digitale
          </div>

          <h2 style={{
            fontFamily: 'var(--serif)',
            fontSize: 'clamp(2.5rem,6vw,4.5rem)',
            lineHeight: 1.06, fontWeight: 400,
            color: '#FFFFFF', letterSpacing: '-0.022em',
            margin: '0 0 1.4rem',
            fontVariationSettings: '"opsz" 144',
          }}>
            Le coffre-fort,<br/>
            <em style={{ fontStyle: 'italic', color: '#FFFFFF' }}>c'est chez vous.</em>
          </h2>

          <p style={{
            fontSize: 'clamp(1rem,1.5vw,1.125rem)',
            lineHeight: 1.65, color: '#9CA3AF',
            maxWidth: 560, margin: '0 auto',
          }}>
            Vos données restent dans votre maison. Tous vos appareils
            se synchronisent entre eux — sans jamais passer par internet.
          </p>
        </div>

        {/* Diagramme — <object> pour que les animations SMIL s'exécutent */}
        <div style={{
          width: '100%',
          maxWidth: 690,
          margin: '0 auto',
          display: 'flex',
          justifyContent: 'center',
        }}>
          <object
            type="image/svg+xml"
            data="budgi_coffre_fort_v2_bidirectionnel.svg"
            aria-label="Périmètre BudGi : synchronisation bidirectionnelle entre appareils et monolithe local, sans Internet."
            style={{
              width: '100%',
              height: 'auto',
              display: 'block',
              aspectRatio: '690 / 730',
            }}
          />
        </div>

        {/* Trois piliers */}
        <div className="sov-pillars" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3,1fr)',
          gap: 'clamp(1.25rem,3vw,2.25rem)',
          maxWidth: 980,
          margin: 'clamp(2.5rem,5vw,4rem) auto 0',
        }}>
          {pillars.map((p, i) => (
            <div key={i} style={{
              borderTop: '1px solid rgba(255,255,255,0.10)',
              paddingTop: 22,
            }}>
              <h3 style={{
                fontFamily: 'var(--serif)', fontSize: 19, fontWeight: 400,
                letterSpacing: '-0.017em', margin: '0 0 9px', color: '#FFFFFF',
              }}>{p.h}</h3>
              <p style={{
                fontSize: 14.5, lineHeight: 1.68, color: '#9CA3AF', margin: 0,
              }}>{p.p}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media(max-width:800px){.sov-pillars{grid-template-columns:1fr!important;}}
      `}</style>
    </section>
  );
}

Object.assign(window, { Sovereignty });