// Footer — placeholder while user provides nurseryledger.com style screenshot
function Footer({ onNotify }) {
  const { Icon } = window.RMS;
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  async function submit(e) {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubmitting(true);
    setError('');
    try {
      if (onNotify) await onNotify(email);
      setSent(true);
      setEmail('');
    } catch {
      setError('Could not join the list. Try hello@roastmysnack.com.');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <footer style={{
      background: 'var(--ink)',
      color: 'var(--paper)',
      borderTop: '2px solid var(--ink)',
      paddingTop: 64,
      paddingBottom: 32,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* halftone tint */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.05) 1.2px, transparent 1.4px)',
        backgroundSize: '12px 12px',
        pointerEvents: 'none',
      }}/>

      <div className="wrap" style={{ position: 'relative' }}>

        {/* CTA strip */}
        <div id="notify" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32,
          alignItems: 'center', marginBottom: 56,
        }} className="footer-cta">
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--flame)' }}>NOTIFY ME · APP STORE LAUNCH</div>
            <h3 className="title-xl" style={{ margin: '10px 0 0', color: 'var(--paper)' }}>
              DON'T MAKE<br/>HAWLEY WAIT.
            </h3>
          </div>
          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {!sent ? (
              <>
                <input
                  id="notify-email"
                  type="email" required
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  placeholder="you@snackgang.com"
                  style={{
                    fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600,
                    padding: '14px 16px',
                    border: '2px solid var(--paper)',
                    borderRadius: 12, background: 'transparent',
                    color: 'var(--paper)', outline: 'none',
                  }}
                />
                <button type="submit" className="btn flame" disabled={submitting}>
                  {Icon.flame(16)} {submitting ? 'SENDING...' : 'PUT ME ON THE LIST'}
                </button>
                {error && (
                  <div className="body-sm" style={{ color: 'var(--flame)', fontWeight: 700 }}>
                    {error}
                  </div>
                )}
              </>
            ) : (
              <div style={{
                background: 'var(--flame)', color: 'var(--ink)',
                padding: 16, borderRadius: 12, border: '2px solid var(--paper)',
                fontWeight: 700, display: 'flex', alignItems: 'center', gap: 10,
              }}>
                {Icon.check(16)} You're locked in. Hawley nodded.
              </div>
            )}
          </form>
        </div>

        {/* Real footer columns */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 28,
          paddingBottom: 32,
          borderBottom: '1.5px solid rgba(244,239,230,0.2)',
        }} className="footer-cols">

          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, overflow: 'hidden',
                border: '2px solid var(--paper)', background: '#fff',
              }}>
                <img src="images/ios_app_icon.png" alt="" style={{ width: 40, height: 40 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18 }}>ROAST MY SNACK</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--paper-2)' }}>roastmysnack.com</div>
              </div>
            </div>
            <p className="body-sm" style={{ color: 'var(--paper-2)', marginTop: 14, maxWidth: 320 }}>
              Snap a snack. Get roasted by Dr. Hawley. Leave with a better swap. Developed with input from Poppy Kids Pediatric Dentistry.
            </p>
          </div>

          {[
            { title: 'PRODUCT', items: [
              ['How it works', '#how'],
              ['Comic styles', '#styles'],
              ['For parents', '#science'],
              ['FAQ', '#faq'],
            ]},
            { title: 'COMPANY', items: [
              ['Privacy', '/privacy'],
              ['Terms', '/terms'],
              ['Support', '/support'],
              ['Press kit', 'mailto:press@roastmysnack.com'],
            ]},
            { title: 'BUILT WITH', items: [
              ['OpenAI', 'https://openai.com'],
              ['FastAPI', 'https://fastapi.tiangolo.com'],
              ['Poppy Kids', 'https://www.poppykidsdental.com'],
              ['SwiftUI', '#'],
            ]},
          ].map(col => (
            <div key={col.title}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--flame)', marginBottom: 14 }}>
                {col.title}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                {col.items.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} style={{
                      color: 'var(--paper)', textDecoration: 'none',
                      fontSize: 14, fontWeight: 500,
                      borderBottom: '1.5px solid transparent',
                      paddingBottom: 1,
                    }} onMouseEnter={e => e.currentTarget.style.borderBottomColor = 'var(--flame)'}
                       onMouseLeave={e => e.currentTarget.style.borderBottomColor = 'transparent'}>
                      {label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Disclaimer line */}
        <div style={{
          marginTop: 22,
          padding: '12px 16px',
          border: '1.5px dashed rgba(244,239,230,0.32)',
          borderRadius: 10,
          textAlign: 'center',
          color: 'var(--paper-2)',
          fontFamily: 'var(--font-mono)',
          fontSize: 11, letterSpacing: '0.14em',
          lineHeight: 1.5,
        }}>
          ROAST MY SNACK IS FOR ENTERTAINMENT ONLY. NOT DENTAL, MEDICAL, OR NUTRITIONAL ADVICE.<br/>
          ALWAYS CONSULT A LICENSED PROFESSIONAL FOR REAL HEALTH QUESTIONS.
        </div>

        {/* Bottom bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginTop: 24, flexWrap: 'wrap', gap: 12,
          color: 'var(--paper-2)',
        }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>
            © 2026 ROAST MY SNACK · BUILT WITH FLOSS, JOKES, AND ZERO SHAME.
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>
            v1.0 · iOS 17+ · TESTFLIGHT
          </div>
        </div>
      </div>

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

window.RMS.Footer = Footer;