// FloatingUI.jsx — persistent bottom pill nav + back-to-top + playful FAB
function FloatingUI({ active }) {
  const [showTop, setShowTop] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShowTop(window.scrollY > window.innerHeight * 0.9);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { id: 'services', label: 'What we do' },
    { id: 'why', label: 'Why Myra' },
    { id: 'approach', label: 'How we work' },
    { id: 'faq', label: 'FAQ' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <>
      <button className={`w-fab w-fab--top${showTop ? ' is-shown' : ''}`} aria-label="Back to top"
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>↑</button>
      <div className="w-float">
        <nav className="w-float__pill">
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`} className={active === l.id ? 'is-active' : ''}>{l.label}</a>
          ))}
        </nav>
      </div>
      <a href="#contact" className="w-fab w-fab--face" aria-label="Say hello">☺</a>
    </>
  );
}
Object.assign(window, { FloatingUI });