/* Contact — minimal: name + textarea + submit (mailto), 2 IG icons */
function Contact(){
  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 rotate = useTransform(scrollYProgress, [0,1], [0,360]);

  const [nome, setNome] = React.useState('');
  const [caso, setCaso] = React.useState('');

  const submit = (e)=>{
    e.preventDefault();
    const subject = encodeURIComponent(`Caso · ${nome || 'novo'}`);
    const body = encodeURIComponent(`Nome: ${nome}\n\nCaso:\n${caso}`);
    window.location.href = `mailto:contato@mfdireitodigital.com.br?subject=${subject}&body=${body}`;
  };

  return (
    <section id="contato" ref={ref} style={{padding:'140px 0 80px', position:'relative'}}>
      <div className="container">
        <div style={{
          padding:'56px 56px',
          borderRadius:32,
          background:'linear-gradient(180deg, rgba(14,41,96,.7) 0%, rgba(31,77,168,.5) 100%)',
          backdropFilter:'blur(20px) saturate(140%)',
          WebkitBackdropFilter:'blur(20px) saturate(140%)',
          border:'1px solid rgba(199,255,80,.25)',
          position:'relative', overflow:'hidden',
          boxShadow:'0 40px 120px rgba(0,0,0,.3), inset 0 1px 0 rgba(245,235,211,.1)'
        }}>
          <motion.div
            style={{
              position:'absolute', right:-200, top:-200,
              width:600, height:600, rotate,
              border:'1px dashed rgba(199,255,80,.2)',
              borderRadius:'50%', pointerEvents:'none'
            }}
          />
          <motion.div
            style={{
              position:'absolute', right:-150, top:-150,
              width:500, height:500, rotate,
              border:'1px solid rgba(107,209,240,.15)',
              borderRadius:'50%', pointerEvents:'none'
            }}
          />

          <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:60, position:'relative'}}>
            <div>
              <div className="mono" style={{fontSize:11, letterSpacing:'.25em', textTransform:'uppercase', color:'#C7FF50', marginBottom:18}}>
                <span style={{display:'inline-block', width:40, height:1, background:'#C7FF50', verticalAlign:'middle', marginRight:12}}/>
                contato
              </div>

              <h2 className="bebas" style={{fontSize:'clamp(64px, 10vw, 160px)', lineHeight:.84, color:'#F5EBD3', letterSpacing:'-.005em', marginBottom:16}}>
                fala com<br/>a gente.<br/>
                <span className="caveat" style={{
                  color:'#C7FF50', fontSize:'clamp(80px, 13vw, 200px)',
                  display:'inline-block', transform:'rotate(-4deg)',
                  textShadow:'0 0 30px rgba(199,255,80,.4)'
                }}>direto.</span>
              </h2>

              <p style={{fontSize:18, lineHeight:1.55, color:'rgba(245,235,211,.78)', maxWidth:520, marginTop:24, marginBottom:36}}>
                Conta o caso, a gente responde com um plano de recuperação.
              </p>

              <div style={{padding:'18px 22px', borderRadius:14, border:'1px solid rgba(245,235,211,.15)', background:'rgba(245,235,211,.04)', marginBottom:32}}>
                <div className="mono" style={{fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', color:'#C7FF50', marginBottom:6}}>
                  atendimento
                </div>
                <div className="bebas" style={{fontSize:32, color:'#F5EBD3', letterSpacing:'.01em', lineHeight:1}}>
                  24h · mundo inteiro
                </div>
              </div>

              <div className="mono" style={{fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', opacity:.6, marginBottom:14}}>
                instagram
              </div>
              <div style={{display:'flex', gap:12}}>
                <SocialChip name="YK" handle="@ykarocavalcante" url="https://instagram.com/ykarocavalcante" color="#C7FF50"/>
                <SocialChip name="FB" handle="@fabdomsan" url="https://instagram.com/fabdomsan" color="#6BD1F0"/>
              </div>
            </div>

            <motion.form
              onSubmit={submit}
              initial={{opacity:0, scale:.95}}
              whileInView={{opacity:1, scale:1}}
              viewport={{once:true}}
              transition={{duration:.8}}
              style={{
                padding:28, borderRadius:22,
                background:'rgba(10,26,61,.7)',
                border:'1px solid rgba(199,255,80,.4)',
                position:'relative'
              }}
            >
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:24}}>
                <div className="mono" style={{fontSize:10, letterSpacing:'.25em', textTransform:'uppercase', opacity:.7}}>abrir caso</div>
                <div className="mono" style={{fontSize:10, color:'#C7FF50', display:'flex', alignItems:'center', gap:6}}>
                  <motion.span animate={{opacity:[1,.3,1]}} transition={{duration:1.2, repeat:Infinity}} style={{width:6, height:6, background:'#C7FF50', borderRadius:'50%'}}/>
                  online agora
                </div>
              </div>

              <Field label="seu nome">
                <input
                  required
                  value={nome} onChange={e=>setNome(e.target.value)}
                  placeholder="como podemos te chamar"
                  style={{
                  width:'100%', padding:'14px 16px', fontFamily:'JetBrains Mono', fontSize:13,
                  background:'rgba(245,235,211,.04)', border:'1px solid rgba(245,235,211,.15)',
                  borderRadius:8, color:'#F5EBD3', outline:'none'
                }} />
              </Field>

              <Field label="descreve o caso">
                <textarea
                  required
                  value={caso} onChange={e=>setCaso(e.target.value)}
                  rows={6}
                  placeholder="o que aconteceu, qual rede, há quanto tempo..."
                  style={{
                  width:'100%', padding:'14px 16px', fontFamily:'Inter Tight', fontSize:14,
                  background:'rgba(245,235,211,.04)', border:'1px solid rgba(245,235,211,.15)',
                  borderRadius:8, color:'#F5EBD3', outline:'none', resize:'vertical', lineHeight:1.5
                }} />
              </Field>

              <motion.button
                type="submit"
                whileHover={{scale:1.02, boxShadow:'0 20px 60px rgba(199,255,80,.5)'}}
                whileTap={{scale:.98}}
                style={{
                  width:'100%', padding:'20px', background:'#C7FF50', color:'#0A1A3D',
                  fontFamily:'Bebas Neue', fontSize:24, letterSpacing:'.04em',
                  borderRadius:14, border:'none', cursor:'pointer',
                  display:'flex', alignItems:'center', justifyContent:'center', gap:14,
                  marginTop:8
                }}
              >
                ENVIAR
                <motion.span animate={{x:[0,6,0]}} transition={{duration:1.4, repeat:Infinity}} style={{fontSize:22}}>→</motion.span>
              </motion.button>

              <div className="mono" style={{fontSize:10, opacity:.5, marginTop:14, letterSpacing:'.1em', textAlign:'center'}}>
                primeira conversa sempre gratuita.
              </div>
            </motion.form>
          </div>
        </div>
      </div>
    </section>
  );
}

function SocialChip({name, handle, url, color}){
  const motion = window.motion;
  return (
    <motion.a
      href={url} target="_blank" rel="noopener noreferrer"
      whileHover={{scale:1.04, y:-2}}
      whileTap={{scale:.97}}
      style={{
        flex:1, padding:'16px 18px', borderRadius:14,
        background:'rgba(14,41,96,.5)',
        border:`1px solid ${color}55`,
        textDecoration:'none', color:'#F5EBD3',
        display:'flex', alignItems:'center', gap:14
      }}
    >
      <div style={{
        width:44, height:44, borderRadius:12,
        background:'linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf)',
        display:'flex', alignItems:'center', justifyContent:'center'
      }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="3" width="18" height="18" rx="5" stroke="#fff" strokeWidth="1.8"/>
          <circle cx="12" cy="12" r="4.5" stroke="#fff" strokeWidth="1.8"/>
          <circle cx="17" cy="7" r="1" fill="#fff"/>
        </svg>
      </div>
      <div>
        <div className="bebas" style={{fontSize:22, lineHeight:1, color:color, letterSpacing:'.04em'}}>{name}</div>
        <div className="mono" style={{fontSize:11, opacity:.7, marginTop:3}}>{handle}</div>
      </div>
    </motion.a>
  );
}

function Field({label, children}){
  return (
    <div style={{marginBottom:18}}>
      <div className="mono" style={{fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', opacity:.6, marginBottom:8}}>{label}</div>
      {children}
    </div>
  );
}