// Header.jsx — Morato & Costa (v3 — responsivo)

const Header = ({ activePage = 'home', onNavigate }) => {
  const [open, setOpen] = React.useState(false);

  const links = [
    { id: 'home', label: 'Início' },
    { id: 'services', label: 'Serviços' },
    { id: 'about', label: 'Sobre' },
    { id: 'contact', label: 'Contato' },
  ];

  const go = (id) => { setOpen(false); onNavigate(id); };

  return (
    <header style={hS.header}>
      <div className="mc-header-inner" style={hS.inner}>
        <div style={hS.logoWrap} onClick={() => go('home')} role="button" tabIndex={0}>
          <img src="../../assets/logo-2cores-v3.png" alt="Morato & Costa" className="mc-header-logo" style={hS.logo} />
        </div>
        <nav className="mc-header-nav" style={hS.nav}>
          {links.map(link => (
            <button key={link.id} className="mc-header-navlink" style={{ ...hS.navLink, ...(activePage === link.id ? hS.navLinkActive : {}) }} onClick={() => go(link.id)}>
              {link.label}
            </button>
          ))}
        </nav>
        <button className="mc-header-cta" style={hS.cta} onClick={() => go('contact')}>
          Fale Conosco
        </button>
        <button
          className={`mc-header-burger${open ? ' is-open' : ''}`}
          aria-label={open ? 'Fechar menu' : 'Abrir menu'}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>

      <div className={`mc-mobile-nav ${open ? 'is-open' : ''}`} style={hS.mobileNav}>
        {links.map(link => (
          <button
            key={link.id}
            style={{ ...hS.mobileLink, ...(activePage === link.id ? { color: '#C4A76E' } : {}) }}
            onClick={() => go(link.id)}
          >
            {link.label}
          </button>
        ))}
        <button style={hS.mobileCta} onClick={() => go('contact')}>Fale Conosco</button>
      </div>
    </header>
  );
};

const hS = {
  header: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    background: 'rgba(67,99,85,0.97)',
    borderBottom: '1px solid rgba(196,167,110,0.18)',
    backdropFilter: 'blur(8px)',
  },
  inner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 40px',
    height: 88, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32,
  },
  logoWrap: { cursor: 'pointer', flexShrink: 0 },
  logo: { height: 68, objectFit: 'contain' },
  nav: { display: 'flex', gap: 4, alignItems: 'center' },
  navLink: {
    background: 'none', border: '1px solid transparent', cursor: 'pointer',
    fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 500,
    color: '#ffffff', padding: '0.5rem 1.25rem', borderRadius: 9999,
    transformOrigin: 'center',
    transition: 'background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1)',
  },
  navLinkActive: { color: '#C4A76E' },
  cta: {
    background: '#C4A76E', border: 'none', cursor: 'pointer',
    fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 700,
    letterSpacing: '0.06em', textTransform: 'uppercase',
    color: '#000', padding: '10px 24px', borderRadius: 30,
    flexShrink: 0, whiteSpace: 'nowrap',
  },
  mobileNav: {
    flexDirection: 'column',
    gap: 4,
    padding: '12px 20px 20px',
    background: 'rgba(67,99,85,0.99)',
    borderTop: '1px solid rgba(196,167,110,0.18)',
  },
  mobileLink: {
    background: 'none', border: 'none', cursor: 'pointer',
    fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 500,
    color: 'rgba(255,255,255,0.9)', padding: '14px 8px',
    textAlign: 'left', borderBottom: '1px solid rgba(196,167,110,0.12)',
  },
  mobileCta: {
    marginTop: 14,
    background: '#C4A76E', border: 'none', cursor: 'pointer',
    fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 700,
    letterSpacing: '0.06em', textTransform: 'uppercase',
    color: '#000', padding: '14px 24px', borderRadius: 30,
  },
};

Object.assign(window, { Header });