// Footer.jsx — five-column footer
const COLS = [
  {
    head: 'Services',
    items: [
      { l:'Corporate',     href:'corporate.html' },
      { l:'Wedding',       href:'weddings.html' },
      { l:'Campus',        href:'campus.html' },
      { l:'School',        href:'campus.html' },
      { l:'Large event',   href:'large-events.html' },
      { l:'Private party', href:'private-party.html' },
    ],
  },
  {
    head: 'Locations',
    // Preview: sample county/town templates. Full Airtable-driven set comes later.
    items: [
      { l:'Bergen',          href:'county-template.html' },
      { l:'Hudson',          href:'county-template.html' },
      { l:'Essex',           href:'county-template.html' },
      { l:'Morris',          href:'county-template.html' },
      { l:'Union',           href:'county-template.html' },
      { l:'Somerset',        href:'county-template.html' },
      { l:'Middlesex',       href:'county-template.html' },
      { l:'See all towns →', href:'town-template.html' },
    ],
  },
  {
    head: 'Resources',
    items: [
      { l:'Blog',         href:'#' },
      { l:'Calculator',   href:'calculator.html' },
      { l:'Pricing',      href:'#' },
      { l:'FAQ',          href:'#' },
      { l:'Case studies', href:'#' },
    ],
  },
];

const Footer = () => (
  <footer style={{ background: T.navy, color:'rgba(255,255,255,.82)', padding:'72px 24px 24px' }}>
    <div style={{ maxWidth:1200, margin:'0 auto', display:'grid',
                  gridTemplateColumns:'1.4fr 1fr 1fr 1fr 1.3fr', gap:48 }}
         className="footer-grid">
      <div>
        <div style={{ background: T.white, borderRadius:12, padding:10, display:'inline-block', marginBottom:20 }}>
          <img src={(window.__resources && window.__resources.logo) || "assets/logo.png"} alt="Food Trucks On The Move" style={{ height:60, display:'block' }} />
        </div>
        <p style={{ color:'rgba(255,255,255,.72)', fontSize:14, lineHeight:1.55, margin:0, maxWidth:240 }}>
          Managed food truck catering. NJ.
        </p>
      </div>
      {COLS.map(col => (
        <div key={col.head}>
          <div style={{
            fontSize:12, letterSpacing:'.08em', textTransform:'uppercase',
            color: T.white, fontWeight:600, marginBottom:18,
          }}>{col.head}</div>
          <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10 }}>
            {col.items.map(i => (
              <li key={i.l}><a href={i.href} className="footer-link" style={{ color:'rgba(255,255,255,.82)', fontSize:14, border:'none' }}>{i.l}</a></li>
            ))}
          </ul>
        </div>
      ))}
      <div>
        <div style={{ fontSize:12, letterSpacing:'.08em', textTransform:'uppercase', color: T.white, fontWeight:600, marginBottom:18 }}>Contact</div>
        <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10, fontSize:14 }}>
          <li style={{ display:'flex', alignItems:'flex-start', gap:8, color:'rgba(255,255,255,.82)' }}>
            <IconPin size={14} style={{ marginTop:3, flex:'0 0 auto' }} />
            <span>47 Fleetwood Ave<br/>Fairfield, NJ 07004</span>
          </li>
          <li><a href="tel:+12012082682" className="footer-link" style={{ color:'rgba(255,255,255,.82)', border:'none', display:'inline-flex', alignItems:'center', gap:8 }}><IconPhone size={14} /> (201) 208-2682</a></li>
          <li><a href="mailto:catering@foodtrucksonthemove.com" className="footer-link" style={{ color:'rgba(255,255,255,.82)', border:'none', display:'inline-flex', alignItems:'center', gap:8 }}><IconMail size={14} /> catering@foodtrucksonthemove.com</a></li>
          <li style={{ color:'rgba(255,255,255,.82)' }}>Mon–Fri · 9a–7p ET</li>
          <li style={{ display:'flex', gap:10, marginTop:8 }}>
            <a href="#" aria-label="Instagram" style={{ color:'rgba(255,255,255,.82)', border:'none' }}><IconIG size={18} /></a>
            <a href="#" aria-label="Facebook"  style={{ color:'rgba(255,255,255,.82)', border:'none' }}><IconFB size={18} /></a>
            <a href="#" aria-label="Google Reviews" style={{ color:'rgba(255,255,255,.82)', border:'none' }}><IconStar size={18} /></a>
          </li>
        </ul>
      </div>
    </div>
    <div style={{
      maxWidth:1200, margin:'56px auto 0', paddingTop:24,
      borderTop:'1px solid rgba(255,255,255,.14)',
      display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:16,
      fontSize:12, color:'rgba(255,255,255,.60)',
    }}>
      <div>© 2026 Food Trucks On The Move. NJ.</div>
      <div style={{ display:'flex', gap:18, flexWrap:'wrap' }}>
        <a href="#" style={{ color:'inherit', border:'none' }}>Privacy</a>
        <a href="#" style={{ color:'inherit', border:'none' }}>Accessibility</a>
        <a href="#" style={{ color:'inherit', border:'none' }}>Sitemap</a>
        <a href="#" style={{ color:'inherit', border:'none' }}>Vendor application</a>
      </div>
    </div>
    <style>{`
      .footer-link:hover { color: ${T.sky} !important; }
    `}</style>
  </footer>
);

Object.assign(window, { Footer });