/* Alchemy — shared site chrome: announcement bar + Locations menu.
   Multi-location model: each location is its own landing page; the Locations
   menu is the single hub that lists them all and flags what's open vs. coming soon.
   Add a new location by adding one entry here + its page. */
window.ALCHEMY_LOCATIONS = [
  { id: 'gastonia', name: 'Downtown Gastonia', addr: '121 W. Main Ave', status: 'open', go: { route: 'dtg' } },
  { id: 'charlotte', name: 'Charlotte', addr: '2459 Wilkinson Blvd', status: 'open', go: { route: 'clt' } },
  { id: 'loray', name: 'Loray Gastonia', addr: '300 S Firestone St, Suite 200 H', status: 'open', go: { route: 'lry' } },
];

function AnnouncementBar() {
  return (
    <div style={{
      background: 'var(--navy-950)', color: 'var(--cream-50)',
      fontFamily: 'var(--font-label)', fontSize: '0.74rem', fontWeight: 600,
      letterSpacing: '0.1em', textTransform: 'uppercase',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
      padding: '0.55rem var(--gutter)', textAlign: 'center', lineHeight: 1.3,
    }}>
      <span style={{ display: 'inline-flex', width: 7, height: 7, borderRadius: '50%', background: 'var(--gold-500)', flex: 'none' }}></span>
      <span>Our newest location is now open at <span style={{ color: 'var(--gold-400)' }}>Loray Mill, Gastonia</span></span>
    </div>
  );
}

/* Locations dropdown — used by both the main nav and the CLT header. */
function LocationsMenu({ light = false, onNavigate }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    function outside(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener('mousedown', outside);
    return () => document.removeEventListener('mousedown', outside);
  }, []);

  const pick = (loc) => {
    setOpen(false);
    if (loc.status === 'soon' && !loc.go) return;
    /* Location pages are their own URLs; anything else routes in-app. */
    if (loc.go && loc.go.route && window.alcUrl) window.location.href = window.alcUrl(loc.go.route);
    else if (loc.go && loc.go.href) window.location.href = loc.go.href;
    else if (loc.go && loc.go.route && onNavigate) onNavigate(loc.go.route);
  };

  const trigger = {
    all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.84rem',
    letterSpacing: '0.04em', textTransform: 'uppercase', padding: '0.5rem 0.85rem',
    color: light ? (open ? '#fff' : 'rgba(255,255,255,0.85)') : (open ? 'var(--navy-700)' : 'var(--stone-600)'),
  };

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button style={trigger} onClick={() => setOpen((o) => !o)} aria-expanded={open}>
        Locations
        <span style={{ fontSize: '0.6em', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur) var(--ease-out)' }}>▼</span>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 8px)', left: 0, minWidth: 300, zIndex: 80,
          background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-lg)',
          padding: 6, display: 'flex', flexDirection: 'column',
        }}>
          {window.ALCHEMY_LOCATIONS.map((loc) => {
            const soon = loc.status === 'soon';
            const clickable = !soon || !!loc.go;
            return (
              <button key={loc.id} onClick={() => pick(loc)} disabled={!clickable} style={{
                all: 'unset', cursor: clickable ? 'pointer' : 'default',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
                padding: '0.7rem 0.85rem', opacity: soon && !loc.go ? 0.72 : 1,
              }}
                onMouseEnter={(e) => { if (clickable) e.currentTarget.style.background = 'var(--paper-100)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
                <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1rem', color: 'var(--text-strong)' }}>{loc.name}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: '0.82rem', color: 'var(--text-muted)' }}>{loc.addr}</span>
                </span>
                {soon
                  ? <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: '0.62rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--gold-700)', background: 'var(--gold-100)', padding: '3px 8px', flex: 'none' }}>Coming Soon</span>
                  : <span style={{ color: 'var(--slate-500)', fontSize: '0.9rem', flex: 'none' }}>→</span>}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.AnnouncementBar = AnnouncementBar;
window.LocationsMenu = LocationsMenu;