/* Footer — three-column, subdued, with sources line. */
function SiteFooter() {
  return (
    <footer data-screen-label="12 Footer" style={{
      background: 'var(--pmhoa-ink)',
      color: 'rgba(255,255,255,0.7)',
      padding: 'clamp(56px, 6vw, 80px) 0 28px',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 56,
          paddingBottom: 48,
        }}>
          {/* Brand */}
          <div>
            <img src="brand/pmhoa-logo-light.png" alt="PMHOA Pro" style={{ height: 28, marginBottom: 16 }} />
            <p style={{
              margin: 0,
              fontSize: 14,
              lineHeight: 1.5,
              color: 'rgba(255,255,255,0.6)',
              maxWidth: 280,
            }}>
              A done-for-you sales team for home service companies.
            </p>
            {/* Social row */}
            <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
              {['Facebook', 'YouTube', 'X', 'Instagram', 'LinkedIn'].map((s) => (
                <a key={s} href="#" aria-label={s} style={{
                  width: 32, height: 32,
                  borderRadius: 8,
                  border: '1px solid rgba(255,255,255,0.12)',
                  display: 'grid', placeItems: 'center',
                  color: 'rgba(255,255,255,0.6)',
                  fontSize: 11,
                  fontWeight: 700,
                  textDecoration: 'none',
                  transition: 'background 120ms ease, color 120ms ease, border-color 120ms ease',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.06)';
                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.3)';
                  e.currentTarget.style.color = 'white';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent';
                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';
                  e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
                }}>
                  {s[0]}
                </a>
              ))}
            </div>
          </div>

          {/* Navigation */}
          <FooterCol title="Navigation" links={[
            ['About', '#market'],
            ['Case studies', '#proof'],
            ['10X Your BDR', 'https://10xyourbdr.com'],
            ['The 33 Secrets', 'mailto:info@pmhoa.pro?subject=Send%20me%20The%2033%20Secrets'],
            ['Contact', 'mailto:info@pmhoa.pro'],
          ]} />

          {/* Resources */}
          <FooterCol title="Service" links={[
            ['How it works', '#service'],
            ['Done for you', '#routing'],
            ['Done with you', '#routing'],
            ['Check your territory', 'check-territory'],
            ['FAQ', '#faq'],
          ]} />

          {/* Contact */}
          <div>
            <h5 style={{
              margin: '0 0 16px',
              fontSize: 11,
              fontWeight: 800,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: 'white',
            }}>Contact</h5>
            <ul className="link-row" style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>
              <li><a href="tel:+13072281890" style={fLink}>(307) 228-1890</a></li>
              <li><a href="mailto:info@pmhoa.pro" style={fLink}>info@pmhoa.pro</a></li>
              <li style={{ lineHeight: 1.5, color: 'rgba(255,255,255,0.55)' }}>
                1740 Dell Range Blvd<br/>
                Suite H-13-42526<br/>
                Cheyenne, WY 82009
              </li>
            </ul>
          </div>
        </div>

        {/* Legal bar */}
        <div style={{
          paddingTop: 24,
          borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 16,
          flexWrap: 'wrap',
          fontSize: 12,
          color: 'rgba(255,255,255,0.45)',
        }}>
          <span>© 2026 PMHOA Pro</span>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
          </div>
        </div>

        {/* Sources line */}
        <p style={{
          marginTop: 16,
          fontSize: 11,
          color: 'rgba(255,255,255,0.35)',
          fontStyle: 'italic',
          lineHeight: 1.5,
        }}>
          Market data sources: Buildium State of the Property Management Industry Report,
          JCHS Harvard Joint Center for Housing Studies, IBISWorld.
        </p>
      </div>
    </footer>
  );
}

const fLink = {
  color: 'rgba(255,255,255,0.7)',
  textDecoration: 'none',
  fontSize: 14,
  fontWeight: 500,
  transition: 'color 120ms ease',
};

function FooterCol({ title, links }) {
  return (
    <div>
      <h5 style={{
        margin: '0 0 16px',
        fontSize: 11,
        fontWeight: 800,
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
        color: 'white',
      }}>{title}</h5>
      <ul className="link-row">
        {links.map(([label, href]) => {
          const isCheckTerritory = href === 'check-territory';
          const isExternal = /^https?:\/\//.test(href);
          return (
            <li key={label}>
              <a
                href={isCheckTerritory ? '#hero-cta' : href}
                target={isExternal ? '_blank' : undefined}
                rel={isExternal ? 'noopener noreferrer' : undefined}
                onClick={isCheckTerritory ? (e) => {
                  e.preventDefault();
                  window.dispatchEvent(new CustomEvent('pmhoa:open-zip-modal', { detail: { source: 'footer' } }));
                } : undefined}
                style={fLink}
                onMouseEnter={(e) => e.currentTarget.style.color = 'white'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.7)'}
              >
                {label}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

window.SiteFooter = SiteFooter;