/* global React, Sparkle, BeautyMark, Icon */
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'servicos',    label: 'Serviços' },
    { id: 'sobre',       label: 'Sobre' },
    { id: 'galeria',     label: 'Galeria' },
    { id: 'depoimentos', label: 'Depoimentos' },
    { id: 'contato',     label: 'Contato' },
  ];

  const go = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <>
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: scrolled ? 'rgba(255,247,240,0.86)' : 'rgba(255,247,240,0.55)',
        backdropFilter: 'blur(18px)',
        WebkitBackdropFilter: 'blur(18px)',
        borderBottom: scrolled ? '1px solid var(--rb-champagne)' : '1px solid transparent',
        transition: 'background 280ms var(--ease-refined), border-color 280ms var(--ease-refined)',
      }}>
        <div style={navStyles.inner}>
          <a href="#topo" style={navStyles.brand} onClick={(e) => { e.preventDefault(); go('topo'); }}>
            <img src="assets/logo-full.png" alt="Refinada Beauty" style={navStyles.logo} />
          </a>

          <nav className="hide-mobile" style={navStyles.links}>
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); go(l.id); }} style={navStyles.link}>
                {l.label}
              </a>
            ))}
          </nav>

          <div style={navStyles.cta}>
            <button className="hide-desktop" onClick={() => setOpen(true)} style={navStyles.menuBtn} aria-label="Abrir menu">
              <Icon name="menu" size={22} />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: 100,
        pointerEvents: open ? 'auto' : 'none',
        opacity: open ? 1 : 0,
        transition: 'opacity 280ms var(--ease-refined)',
      }}>
        <div onClick={() => setOpen(false)} style={{
          position: 'absolute', inset: 0, background: 'rgba(43,27,18,0.45)',
          backdropFilter: 'blur(4px)',
        }}/>
        <aside style={{
          position: 'absolute', top: 0, right: 0, bottom: 0,
          width: 'min(86vw, 340px)',
          background: 'var(--rb-creme)',
          padding: '24px',
          display: 'flex', flexDirection: 'column', gap: 24,
          transform: open ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform 320ms var(--ease-refined)',
          boxShadow: '-20px 0 60px rgba(43,27,18,0.18)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <img src="assets/logo-monogram.png" alt="" style={{ height: 40 }} />
            <button onClick={() => setOpen(false)} style={navStyles.menuBtn} aria-label="Fechar menu">
              <Icon name="close" size={20} />
            </button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 8 }}>
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`} onClick={(e) => { e.preventDefault(); go(l.id); }}
                 style={navStyles.mobileLink}>
                {l.label}
                <Icon name="arrowRight" size={16} color="var(--rb-rose)" />
              </a>
            ))}
          </nav>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button className="btn btn--primary btn--block" onClick={() => go('agendamento')}>Agendar agora</button>
            <a href="https://wa.me/5582999973643" target="_blank" className="btn btn--whatsapp btn--block">
              <WhatsAppIconLocal/> &nbsp;WhatsApp
            </a>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 8 }}>
              <a href="https://www.instagram.com/refinada_beauty" target="_blank" style={navStyles.socialDot}><Icon name="instagram" size={18}/></a>
              <a href="tel:+5582999973643" style={navStyles.socialDot}><Icon name="phone" size={18}/></a>
            </div>
          </div>
        </aside>
      </div>
    </>
  );
}

function WhatsAppIconLocal() {
  return (
    <svg viewBox="0 0 24 24" width={16} height={16} fill="currentColor">
      <path d="M17.5 14.4c-.3-.15-1.8-.87-2-.97-.27-.1-.47-.15-.67.15s-.77.97-.94 1.16c-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.47-.88-.79-1.48-1.76-1.65-2.06-.18-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.66-1.61-.91-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.42.25-.69.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.1-1.3c1.5.8 3.1 1.2 4.9 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
    </svg>
  );
}

const navStyles = {
  inner: {
    maxWidth: 1280, margin: '0 auto',
    height: 156,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 var(--page-pad)', gap: 24,
  },
  brand: { display: 'flex', alignItems: 'center', cursor: 'pointer', textDecoration: 'none' },
  logo: { height: 128, width: 'auto' },
  links: { display: 'flex', alignItems: 'center', gap: 36 },
  link: {
    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--rb-espresso)', textDecoration: 'none', cursor: 'pointer',
    transition: 'color 220ms var(--ease-refined)',
  },
  cta: { display: 'flex', alignItems: 'center', gap: 12 },
  menuBtn: {
    width: 44, height: 44, borderRadius: 999,
    background: 'transparent', border: '1px solid var(--rb-champagne)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer', color: 'var(--rb-espresso)',
  },
  mobileLink: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '16px 12px', borderRadius: 10,
    fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--rb-espresso)',
    textDecoration: 'none', cursor: 'pointer',
  },
  socialDot: {
    width: 40, height: 40, borderRadius: 999,
    border: '1px solid var(--rb-champagne)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--rb-espresso)', cursor: 'pointer',
  },
};

Object.assign(window, { Nav });