// Nav.jsx — The Club Tennis
const Nav = ({ currentPage, onNavigate }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'coaches', label: 'COACHES' },
    { id: 'programs', label: 'PROGRAMS' },
    { id: 'pricing', label: 'PRICING' },
    { id: 'success', label: 'SUCCESS' },
    { id: 'spain', label: 'SPAIN CAMP' },
    { id: 'shop', label: 'SHOP', external: 'https://theclubtennishq.myshopify.com' },
    { id: 'contact', label: 'CONTACT' },
    { id: 'dashboard', label: 'DASHBOARD' },
  ];

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
    height: 72,
    background: scrolled ? 'rgba(10,10,10,0.92)' : 'rgba(10,10,10,0.85)',
    backdropFilter: 'blur(20px)',
    borderBottom: '1px solid #2A2A2A',
    display: 'flex', alignItems: 'center',
    padding: '0 48px',
    justifyContent: 'space-between',
    transition: 'background 200ms',
  };

  const logoStyle = {
    fontFamily: "'Outfit', sans-serif",
    fontWeight: 800,
    fontSize: 16,
    letterSpacing: '0.05em',
    color: '#F5F5F5',
    cursor: 'pointer',
    textDecoration: 'none',
  };

  const linkStyle = (active) => ({
    fontFamily: "'Space Mono', monospace",
    fontSize: 11,
    fontWeight: 400,
    letterSpacing: '1.5px',
    textTransform: 'uppercase',
    color: active ? '#F5F5F5' : '#AAAAAA',
    cursor: 'pointer',
    textDecoration: 'none',
    transition: 'color 120ms',
    background: 'none',
    border: 'none',
    padding: 0,
  });

  const joinBtnStyle = {
    fontFamily: "'Outfit', sans-serif",
    fontWeight: 700,
    fontSize: 13,
    letterSpacing: '0.5px',
    textTransform: 'uppercase',
    background: '#FF2D8A',
    color: '#F5F5F5',
    border: 'none',
    padding: '10px 20px',
    borderRadius: 0,
    cursor: 'pointer',
    transition: 'transform 120ms, background 120ms',
  };

  const drawerLinkStyle = {
    fontFamily: "'Space Mono', monospace",
    fontSize: 13,
    fontWeight: 400,
    letterSpacing: '1.5px',
    textTransform: 'uppercase',
    color: '#AAAAAA',
    cursor: 'pointer',
    textDecoration: 'none',
    background: 'none',
    border: 'none',
    padding: '14px 0',
    textAlign: 'left',
    borderBottom: '1px solid #2A2A2A',
    display: 'block',
    width: '100%',
    transition: 'color 120ms',
  };

  const closeDrawer = () => setMobileOpen(false);

  return (
    <>
      <nav style={navStyle}>
        <div onClick={() => onNavigate('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}>
          <img src="images/logo/club-tennis-logo.png" alt="The Club Tennis logo"
               style={{ height: 36, width: 'auto', display: 'block', filter: 'invert(1)', background: '#0A0A0A' }} />
        </div>

        {/* Desktop nav links */}
        <div className="nav-desktop-links">
          {links.map(l => (
            l.external
              ? <a key={l.id} href={l.external} target="_blank" rel="noopener noreferrer"
                  style={linkStyle(false)}
                  onMouseEnter={e => e.target.style.color = '#F5F5F5'}
                  onMouseLeave={e => e.target.style.color = '#AAAAAA'}>
                  {l.label}
                </a>
              : <button key={l.id}
                  style={linkStyle(currentPage === l.id)}
                  onClick={() => onNavigate(l.id)}
                  onMouseEnter={e => e.target.style.color = '#F5F5F5'}
                  onMouseLeave={e => e.target.style.color = currentPage === l.id ? '#F5F5F5' : '#AAAAAA'}>
                  {l.label}
                </button>
          ))}
          <button style={joinBtnStyle}
            onClick={() => onNavigate('pricing')}
            onMouseEnter={e => { e.target.style.background = '#ff5aa8'; e.target.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={e => { e.target.style.background = '#FF2D8A'; e.target.style.transform = 'translateY(0)'; }}>
            JOIN NOW
          </button>
        </div>

        {/* Mobile hamburger */}
        <button className="nav-hamburger" onClick={() => setMobileOpen(true)} aria-label="Open menu">
          ☰
        </button>
      </nav>

      {/* Backdrop */}
      <div className={`nav-backdrop ${mobileOpen ? 'open' : ''}`} onClick={closeDrawer} />

      {/* Slide-in drawer */}
      <div className={`nav-drawer ${mobileOpen ? 'open' : ''}`}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32 }}>
          <span style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 14, letterSpacing: '0.05em', color: '#F5F5F5' }}>
            THE <span style={{ color: '#FF2D8A' }}>CLUB</span> TENNIS
          </span>
          <button onClick={closeDrawer} style={{ background: 'none', border: 'none', color: '#AAAAAA', fontSize: 22, cursor: 'pointer', padding: 4, lineHeight: 1 }}>✕</button>
        </div>

        <div style={{ flex: 1 }}>
          {links.map(l => (
            l.external
              ? <a key={l.id} href={l.external} target="_blank" rel="noopener noreferrer" style={drawerLinkStyle}>{l.label}</a>
              : <button key={l.id} style={{ ...drawerLinkStyle, color: currentPage === l.id ? '#F5F5F5' : '#AAAAAA' }}
                  onClick={() => { onNavigate(l.id); closeDrawer(); }}>
                  {l.label}
                </button>
          ))}
        </div>

        <button onClick={() => { onNavigate('pricing'); closeDrawer(); }} style={{
          fontFamily: "'Outfit',sans-serif", fontWeight: 700, fontSize: 14, letterSpacing: '0.5px',
          textTransform: 'uppercase', background: '#FF2D8A', color: '#F5F5F5',
          border: 'none', padding: '14px', cursor: 'pointer', width: '100%', marginTop: 24,
        }}>
          JOIN NOW
        </button>
      </div>
    </>
  );
};

// Footer component
const Footer = ({ onNavigate }) => {
  const [email, setEmail] = React.useState('');

  const col = {
    fontFamily: "'Outfit', sans-serif",
  };
  const heading = {
    fontFamily: "'Space Mono', monospace",
    fontSize: 11,
    letterSpacing: '2px',
    textTransform: 'uppercase',
    color: '#39FF14',
    marginBottom: 20,
  };
  const link = {
    display: 'block',
    fontFamily: "'Outfit', sans-serif",
    fontSize: 14,
    color: '#AAAAAA',
    textDecoration: 'none',
    marginBottom: 10,
    cursor: 'pointer',
    background: 'none',
    border: 'none',
    padding: 0,
    textAlign: 'left',
    transition: 'color 120ms',
  };

  return (
    <footer style={{ background: '#111111', borderTop: '1px solid #2A2A2A', padding: '64px 48px 0' }}>
      <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1.5fr', gap: 48, marginBottom: 48 }}>
        {/* About */}
        <div style={col}>
          <div style={{ fontFamily: "'Outfit',sans-serif", fontWeight: 800, fontSize: 15, letterSpacing: '0.05em', color: '#F5F5F5', marginBottom: 16 }}>
            THE <span style={{ color: '#FF2D8A' }}>CLUB</span> TENNIS
          </div>
          <p style={{ fontSize: 14, color: '#888888', lineHeight: 1.7, maxWidth: 260 }}>
            A competitive junior tennis academy in Los Angeles. Real coaches. Real competition. Real results.
          </p>
        </div>
        {/* Quick Links */}
        <div className="footer-links-col" style={col}>
          <div style={heading}>Quick Links</div>
          {[['home','Home'],['coaches','Coaches'],['programs','Programs'],['pricing','Pricing'],['success','Success']].map(([id,label]) => (
            <button key={id} style={link} onClick={() => onNavigate(id)}
              onMouseEnter={e => e.target.style.color = '#F5F5F5'}
              onMouseLeave={e => e.target.style.color = '#AAAAAA'}>
              {label}
            </button>
          ))}
        </div>
        {/* Programs */}
        <div className="footer-links-col" style={col}>
          <div style={heading}>Programs</div>
          {[['programs','Regular Group'],['programs','L5 USTA Group'],['programs','Tournament Team'],['spain','Spain Summer Camp']].map(([id,label],i) => (
            <button key={i} style={link} onClick={() => onNavigate(id)}
              onMouseEnter={e => e.target.style.color = '#F5F5F5'}
              onMouseLeave={e => e.target.style.color = '#AAAAAA'}>
              {label}
            </button>
          ))}
        </div>
        {/* Contact */}
        <div style={col}>
          <div style={heading}>Contact</div>
          <p style={{ fontSize: 14, color: '#AAAAAA', lineHeight: 1.7 }}>
            <a href="mailto:rhardt@hw.com" style={{ color: '#AAAAAA', textDecoration: 'none' }}>rhardt@hw.com</a><br />
            LA Valley College<br />
            Los Angeles, CA<br />
            8 Courts
          </p>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="footer-bottom" style={{ borderTop: '1px solid #2A2A2A', padding: '24px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
        <span style={{ fontFamily: "'Space Mono',monospace", fontSize: 11, color: '#888888', letterSpacing: '1px' }}>
          © 2026 THE CLUB TENNIS. ALL RIGHTS RESERVED.
        </span>
        {/* Newsletter */}
        <div className="footer-newsletter" style={{ display: 'flex', gap: 0 }}>
          <input
            value={email}
            onChange={e => setEmail(e.target.value)}
            placeholder="Your email"
            style={{
              fontFamily: "'Outfit',sans-serif", fontSize: 13, padding: '10px 16px',
              background: '#1A1A1A', border: '1px solid #2A2A2A', borderRight: 'none',
              color: '#F5F5F5', outline: 'none', width: 200,
            }}
          />
          <button style={{
            fontFamily: "'Space Mono',monospace", fontSize: 11, letterSpacing: '1.5px',
            textTransform: 'uppercase', padding: '10px 18px',
            background: 'transparent', border: '1px solid #39FF14', color: '#39FF14',
            cursor: 'pointer', transition: 'background 120ms',
          }}
            onMouseEnter={e => { e.target.style.background = 'rgba(57,255,20,0.08)'; }}
            onMouseLeave={e => { e.target.style.background = 'transparent'; }}>
            Subscribe
          </button>
        </div>
        {/* Instagram */}
        <a href="https://instagram.com/theclubtennis" target="_blank" rel="noopener noreferrer"
          style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#AAAAAA', textDecoration: 'none', fontSize: 13 }}
          onMouseEnter={e => e.currentTarget.style.color = '#F5F5F5'}
          onMouseLeave={e => e.currentTarget.style.color = '#AAAAAA'}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
          </svg>
          @theclubtennis
        </a>
      </div>
    </footer>
  );
};

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