// header.jsx — Sticky urgency bar + nav (consome unidade do contexto)

function UrgencyBar() {
  const items = [
    'Avaliação gratuita',
    'Sem burocracia',
    <span key="r">Resultado em <strong style={{ color: '#fff' }}>até 20 minutos</strong></span>,
    'Você só paga se vender',
  ];
  return (
    <div style={{
      background: '#1a1a1a', color: 'rgba(255,255,255,0.85)',
      fontFamily: "'Roboto',sans-serif", fontSize: 13,
      padding: '9px 24px', display: 'flex', justifyContent: 'center',
      gap: 32, flexWrap: 'wrap', textAlign: 'center',
    }} className="urgency-bar">
      {items.map((t, i) => (
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          <Icon name="check" size={14} color="#E31018" stroke={2.4} />
          {t}
        </span>
      ))}
    </div>
  );
}

function NavBar({ onCTA }) {
  const { unidade } = useUnidade();
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = ['Como funciona', 'Modalidades', 'Depoimentos', 'FAQ', 'Localização'];
  return (
    <nav style={{
      background: '#fff',
      borderBottom: scrolled ? '1px solid #E0E0E0' : '1px solid transparent',
      boxShadow: scrolled ? '0 2px 12px rgba(0,0,0,0.04)' : 'none',
      height: 72, display: 'flex', alignItems: 'center',
      padding: '0 clamp(20px, 6vw, 80px)', justifyContent: 'space-between',
      transition: 'all 200ms ease', gap: 24,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <img src="/Content/landings/lp-franqueados/modelo-02/assets/logo-carflix-color.png" alt="Carflix" style={{ height: 100, objectFit: 'contain' }} />
        <span style={{
          fontFamily: "'Roboto',sans-serif", fontSize: 12, fontWeight: 500,
          color: '#5B5B5B', borderLeft: '1px solid #E0E0E0', paddingLeft: 18,
        }}>
           <strong style={{ color: '#2D2D2D' }}>{unidade.nome}</strong>
        </span>
      </div>
      <div style={{ display: 'flex', gap: 28, alignItems: 'center' }} className="nav-links">
        {items.map(i => (
          <a key={i} href={`#${i.toLowerCase().replace(/[^a-z]/g, '')}`} style={{
            fontFamily: "'Roboto',sans-serif", fontSize: 14, color: '#5B5B5B',
            textDecoration: 'none', whiteSpace: 'nowrap',
          }}>{i}</a>
        ))}
      </div>
      <button onClick={onCTA} style={{
        padding: '10px 22px', borderRadius: 999, background: '#E31018',
        color: '#fff', border: 'none', fontFamily: "'Roboto',sans-serif",
        fontSize: 14, fontWeight: 500, cursor: 'pointer',
        boxShadow: '0 4px 8.9px rgba(227,16,24,0.25)',
      }}>Agendar avaliação</button>
    </nav>
  );
}

Object.assign(window, { UrgencyBar, NavBar });