var React = window.React;
var { Logo } = window.NobleHealthDesignSystem_07bcfa;
var I = window.NobleIcons;

/* Every footer link resolves to a real destination — either the care request or a
   section on the home page. Items with nowhere to go were removed rather than left
   as dead links; add them back once the pages they imply actually exist. */
function scrollToSection(id) {
  var el = document.getElementById(id);
  if (!el) return false;
  el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  return true;
}

function FootCol({ h, items, onNav }) {
  var handle = (e, item) => {
    if (!item.section) return; // real hrefs (e.g. /request-care) navigate normally
    e.preventDefault();
    if (scrollToSection(item.section)) return;
    // Sections aren't mounted inside the request flow — go home, then scroll.
    if (onNav) onNav('home');
    requestAnimationFrame(() => {
      if (!scrollToSection(item.section)) setTimeout(() => scrollToSection(item.section), 80);
    });
  };
  return (
    <div>
      <h4 style={{ margin: '0 0 16px', fontFamily: 'var(--font-body)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--green-700)' }}>{h}</h4>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
        {items.map((it) => (
          <li key={it.label}>
            <a
              href={it.href || ('/#' + it.section)}
              onClick={(e) => handle(e, it)}
              style={{ cursor: 'pointer', fontSize: 'var(--text-sm)', color: 'var(--text-muted)', textDecoration: 'none' }}
            >
              {it.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

var FOOT_SERVICES = [
  { label: 'Companion care', section: 'services' },
  { label: 'Personal care', section: 'services' },
  { label: 'Homemaker help', section: 'services' },
  { label: 'Respite care', section: 'services' },
  { label: 'Dementia care', section: 'services' },
  { label: '24-hour care', section: 'programs' },
];
var FOOT_FAMILIES = [
  { label: 'Request care', href: '/request-care' },
  { label: 'How we care', section: 'our-care' },
  { label: 'Programs', section: 'programs' },
  { label: 'Reviews', section: 'reviews' },
];
/* Legal documents — content lives in legal-content.js. */
var LEGAL_LINKS = [
  { label: 'Privacy & HIPAA', href: '/privacy' },
  { label: 'Terms', href: '/terms' },
  { label: 'Nondiscrimination', href: '/nondiscrimination' },
  { label: 'Accessibility', href: '/accessibility' },
];
var FOOT_COMPANY = [
  { label: 'Our story', section: 'our-care' },
  { label: 'Our caregivers', section: 'about' },
  { label: 'Contact', href: '/request-care' },
];

function SiteFooter({ onNav }) {
  return (
    <footer style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto', padding: 'var(--space-16) var(--space-8) var(--space-8)' }}>
        <div className="nh-footer-cols" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 'var(--space-10)' }}>
          <div>
            <span className="nh-logo" style={{ '--nh-tagline-size': '12px' }}>
              <Logo size={52} />
            </span>
            <p style={{ marginTop: 'var(--space-4)', fontSize: 'var(--text-sm)', lineHeight: 1.6, color: 'var(--text-muted)', maxWidth: 260 }}>
              Trusted in-home caregiving that helps your loved ones live safely and comfortably where they're happiest — at home.
            </p>
            {/* Phone replaced by the care request so every enquiry is captured in AxisCare. */}
            <a
              href="/request-care"
              style={{
                marginTop: 'var(--space-5)', display: 'inline-flex', alignItems: 'center', gap: 8,
                height: 42, padding: '0 20px', borderRadius: 'var(--radius-pill)',
                background: 'var(--brand-primary)', color: '#fff', textDecoration: 'none',
                fontWeight: 'var(--fw-bold)', fontSize: 'var(--text-sm)',
              }}
            >
              Request care<I.ArrowRight width={16} height={16} />
            </a>
          </div>
          <FootCol h="Services" items={FOOT_SERVICES} onNav={onNav} />
          <FootCol h="Families" items={FOOT_FAMILIES} onNav={onNav} />
          <FootCol h="Company" items={FOOT_COMPANY} onNav={onNav} />
        </div>
        <div className="nh-footer-legal" style={{ marginTop: 'var(--space-16)', paddingTop: 'var(--space-6)', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-subtle)' }}>© 2026 Noble Health Caregiving Services. Licensed &amp; insured.</span>
          <span style={{ display: 'flex', gap: 'var(--space-5)' }}>
            {LEGAL_LINKS.map((l) => (
              <a key={l.href} href={l.href} style={{ fontSize: 'var(--text-xs)', color: 'var(--text-subtle)', cursor: 'pointer', textDecoration: 'none' }}>{l.label}</a>
            ))}
          </span>
        </div>
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;