// Footer.jsx
function Footer({ onNavigate }) {
  const links = [
    { group: 'Platform', items: ['Zenko Apps', 'For Brands', 'For Marketers', 'For Sports', 'For Platforms', 'How It Works', 'Causes', '$ZENKO'] },
    { group: 'Explore', items: ['Insights', 'Why Zenko?', 'About', 'Blog', 'Contact'] },
  ];

  const inputRef = React.useRef(null);
  const [subDone, setSubDone] = React.useState(false);
  const [subStatus, setSubStatus] = React.useState({ loading: false, error: '' });

  async function subscribe(event) {
    event.preventDefault();
    const email = inputRef.current?.value.trim() || '';
    if (!inputRef.current?.checkValidity()) {
      inputRef.current?.reportValidity();
      return;
    }
    setSubStatus({ loading: true, error: '' });
    try {
      const response = await fetch('/api/forms', {
        method: 'POST', headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ kind: 'newsletter', email, website: event.currentTarget.elements.website.value, page: window.location.pathname }),
      });
      const result = await response.json();
      if (!response.ok || !result.ok) throw new Error(result.error || 'Subscription failed.');
      setSubDone(true);
    } catch (error) {
      setSubStatus({ loading: false, error: error.message || 'Please try again.' });
    }
  }

  const footerStyle = {
    background: '#1A1410', borderTop: '4px solid #C94A1A',
    padding: '72px 80px 32px',
  };
  const innerStyle = { maxWidth: '1200px', margin: '0 auto' };
  const topStyle = { display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1.5fr', gap: '60px', marginBottom: '56px' };

  const colTitleStyle = {
    fontFamily: "'Syne','Lato',sans-serif", fontWeight: 600, fontSize: '11px',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'rgba(240,223,160,0.45)', marginBottom: '20px',
  };
  const linkStyle = {
    display: 'block', fontFamily: "'Syne','Lato',sans-serif", fontWeight: 400,
    fontSize: '14px', color: 'rgba(240,223,160,0.65)', marginBottom: '12px',
    cursor: 'pointer', textDecoration: 'none', transition: 'color 0.2s',
  };
  const bottomStyle = {
    borderTop: '1px solid rgba(240,223,160,0.1)', paddingTop: '24px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px',
  };
  const legalStyle = {
    fontFamily: "'Syne','Lato',sans-serif", fontWeight: 400, fontSize: '11px',
    letterSpacing: '0.05em', color: 'rgba(240,223,160,0.28)',
  };

  return (
    <footer className="site-footer" style={footerStyle}>
      <div style={innerStyle}>
        <div className="site-footer__grid" style={topStyle}>
          {/* Brand col */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
              <Rune size={26} color="rgba(201,74,26,0.75)" spin />
              <img src="assets/Zenko_Inline_White.png" alt="Zenko" style={{ height: '20px', objectFit: 'contain' }} />
            </div>
            <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 300, fontSize: '12px', color: 'rgba(240,223,160,0.4)', marginBottom: '14px' }}>ゼンコ プロトコル</div>
            <p style={{ fontFamily: "'Syne','Lato',sans-serif", fontWeight: 400, fontSize: '13px', color: 'rgba(240,223,160,0.45)', lineHeight: 1.7, maxWidth: '260px' }}>
              The engagement economy, built for good.
            </p>
            <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
              {[{ label: 'X', href: 'https://x.com/zenkoprotocol' }, { label: 'tg', href: 'https://t.me/zenkoprotocol' }].map(s => (
                <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label === 'X' ? 'Zenko Protocol on X' : 'Zenko Protocol on Telegram'} style={{
                  width: '32px', height: '32px', border: '1px solid rgba(240,223,160,0.2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '11px',
                  color: 'rgba(240,223,160,0.5)', cursor: 'pointer', textDecoration: 'none',
                  transition: 'border-color 0.2s, color 0.2s',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = '#C94A1A'; e.currentTarget.style.color = '#C94A1A'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(240,223,160,0.2)'; e.currentTarget.style.color = 'rgba(240,223,160,0.5)'; }}
                >{s.label}</a>
              ))}
            </div>
          </div>

          {/* Nav cols */}
          {links.map(col => (
            <div key={col.group}>
              <div style={colTitleStyle}>{col.group}</div>
              {col.items.map(item => (
                <span key={item} style={linkStyle} onClick={() => onNavigate(item)}
                  onMouseEnter={e => e.currentTarget.style.color = '#C94A1A'}
                  onMouseLeave={e => e.currentTarget.style.color = 'rgba(240,223,160,0.65)'}
                >{item}</span>
              ))}
            </div>
          ))}

          {/* Newsletter */}
          <div>
            <div style={colTitleStyle}>Follow Our Impact</div>
            <p style={{ fontFamily: "'Syne','Lato',sans-serif", fontWeight: 400, fontSize: '13px', color: 'rgba(240,223,160,0.45)', lineHeight: 1.7, marginBottom: '20px' }}>
              We'll send you the numbers that matter.
            </p>
            {subDone ? (
              <div style={{ color: '#C94A1A', fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '13px' }}>✓ You're in.</div>
            ) : (
              <form className="site-footer__signup" onSubmit={subscribe} style={{ display: 'flex', flexWrap: 'wrap' }}>
                <input ref={inputRef} type="email" name="email" required autoComplete="email" aria-label="Email address" placeholder="your@email.com" style={{
                  flex: 1, background: 'rgba(240,223,160,0.07)', border: '1px solid rgba(240,223,160,0.15)',
                  borderRight: 'none', padding: '10px 14px', color: '#F0DFA0',
                  fontFamily: "'Syne',sans-serif", fontSize: '13px', outline: 'none', borderRadius: 0,
                }} />
                <input name="website" tabIndex="-1" autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px' }} />
                <button type="submit" disabled={subStatus.loading} style={{
                  background: '#C94A1A', color: '#fff', border: 'none', padding: '10px 16px',
                  fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '12px',
                  letterSpacing: '0.06em', textTransform: 'uppercase', cursor: 'pointer', borderRadius: 0,
                }}>{subStatus.loading ? 'Sending…' : 'Sign up'}</button>
                {subStatus.error && <div role="alert" style={{ flexBasis: '100%', color: '#F0DFA0', fontSize: '12px', marginTop: '8px' }}>{subStatus.error}</div>}
              </form>
            )}
          </div>
        </div>

        {/* Bottom bar */}
        <div className="site-footer__bottom" style={bottomStyle}>
          <span style={legalStyle}>Cause Engine · Zenko · Script · Pavia · Goodseed — Accelerated by AI. Built by humans.</span>
          <span style={legalStyle}>
            <a href="/privacy/" onClick={event => { event.preventDefault(); onNavigate('Privacy'); }} style={{ ...legalStyle, cursor: 'pointer', marginRight: '16px', textDecoration: 'none' }}>Privacy Policy</a>
            <a href="/zenko-move-terms/" onClick={event => { event.preventDefault(); onNavigate('Zenko Move Terms'); }} style={{ ...legalStyle, cursor: 'pointer', marginRight: '16px', textDecoration: 'none' }}>Zenko Move Terms</a>
            © Zenko Protocol 2026
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });