/* Shell: Nav, Footer, simple hash-based router */
const { useState, useEffect } = React;
const { WandLogo, Icon } = window;

function useHashRoute() {
  const get = () => (window.location.hash || '#/').replace(/^#/, '') || '/';
  const [route, setRoute] = useState(get());
  useEffect(() => {
    const h = () => { setRoute(get()); window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' }); };
    window.addEventListener('hashchange', h);
    return () => window.removeEventListener('hashchange', h);
  }, []);
  return [route, (to) => { window.location.hash = to; }];
}

const NAV_ITEMS = [
  { to: '/', label: 'Home' },
  { to: '/venues', label: 'Venues' },
  { to: '/faq', label: 'FAQ' },
  { to: '/contact', label: 'Contact' },
];

function Nav({ route, onTickets }) {
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="#/" aria-label="WAND Presents home">
          <WandLogo />
        </a>
        <nav className="nav-links" aria-label="Primary">
          {NAV_ITEMS.map((item) => (
            <a
              key={item.to}
              href={`#${item.to}`}
              className={`nav-link ${route === item.to ? 'active' : ''}`}
            >
              {item.label}
            </a>
          ))}
        </nav>
        <button className="btn btn-primary" onClick={onTickets}>See Shows</button>
      </div>
    </header>
  );
}

function Footer() {
  const [email, setEmail] = useState('');
    const [status, setStatus] = useState('idle');
    const submit = async (e) => {
          e.preventDefault();
          if (!email.includes('@')) return;
          setStatus('sending');
          try {
                  const r = await fetch('/api/subscribe', {
                            method: 'POST',
                            headers: { 'content-type': 'application/json' },
                            body: JSON.stringify({ email, source: 'footer' }),
                  });
                  const d = await r.json().catch(() => ({}));
                  if (r.ok && d.ok) { setStatus('ok'); setEmail(''); setTimeout(() => setStatus('idle'), 4000); }
                  else { setStatus('idle'); }
          } catch (e2) { setStatus('idle'); }
    };

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <h4 className="footer-title">Stay In The Know</h4>
            <p style={{ marginTop: 0, marginBottom: 16 }}>Be the first to know about new shows and special offers.</p>
            <form className="newsletter" onSubmit={submit}>
              <input
                type="email"
                placeholder="Enter your email address"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                aria-label="Email address"
                required disabled={status === 'sending'}
              />
              <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
                {status === 'ok' ? '✓ Subscribed' : status === 'sending' ? 'Submitting…' : 'Subscribe'}
              </button>
            </form>
          </div>
          <div className="footer-center">
            <WandLogo height={58} />
            <div className="footer-tag" style={{ marginTop: 14 }}>
              Amazing Entertainment.<br />Unforgettable Moments.
            </div>
            <div className="socials">
              <a href="#" aria-label="Facebook" className="social"><Icon name="facebook" size={18} /></a>
              <a href="#" aria-label="Instagram" className="social"><Icon name="instagram" size={18} /></a>
              <a href="#" aria-label="YouTube" className="social"><Icon name="youtube" size={18} /></a>
              <a href="#" aria-label="Email" className="social"><Icon name="mail" size={18} /></a>
            </div>
          </div>
          <div>
            <h4 className="footer-title">Quick Links</h4>
            <ul>
              <li><a href="#/events">Events</a></li>
              <li><a href="#/venues">Venues</a></li>
              <li><a href="#/faq">FAQ</a></li>
              <li><a href="#/contact">Contact Us</a></li>
              <li><a href="#/newsletter">Newsletter</a></li>
              <li><a href="#/privacy">Privacy Policy</a></li>
            </ul>
          </div>
          <div>
            <h4 className="footer-title">Contact Us</h4>
            <ul>
              <li>(352) 753-3229</li>
              <li>admin@wandpresents.com</li>
              <li style={{ marginTop: 14 }}>
                Proudly bringing amazing entertainment to <span style={{ color: 'var(--accent)' }}>The Villages, Florida.</span>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 WAND Presents, a division of Wand Enterprises. All Rights Reserved.</div>
          <div style={{ maxWidth: 860, margin: '14px auto 0', fontSize: 12, lineHeight: 1.65, opacity: 0.62 }}>
            WAND Presents is not affiliated with, endorsed by, or sponsored by Meta (Facebook &amp; Instagram),
            Google, TikTok, or any social media platform. All product names, logos, and brands are the property
            of their respective owners and are used for identification purposes only. Tickets are sold and
            fulfilled through The Villages Entertainment. Guest reviews reflect individual experiences.
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, useHashRoute, NAV_ITEMS });