/* global React, Wordmark, Logo */

const Header = ({ onMenu, scrolled }) =>
<div
  style={{
    position: 'sticky',
    top: 0,
    zIndex: 20,
    background: scrolled ? 'rgba(250,248,243,0.92)' : 'var(--bg)',
    backdropFilter: 'saturate(180%) blur(8px)',
    WebkitBackdropFilter: 'saturate(180%) blur(8px)',
    borderBottom: scrolled ? '1px solid var(--line-soft)' : '1px solid transparent',
    transition: 'background 0.2s, border-color 0.2s'
  }}>

    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '56px 20px 12px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Logo size={30} variant="ink" />
        <span style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontStyle: 'normal',
        fontWeight: 700,
        fontSize: 15,
        letterSpacing: '0.08em',
        color: 'var(--ink)',
        lineHeight: 1.15,
      }}>
          BROADWAY<br />
          <span style={{ color: 'var(--gold)' }}>BARBER</span>
        </span>
      </div>
      <button
      onClick={onMenu}
      aria-label="Menu"
      style={{
        width: 40, height: 40, border: '1px solid var(--line)',
        background: 'transparent', display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 5, cursor: 'pointer'
      }}>

        <span style={{ width: 16, height: 1, background: 'var(--ink)' }} />
        <span style={{ width: 16, height: 1, background: 'var(--ink)' }} />
      </button>
    </div>
  </div>;


const NAV_ITEMS = [
{ id: 'home', label: 'Inicio', num: '01' },
{ id: 'servicios', label: 'Servicios', num: '02' },
{ id: 'boutique', label: 'Boutique', num: '03' },
{ id: 'galeria', label: 'Galería', num: '04' },
{ id: 'gerente', label: 'El Gerente', num: '05' },
{ id: 'reservas', label: 'Reservar', num: '06' },
{ id: 'contacto', label: 'Contacto', num: '07' }];


const MenuOverlay = ({ open, onClose, onNavigate, current }) => {
  if (!open) return null;
  return (
    <div
      style={{
        position: 'absolute', inset: 0, zIndex: 50,
        background: 'var(--ink)',
        color: 'var(--bg)',
        display: 'flex', flexDirection: 'column',
        animation: 'bbFade 0.25s ease'
      }}>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Logo size={30} variant="gold" />
          <span style={{
            fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
            fontSize: 20, color: 'var(--bg)'
          }}>
            BroadWay<span style={{ color: 'var(--gold)' }}> Barber</span>
          </span>
        </div>
        <button
          onClick={onClose}
          aria-label="Cerrar"
          style={{
            width: 40, height: 40, border: '1px solid rgba(250,248,243,0.3)',
            background: 'transparent', color: 'var(--bg)',
            fontFamily: "'JetBrains Mono', monospace", fontSize: 16, cursor: 'pointer'
          }}>
          ×</button>
      </div>
      <div style={{ flex: 1, padding: '20px 24px', display: 'flex', flexDirection: 'column' }}>
        <div className="bb-eyebrow" style={{ color: 'var(--gold)', marginBottom: 18 }}>
          — Índice —
        </div>
        {NAV_ITEMS.map((item) =>
        <button
          key={item.id}
          onClick={() => {onNavigate(item.id);onClose();}}
          style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            padding: '14px 0',
            borderBottom: '1px solid rgba(250,248,243,0.1)',
            background: 'transparent', border: 'none',
            borderBottom: '1px solid rgba(250,248,243,0.1)',
            color: current === item.id ? 'var(--gold)' : 'var(--bg)',
            cursor: 'pointer', textAlign: 'left'
          }}>

            <span style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontStyle: 'italic', fontSize: 28, fontWeight: 500
          }}>
              {item.label}
            </span>
            <span className="bb-label" style={{ color: 'var(--gold)' }}>
              {item.num}
            </span>
          </button>
        )}
        <div style={{ marginTop: 'auto', paddingTop: 28, textAlign: 'center' }}>
          <div className="bb-label" style={{ color: 'rgba(250,248,243,0.5)', marginBottom: 6 }}>
            +56 9 8474 0024
          </div>
          <div className="bb-small" style={{ color: 'rgba(250,248,243,0.4)' }}>
            Los Álamos 558, Coquimbo
          </div>
        </div>
      </div>
    </div>);

};

Object.assign(window, { Header, MenuOverlay, NAV_ITEMS });