/* global React */
/* =============================================================================
   Flavio Seguros — Hero3D: pilha de três cartões de vidro com tilt no mouse.
   Assinatura visual única (briefing). Desligado no touch e em reduced-motion.
   Exposto como window.FCS.Hero3D.
   ============================================================================= */
const { Icon: Icon3D } = window.FlavioCorretoraDesignSystem_9d5869;

const glassCard3D = {
  position: 'absolute',
  background: 'rgba(255,255,255,0.62)',
  backdropFilter: 'saturate(1.5) blur(20px)',
  WebkitBackdropFilter: 'saturate(1.5) blur(20px)',
  border: '1px solid rgba(255,255,255,0.85)',
  borderRadius: 'var(--radius-lg)',
  boxShadow: '0 26px 60px rgba(8,36,62,0.35)',
  padding: '18px 20px',
};

function Hero3D() {
  const stageRef = React.useRef(null);
  const groupRef = React.useRef(null);
  const raf = React.useRef(null);

  React.useEffect(() => {
    const stage = stageRef.current;
    const group = groupRef.current;
    if (!stage || !group) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const coarse = window.matchMedia('(pointer: coarse)').matches;
    if (reduce) {
      group.style.transform = 'rotateX(6deg) rotateY(-12deg)';
      return;
    }
    if (coarse) {
      // Sem mouse no touch: laço de inclinação suave e contínua, no mesmo formato do desktop.
      const t0 = performance.now();
      const loop = (now) => {
        const e = (now - t0) / 1000;
        const rx = 6 + Math.sin(e * 0.6) * 5;
        const ry = -12 + Math.cos(e * 0.45) * 11;
        group.style.transform = 'rotateX(' + rx.toFixed(2) + 'deg) rotateY(' + ry.toFixed(2) + 'deg)';
        raf.current = requestAnimationFrame(loop);
      };
      raf.current = requestAnimationFrame(loop);
      return () => cancelAnimationFrame(raf.current);
    }
    let tx = -12, ty = 6, cx = -12, cy = 6, running = false;
    const render = () => {
      cx += (tx - cx) * 0.12;
      cy += (ty - cy) * 0.12;
      group.style.transform = 'rotateX(' + cy.toFixed(2) + 'deg) rotateY(' + cx.toFixed(2) + 'deg)';
      if (Math.abs(tx - cx) > 0.03 || Math.abs(ty - cy) > 0.03) { raf.current = requestAnimationFrame(render); }
      else { running = false; }
    };
    const kick = () => { if (!running) { running = true; raf.current = requestAnimationFrame(render); } };
    const onMove = (e) => {
      const r = stage.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top) / r.height - 0.5;
      tx = Math.max(-20, Math.min(20, -px * 24));
      ty = Math.max(-14, Math.min(14, py * 20));
      kick();
    };
    const onLeave = () => { tx = -12; ty = 6; kick(); };
    group.style.transform = 'rotateX(6deg) rotateY(-12deg)';
    stage.addEventListener('mousemove', onMove);
    stage.addEventListener('mouseleave', onLeave);
    return () => { stage.removeEventListener('mousemove', onMove); stage.removeEventListener('mouseleave', onLeave); cancelAnimationFrame(raf.current); };
  }, []);

  return (
    <div ref={stageRef} className="fcs-hero3d-stage" style={{ position: 'relative', width: '100%', minHeight: 520, perspective: 1200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {/* brilho dourado atrás */}
      <div aria-hidden="true" style={{ position: 'absolute', width: 340, height: 340, borderRadius: '50%', background: 'radial-gradient(circle, rgba(198,154,91,0.28), transparent 70%)', filter: 'blur(30px)' }} />
      <div ref={groupRef} style={{ position: 'relative', width: 372, height: 462, transformStyle: 'preserve-3d', willChange: 'transform' }}>

        {/* Cartão 1 — Apólice (Z 50) */}
        <div style={{ ...glassCard3D, top: 28, left: -10, width: 332, transform: 'translateZ(50px)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-xs)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--blue-700)' }}>
              <Icon3D name="file-check" size={15} color="var(--blue-700)" /> Apólice
            </span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700, color: 'var(--green-600)', background: 'var(--green-100)', padding: '3px 9px', borderRadius: 999 }}>Ativa</span>
          </div>
          <p style={{ margin: '0 0 2px', fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 20, color: 'var(--blue-900)' }}>Seguro de Automóvel</p>
          <p style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>Apólice 2026·0001·4472</p>
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--text-body)' }}>
            <span>Vigência</span><span style={{ fontWeight: 600, color: 'var(--blue-800)' }}>até 12/2026</span>
          </div>
        </div>

        {/* Cartão 2 — Sinistro (Z 110) */}
        <div style={{ ...glassCard3D, top: 202, left: 112, width: 268, transform: 'translateZ(110px)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-xs)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gold-600)', marginBottom: 12 }}>
            <Icon3D name="life-buoy" size={15} color="var(--gold-600)" /> Sinistro
          </span>
          <p style={{ margin: '0 0 12px', fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-body)', lineHeight: 1.5 }}>Acompanhado pela corretora</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {['Aberto', 'Análise', 'Aprovado'].map((s, i) => (
              <React.Fragment key={s}>
                <span style={{ width: 9, height: 9, borderRadius: '50%', background: i <= 2 ? 'var(--blue-600)' : 'var(--neutral-300)' }} />
                {i < 2 && <span style={{ flex: 1, height: 2, background: 'var(--blue-200)' }} />}
              </React.Fragment>
            ))}
          </div>
          <p style={{ margin: '10px 0 0', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, color: 'var(--green-600)' }}>Indenização aprovada</p>
        </div>

        {/* Cartão 3 — Renovação / métrica (Z 140) */}
        <div style={{ ...glassCard3D, top: 68, left: 176, width: 220, transform: 'translateZ(140px)', background: 'linear-gradient(150deg, rgba(18,59,99,0.94), rgba(11,42,71,0.94))', border: '1px solid rgba(198,154,91,0.4)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gold-300)' }}>
            <Icon3D name="repeat" size={14} color="var(--gold-300)" /> Renovação
          </span>
          <p style={{ margin: '10px 0 0', fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 44, lineHeight: 1, color: 'var(--neutral-0)' }}>96<span style={{ color: 'var(--gold-300)', fontSize: 26 }}>%</span></p>
          <p style={{ margin: '6px 0 0', fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--blue-200)', lineHeight: 1.45 }}>dos clientes renovam conosco</p>
        </div>
      </div>
    </div>
  );
}

window.FCS = Object.assign(window.FCS || {}, { Hero3D });