const { useState, useEffect } = React;

function useOpenNow() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(t);
  }, []);
  // Always use Brisbane time (AEST UTC+10, no DST) via formatToParts – avoids
  // locale-string parsing which is not reliably parseable across all environments.
  const parts = new Intl.DateTimeFormat('en-AU', {
    timeZone: 'Australia/Brisbane',
    hour: 'numeric', minute: 'numeric',
    weekday: 'short', hour12: false,
  }).formatToParts(now);
  const get = (t) => parts.find(p => p.type === t)?.value ?? '';
  const weekdays = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  const day = weekdays.indexOf(get('weekday')); // 0=Sun; -1 if locale parts unavailable
  const mins = parseInt(get('hour'), 10) * 60 + parseInt(get('minute'), 10);
  // Mon-Fri 7:00-12:00; Sat/Sun closed; fail-safe closed when day is unknown
  let open = false;
  if (day >= 1 && day <= 5 && !isNaN(mins)) open = mins >= 7 * 60 && mins < 12 * 60;
  return { open, now };
}

function Nav() {
  const { open } = useOpenNow();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 12);
    h();
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: '#D8C098',
      borderBottom: scrolled ? '1px solid #2B2418' : '1px solid transparent',
      transition: 'border-color 200ms ease-out, box-shadow 200ms ease-out',
      boxShadow: scrolled ? '0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(43,36,24,0.08)' : 'none',
    }}>
      <div className="m-nav-wrap" style={{
        maxWidth: 1280, margin: '0 auto',
        padding: '16px 40px',
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center',
        gap: 24,
      }}>
        <div className="m-hide" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px',
            background: open ? '#80B0B0' : '#2B2418',
            color: '#fff',
            fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
            letterSpacing: '0.2em', textTransform: 'uppercase',
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999, background: '#fff',
              animation: open ? 'pulse 2s infinite' : 'none',
            }} />
            {open ? 'Open now' : 'Closed'}
          </span>
          <span style={{
            fontFamily: 'Inter', fontSize: 11, color: '#2A1A04',
            letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            Mon — Fri · 7 — 12
          </span>
        </div>

        <a href="#top" style={{
          textDecoration: 'none',
          display: 'flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1,
        }}>
          <span style={{ fontFamily: "'Yellowtail', cursive", fontSize: 36, color: '#000' }}>la pola</span>
          <span style={{
            fontFamily: 'Inter', fontSize: 9, fontWeight: 600,
            letterSpacing: '0.38em', textTransform: 'uppercase',
            color: '#2A1A04', marginTop: 2,
          }}>
            cafe · ashgrove · est. 2023
          </span>
        </a>

        <ul className="m-nav-links" style={{
          display: 'flex', gap: 24, listStyle: 'none', margin: 0, padding: 0,
          alignItems: 'center', justifyContent: 'flex-end',
        }}>
          {[['Menu', '#menu'], ['Story', '#about'], ['Visit', '#visit']].map(([l, h]) => (
            <li key={l}>
              <a href={h} style={{
                fontFamily: 'Inter', fontSize: 12, fontWeight: 600,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                color: '#000', textDecoration: 'none',
              }}>{l}</a>
            </li>
          ))}
          <li>
            <a href="https://www.doordash.com/store/la-pola-cafe-ashgrove-29850449/38137782/" target="_blank" rel="noopener" style={{
              fontFamily: 'Inter', fontSize: 12, fontWeight: 700,
              letterSpacing: '0.16em', textTransform: 'uppercase',
              background: '#000', color: '#fff', padding: '10px 16px',
              textDecoration: 'none',
              transition: 'background 180ms ease-out',
            }}
              onMouseEnter={e => e.currentTarget.style.background = '#2B2418'}
              onMouseLeave={e => e.currentTarget.style.background = '#000'}
            >
              Order Ahead →
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

window.Nav = Nav;
window.useOpenNow = useOpenNow;
