/* ============ FLOATING ELEMENTS — scroll bar, WhatsApp, call, back-to-top ============ */
function Floating() {
  const S = window.SITE;
  const [progress, setProgress] = useState(0);
  const [show, setShow] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? (window.scrollY / h) * 100 : 0);
      setShow(window.scrollY > 600);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <div className="progress-bar"><span style={{ width: `${progress}%` }} /></div>
      <div className="fab-stack">
        <a className="fab fab-wa" href={`https://wa.me/${S.contact.whatsapp}`} target="_blank" rel="noreferrer" aria-label="WhatsApp us">
          <Icon name="whatsapp" />
        </a>
        <a className="fab fab-call" href={`tel:${S.contact.phone.replace(/\s/g, "")}`} aria-label="Call us">
          <Icon name="phone" />
        </a>
        <button className={`fab fab-top ${show ? "in" : ""}`} onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} aria-label="Back to top">
          <Icon name="arrow-up" />
        </button>
      </div>

      <style>{`
        .progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: transparent; }
        .progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .1s linear; }
        html[data-theme="dark"] .progress-bar span { box-shadow: 0 0 10px var(--glow); }

        .fab-stack { position: fixed; right: 20px; bottom: 22px; z-index: 150; display: flex; flex-direction: column; gap: 12px; }
        .fab { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); }
        .fab:hover { transform: scale(1.1) translateY(-2px); }
        .fab-wa { background: #25D366; }
        .fab-call { background: var(--primary); color: var(--on-primary); }
        .fab-top { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); opacity: 0; pointer-events: none; transform: scale(.6); }
        .fab-top.in { opacity: 1; pointer-events: auto; transform: scale(1); }
        @media (max-width: 600px) { .fab { width: 48px; height: 48px; font-size: 18px; } }
      `}</style>
    </>
  );
}

Object.assign(window, { Floating });
