/* ActiveFit360 marketing — site footer */
const NS_f = window.Activefit360DesignSystem_d87766;

if (typeof document !== 'undefined' && !document.getElementById('af-foot-css')) {
  const s = document.createElement('style'); s.id = 'af-foot-css';
  s.textContent = `
    footer a { transition: color 0.18s ease; }
    footer a:hover { color: #ffffff !important; text-decoration: underline !important; }
  `;
  document.head.appendChild(s);
}

function SiteFooter({ onNavigate = () => {}, onBook = () => {} }) {
  const { Button } = NS_f;
  const I = window.Icon;
  const routes = window.AF_ROUTES;
  const quickLinks = [['About Us', 'about'], ['Reviews', 'reviews'], ['Recommended Products', 'affiliates'], ['Contact', 'contact'], ['Book Appointment', 'book']];
  const onClick = (id) => (e) => { e.preventDefault(); id === 'book' ? onBook() : onNavigate(id); };
  const hrefFor = (id) => id === 'book' ? '#' : routes[id];
  return (
    <footer style={{ background: 'var(--green-950)', color: 'var(--text-on-dark)', marginTop: 'var(--section-y)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-20) var(--gutter) var(--space-10)' }}>

        {/* CTA band */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center', justifyContent: 'space-between',
          paddingBottom: 'var(--space-16)', borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px,4vw,42px)', letterSpacing: '-0.02em', color: '#fff', margin: 0, lineHeight: 1.08 }}>
              Move freely.<br/>Live fully.
            </h2>
            <p style={{ color: '#A9C6B5', fontSize: 17, marginTop: 12, maxWidth: '38ch' }}>
              No referral needed. Book a one-on-one evaluation and start feeling better — in-clinic, at home, or online.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <Button variant="green" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={onBook}>Book Appointment</Button>
            <Button size="lg" as="a" href="tel:+13314727451" iconLeft={<I name="phone" size={16} />}
              style={{ background: 'rgba(255,255,255,0.1)', color: '#fff' }}>(331) 472-7451</Button>
          </div>
        </div>

        {/* link columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1.2fr', gap: 40, padding: 'var(--space-16) 0 var(--space-12)' }} className="af-foot-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: '50%', background: '#fff', flexShrink: 0 }}>
                <img src="assets/logo-green.png" alt="ActiveFit360" style={{ height: 30, width: 'auto' }} />
              </span>
              <window.Wordmark onDark />
            </div>
            <p style={{ color: '#8FB29E', fontSize: 13.5, lineHeight: 1.55, marginTop: 14, whiteSpace: 'nowrap' }}>
              Personalized, one-on-one physical therapy.<br/>Move freely. Laugh confidently. Live fully.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#6FA088', marginBottom: 14 }}>Quick Links</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {quickLinks.map(([label, id]) => (
                <li key={label}><a href={hrefFor(id)} onClick={onClick(id)} style={{ color: '#CFE3D8', textDecoration: 'none', fontSize: 14.5, fontWeight: 500 }}>{label}</a></li>
              ))}
            </ul>
          </div>

          {/* Clinic — contact details */}
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#6FA088', marginBottom: 14 }}>Clinic</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, color: '#A9C6B5', fontSize: 14 }}>
              <a href="https://maps.google.com/?q=3420+Lacrosse+Lane+Suite+121+Naperville+IL+60564" target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 9, color: '#CFE3D8', textDecoration: 'none' }}><I name="map-pin" size={16} style={{ flexShrink: 0 }} /> 3420 Lacrosse Lane, Suite 121, Naperville, IL 60564</a>
              <a href="tel:+13314727451" style={{ display: 'flex', alignItems: 'center', gap: 9, color: '#CFE3D8', textDecoration: 'none' }}><I name="phone" size={16} /> (331) 472-7451</a>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}><I name="printer" size={16} style={{ flexShrink: 0 }} /> Fax (331) 226-0556</span>
              <a href="mailto:info@activefit360.com" style={{ display: 'flex', alignItems: 'center', gap: 9, color: '#CFE3D8', textDecoration: 'none' }}><I name="mail" size={16} /> info@activefit360.com</a>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 'var(--space-6)', borderTop: '1px solid rgba(255,255,255,0.12)', color: '#7FA593', fontSize: 13.5 }}>
          <span>© 2026 ActiveFit360 LLC. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
            <a href={routes.privacy} onClick={onClick('privacy')} style={{ color: '#7FA593', textDecoration: 'none' }}>Privacy Policy</a>
            <a href={routes.terms} onClick={onClick('terms')} style={{ color: '#7FA593', textDecoration: 'none' }}>Terms & Conditions</a>
            <a href={routes.hipaa} onClick={onClick('hipaa')} style={{ color: '#7FA593', textDecoration: 'none' }}>HIPAA Notice</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteFooter });