/* global React, waLink, WhatsAppIcon, PhoneIcon, PHONE_TEL, PHONE_DISPLAY */
const { useState: useStateO, useEffect: useEffectO, useRef: useRefO } = React;

// ============================================================
// FLOATING WHATSAPP — always visible
// ============================================================
function WhatsAppFloat() {
  const [pulse, setPulse] = useStateO(true);
  useEffectO(() => {
    const t = setTimeout(() => setPulse(false), 6000);
    return () => clearTimeout(t);
  }, []);
  return (
    <a className={`wa-float ${pulse ? "wa-float--pulse" : ""} pht-whatsapp`} data-widget="3368" href={waLink()} target="_blank" rel="noopener" aria-label="Falar no WhatsApp">
      <span className="wa-float__bubble">
        <strong>Atendimento 24h</strong>
        <span>Resposta em 2 min</span>
      </span>
      <span className="wa-float__btn"><WhatsAppIcon /></span>
    </a>
  );
}

// ============================================================
// STICKY MOBILE BAR
// ============================================================
function StickyMobileBar() {
  return (
    <div className="sticky-bar">
      <a className="sticky-bar__btn sticky-bar__btn--call" href={PHONE_TEL}>
        <PhoneIcon /> Ligar
      </a>
      <a className="sticky-bar__btn sticky-bar__btn--wa pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener">
        <WhatsAppIcon /> WhatsApp
      </a>
    </div>
  );
}

// ============================================================
// EXIT INTENT POPUP
// ============================================================
function ExitIntent() {
  const [open, setOpen] = useStateO(false);
  const shownRef = useRefO(false);
  useEffectO(() => {
    const onMove = e => {
      if (shownRef.current) return;
      if (e.clientY <= 0) {
        shownRef.current = true;
        setOpen(true);
      }
    };
    // Only on desktop
    if (window.innerWidth > 800) {
      document.addEventListener("mouseout", onMove);
    }
    // Mobile fallback: show on aggressive scroll up after 30s
    const t = setTimeout(() => {
      if (!shownRef.current && window.innerWidth <= 800) {
        // Skip on mobile - sticky bar covers it
      }
    }, 30000);
    return () => {
      document.removeEventListener("mouseout", onMove);
      clearTimeout(t);
    };
  }, []);
  return (
    <div className="exit-modal" role="dialog" aria-modal="true" aria-hidden={!open} style={{ display: open ? "" : "none" }}>
      <div className="exit-modal__backdrop" onClick={() => setOpen(false)}></div>
      <div className="exit-modal__card">
        <button className="exit-modal__close" onClick={() => setOpen(false)} aria-label="Fechar">×</button>
        <div className="exit-modal__badge">ESPERA! ANTES DE SAIR…</div>
        <h2>10% de desconto na sua primeira chamada</h2>
        <p>Use o cupom <b>PRIMEIRA10</b> ao falar com nosso atendente. Válido por <b>24 horas</b> a partir de agora.</p>
        <div className="cta-pair">
          <a className="btn btn--wa btn--xl pht-whatsapp" data-widget="3368" href={waLink("Olá, vi a oferta PRIMEIRA10 e quero usar!")} target="_blank" rel="noopener" onClick={() => setOpen(false)}>
            <WhatsAppIcon /> Ativar no WhatsApp
          </a>
          <a className="btn btn--call btn--xl" href={PHONE_TEL} onClick={() => setOpen(false)}>
            <PhoneIcon /> Ligar agora
          </a>
        </div>
        <small>Não cumulativo com outras ofertas. Aplicado sobre o orçamento aprovado.</small>
      </div>
    </div>
  );
}

// ============================================================
// LIVE NOTIFICATIONS — social proof
// ============================================================
function LiveNotifs() {
  const items = [
    { name: "Carlos M.", area: "Setor Bueno", svc: "Desentupimento de esgoto", time: "agora há pouco" },
    { name: "Marina S.", area: "Jardim Goiás", svc: "Limpa fossa", time: "há 4 minutos" },
    { name: "Rafael L.", area: "Aparecida de Goiânia", svc: "Vaso sanitário", time: "há 9 minutos" },
    { name: "Joana P.", area: "Setor Marista", svc: "Caixa de gordura", time: "há 12 minutos" },
    { name: "Vitor C.", area: "Setor Oeste", svc: "Hidrojateamento", time: "há 18 minutos" }
  ];
  const [idx, setIdx] = useStateO(-1);
  useEffectO(() => {
    let active = true;
    const cycle = i => {
      if (!active) return;
      setIdx(i);
      setTimeout(() => { if (active) setIdx(-1); }, 5000);
      setTimeout(() => cycle((i + 1) % items.length), 13000);
    };
    const t = setTimeout(() => cycle(0), 6000);
    return () => { active = false; clearTimeout(t); };
  }, []);
  if (idx < 0) return null;
  const it = items[idx];
  return (
    <div className="live-notif" role="status">
      <div className="live-notif__dot"></div>
      <div className="live-notif__body">
        <strong>{it.name}</strong> em <b>{it.area}</b> chamou para <em>{it.svc}</em>
        <small>{it.time}</small>
      </div>
    </div>
  );
}

// ============================================================
// TOP BAR — emergency contact always visible
// ============================================================
function TopBar({ companyName }) {
  return (
    <header className="topbar">
      <div className="container topbar__inner">
        <a className="logo" href="#top" aria-label={companyName}>
          <img className="logo__mark" src="assets/logo-mark.png" alt="" />
          <span className="logo__name">{companyName}</span>
        </a>
        <nav className="topbar__nav" aria-label="Menu principal">
          <a href="#servicos">Serviços</a>
          <a href="#processo">Como funciona</a>
          <a href="#depoimentos">Depoimentos</a>
          <a href="#faq">Dúvidas</a>
        </nav>
        <div className="topbar__cta">
          <a className="topbar__phone" href={PHONE_TEL} aria-label={`Ligar ${PHONE_DISPLAY}`}>
            <PhoneIcon />
            <span className="topbar__phone-num">Ligar agora</span>
          </a>
          <a className="btn btn--wa btn--sm pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener">
            <WhatsAppIcon /> <span className="topbar__wa-label">WhatsApp</span>
          </a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { WhatsAppFloat, StickyMobileBar, ExitIntent, LiveNotifs, TopBar });