// Header.jsx — Strato BIM site navigation (responsive)
const Header = ({ currentPage, onNavigate, lang, onLangToggle }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const mobile = window.useIsMobile(768);

  React.useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  // Close menu on nav
  const go = (id) => { setMenuOpen(false); onNavigate(id); };

  const links = [
    { id: 'home',     it: 'Home',          en: 'Home' },
    { id: 'about',    it: 'Chi siamo',     en: 'About' },
    { id: 'support',  it: 'Supporto',      en: 'Support' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      borderBottom: `1px solid ${scrolled || menuOpen ? 'var(--border)' : 'transparent'}`,
      background: scrolled || menuOpen ? 'rgba(250,250,248,0.92)' : 'var(--bg-page)',
      backdropFilter: scrolled || menuOpen ? 'blur(8px)' : 'none',
      transition: 'background 200ms, border-color 200ms',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '0 32px',
        height: 60, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        {/* Logo */}
        <a onClick={() => go('home')} href="#" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0 }}>
            <rect width="32" height="32" rx="4" fill="var(--brand)"/>
            <line x1="7" y1="7" x2="25" y2="7" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
            <line x1="7" y1="13" x2="25" y2="13" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
            <line x1="7" y1="19" x2="25" y2="19" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
            <line x1="7" y1="25" x2="25" y2="25" stroke="#FAFAF8" strokeWidth="2.2" strokeLinecap="round"/>
          </svg>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 19, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1 }}>
            Strato BIM
          </span>
        </a>

        {/* Desktop nav */}
        {!mobile && (
          <nav style={{ display: 'flex', gap: 2 }}>
            {links.map(l => (
              <a key={l.id} href={l.external || '#'} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined} onClick={e => { if (!l.external) { e.preventDefault(); go(l.id); } }} style={{
                fontSize: 14, color: currentPage === l.id ? 'var(--fg-1)' : 'var(--fg-2)',
                fontWeight: currentPage === l.id ? 500 : 400,
                textDecoration: 'none', padding: '6px 14px', borderRadius: 'var(--radius-md)',
                background: currentPage === l.id ? 'var(--neutral-100)' : 'transparent',
                transition: 'background 120ms',
                fontFamily: 'var(--font-sans)',
              }}
              onMouseEnter={e => { if (currentPage !== l.id) e.currentTarget.style.background = 'var(--neutral-100)'; }}
              onMouseLeave={e => { if (currentPage !== l.id) e.currentTarget.style.background = 'transparent'; }}>
                {lang === 'it' ? l.it : l.en}
              </a>
            ))}
          </nav>
        )}

        {/* Right side */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={onLangToggle} style={{
            fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
            color: 'var(--fg-4)', background: 'none', border: '1px solid var(--border)',
            borderRadius: 'var(--radius-xs)', padding: '4px 9px', cursor: 'pointer',
            letterSpacing: '0.04em', display: 'flex', alignItems: 'center', gap: 5,
          }}>
            {lang === 'it' ? (
              <>
                <svg width="18" height="13" viewBox="0 0 18 13" style={{ borderRadius: 2, flexShrink: 0, border: '1px solid rgba(0,0,0,0.08)' }}>
                  <rect width="18" height="13" fill="#012169"/>
                  <path d="M0 0L18 13M18 0L0 13" stroke="#fff" strokeWidth="2.2"/>
                  <path d="M0 0L18 13M18 0L0 13" stroke="#C8102E" strokeWidth="1.2"/>
                  <rect x="7.5" width="3" height="13" fill="#fff"/>
                  <rect y="5" width="18" height="3" fill="#fff"/>
                  <rect x="8" width="2" height="13" fill="#C8102E"/>
                  <rect y="5.5" width="18" height="2" fill="#C8102E"/>
                </svg>
                EN
              </>
            ) : (
              <>
                <svg width="18" height="13" viewBox="0 0 18 13" style={{ borderRadius: 2, flexShrink: 0, border: '1px solid rgba(0,0,0,0.08)' }}>
                  <rect width="6" height="13" fill="#009246"/>
                  <rect x="6" width="6" height="13" fill="#fff"/>
                  <rect x="12" width="6" height="13" fill="#CE2B37"/>
                </svg>
                IT
              </>
            )}
          </button>

          {!mobile && (
            <a href="#" onClick={e => { e.preventDefault(); go('download'); }} style={{
              background: 'var(--brand)', color: 'var(--white)',
              padding: '7px 18px', borderRadius: 'var(--radius-md)',
              fontSize: 14, fontWeight: 500, textDecoration: 'none',
              fontFamily: 'var(--font-sans)', transition: 'background 120ms',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--brand-hover)'}
            onMouseLeave={e => e.currentTarget.style.background = 'var(--brand)'}>
              {lang === 'it' ? 'Scarica Strato BIM' : 'Get Strato BIM'}
            </a>
          )}

          {/* Hamburger */}
          {mobile && (
            <button
              onClick={() => setMenuOpen(o => !o)}
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: 0,
              }}
            >
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                {menuOpen ? (
                  <>
                    <line x1="5" y1="5" x2="17" y2="17" stroke="var(--fg-1)" strokeWidth="1.8" strokeLinecap="round"/>
                    <line x1="17" y1="5" x2="5" y2="17" stroke="var(--fg-1)" strokeWidth="1.8" strokeLinecap="round"/>
                  </>
                ) : (
                  <>
                    <line x1="3" y1="6" x2="19" y2="6" stroke="var(--fg-1)" strokeWidth="1.8" strokeLinecap="round"/>
                    <line x1="3" y1="11" x2="19" y2="11" stroke="var(--fg-1)" strokeWidth="1.8" strokeLinecap="round"/>
                    <line x1="3" y1="16" x2="19" y2="16" stroke="var(--fg-1)" strokeWidth="1.8" strokeLinecap="round"/>
                  </>
                )}
              </svg>
            </button>
          )}
        </div>
      </div>

      {/* Mobile drawer */}
      {mobile && menuOpen && (
        <nav style={{
          borderTop: '1px solid var(--border)',
          padding: '12px 32px 16px',
          display: 'flex', flexDirection: 'column', gap: 4,
          background: 'rgba(250,250,248,0.96)',
          backdropFilter: 'blur(8px)',
        }}>
          {links.map(l => (
            <a key={l.id} href={l.external || '#'} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined} onClick={e => { if (!l.external) { e.preventDefault(); go(l.id); } }} style={{
              fontSize: 15, color: currentPage === l.id ? 'var(--fg-1)' : 'var(--fg-2)',
              fontWeight: currentPage === l.id ? 500 : 400,
              textDecoration: 'none', padding: '10px 12px', borderRadius: 'var(--radius-md)',
              background: currentPage === l.id ? 'var(--neutral-100)' : 'transparent',
              fontFamily: 'var(--font-sans)',
            }}>
              {lang === 'it' ? l.it : l.en}
            </a>
          ))}
          <a href="#" onClick={e => { e.preventDefault(); go('download'); }} style={{
            background: 'var(--brand)', color: 'var(--white)',
            padding: '11px 18px', borderRadius: 'var(--radius-md)',
            fontSize: 15, fontWeight: 500, textDecoration: 'none', textAlign: 'center',
            fontFamily: 'var(--font-sans)', marginTop: 4,
          }}>
            {lang === 'it' ? 'Scarica Strato BIM' : 'Get Strato BIM'}
          </a>
        </nav>
      )}
    </header>
  );
};

Object.assign(window, { Header });