// Footer.jsx
const { useState: useStateFooter } = React;

const API = 'http://localhost:3001';

function Footer() {
  const [subStatus, setSubStatus] = useStateFooter('idle'); // idle | loading | done | error

  async function handleSubscribe(e) {
    e.preventDefault();
    const email = e.target.elements.email.value.trim();
    if (!email) return;

    setSubStatus('loading');
    try {
      const res = await fetch(`${API}/newsletter`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      setSubStatus(res.ok ? 'done' : 'error');
    } catch {
      setSubStatus('error');
    }
  }

  return (
    <footer className="al-footer">
      <div className="al-container al-footer-grid">
        <div className="al-footer-brand">
          <div className="al-brand">
            <img src="assets/logomark-white.png" alt="" width="32" height="32"/>
            <span className="al-wordmark on-dark">AeroLabs</span>
          </div>
          <p className="al-footer-tag">Aviation &amp; Aerospace Engineering Academy<br/>Austin, Texas</p>
        </div>
        <div>
          <div className="al-footer-h">Program</div>
          <a href="#program">What we offer</a>
          <a href="#schedule">Schedule</a>
          <a href="#outcomes">Outcomes</a>
          <a href="#faq">FAQ</a>
        </div>
        <div>
          <div className="al-footer-h">About</div>
          <a href="#team">Team</a>
          <a href="mailto:aerolabsgeorgetown@gmail.com">Contact</a>
          <a href="#">Press</a>
        </div>
        <div className="al-footer-news">
          <div className="al-footer-h">Stay in the loop</div>
          <p className="al-footer-tag">Cohort drops, guest speakers, and open houses. No spam.</p>
          {subStatus === 'done' ? (
            <p style={{color:'#93C5FD',fontFamily:'var(--font-mono)',fontSize:13,marginTop:16}}>
              You're subscribed.
            </p>
          ) : (
            <form className="al-news-form" onSubmit={handleSubscribe}>
              <input name="email" type="email" placeholder="you@email.com" required />
              <button type="submit" disabled={subStatus === 'loading'}>
                {subStatus === 'loading' ? '…' : 'Subscribe'}
              </button>
            </form>
          )}
          {subStatus === 'error' && (
            <p style={{color:'#FCA5A5',fontSize:13,marginTop:8}}>
              Something went wrong. Try again.
            </p>
          )}
          <div className="al-socials">
            <a aria-label="Instagram" href="#"><i data-lucide="camera"/></a>
            <a aria-label="YouTube" href="#"><i data-lucide="play"/></a>
            <a aria-label="LinkedIn" href="#"><i data-lucide="briefcase"/></a>
            <a aria-label="Email" href="mailto:aerolabsgeorgetown@gmail.com"><i data-lucide="mail"/></a>
          </div>
        </div>
      </div>
      <div className="al-footer-bar">
        <span>© 2026 AeroLabs. Student-led, community-supported.</span>
        <span>aerolabsgeorgetown@gmail.com</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;