const { useState } = React;

function Footer({ onNavigate }) {
  const [email, setEmail] = useState('');

  const col = (title, items) => (
    <div key={title}>
      <p style={{ fontWeight: 600, fontSize: '14px', marginBottom: '12px', color: '#fff' }}>{title}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {items.map(({ label, page }) => (
          <li key={label} style={{ padding: '6px 0' }}>
            <span onClick={() => page && onNavigate(page)} style={{
              fontSize: '13px', color: 'rgba(255,255,255,0.6)',
              cursor: page ? 'pointer' : 'default',
              textDecoration: 'none',
            }}>{label}</span>
          </li>
        ))}
      </ul>
    </div>
  );

  const columns = [
    { title: 'Services', items: [
      { label: 'Identity architecture', page: 'services' },
      { label: 'Content presence', page: 'services' },
      { label: 'Authority systems', page: 'services' },
      { label: 'Strategy call', page: 'contact' },
      { label: 'Work', page: 'work' },
    ]},
    { title: 'Company', items: [
      { label: 'About us', page: 'about' },
      { label: 'Contact', page: 'contact' },
      { label: 'Insights', page: null },
      { label: 'Blog', page: null },
      { label: 'Resources', page: null },
    ]},
    { title: 'Legal', items: [
      { label: 'Privacy policy' }, { label: 'Terms of service' },
      { label: 'Disclaimer' }, { label: 'Cookies' }, { label: 'Connect' },
    ]},
    { title: 'Social', items: [
      { label: 'Instagram' }, { label: 'LinkedIn' },
      { label: 'Email us' }, { label: 'Bangalore, India' },
    ]},
    { title: 'Our approach', items: [
      { label: 'Strategy first' }, { label: 'Brand architecture' },
      { label: 'Healthcare focus' }, { label: 'Authority first' },
    ]},
    { title: 'Authority strategy', items: [
      { label: 'For doctors' }, { label: 'For founders' },
      { label: 'Healthcare branding' }, { label: 'Premium positioning' },
    ]},
  ];

  return (
    <footer style={{ background: 'var(--color-neutral-darkest)', padding: '64px 5% 32px', color: '#fff' }}>
      <div style={{ maxWidth: '1280px', margin: '0 auto' }}>

        {/* Newsletter */}
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', justifyContent: 'space-between', gap: '24px', marginBottom: '48px' }}>
          <div>
            <p style={{ fontWeight: 600, fontSize: '16px', marginBottom: '6px' }}>Stay informed</p>
            <p style={{ fontSize: '13px', color: 'rgba(255,255,255,0.55)' }}>Insights on authority strategy for healthcare founders</p>
          </div>
          <div style={{ minWidth: '300px', maxWidth: '420px', flex: '1' }}>
            <form style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }} onSubmit={e => e.preventDefault()}>
              <input
                type="email" placeholder="Your email" value={email}
                onChange={e => setEmail(e.target.value)}
                style={{
                  flex: 1, padding: '9px 12px', border: '2px solid rgba(255,255,255,0.3)',
                  background: 'transparent', color: '#fff', fontFamily: 'var(--font-body)',
                  fontSize: '13px', borderRadius: 0, outline: 'none', minWidth: '160px',
                }}
              />
              <button type="submit" style={{
                padding: '9px 18px', border: '2px solid #fff', background: 'transparent',
                color: '#fff', fontSize: '13px', fontWeight: 500, fontFamily: 'var(--font-body)',
                cursor: 'pointer', borderRadius: 0, whiteSpace: 'nowrap',
              }}>Subscribe</button>
            </form>
            <p style={{ fontSize: '11px', color: 'rgba(255,255,255,0.35)', marginTop: '8px' }}>We respect your privacy. Unsubscribe anytime.</p>
          </div>
        </div>

        {/* Divider */}
        <div style={{ height: '2px', background: 'rgba(255,255,255,0.12)', marginBottom: '48px' }}></div>

        {/* Links grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '32px 24px',
          marginBottom: '48px',
        }} className="aso-footer-grid">
          {columns.map(c => col(c.title, c.items))}
        </div>

        {/* Divider */}
        <div style={{ height: '2px', background: 'rgba(255,255,255,0.12)', marginBottom: '24px' }}></div>

        {/* Bottom bar */}
        <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: '16px' }}>
          <a onClick={() => onNavigate('home')} style={{ cursor: 'pointer' }}>
            <img src="./assets/logo-aso-hq.png" alt="ASO HQ" style={{ height: '44px' }}
              onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='block'; }} />
            <span style={{ display: 'none', fontFamily: 'var(--font-heading)', fontSize: '18px', color: '#fff', fontWeight: 400 }}>ASO HQ</span>
          </a>
          <p style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)' }}>© 2025 ASO HQ. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });