// Footer
const Footer = () => (
  <footer style={{background:'#0A1424', padding:'56px 0 32px', color:'#DDE2EA'}}>
    <div className="container">
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:48}}
            className="footer-grid">
        <div>
          <div style={{display:'flex', alignItems:'center', gap:12}}>
            <img src="assets/ai-literacy-lab-logo.png"
                 style={{height:44, width:44, borderRadius:8, objectFit:'cover'}}/>
            <div>
              <div style={{fontFamily:'"Space Grotesk"', fontSize:16, fontWeight:700,
                            color:'#FFFFFF'}}>
                The Practitioner Cohort
              </div>
              <div style={{fontSize:11, fontWeight:600, color:'#A8C8E6',
                            textTransform:'uppercase', letterSpacing:1}}>
                Gnosis Academy · AI Literacy for Educators
              </div>
            </div>
          </div>
          <p style={{fontSize:13, color:'#A8C8E6', marginTop:18, maxWidth:340,
                      lineHeight:1.55}}>
            A 12-week structured cohort for educators ready to make AI part of how
            they actually teach.
          </p>
        </div>

        {[
          ['The Cohort', [
            ['Curriculum',   '#curriculum'],
            ['Who fits',     '#who-fits'],
            ['Pricing',      '#enrolment'],
            ['Apply',        'https://form.jotform.com/261244735080049'],
          ]],
          ['Bespoke', [
            ['1:1 consultation', 'https://calendly.com/cpark-gnosis-learning/book-a-consultation'],
            ['Email Christi',    'mailto:cpark@gnosis-learning.com'],
          ]],
        ].map(([h, items]) => (
          <div key={h}>
            <div style={{fontSize:11, fontWeight:700, color:'#E8B225',
                          textTransform:'uppercase', letterSpacing:1.4, marginBottom:18}}>
              {h}
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              {items.map(([label, href]) => (
                <a key={label} href={href}
                   target={href.startsWith('http') ? '_blank' : undefined}
                   rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
                   style={{fontSize:13, color:'#DDE2EA', transition:'color 160ms'}}
                   onMouseEnter={e=>{e.currentTarget.style.color='#FFFFFF';}}
                   onMouseLeave={e=>{e.currentTarget.style.color='#DDE2EA';}}>
                  {label}
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{marginTop:56, paddingTop:24, borderTop:'1px solid #142236',
                    display:'flex', justifyContent:'space-between', flexWrap:'wrap',
                    gap:16, fontSize:11, color:'#6B7E92', textTransform:'uppercase',
                    letterSpacing:0.8}}>
        <span>© 2026 Gnosis Academy · The Practitioner Cohort</span>
        <span style={{display:'inline-flex', gap:8}}>
          <a href="#" style={{color:'#6B7E92'}}>Terms</a>
          <span aria-hidden="true">·</span>
          <a href="privacy.html"
             style={{color:'#DDE2EA', transition:'color 160ms'}}
             onMouseEnter={e => e.currentTarget.style.color='#FFFFFF'}
             onMouseLeave={e => e.currentTarget.style.color='#DDE2EA'}>
            Privacy
          </a>
          <span aria-hidden="true">·</span>
          <a href="#" style={{color:'#6B7E92'}}>Accessibility</a>
        </span>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  </footer>
);

window.Footer = Footer;