// CardioFit — Shared chrome (Header + Footer + ECG divider + reveal observer + pixel)
//
// Footer carries: full credential block (CRM + RQEs), navigation, contact (no street
// address per compliance), material links, CFM disclaimer + Resolução CFM nº 2.314/2022.

function CardioHeader({ current = "home" }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { id: "home", label: "Início", href: "index.html" },
    { id: "abordagem", label: "Abordagem", href: "abordagem.html" },
    { id: "areas", label: "Áreas", href: "areas.html" },
    { id: "credenciais", label: "Credenciais", href: "credenciais.html" },
    { id: "agenda", label: "Agenda", href: "agenda.html" },
  ];

  const onAgendaClick = () => {
    if (window.fbq) window.fbq("trackCustom", "AgendaHeaderClick");
  };

  return (
    <header className="site-header" style={{ borderBottomColor: scrolled ? "rgba(159,179,186,0.16)" : "rgba(159,179,186,0.04)" }}>
      <div className="container header-inner">
        <a className="brand" href="index.html" aria-label="Ir para a home">
          <span className="brand-mark">Cardio<span className="brand-fit">Fit</span></span>
          <span className="brand-sub">Dr. Bruno Nunes · Cardiologia · Longevidade</span>
        </a>
        <nav className="desktop-nav" aria-label="Principal">
          {links.map(l => (
            <a
              key={l.id}
              href={l.href}
              aria-current={current === l.id ? "page" : undefined}
              style={current === l.id ? { color: "var(--white)" } : null}
            >{l.label}</a>
          ))}
          <a
            className="button button-primary"
            href="agenda.html"
            onClick={onAgendaClick}
            style={{ minHeight: 44, padding: "0 18px", fontSize: "0.88rem" }}
          >Agendar consulta</a>
        </nav>
        <button className="menu-btn" type="button" aria-label="Abrir menu" aria-expanded={mobileOpen} onClick={() => setMobileOpen(o => !o)}>
          <span aria-hidden="true">{mobileOpen ? "×" : "☰"}</span>
        </button>
      </div>
      {mobileOpen && (
        <div className="container mobile-nav is-open">
          <nav className="mobile-nav-panel" aria-label="Menu mobile">
            {links.map(l => <a key={l.id} href={l.href}>{l.label}</a>)}
            <a className="button button-primary" href="agenda.html" onClick={onAgendaClick}>Agendar consulta</a>
          </nav>
        </div>
      )}
    </header>
  );
}

function EcgDivider({ length = 2400 }) {
  const W = 1600;
  const beats = 6;
  const beatW = W / beats;
  let path = `M 0 32`;
  for (let i = 0; i < beats; i++) {
    const x = i * beatW;
    path += ` L ${x + beatW * 0.30} 32`;
    path += ` L ${x + beatW * 0.34} 28`;
    path += ` L ${x + beatW * 0.38} 32`;
    path += ` L ${x + beatW * 0.42} 32`;
    path += ` L ${x + beatW * 0.46} 44`;
    path += ` L ${x + beatW * 0.50} 8`;
    path += ` L ${x + beatW * 0.54} 50`;
    path += ` L ${x + beatW * 0.58} 32`;
    path += ` L ${x + beatW * 0.66} 32`;
    path += ` L ${x + beatW * 0.70} 26`;
    path += ` L ${x + beatW * 0.74} 32`;
    path += ` L ${x + beatW} 32`;
  }
  return (
    <div className="ecg-divider" aria-hidden="true">
      <svg viewBox={`0 0 ${W} 64`} preserveAspectRatio="none">
        <path className="ecg-line" d={path} style={{ "--ecg-len": length }} />
      </svg>
    </div>
  );
}

function CardioFooter() {
  return (
    <footer className="site-footer-x">
      <div className="container">
        <div className="footer-x-grid">
          <div className="footer-x-brand">
            <span className="brand-mark">Cardio<span className="brand-fit">Fit</span></span>
            <p>Cardiologia integrativa, longevidade cardiovascular e cardiometabolismo. Trabalho do Dr. Bruno Nunes.</p>
            <div className="footer-x-creds">
              <p><strong>Dr. Bruno Nunes</strong> — Médico</p>
              <p>CRM-MG 48.227</p>
              <p>RQE 39950 (Cardiologia) · RQE 39951 (Ecocardiografia)</p>
              <p>Vale do Aço · MG</p>
            </div>
          </div>
          <div className="footer-x-col">
            <h4>Navegação</h4>
            <ul>
              <li><a href="index.html">Início</a></li>
              <li><a href="abordagem.html">Abordagem</a></li>
              <li><a href="areas.html">Áreas</a></li>
              <li><a href="credenciais.html">Credenciais</a></li>
              <li><a href="agenda.html">Agenda</a></li>
            </ul>
          </div>
          <div className="footer-x-col">
            <h4>Atendimento</h4>
            <ul>
              <li><a href="agenda.html">Teleconsulta · Amplimed</a></li>
              <li><a href="https://api.whatsapp.com/send?phone=553138238000" target="_blank" rel="noreferrer">Presencial · WhatsApp São Miguel</a></li>
              <li><a href="mailto:contato@cardiologiaintegrativa.com">contato@cardiologiaintegrativa.com</a></li>
            </ul>
          </div>
          <div className="footer-x-col">
            <h4>Material e redes</h4>
            <ul>
              <li><a href="https://checkup.cardiologiaintegrativa.com" target="_blank" rel="noreferrer">Check-up 3.0 (gratuito)</a></li>
              <li>
                <a className="footer-social-link" href="https://www.instagram.com/drbrunonunes.longevidade/" target="_blank" rel="noopener noreferrer">
                  <svg className="footer-social-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8"/>
                    <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8"/>
                    <circle cx="17.5" cy="6.5" r="1.2" fill="currentColor"/>
                  </svg>
                  Instagram · @drbrunonunes.longevidade
                </a>
              </li>
              <li>
                <a className="footer-social-link" href="https://www.tiktok.com/@drbrunonunes.longevidade" target="_blank" rel="noopener noreferrer">
                  <svg className="footer-social-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M16 3v3.5a4 4 0 0 0 4 4V13a7 7 0 0 1-4-1.27V16a5 5 0 1 1-5-5v3a2 2 0 1 0 2 2V3h3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
                  </svg>
                  TikTok · @drbrunonunes.longevidade
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-x-disclaimer">
          <p>
            Material educativo, com finalidade informativa. Não substitui consulta,
            diagnóstico ou conduta médica individual. Atendimentos de telemedicina realizados
            conforme <strong>Resolução CFM nº 2.314/2022</strong>.
          </p>
        </div>

        <div className="footer-x-bottom">
          <div className="footer-x-bottom-row">
            <span>© 2026 CardioFit · Dr. Bruno Nunes</span>
            <span style={{ color: "var(--mist)" }}>cardiologiaintegrativa.com</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Reveal-on-scroll observer
function useReveal() {
  React.useEffect(() => {
    const elements = document.querySelectorAll(".reveal, .reveal-stagger");
    if (!elements.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-visible");
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: "0px 0px -5% 0px", threshold: 0.01 });
    elements.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.95) {
        el.classList.add("is-visible");
      } else {
        io.observe(el);
      }
    });
    return () => io.disconnect();
  }, []);
}

window.CardioHeader = CardioHeader;
window.CardioFooter = CardioFooter;
window.EcgDivider = EcgDivider;
window.useReveal = useReveal;