/* global React, Button, useIsMobile */

function Navbar({ active, onNav, onBook, scrolled }) {
  const isMobile = useIsMobile();
  const items = [
    { id: 'home',        label: 'Clínica'      },
    { id: 'service',     label: 'Serviços'     },
    { id: 'doctor',      label: 'Dra. Bruna'   },
    { id: 'depoimentos', label: 'Depoimentos'  },
    { id: 'contact',     label: 'Contato'      },
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(251,247,241,0.88)' : 'var(--bg-page)',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-1)' : '1px solid transparent',
      transition: 'all .2s ease',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: isMobile ? '14px 20px' : '16px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <a onClick={() => onNav('home')} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', textDecoration: 'none' }}>
          <img src="assets/logo.svg" alt="" style={{ height: isMobile ? 36 : 44, width: 'auto' }} />
        </a>
        {!isMobile && (
          <div style={{ display: 'flex', gap: 32, fontFamily: 'var(--font-sans)', fontSize: 15 }}>
            {items.map(it => (
              <a key={it.id} onClick={() => onNav(it.id)} style={{
                color: active === it.id ? 'var(--brand-navy)' : 'var(--fg-2)',
                fontWeight: active === it.id ? 700 : 500, cursor: 'pointer', textDecoration: 'none',
                borderBottom: active === it.id ? '2px solid var(--brand-teal)' : '2px solid transparent',
                paddingBottom: 4, transition: 'all .18s',
              }}>{it.label}</a>
            ))}
          </div>
        )}
        <Button variant="pill" icon="whatsapp-logo" onClick={onBook}
          style={isMobile ? { fontSize: 13, padding: '10px 16px' } : undefined}>
          {isMobile ? 'WhatsApp' : 'Falar no WhatsApp'}
        </Button>
      </div>
    </nav>
  );
}

Object.assign(window, { Navbar });