/* Cases — real recovery cases */
function Cases(){
  const motion = window.motion;
  const cases = [
    { t:'Influencer · 480k seguidores', sector:'Instagram hackeado', recovered:'conta de volta', days:'2 dias', tag:'INSTAGRAM', accent:'#C7FF50' },
    { t:'Canal de games · 142k inscritos', sector:'YouTube derrubado', recovered:'strike removido', days:'5 dias', tag:'YOUTUBE', accent:'#6BD1F0' },
    { t:'Empresa local · 8 perfis', sector:'Facebook bloqueado', recovered:'perfis ativos', days:'3 dias', tag:'FACEBOOK', accent:'#F5EBD3' },
    { t:'Criador de conteúdo', sector:'TikTok desativado', recovered:'conta restaurada', days:'4 dias', tag:'TIKTOK', accent:'#C7FF50' },
    { t:'Loja de moda', sector:'Site novo no ar', recovered:'entregue', days:'12 dias', tag:'WEBSITE', accent:'#6BD1F0' },
    { t:'Agência de marketing', sector:'Bots legalizados', recovered:'rodando ok', days:'1 dia', tag:'BOTS', accent:'#C7FF50' },
  ];

  return (
    <section id="casos" style={{padding:'140px 0 120px', position:'relative'}}>
      <div className="container">
        <motion.div
          initial={{opacity:0, y:30}}
          whileInView={{opacity:1, y:0}}
          viewport={{once:true, margin:'-100px'}}
          transition={{duration:.8}}
          style={{marginBottom:60}}
        >
          <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}}/>
            casos
          </div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:24, flexWrap:'wrap'}}>
            <h2 className="bebas" style={{fontSize:'clamp(56px, 9vw, 140px)', lineHeight:.86, color:'#F5EBD3'}}>
              quem voltou pro <span style={{color:'#6BD1F0'}}>ar</span>.
            </h2>
            <div className="mono" style={{fontSize:11, opacity:.6, letterSpacing:'.15em', textTransform:'uppercase', maxWidth:280}}>
              identidades anonimizadas, com autorização do cliente
            </div>
          </div>
        </motion.div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {cases.map((c,i)=>(
            <CaseCard key={c.t} c={c} i={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseCard({c, i}){
  const motion = window.motion;
  const [hover, setHover] = React.useState(false);
  return (
    <motion.div
      initial={{opacity:0, y:40}}
      whileInView={{opacity:1, y:0}}
      viewport={{once:true, margin:'-50px'}}
      transition={{delay: i*.07, duration:.7, ease:[.2,.8,.2,1]}}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      whileHover={{ scale:1.025, y:-4 }}
      style={{
        padding:22, borderRadius:20,
        background:'rgba(14,41,96,.45)',
        backdropFilter:'blur(18px) saturate(140%)',
        WebkitBackdropFilter:'blur(18px) saturate(140%)',
        border:'1px solid rgba(245,235,211,.12)',
        cursor:'pointer', position:'relative', overflow:'hidden'
      }}
    >
      <motion.div
        animate={{ x: hover ? '100%' : '-100%'}}
        transition={{duration:.8, ease:[.2,.8,.2,1]}}
        style={{
          position:'absolute', top:0, bottom:0, width:'40%',
          background:`linear-gradient(90deg, transparent, ${c.accent}22, transparent)`,
          pointerEvents:'none'
        }}
      />

      <div style={{
        height:160, borderRadius:14, marginBottom:18, position:'relative', overflow:'hidden',
        background: `repeating-linear-gradient(135deg, ${c.accent}1F 0 14px, transparent 14px 28px), linear-gradient(135deg, rgba(14,41,96,.6), rgba(48,104,200,.4))`,
        border:`1px solid ${c.accent}33`
      }}>
        <div style={{position:'absolute', inset:14, display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
          <div className="mono" style={{fontSize:10, letterSpacing:'.18em', color: c.accent, opacity:.9}}>caso resolvido</div>
          <div className="bebas" style={{fontSize:42, lineHeight:.9, color:'rgba(245,235,211,.92)'}}>{c.tag}</div>
        </div>
        <motion.div
          animate={{opacity:[.3,1,.3]}}
          transition={{duration:2, repeat:Infinity}}
          style={{
            position:'absolute', top:14, right:14,
            width:8, height:8, borderRadius:'50%', background:c.accent,
            boxShadow:`0 0 16px ${c.accent}`
          }}
        />
      </div>

      <div className="mono" style={{fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6, marginBottom:8}}>
        {c.sector}
      </div>
      <h4 className="bebas" style={{fontSize:24, lineHeight:1, color:'#F5EBD3', letterSpacing:'.005em', textTransform:'uppercase', marginBottom:16}}>
        {c.t}
      </h4>

      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', borderTop:'1px solid rgba(245,235,211,.1)', paddingTop:14}}>
        <div>
          <div className="mono" style={{fontSize:9, letterSpacing:'.2em', opacity:.5, textTransform:'uppercase'}}>resultado</div>
          <div className="bebas" style={{fontSize:22, color: c.accent, lineHeight:1, marginTop:2}}>{c.recovered}</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="mono" style={{fontSize:9, letterSpacing:'.2em', opacity:.5, textTransform:'uppercase'}}>tempo</div>
          <div className="bebas" style={{fontSize:22, color:'#F5EBD3', lineHeight:1, marginTop:2}}>{c.days}</div>
        </div>
      </div>
    </motion.div>
  );
}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             