/* Services — 5 cards, no juridical card. Note line below. */
function Services(){
  const motion = window.motion;
  const services = [
    { t:'Instagram', sub:'hackeado ou desativado',
      d:'Conta invadida, senha trocada, perfil deletado. A gente entra e traz de volta.',
      icon:'ig', accent:'#C7FF50'
    },
    { t:'YouTube', sub:'canal derrubado',
      d:'Canal suspenso, strike injusto, monetização cortada. Recuperação direto na plataforma.',
      icon:'yt', accent:'#6BD1F0'
    },
    { t:'Outras redes', sub:'facebook · tiktok · x',
      d:'Qualquer rede social hackeada, bloqueada ou sequestrada. A gente recupera o acesso.',
      icon:'multi', accent:'#C7FF50'
    },
    { t:'Bots', sub:'legalizados',
      d:'Automação para Instagram, WhatsApp e outras plataformas dentro das regras. Sem ban.',
      icon:'bot', accent:'#F5EBD3'
    },
    { t:'Websites', sub:'criação completa',
      d:'Site institucional, landing page, loja. Da prancheta até o ar com performance.',
      icon:'site', accent:'#6BD1F0'
    },
  ];

  return (
    <section id="servicos" style={{padding:'120px 0', 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={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:60, flexWrap:'wrap', gap:24}}
        >
          <div>
            <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}}/>
              serviços
            </div>
            <h2 className="bebas" style={{fontSize:'clamp(56px, 9vw, 140px)', lineHeight:.86, color:'#F5EBD3', letterSpacing:'-.005em'}}>
              o que <span style={{color:'#6BD1F0'}}>a gente</span><br/>resolve.
            </h2>
          </div>
        </motion.div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18}}>
          {services.map((s,i)=>(
            <ServiceCard key={s.t} s={s} i={i} />
          ))}
        </div>

        <motion.div
          initial={{opacity:0, y:20}}
          whileInView={{opacity:1, y:0}}
          viewport={{once:true, margin:'-100px'}}
          transition={{duration:.6, delay:.2}}
          style={{marginTop:32, padding:'18px 22px', borderRadius:14,
            background:'rgba(199,255,80,.06)', border:'1px solid rgba(199,255,80,.2)',
            display:'flex', alignItems:'center', gap:14, flexWrap:'wrap'}}
        >
          <span className="mono" style={{fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', color:'#C7FF50', padding:'4px 10px', border:'1px solid rgba(199,255,80,.4)', borderRadius:99}}>
            nota
          </span>
          <span style={{fontSize:14, color:'rgba(245,235,211,.85)', lineHeight:1.5, flex:1, minWidth:240}}>
            Quando o caso vai pro tribunal, nosso parceiro jurídico entra em campo.
          </span>
        </motion.div>
      </div>
    </section>
  );
}

function ServiceCard({s, i}){
  const motion = window.motion;
  const { useMotionValue, useTransform, useSpring } = window.Motion || {};
  const ref = React.useRef(null);
  const mx = useMotionValue(.5), my = useMotionValue(.5);
  const sx = useSpring(mx, {stiffness:120, damping:18});
  const sy = useSpring(my, {stiffness:120, damping:18});
  const rx = useTransform(sy, [0,1], [6,-6]);
  const ry = useTransform(sx, [0,1], [-6,6]);
  const [hover, setHover] = React.useState(false);

  const onMove = (e)=>{
    const r = ref.current.getBoundingClientRect();
    mx.set((e.clientX-r.left)/r.width);
    my.set((e.clientY-r.top)/r.height);
  };

  return (
    <motion.div
      ref={ref}
      onMouseMove={onMove}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>{setHover(false); mx.set(.5); my.set(.5);}}
      initial={{opacity:0, y:40}}
      whileInView={{opacity:1, y:0}}
      viewport={{once:true, margin:'-50px'}}
      transition={{delay: i*.08, duration:.7, ease:[.2,.8,.2,1]}}
      whileHover={{ scale:1.015 }}
      style={{
        position:'relative', padding:28, borderRadius:22,
        background:'rgba(14,41,96,.4)',
        backdropFilter:'blur(18px) saturate(140%)',
        WebkitBackdropFilter:'blur(18px) saturate(140%)',
        border:'1px solid rgba(245,235,211,.12)',
        rotateX:rx, rotateY:ry, transformPerspective:1200,
        cursor:'pointer', overflow:'hidden', minHeight:340,
        display:'flex', flexDirection:'column'
      }}
    >
      <div style={{display:'flex', justifyContent:'flex-end'}}>
        <ServiceGlyph kind={s.icon} hover={hover} accent={s.accent}/>
      </div>

      <div style={{marginTop:'auto'}}>
        <motion.h3
          animate={{ y: hover ? -4 : 0 }}
          className="bebas"
          style={{
            fontSize:54, lineHeight:.9, color:'#F5EBD3',
            letterSpacing:'.005em', textTransform:'uppercase'
          }}
        >{s.t}</motion.h3>

        <div className="mono" style={{
          fontSize:10, letterSpacing:'.2em', textTransform:'uppercase',
          color: s.accent, marginTop:8, marginBottom:14
        }}>{s.sub}</div>

        <p style={{fontSize:13.5, lineHeight:1.55, color:'rgba(245,235,211,.78)', fontFamily:'Inter Tight'}}>
          {s.d}
        </p>

        <motion.div
          animate={{ x: hover ? 0 : -10, opacity: hover ? 1 : 0 }}
          style={{marginTop:18, color:s.accent, fontSize:18, fontFamily:'JetBrains Mono'}}
        >→ recuperar</motion.div>
      </div>
    </motion.div>
  );
}

function ServiceGlyph({kind, hover, accent}){
  const motion = window.motion;
  const animate = hover ? { scale:1.15, rotate: 8 } : { scale:1, rotate: 0 };
  return (
    <motion.div animate={animate} transition={{duration:.5, ease:[.2,.8,.2,1]}}>
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
        {kind==='ig' && (
          <>
            <rect x="14" y="14" width="52" height="52" rx="14" stroke={accent} strokeWidth="2.5"/>
            <circle cx="40" cy="40" r="13" stroke={accent} strokeWidth="2.5"/>
            <circle cx="55" cy="25" r="3" fill={accent}/>
          </>
        )}
        {kind==='yt' && (
          <>
            <rect x="10" y="20" width="60" height="40" rx="10" stroke={accent} strokeWidth="2.5"/>
            <path d="M34 32 L48 40 L34 48 Z" fill={accent}/>
          </>
        )}
        {kind==='multi' && (
          <>
            <circle cx="26" cy="26" r="14" stroke={accent} strokeWidth="2.5"/>
            <circle cx="54" cy="26" r="14" stroke={accent} strokeWidth="2.5" opacity=".6"/>
            <circle cx="40" cy="50" r="14" stroke={accent} strokeWidth="2.5" opacity=".8"/>
          </>
        )}
        {kind==='bot' && (
          <>
            <rect x="18" y="22" width="44" height="38" rx="8" stroke={accent} strokeWidth="2.5"/>
            <line x1="40" y1="22" x2="40" y2="14" stroke={accent} strokeWidth="2.5"/>
            <circle cx="40" cy="12" r="3" fill={accent}/>
            <motion.circle cx="30" cy="38" r="3.5" fill={accent}
              animate={{opacity:[1,.3,1]}} transition={{duration:1.2, repeat:Infinity}}/>
            <motion.circle cx="50" cy="38" r="3.5" fill={accent}
              animate={{opacity:[1,.3,1]}} transition={{duration:1.2, repeat:Infinity, delay:.3}}/>
            <line x1="32" y1="50" x2="48" y2="50" stroke={accent} strokeWidth="2.5"/>
          </>
        )}
        {kind==='site' && (
          <>
            <rect x="10" y="18" width="60" height="44" rx="6" stroke={accent} strokeWidth="2.5"/>
            <line x1="10" y1="28" x2="70" y2="28" stroke={accent} strokeWidth="2.5"/>
            <circle cx="16" cy="23" r="1.5" fill={accent}/>
            <circle cx="22" cy="23" r="1.5" fill={accent}/>
            <circle cx="28" cy="23" r="1.5" fill={accent}/>
            <line x1="18" y1="38" x2="44" y2="38" stroke={accent} strokeWidth="2"/>
            <line x1="18" y1="46" x2="56" y2="46" stroke={accent} strokeWidth="2" opacity=".6"/>
            <line x1="18" y1="54" x2="38" y2="54" stroke={accent} strokeWidth="2" opacity=".6"/>
          </>
        )}
      </svg>
    </motion.div>
  );
}