/* global React, Logo, Icon, MLN */
const FOOT_NAV = [
  { id: 'about', label: 'מי אני' }, { id: 'lectures', label: 'הרצאות' },
  { id: 'store', label: 'חנות' }, { id: 'gallery', label: 'גלריה' },
  { id: 'testimonials', label: 'המלצות' }, { id: 'faq', label: 'שאלות ותשובות' },
  { id: 'contact', label: 'יצירת קשר' },
];

const Footer = ({ onNav }) => (
  <footer style={{ background: 'var(--red-900)', color: 'var(--text-on-red-soft)', padding: '64px 28px 40px' }}>
    <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 32, flexWrap: 'wrap', paddingBottom: 36, borderBottom: '1px solid var(--divider-on-red)' }}>
        <div style={{ maxWidth: 360 }}>
          <Logo dark size={34} onClick={() => onNav('top')} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7, color: 'var(--text-on-red-soft)', margin: '18px 0 0' }}>
            מהמקום הכי שבור — צמחתי. ואני כאן כדי ללוות גם אתכם בדרך.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            <a href="https://www.instagram.com/_milim_mehalev" target="_blank" rel="noopener noreferrer" title="אינסטגרם" style={footSocial}><Icon name="instagram" size={19} /></a>
            <a href="https://www.facebook.com/wdlyhmyr.2025?locale=he_IL" target="_blank" rel="noopener noreferrer" title="פייסבוק — אודליה מאיר" style={footSocial}><Icon name="facebook" size={19} /></a>
            <a href={MLN.gmailTo('milim.lanetzah@gmail.com')} target="_blank" rel="noopener noreferrer" title="מייל" style={footSocial}><Icon name="mail" size={19} /></a>
          </div>
        </div>
        <nav style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 40px' }}>
          {FOOT_NAV.map(n => (
            <button key={n.id} onClick={() => onNav(n.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', textAlign: 'right', padding: 0, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, color: 'var(--text-on-red-soft)', transition: 'color 200ms' }}
              onMouseEnter={e => e.currentTarget.style.color = '#FFF6F2'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-on-red-soft)'}>{n.label}</button>
          ))}
        </nav>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap', paddingTop: 26, fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'rgba(241,199,204,0.6)' }}>
        <span>© {new Date().getFullYear()} אודליה מאיר · מילים לנצח. כל הזכויות שמורות.</span>
        <span>נבנה על ידי אלעאי מאיר פיתוח אתרים</span>
      </div>
    </div>
  </footer>
);
const footSocial = { width: 42, height: 42, borderRadius: '50%', background: 'rgba(255,246,242,0.08)', border: '1px solid var(--divider-on-red)', color: '#FFF6F2', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', transition: 'all 220ms var(--ease-soft)' };
window.Footer = Footer;