// Footer.jsx — Tiber Course footer
const Footer = ({ onNav }) => {
  const [logoFailed, setLogoFailed] = React.useState(false);

  return (
    <footer style={{ background: C.ink, padding: 'clamp(48px, 8vw, 80px) clamp(20px, 5vw, 40px) 40px', borderTop: '1px solid rgba(237,232,223,0.06)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 64, gap: 40, flexWrap: 'wrap' }}>

          <div style={{ maxWidth: 280 }}>
            {!logoFailed ? (
              <img
                src="assets/logo-light.png"
                alt="Tiber Course"
                onError={() => setLogoFailed(true)}
                style={{ height: 88, width: 'auto', display: 'block', marginBottom: 22, opacity: 0.95 }}
              />
            ) : (
              <div style={{
                fontFamily: F.display, fontStyle: 'italic',
                fontSize: 26, color: C.textInverse, marginBottom: 22, letterSpacing: '0.5px',
              }}>Tiber Course</div>
            )}
            <p style={{ fontFamily: F.body, fontSize: 14, lineHeight: 1.70, color: 'rgba(237,232,223,0.62)', marginBottom: 20 }}>
              Short-form compliance training for UK hospitality and SME teams, alongside a dyslexia programme for school, university and the workplace.
            </p>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 500, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(237,232,223,0.40)' }}>
              Dopara Group Ltd
            </div>
          </div>

          <div style={{ display: 'flex', gap: 'clamp(32px, 6vw, 64px)', flexWrap: 'wrap' }}>
            {[
              { heading: 'Food industry', items: [
                { label: 'Fire Safety Awareness', p: 'courses#food' },
                { label: 'Food Safety Level 1', p: 'courses#food' },
                { label: 'Food Safety Level 2', p: 'courses#food' },
                { label: 'Food Allergy Awareness', p: 'courses#food' },
                { label: 'First Aid Awareness', p: 'courses#food' },
              ]},
              { heading: 'Dyslexia programme', items: [
                { label: 'Navigating School with Dyslexia', p: 'courses#dyslexia' },
                { label: 'Navigating University with Dyslexia', p: 'courses#dyslexia' },
                { label: 'Navigating the Workplace with Dyslexia', p: 'courses#dyslexia' },
              ]},
              { heading: 'Platform', items: [
                { label: 'How it works', p: 'how-it-works' },
                { label: 'Pricing', p: 'pricing' },
                { label: 'Lockdubh', p: 'lockdubh' },
                { label: 'Contact', p: 'contact' },
              ]},
              { heading: 'Legal', items: [
                { label: 'Privacy Policy', p: 'privacy' },
                { label: 'Terms of Use', p: 'terms' },
              ]},
            ].map(col => (
              <div key={col.heading}>
                <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '2.2px', textTransform: 'uppercase', color: C.brass, marginBottom: 18 }}>{col.heading}</div>
                {col.items.map(({ label, p }) => (
                  <FooterLink key={label} label={label} onClick={() => onNav(p)} />
                ))}
              </div>
            ))}
          </div>
        </div>

        <div style={{ borderTop: '1px solid rgba(237,232,223,0.10)', paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <div style={{ fontFamily: F.body, fontSize: 12, color: 'rgba(237,232,223,0.45)' }}>
            © 2026 Tiber Course · Dopara Group Ltd · tibercourse.com
          </div>
          <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 500, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(237,232,223,0.40)' }}>
            UK Legislation Aligned
          </div>
        </div>
      </div>
    </footer>
  );
};

const FooterLink = ({ label, onClick }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div style={{ marginBottom: 10 }}>
      <button onClick={onClick}
        onMouseEnter={() => setHov(true)}
        onMouseLeave={() => setHov(false)}
        style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          fontFamily: F.body, fontSize: 13.5,
          color: hov ? 'rgba(237,232,223,0.95)' : 'rgba(237,232,223,0.62)',
          transition: 'color 0.2s',
        }}>{label}</button>
    </div>
  );
};

Object.assign(window, { Footer, FooterLink });