/* 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: '/about', label: 'About' },
  { to: '/events', label: 'Events' },
  { to: '/venues', label: 'Venues' },
  { to: '/gallery', label: 'Gallery' },
  { 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}>Get Tickets</button>
      </div>
    </header>
  );
}

function Footer({ onSubscribe }) {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSent(true);
    onSubscribe && onSubscribe(email);
    setTimeout(() => setSent(false), 4000);
    setEmail('');
  };

  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
              />
              <button type="submit" className="btn btn-primary">
                {sent ? '✓ Subscribed' : '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="#/about">About Us</a></li>
              <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="#/privacy">Privacy Policy</a></li>
            </ul>
          </div>
          <div>
            <h4 className="footer-title">Contact Us</h4>
            <ul>
              <li>(352) 414-2857</li>
              <li>info@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">
          © 2026 WAND Presents. All Rights Reserved.
        </div>
      </div>
    </footer>
  );
}

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