/* Footer */
const { useRef: useRefFt } = React;

function Footer() {
  const ref = useRefFt(null);
  useReveal(ref);
  return (
    <footer ref={ref} className="mw-reveal" style={{ borderTop: '1px solid var(--border)', padding: 'clamp(40px, 6vh, 64px) clamp(20px, 4vw, 32px) 24px', background: 'var(--bg-elev-1)' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 40 }}>
        <div style={{ gridColumn: 'span 2', minWidth: 280 }} className="mw-footer-about">
          <Logo size={36}/>
          <p style={{ marginTop: 16, maxWidth: 380, fontSize: 13, lineHeight: 1.55, color: 'var(--fg-3)' }}>
            Oklahoma's engineering studio. We build any website — simple or complex — and wire AI agents into every one. Serving the OKC metro and nationwide.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20, flexWrap: 'wrap' }}>
            <MagButton size="sm" variant="ghost" href="#contact">Free quote</MagButton>
            <MagButton size="sm" variant="ghost" href="mailto:hello@midwest.tech" noArrow>hello@midwest.tech</MagButton>
          </div>
        </div>
        {[
          { t: 'Studio',  l: [['Work','#work'], ['Services','#services'], ['SEO','#seo'], ['Contact','#contact']] },
          { t: 'Build',   l: [['One-page sites','#services'], ['Listings','#work'], ['Marketing sites','#work'], ['Dashboards','#work'], ['AI helpers','#ai']] },
          { t: 'Contact', l: [['hello@midwest.tech','mailto:hello@midwest.tech'], ['+1 (405) 555-0142','tel:+14055550142'], ['Oklahoma City, OK','#contact'], ['Start a project','#contact']] },
        ].map(col => (
          <div key={col.t} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--fg-4)' }}>— {col.t.toUpperCase()}</div>
            {col.l.map(([l, h]) => <a key={l} href={h} style={{ color: 'var(--fg-2)', textDecoration: 'none', fontSize: 13, transition: 'color .15s' }} onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-2)'}>{l}</a>)}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1440, margin: '40px auto 0', paddingTop: 18, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-4)' }}>
        <span>© 2026 Midwest Technologies · All systems operational</span>
        <span>v26.04.1 · 35.47°N 97.52°W</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });