/* Footer — product / company / trust link columns + educational-use disclaimer. */
function Footer() {
  const Ic = window.Ic;
  const socials = ['Instagram', 'Twitter', 'Youtube', 'Linkedin'];
  const [hovered, setHovered] = React.useState(null);
  const cols = [
    { title: 'Product', links: ['How it works', 'Diagnostics', 'Compare offers', 'Predictive care', 'Pricing'] },
    { title: 'Company', links: ['About', 'Phoenix beta', 'For mechanics', 'Careers', 'Contact'] },
    { title: 'Trust', links: ['Privacy', 'Data control', 'Security', 'Terms', 'Help center'] },
  ];
  const linkStyle = { fontSize: 14, color: 'var(--text-muted)', textDecoration: 'none', display: 'inline-block', padding: '4px 0', transition: 'color var(--dur-base) var(--ease-out)' };

  return (
    <footer style={{ borderTop: '1px solid var(--line-100)', background: 'var(--bg-deep)', padding: 'clamp(48px, 6vw, 72px) clamp(20px, 5vw, 48px) 36px' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div className="footer-top" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 'clamp(28px, 4vw, 56px)', marginBottom: 48 }}>
          <div style={{ maxWidth: 280 }}>
            <window.AleroqLogo size={22} />
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-muted)', margin: '18px 0 20px', textWrap: 'pretty' }}>
              Diagnostics you understand, mechanics who compete. Launching in Phoenix.
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              {socials.map((s) => (
                <a key={s} href="#" onClick={(e) => e.preventDefault()}
                  onMouseEnter={() => setHovered(s)} onMouseLeave={() => setHovered(null)}
                  style={{
                    width: 38, height: 38, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    border: `1px solid ${hovered === s ? 'rgba(22,214,128,0.5)' : 'var(--border)'}`,
                    borderRadius: 'var(--radius-md)', color: hovered === s ? 'var(--positive-bright)' : 'var(--text-muted)',
                    transition: 'color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)',
                  }}>
                  <Ic name={s} size={17} />
                </a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-faint)', marginBottom: 14 }}>{c.title}</div>
              <nav style={{ display: 'flex', flexDirection: 'column' }}>
                {c.links.map((l) => (
                  <a key={l} href="#" className="footer-link" onClick={(e) => e.preventDefault()} style={linkStyle}>{l}</a>
                ))}
              </nav>
            </div>
          ))}
        </div>

        <div style={{ borderTop: '1px solid var(--line-100)', paddingTop: 24, display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 13, color: 'var(--text-faint)' }}>&copy; 2026 ALEROQ, Inc. &middot; Phoenix, AZ</div>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 12.5, lineHeight: 1.5, color: 'var(--text-faint)', maxWidth: 620 }}>
            <Ic name="Info" size={14} color="var(--text-faint)" />
            ALEROQ provides educational diagnostic guidance to help drivers make informed decisions. It is not a substitute for inspection or repair by a qualified mechanic.
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;