/* Shared chrome for the Family Diagnostics site: nav data, sticky header, footer. */
const { SiteHeader, SiteFooter } = window.FamilyDiagnosticsDesignSystem_6d724e;

/* Links are authored as clean production URLs (/contact/, /our-services/abi/...).
   When the site is previewed from a sub-path instead of a domain root, rewrite
   those clicks to the equivalent file so navigation still works. */
(function fdPreviewLinks() {
  const base = new URL('.', document.baseURI);
  const preview = base.pathname !== '/';
  window.fdUrl = href => {
    if (!preview || !href || !href.startsWith('/') || href.startsWith('//')) return href;
    const [rawPath, hash] = href.split('#');
    let path = rawPath.replace(/^\//, '');
    if (path === '' || path.endsWith('/')) path += 'index.html';
    return new URL(path, base).href + (hash ? '#' + hash : '');
  };
  if (!preview) return;
  document.addEventListener('click', e => {
    const a = e.target.closest && e.target.closest('a[href^="/"]');
    if (!a || a.target === '_blank') return;
    const raw = a.getAttribute('href');
    if (!raw || raw.startsWith('//')) return;
    const [rawPath, hash] = raw.split('#');
    let path = rawPath;
    if (path === '' || path === '/') path = 'index.html';
    else {
      path = path.replace(/^\//, '');
      if (path === '' || path.endsWith('/')) path += 'index.html';
    }
    const target = new URL(path, base);
    e.preventDefault();
    if (hash && target.pathname === location.pathname) { fdScrollTo('#' + hash); return; }
    window.location.href = target.href + (hash ? '#' + hash : '');
  }, true);
})();

/* Smooth-scroll helper that clears the sticky header. */
function fdScrollTo(selector) {
  const el = document.querySelector(selector);
  if (!el) return;
  const header = document.querySelector('header');
  const offset = header ? header.getBoundingClientRect().height + 16 : 100;
  window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - offset, behavior: 'smooth' });
  if (history.replaceState) history.replaceState(null, '', selector);
}

/* Same-page anchors on the live site (no preview rewriting needed). */
document.addEventListener('click', e => {
  const a = e.target.closest && e.target.closest('a[href^="/#"], a[href^="#"]');
  if (!a || a.target === '_blank') return;
  const hash = a.getAttribute('href').split('#')[1];
  if (!hash) return;
  const el = document.getElementById(hash);
  if (!el) return;
  e.preventDefault();
  fdScrollTo('#' + hash);
}, false);

const FD_UTILITY = [
  { icon: 'phone', label: 'Office: (407) 329-2721', href: 'tel:+14073292721' },
  { icon: 'printer', label: 'Referral Fax: (407) 469-7108' },
  { icon: 'map-pin', label: 'Serving Florida and Texas' },
];

const FD_NAV = [
  { label: 'Why Family Diagnostics', href: '/#why' },
  { label: 'Our Services', href: '/#services', children: [
    { label: 'ABI Testing', href: '/our-services/ankle-brachial-index-abi/' },
    { label: 'ANS Testing', href: '/our-services/autonomic-ans-test/' },
    { label: 'Sudomotor Testing', href: '/our-services/sudomotor-test/' },
    { label: 'Carotid Doppler Ultrasound', href: '/our-services/carotid-doppler-ultrasound/' },
    { label: 'Lower-Extremity Arterial Doppler Ultrasound', href: '/our-services/lower-extremity-doppler-ultrasound/' },
    { label: 'Obstetric or Gynecological Ultrasound', href: '/our-services/obstetric-ultrasound/' },
  ] },
  { label: 'How It Works', href: '/#how-it-works' },
  { label: 'Company', children: [
    { label: 'Team', href: '/leadership/' },
    { label: 'Our Philosophy', href: '/our-philosophy/' },
  ] },
  { label: 'Contact', href: '/contact/' },
];

const FD_FOOTER_COLUMNS = [
  { title: 'Company', links: [
    { label: 'Why Family Diagnostics', href: '/#why' },
    { label: 'Our Services', href: '/our-services/' },
    { label: 'How It Works', href: '/#how-it-works' },
    { label: 'Team', href: '/leadership/' },
    { label: 'Our Philosophy', href: '/our-philosophy/' },
    { label: 'Contact Us', href: '/contact/' },
  ] },
  { title: 'Services', links: [
    { label: 'ABI Testing', href: '/our-services/ankle-brachial-index-abi/' },
    { label: 'ANS Testing', href: '/our-services/autonomic-ans-test/' },
    { label: 'Sudomotor Testing', href: '/our-services/sudomotor-test/' },
    { label: 'Carotid Doppler Ultrasound', href: '/our-services/carotid-doppler-ultrasound/' },
    { label: 'Lower-Extremity Arterial Doppler Ultrasound', href: '/our-services/lower-extremity-doppler-ultrasound/' },
    { label: 'Obstetric or Gynecological Ultrasound', href: '/our-services/obstetric-ultrasound/' },
  ] },
];

const FD_CONTACT = [
  { icon: 'phone', label: 'Office: (407) 329-2721', href: 'tel:+14073292721' },
  { icon: 'printer', label: 'Referral Fax: (407) 469-7108' },
  { icon: 'mail', label: 'gvallejo@family-diagnostics.com', href: 'mailto:gvallejo@family-diagnostics.com' },
  { icon: 'map-pin', label: 'Florida Office: 7726 Winegard Road, 2nd Floor, Suite 43, Orlando, FL 32809', href: 'https://www.google.com/maps?q=' + encodeURIComponent('7726 Winegard Road, 2nd Floor, Suite 43, Orlando, FL 32809') },
  { icon: 'map-pin', label: 'Texas Office: 6275 W. Plano Parkway, Suite 500, Plano, TX 75093', href: 'https://www.google.com/maps?q=' + encodeURIComponent('6275 W. Plano Parkway, Suite 500, Plano, TX 75093') },
];

const MRWD = '<div id="mrwd"><a href="https://mrwebsitedesigner.com" target="_blank" rel="noopener">Website Design: <img style="padding-bottom: 1px;" src="https://mrwebsitedesigner.com/assets/images/bowtie.svg" width="15" /> <strong>Mr. Website Designer</strong></a></div>';

function FdHeader({ activeHref }) {
  const [compact, setCompact] = React.useState(false);
  const [ctaLabel, setCtaLabel] = React.useState('Request a Partnership Consultation');
  const [open, setOpen] = React.useState(false);
  const [expanded, setExpanded] = React.useState(null);
  const [toggleTop, setToggleTop] = React.useState(56);
  const place = React.useCallback(() => {
    const logo = document.querySelector('header img[alt="Family Diagnostics"]');
    if (logo) {
      const r = logo.getBoundingClientRect();
      setToggleTop(Math.max(8, r.top + r.height / 2 - 22));
    }
  }, []);
  React.useEffect(() => {
    const onScroll = () => { setCompact(window.scrollY > 12); place(); };
    const onResize = () => {
      const w = window.innerWidth;
      setCtaLabel(w >= 1240 ? 'Request a Partnership Consultation' : w >= 1080 ? 'Request a Consultation' : 'Contact Us');
      if (w >= 1024) setOpen(false);
      place();
    };
    onScroll(); onResize();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); };
  }, [place]);
  React.useEffect(() => {
    const place2 = setTimeout(() => {
      const hdrLink = document.querySelector('header a[href="#"]');
      if (hdrLink && hdrLink.querySelector('img[alt="Family Diagnostics"]')) {
        hdrLink.setAttribute('href', '/');
        hdrLink.setAttribute('aria-label', 'Family Diagnostics home');
      }
    }, 0);
    const onKey = e => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = open ? 'hidden' : '';
    const t = setTimeout(() => window.lucide && window.lucide.createIcons(), 0);
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; clearTimeout(t); clearTimeout(place2); };
  }, [open, expanded]);
  return (
    <React.Fragment>
      <SiteHeader logoSrc="assets/logo.svg" utility={FD_UTILITY} items={FD_NAV} activeHref={activeHref}
        ctaLabel={ctaLabel} compact={compact}
        onCtaClick={() => { window.location.href = fdUrl('/contact/'); }} />
      <button className="mob-toggle" style={{ top: toggleTop }} aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open} onClick={() => setOpen(v => !v)}>
        <i data-lucide={open ? 'x' : 'menu'} width="24" height="24"></i>
      </button>
      {open ? (
        <div className="mob-drawer" role="dialog" aria-label="Main menu">
          <nav className="mob-nav">
            {FD_NAV.map(item => (
              <div className="mob-item" key={item.label}>
                {item.children ? (
                  <React.Fragment>
                    <button className="mob-link" aria-expanded={expanded === item.label} onClick={() => setExpanded(v => v === item.label ? null : item.label)}>
                      {item.label}<i data-lucide="chevron-down" width="18" height="18"></i>
                    </button>
                    {expanded === item.label ? (
                      <div className="mob-sub">
                        {item.href ? <a href={item.href}>All {item.label}</a> : null}
                        {item.children.map(c => <a key={c.label} href={c.href}>{c.label}</a>)}
                      </div>
                    ) : null}
                  </React.Fragment>
                ) : (
                  <a className="mob-link" href={item.href}>{item.label}</a>
                )}
              </div>
            ))}
          </nav>
          <div className="mob-actions">
            <a className="mob-cta" href="/contact/">Request a Partnership Consultation</a>
            <a className="mob-tel" href="tel:+14073292721">Office: (407) 329-2721</a>
            <a className="mob-tel" href="mailto:gvallejo@family-diagnostics.com">gvallejo@family-diagnostics.com</a>
          </div>
        </div>
      ) : null}
    </React.Fragment>
  );
}

function FdFooter() {
  const legal = (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 12, width: '100%' }}>
      <span>© <span id="copyright-year"></span> Family Diagnostics</span>
      <div dangerouslySetInnerHTML={{ __html: MRWD }}></div>
    </div>
  );
  React.useEffect(() => {
    const t = setTimeout(() => window.lucide && window.lucide.createIcons(), 0);
    const el = document.getElementById('copyright-year');
    if (el) el.textContent = new Date().getFullYear();
    const logo = document.querySelector('footer img[alt="Family Diagnostics"]');    if (logo && !logo.closest('a')) {
      const a = document.createElement('a');
      a.href = '/';
      a.setAttribute('aria-label', 'Family Diagnostics home');
      a.style.display = 'inline-flex';
      logo.parentNode.insertBefore(a, logo);
      a.appendChild(logo);
    }
    return () => clearTimeout(t);
  }, []);
  return (
    <SiteFooter logoSrc="assets/logo-white.svg" columns={FD_FOOTER_COLUMNS} contact={FD_CONTACT} legal={legal}
      summary={<React.Fragment>
        <span style={{ display: 'block' }}>Family Diagnostics provides in-clinic technical and administrative support for physician-ordered vascular, autonomic, and ultrasound testing.</span>
        <a className="fd-social" href="https://www.instagram.com/familydiagnostics/" target="_blank" rel="noopener" aria-label="Family Diagnostics on Instagram">
          <i data-lucide="instagram" width="20" height="20"></i><span>@familydiagnostics</span>
        </a>
      </React.Fragment>} />
  );
}

/* Smooth-scroll to a cross-page #anchor after load. */
function useHashScroll() {
  React.useEffect(() => {
    if (!window.location.hash) return;
    requestAnimationFrame(() => {
      const el = document.querySelector(window.location.hash);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' });
    });
  }, []);
}

Object.assign(window, { FdHeader, FdFooter, useHashScroll, FD_UTILITY, FD_NAV, FD_CONTACT });