// 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' },
      { l:'Rentals & entertainment', href:'event-rentals-entertainment.html' },
    ],
  },
  {
    head: 'Resources',
    items: [
      { l:'Blog',         href:'/blog/' },
      { l:'Calculator',   href:'calculator.html' },
      { l:'Pricing',      href:'/blog/food-truck-catering-cost-nj/' },
      { l:'FAQ',          href:'faq.html' },
    ],
  },
];

// Softr portals + vendor application (exact URLs per patch). Open in a new tab.
const VENDOR_SIGNUP_URL = 'https://lenny47856.softr.app/vendor-signup';
const CLIENT_PORTAL_URL = 'https://erlene96253.softr.app/login';
const VENDOR_PORTAL_URL = 'https://merlin31957.softr.app/login';
const PUBLIC_EVENT_URL  = 'https://delicate-unit-46e9.odd-morning-25e5.workers.dev/public-event';

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 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={{ marginTop:4 }}><a href={VENDOR_SIGNUP_URL} target="_blank" rel="noopener" className="footer-link" style={{ color:'rgba(255,255,255,.82)', border:'none', fontWeight:600 }}>Become a vendor →</a></li>
          <li><a href={PUBLIC_EVENT_URL} target="_blank" rel="noopener" className="footer-link" style={{ color:'rgba(255,255,255,.82)', border:'none', fontWeight:600 }}>Submit a public event →</a></li>
        </ul>
      </div>
    </div>
    {/* Portals strip — low-emphasis outline buttons for existing logged-in users */}
    <div style={{
      maxWidth:1200, margin:'48px auto 0', paddingTop:24,
      borderTop:'1px solid rgba(255,255,255,.14)',
      display:'flex', gap:12, flexWrap:'wrap', alignItems:'center',
    }}>
      <span style={{ fontSize:12, letterSpacing:'.06em', textTransform:'uppercase', color:'rgba(255,255,255,.6)', marginRight:4 }}>Portals</span>
      <a href={CLIENT_PORTAL_URL} target="_blank" rel="noopener" className="footer-portal" style={{
        fontSize:14, color: T.white, border:'1px solid rgba(255,255,255,.3)', borderRadius:8, padding:'8px 14px',
      }}>Client Portal →</a>
      <a href={VENDOR_PORTAL_URL} target="_blank" rel="noopener" className="footer-portal" style={{
        fontSize:14, color: T.white, border:'1px solid rgba(255,255,255,.3)', borderRadius:8, padding:'8px 14px',
      }}>Vendor Portal →</a>
    </div>
    <div style={{
      maxWidth:1200, margin:'24px 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={VENDOR_SIGNUP_URL} target="_blank" rel="noopener" style={{ color:'inherit', border:'none' }}>Vendor application</a>
      </div>
    </div>
    <style>{`
      .footer-link:hover { color: ${T.sky} !important; }
      .footer-portal:hover { border-color: ${T.sky} !important; color: ${T.sky} !important; }
    `}</style>
  </footer>
);

Object.assign(window, { Footer });