/* "Como funciona" — replaces blockchain ledger. Animated 4-step recovery flow */
function Ledger(){
  const motion = window.motion;
  const { useScroll, useTransform } = window.Motion || {};
  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset:['start end','end start'] });
  const lineH = useTransform(scrollYProgress, [.1,.7], ['0%','100%']);

  const steps = [
    { t:'VOCÊ CHAMA', sub:'mensagem cifrada',
      d:'Conta caiu, canal foi tirado do ar, rede foi sequestrada. Manda o caso pelo canal cifrado.',
      anim:'phone'
    },
    { t:'A GENTE ATACA', sub:'time cyber em campo',
      d:'Ykaro e Fábio entram pelo lado técnico. Identificação, contato com plataforma, recuperação direta.',
      anim:'attack'
    },
    { t:'TRAZ DE VOLTA', sub:'acesso recuperado',
      d:'Conta no ar, canal monetizando de novo, perfil restaurado. Sem perda de seguidor, sem perda de histórico.',
      anim:'restore'
    },
    { t:'SE PRECISAR JURÍDICO', sub:'parceria externa',
      d:'Quando a recuperação técnica não fecha o caso, nosso parceiro jurídico entra com ação judicial.',
      anim:'law'
    },
  ];

  return (
    <section style={{padding:'120px 0', position:'relative'}}>
      <div className="container" ref={ref}>
        <motion.div
          initial={{opacity:0, y:30}}
          whileInView={{opacity:1, y:0}}
          viewport={{once:true, margin:'-100px'}}
          transition={{duration:.8}}
          style={{marginBottom:80}}
        >
          <div className="mono" style={{fontSize:11, letterSpacing:'.25em', textTransform:'uppercase', color:'#C7FF50', marginBottom:14}}>
            <span style={{display:'inline-block', width:40, height:1, background:'#C7FF50', verticalAlign:'middle', marginRight:12}}/>
            como funciona
          </div>
          <h2 className="bebas" style={{fontSize:'clamp(56px, 9vw, 140px)', lineHeight:.86, color:'#F5EBD3'}}>
            do caos pra <span style={{color:'#6BD1F0'}}>conta no ar</span><br/>em quatro passos.
          </h2>
        </motion.div>

        <div style={{position:'relative', paddingLeft:80}}>
          <div style={{position:'absolute', left:32, top:0, bottom:0, width:2, background:'rgba(245,235,211,.08)'}}>
            <motion.div style={{
              width:'100%', background:'linear-gradient(180deg, #C7FF50, #6BD1F0)',
              height:lineH, boxShadow:'0 0 20px rgba(199,255,80,.6)'
            }}/>
          </div>

          {steps.map((c,i)=>(
            <Block key={c.t} c={c} i={i} last={i===steps.length-1}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function Block({c, i, last}){
  const motion = window.motion;
  const ref = React.useRef(null);
  const { useInView } = window.Motion || {};
  const inView = useInView(ref, {once:true, margin:'-150px'});

  return (
    <div ref={ref} style={{position:'relative', paddingBottom: last ? 0 : 48}}>
      <motion.div
        initial={{scale:0}}
        animate={inView ? {scale:1} : {}}
        transition={{duration:.5, delay:.2}}
        style={{
          position:'absolute', left:-58, top:8,
          width:20, height:20, borderRadius:'50%',
          background:'#C7FF50', border:'4px solid #1F4DA8',
          boxShadow:'0 0 24px rgba(199,255,80,.6)'
        }}
      >
        <motion.div
          animate={{scale:[1,2,1], opacity:[.6,0,.6]}}
          transition={{duration:2, repeat:Infinity}}
          style={{position:'absolute', inset:-2, borderRadius:'50%', background:'#C7FF50'}}
        />
      </motion.div>

      <motion.div
        initial={{opacity:0, x:30}}
        animate={inView ? {opacity:1, x:0} : {}}
        transition={{duration:.7, ease:[.2,.8,.2,1]}}
        style={{
          padding:30, borderRadius:20,
          background:'rgba(14,41,96,.45)',
          backdropFilter:'blur(18px)',
          WebkitBackdropFilter:'blur(18px)',
          border:'1px solid rgba(245,235,211,.12)',
        }}
      >
        <div style={{display:'grid', gridTemplateColumns:'1fr 220px', gap:32, alignItems:'flex-start'}}>
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <div className="mono" style={{fontSize:10, letterSpacing:'.25em', textTransform:'uppercase', color:'#6BD1F0'}}>{c.sub}</div>
            <h3 className="bebas" style={{fontSize:56, lineHeight:1, color:'#F5EBD3', letterSpacing:'-.005em'}}>{c.t}</h3>
            <p style={{fontSize:16, lineHeight:1.55, color:'rgba(245,235,211,.8)', maxWidth:560}}>{c.d}</p>
          </div>

          <StepAnim kind={c.anim} active={inView}/>
        </div>
      </motion.div>
    </div>
  );
}

function StepAnim({kind, active}){
  const motion = window.motion;
  const box = {
    width:'100%', height:160, borderRadius:14,
    background:'rgba(10,26,61,.5)', border:'1px solid rgba(199,255,80,.18)',
    position:'relative', overflow:'hidden',
    display:'flex', alignItems:'center', justifyContent:'center'
  };

  if(kind==='phone'){
    return (
      <div style={box}>
        <motion.div
          animate={active ? {rotate:[-4,4,-4]} : {}}
          transition={{duration:1.2, repeat:Infinity}}
          style={{
            width:60, height:96, borderRadius:10,
            border:'2px solid #C7FF50', position:'relative',
            display:'flex', alignItems:'center', justifyContent:'center'
          }}
        >
          <motion.div
            animate={{scale:[1,1.4,1], opacity:[.6,0,.6]}}
            transition={{duration:1.6, repeat:Infinity}}
            style={{position:'absolute', inset:-10, borderRadius:14, border:'2px solid #C7FF50'}}
          />
          <div style={{width:24, height:24, borderRadius:'50%', background:'#C7FF50',
            display:'flex', alignItems:'center', justifyContent:'center', color:'#0A1A3D', fontFamily:'JetBrains Mono', fontSize:11}}>!</div>
        </motion.div>
      </div>
    );
  }

  if(kind==='attack'){
    return (
      <div style={box}>
        <svg width="180" height="120" viewBox="0 0 180 120" fill="none">
          <motion.circle cx="20" cy="20" r="6" fill="#C7FF50"
            animate={active ? {cx:[20,80], cy:[20,60]} : {}}
            transition={{duration:2, repeat:Infinity, ease:'easeInOut'}}/>
          <motion.circle cx="160" cy="20" r="6" fill="#6BD1F0"
            animate={active ? {cx:[160,100], cy:[20,60]} : {}}
            transition={{duration:2, repeat:Infinity, ease:'easeInOut'}}/>
          <motion.rect x="80" y="50" width="20" height="20" rx="3"
            stroke="#F5EBD3" strokeWidth="2" fill="rgba(245,235,211,.1)"
            animate={active ? {scale:[1,1.2,1]} : {}}
            transition={{duration:2, repeat:Infinity}}
            style={{transformOrigin:'90px 60px'}}/>
          <motion.line x1="20" y1="20" x2="80" y2="60" stroke="#C7FF50" strokeWidth="1" strokeDasharray="3 3"
            animate={active ? {opacity:[.3,1,.3]} : {}}
            transition={{duration:2, repeat:Infinity}}/>
          <motion.line x1="160" y1="20" x2="100" y2="60" stroke="#6BD1F0" strokeWidth="1" strokeDasharray="3 3"
            animate={active ? {opacity:[.3,1,.3]} : {}}
            transition={{duration:2, repeat:Infinity, delay:.2}}/>
        </svg>
      </div>
    );
  }

  if(kind==='restore'){
    return (
      <div style={box}>
        <motion.svg width="100" height="100" viewBox="0 0 100 100" fill="none"
          animate={active ? {rotate:[0,360]} : {}}
          transition={{duration:8, repeat:Infinity, ease:'linear'}}>
          <circle cx="50" cy="50" r="38" stroke="#C7FF50" strokeWidth="2" strokeDasharray="6 4"/>
          <motion.path d="M30 50 L46 64 L72 38" stroke="#C7FF50" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"
            initial={{pathLength:0}}
            animate={active ? {pathLength:1} : {}}
            transition={{duration:1, delay:.3}}/>
        </motion.svg>
      </div>
    );
  }

  if(kind==='law'){
    return (
      <div style={box}>
        <motion.svg width="120" height="100" viewBox="0 0 120 100" fill="none"
          animate={active ? {rotate:[-6,6,-6]} : {}}
          transition={{duration:1.8, repeat:Infinity, ease:'easeInOut'}}
          style={{transformOrigin:'60px 80px'}}>
          <line x1="60" y1="14" x2="60" y2="86" stroke="#C7FF50" strokeWidth="2.5"/>
          <line x1="30" y1="86" x2="90" y2="86" stroke="#C7FF50" strokeWidth="2.5"/>
          <path d="M30 26 L60 20 L90 26 L84 56 L72 54 L60 56 L48 54 L36 56 Z" stroke="#C7FF50" strokeWidth="2.5" fill="rgba(199,255,80,.08)"/>
          <line x1="30" y1="56" x2="50" y2="56" stroke="#C7FF50" strokeWidth="2.5"/>
          <line x1="70" y1="56" x2="90" y2="56" stroke="#C7FF50" strokeWidth="2.5"/>
        </motion.svg>
      </div>
    );
  }

  return null;
}