// FloatingButtons + Footer
function FloatingButtons() {
  const [showTop, setShowTop] = useState(false);
  useEffect(() => {
    const onScroll = () => setShowTop(window.scrollY > 500);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div style={{
      position: 'fixed', right: 24, bottom: 24,
      zIndex: 800, display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <AnimatePresence>
        {showTop && (
          <motion.button
            initial={{ opacity: 0, scale: 0.6 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.6 }}
            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
            aria-label="Subir"
            style={{
              width: 52, height: 52, borderRadius: '50%',
              background: 'var(--ink-red)', color: 'var(--white)',
              display: 'grid', placeItems: 'center',
              boxShadow: '0 4px 20px rgba(139,0,0,0.5)', cursor: 'pointer',
            }}
          ><Icon.ChevronUp/></motion.button>
        )}
      </AnimatePresence>
      <a
        href={waLink('Hola Edwin, quiero información')}
        target="_blank" rel="noopener noreferrer"
        aria-label="WhatsApp"
        style={{
          position: 'relative',
          width: 56, height: 56, borderRadius: '50%',
          background: '#25D366', color: '#fff',
          display: 'grid', placeItems: 'center',
          boxShadow: '0 4px 24px rgba(37,211,102,0.5)',
        }}
        className="pulse-ring"
      ><Icon.WhatsApp/></a>
    </div>
  );
}

function Footer({ onNav }) {
  const navLinks = [
    { id: 'inicio', label: 'Inicio' },
    { id: 'portafolio', label: 'Portafolio' },
    { id: 'estilos', label: 'Estilos' },
    { id: 'tienda', label: 'Tienda' },
    { id: 'sobre-mi', label: 'Sobre mí' },
    { id: 'contacto', label: 'Contacto' },
  ];
  const socials = [
    { label: 'Instagram', href: IG_URL },
    { label: 'TikTok', href: TT_URL },
    { label: 'WhatsApp', href: waLink('Hola Edwin') },
    { label: 'Ubicación', href: MAP_URL },
  ];

  const linkStyle = {
    color: 'var(--white)',
    fontFamily: 'var(--font-accent)', fontSize: 13,
    letterSpacing: '0.25em', textTransform: 'uppercase',
    transition: 'color 0.2s',
  };

  return (
    <footer style={{
      position: 'relative', zIndex: 2,
      borderTop: '1px solid rgba(139,0,0,0.3)',
      padding: '80px 6vw 40px',
      textAlign: 'center', background: 'var(--bg-primary)',
    }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 5vw, 56px)', color: 'var(--white)', letterSpacing: '0.08em' }}>
        ISFER <span style={{ color: 'var(--ink-red-bright)' }}>502</span> TATTOOS
      </div>
      <div className="italic-lead" style={{ fontSize: 18, marginTop: 12, color: 'var(--gray)' }}>
        Arte permanente en Quetzaltenango, Guatemala.
      </div>

      <div style={{ display: 'flex', gap: 28, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
        {socials.map(s => (
          <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer"
            style={linkStyle}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink-red-bright)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--white)'}
          >{s.label}</a>
        ))}
      </div>

      <div style={{
        width: 60, height: 1, background: 'rgba(139,0,0,0.5)', margin: '40px auto',
      }}/>

      <div style={{ display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap' }}>
        {navLinks.map(l => (
          <a key={l.id} href={`#${l.id}`}
            onClick={() => onNav && onNav(l.id)}
            style={{ ...linkStyle, fontSize: 12 }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink-red-bright)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--white)'}
          >{l.label}</a>
        ))}
      </div>

      <div style={{
        marginTop: 48, fontSize: 11, color: 'var(--gray)',
        letterSpacing: '0.2em', fontFamily: 'var(--font-accent)',
      }}>
        © 2026 EDWIN FERNANDO · ISFER502 · QUETZALTENANGO, GT
      </div>
      <div style={{
        marginTop: 16, fontSize: 11, color: 'var(--gray)',
        letterSpacing: '0.18em', fontFamily: 'var(--font-accent)',
      }}>
        DESARROLLADO POR{' '}
        <a
          href="https://ServiciosNova.com"
          target="_blank" rel="noopener noreferrer"
          style={{ color: 'var(--ink-red-bright)' }}
        >SERVICIOSNOVA.COM</a>
      </div>
    </footer>
  );
}

window.FloatingButtons = FloatingButtons;
window.Footer = Footer;