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

function Header({ audience, setAudience }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className="site-header" style={{
      borderBottomColor: scrolled ? 'var(--line)' : 'transparent',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, padding: '14px 0',
      }}>
        <a href="#top" aria-label="Setza" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10 }}>
          <img
            src="assets/setza-logo-white.png"
            alt="Setza"
            className="brand-logo"
            style={{ height: 28, width: 'auto', display: 'block' }}
          />
        </a>

        <nav className="header-nav" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          <a href="#producto" className="nav-link">GPS</a>
          <a href="#alertas" className="nav-link">Alertas</a>
          <a href="#flotillas" className="nav-link">Flotillas</a>
          <a href="#servicios" className="nav-link">Servicios</a>
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <AudienceSwitch audience={audience} setAudience={setAudience} />
          <a href="#contacto" className="btn btn-primary header-cta" style={{ padding: '10px 16px', fontSize: 14 }}>
            <span className="header-cta-label">Cotizar</span>
            <Icon name="arrow" size={16} />
          </a>
        </div>
      </div>

      <style>{`
        .nav-link {
          font-family: var(--font-body);
          font-size: 14px;
          color: var(--ink-2);
          text-decoration: none;
          padding: 6px 0;
          position: relative;
          transition: color .2s ease;
        }
        .nav-link:hover { color: var(--ink); }
        .nav-link:hover::after {
          content: '';
          position: absolute;
          left: 0; right: 0; bottom: -2px;
          height: 1px;
          background: var(--petrol);
        }
        @media (max-width: 900px) {
          .header-nav { display: none !important; }
        }
        @media (max-width: 420px) {
          .site-header .brand-logo { height: 22px !important; }
        }
      `}</style>
    </header>
  );
}

function SetzaMark() {
  return (
    <svg width="34" height="34" viewBox="0 0 34 34" fill="none" aria-hidden="true">
      <circle cx="17" cy="17" r="16" stroke="currentColor" strokeWidth="1" opacity="0.18" />
      <circle cx="17" cy="17" r="11" stroke="currentColor" strokeWidth="1" opacity="0.28" />
      <circle cx="17" cy="17" r="3.4" fill="var(--petrol)" />
      <circle cx="17" cy="17" r="6.5" fill="none" stroke="var(--petrol)" strokeWidth="1.4" strokeDasharray="2 3" />
    </svg>
  );
}

function AudienceSwitch({ audience, setAudience }) {
  return (
    <div className="aud-switch" role="tablist" aria-label="Audiencia">
      <button
        role="tab"
        aria-selected={audience === 'retail'}
        className={'aud-opt' + (audience === 'retail' ? ' is-active' : '')}
        onClick={() => setAudience('retail')}>Particular</button>
      <button
        role="tab"
        aria-selected={audience === 'fleet'}
        className={'aud-opt' + (audience === 'fleet' ? ' is-active' : '')}
        onClick={() => setAudience('fleet')}>Flotillas</button>
      <span className="aud-thumb" data-pos={audience} />
      <style>{`
        .aud-switch {
          position: relative;
          display: inline-flex;
          padding: 4px;
          background: var(--bg-2);
          border-radius: 999px;
          border: 1px solid var(--line);
        }
        .aud-opt {
          position: relative;
          z-index: 2;
          background: transparent;
          border: 0;
          padding: 7px 14px;
          font-family: var(--font-display);
          font-size: 13px;
          color: var(--ink-2);
          border-radius: 999px;
          transition: color .25s ease;
        }
        .aud-opt.is-active { color: var(--bg); }
        [data-theme='dark'] .aud-opt.is-active { color: #07171a; }
        .aud-thumb {
          position: absolute;
          top: 4px; bottom: 4px;
          left: 4px;
          width: calc(50% - 4px);
          border-radius: 999px;
          background: var(--petrol);
          transition: transform .35s cubic-bezier(.6,.05,.2,1);
          z-index: 1;
        }
        .aud-thumb[data-pos='fleet'] { transform: translateX(100%); }
        @media (max-width: 600px) {
          .aud-switch { display: none; }
        }
      `}</style>
    </div>
  );
}

window.Header = Header;
