// Floating device cluster: notebook + phone, with mousemove tilt + scroll parallax.
function DeviceMock() {
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  const [sy, setSy] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setSy(window.scrollY);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const onMove = e => {
    const r = e.currentTarget.getBoundingClientRect();
    setTilt({ x: ((e.clientY - r.top) / r.height - .5) * -6, y: ((e.clientX - r.left) / r.width - .5) * 6 });
  };
  return (
    <div style={{ perspective: 1300, position: 'relative' }}>
      <div onMouseMove={onMove} onMouseLeave={() => setTilt({ x: 0, y: 0 })}
        style={{ transformStyle: 'preserve-3d', transform: `translateY(${sy * -0.05}px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`, transition: 'transform .2s var(--ease-out)' }}>
        {/* notebook */}
        <div style={{ borderRadius: 18, background: '#fff', border: '1px solid var(--line)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '11px 15px', borderBottom: '1px solid var(--line)', background: 'var(--paper)' }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: '#e6c2b3' }} />
            <span style={{ width: 10, height: 10, borderRadius: 999, background: '#e8dcae' }} />
            <span style={{ width: 10, height: 10, borderRadius: 999, background: '#bfe0c9' }} />
            <span style={{ marginLeft: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>leame.vitrini.dev.br</span>
          </div>
          <div style={{ background: 'var(--bg)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: 'var(--ink-2)', letterSpacing: '.06em' }}>LE'ÂME</span>
              <span style={{ display: 'flex', gap: 14, fontSize: 11, color: 'var(--muted)' }}><span>Serviços</span><span>Sobre</span><span>Contato</span></span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 18, padding: '18px 20px 26px', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 9, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand)', fontWeight: 600 }}>Estética avançada</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 30, lineHeight: 1.04, letterSpacing: '-.015em', color: 'var(--ink-2)', marginTop: 8 }}>Beleza que <span style={{ fontStyle: 'italic', color: 'var(--brand)' }}>renova</span></div>
                <span style={{ display: 'inline-flex', marginTop: 14, padding: '8px 15px', fontSize: 11, fontWeight: 600, color: '#fff', background: 'var(--brand)', borderRadius: 999 }}>Agendar avaliação</span>
              </div>
              <div style={{ height: 140, borderRadius: 13, background: 'linear-gradient(150deg,#cfe7df,#e9d9c2)', position: 'relative', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 70% 30%, rgba(15,107,92,.22), transparent 60%)' }} />
              </div>
            </div>
          </div>
        </div>
        {/* floating phone */}
        <div style={{ position: 'absolute', right: -24, bottom: -46, width: 132, transform: 'translateZ(60px)', borderRadius: 22, background: '#fff', border: '1px solid var(--line)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
          <div style={{ height: 18, background: 'var(--ink)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <span style={{ width: 36, height: 4, borderRadius: 999, background: 'rgba(255,255,255,.3)' }} />
          </div>
          <div style={{ background: 'var(--bg)', padding: '12px 11px 16px' }}>
            <div style={{ height: 60, borderRadius: 9, background: 'linear-gradient(150deg,#e9d9c2,#cfe7df)' }} />
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 13, color: 'var(--ink-2)', marginTop: 9 }}>Priscila Lima</div>
            <div style={{ height: 6, width: '70%', borderRadius: 99, background: 'var(--line)', marginTop: 7 }} />
            <div style={{ height: 6, width: '50%', borderRadius: 99, background: 'var(--line)', marginTop: 5 }} />
            <div style={{ marginTop: 11, height: 24, borderRadius: 999, background: 'var(--brand)' }} />
          </div>
        </div>
      </div>
      {/* float review card */}
      <FloatReview sy={sy} />
    </div>
  );
}

function FloatReview({ sy }) {
  return (
    <div className="levitate" style={{
      position: 'absolute', left: -28, top: 28, zIndex: 3, display: 'flex', alignItems: 'center', gap: 11,
      padding: '12px 16px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 16,
      boxShadow: 'var(--shadow-md)', transform: `translateY(${sy * 0.02}px)`,
    }}>
      <div style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--grad-gold)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Star size={18} color="#fff" />
      </div>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--ink-2)', lineHeight: 1 }}>5,0★</div>
        <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>no Google</div>
      </div>
      <style>{`@keyframes lev { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
        .levitate { animation: lev 4s ease-in-out infinite; }`}</style>
    </div>
  );
}

window.DeviceMock = DeviceMock;