/* @jsxRuntime classic */
/* global React */

function SiteHeader() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    const onResize = () => setIsMobile(window.innerWidth < 900);
    onResize();
    window.addEventListener('scroll', onScroll);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  const linkColor = '#A8B5C8';
  const brandColor = '#fafafa';

  const nav = [
    { label: 'Was wir bauen', href: '#products' },
    { label: 'So arbeiten wir', href: '#how-we-work' },
    { label: 'Über uns', href: '#about' },
    { label: 'FAQ', href: '#faq' },
  ];

  const CALENDLY_URL = 'https://calendly.com/tomconnect/30min';

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      backdropFilter: scrolled ? 'blur(12px)' : 'blur(0px)',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'blur(0px)',
      background: scrolled ? 'rgba(10,15,30,0.72)' : 'transparent',
      borderBottom: scrolled ? '1px solid #1f2a3d' : '1px solid transparent',
      transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 76, gap: 24,
      }}>
        <a href="#top" style={{
          display: 'inline-flex', alignItems: 'center', textDecoration: 'none',
        }}>
          <img
            src="assets/tom-connect-logo-hell.svg"
            alt="T.O.M. Connect"
            style={{ height: 40, width: 'auto', display: 'block' }}
          />
        </a>

        {!isMobile && (
          <nav style={{ display: 'flex', gap: 32 }}>
            {nav.map(item => (
              <a key={item.href} href={item.href} style={{
                fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 400,
                color: linkColor, textDecoration: 'none',
                transition: 'color 150ms',
              }}
              onMouseEnter={e => e.currentTarget.style.color = brandColor}
              onMouseLeave={e => e.currentTarget.style.color = linkColor}
              >{item.label}</a>
            ))}
          </nav>
        )}

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {!isMobile && (
            <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" style={{
              background: '#2E5A96', color: '#fafafa', border: 0,
              borderRadius: 10, padding: '10px 18px',
              fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
              cursor: 'pointer', textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              transition: 'all 150ms',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.background = '#4A7AB6';
              e.currentTarget.style.boxShadow = '0 0 24px rgba(46,90,150,0.35)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.background = '#2E5A96';
              e.currentTarget.style.boxShadow = 'none';
            }}>Erstgespräch buchen <span>→</span></a>
          )}

          {isMobile && (
            <button
              aria-label="Menü"
              onClick={() => setMobileOpen(v => !v)}
              style={{
                background: 'transparent', border: '1px solid #1f2a3d',
                borderRadius: 8, width: 40, height: 40, padding: 0,
                cursor: 'pointer', display: 'inline-flex',
                alignItems: 'center', justifyContent: 'center',
              }}>
              <span style={{ position: 'relative', width: 18, height: 14, display: 'inline-block' }}>
                <span style={{ position: 'absolute', left: 0, right: 0, height: 1.5, background: '#fafafa',
                  top: mobileOpen ? 6 : 0,
                  transform: mobileOpen ? 'rotate(45deg)' : 'rotate(0)',
                  transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)' }}/>
                <span style={{ position: 'absolute', left: 0, right: 0, height: 1.5, background: '#fafafa',
                  top: 6, opacity: mobileOpen ? 0 : 1, transition: 'opacity 150ms' }}/>
                <span style={{ position: 'absolute', left: 0, right: 0, height: 1.5, background: '#fafafa',
                  top: mobileOpen ? 6 : 12,
                  transform: mobileOpen ? 'rotate(-45deg)' : 'rotate(0)',
                  transition: 'all 200ms cubic-bezier(0.2, 0.8, 0.2, 1)' }}/>
              </span>
            </button>
          )}
        </div>
      </div>

      {isMobile && mobileOpen && (
        <div style={{
          background: 'rgba(10,15,30,0.95)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
          borderBottom: '1px solid #1f2a3d',
          padding: '16px 24px 24px',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          {nav.map(item => (
            <a key={item.href} href={item.href}
              onClick={() => setMobileOpen(false)}
              style={{
                fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 500,
                color: '#fafafa', textDecoration: 'none',
                padding: '14px 4px', borderBottom: '1px solid #1a2238',
              }}>{item.label}</a>
          ))}
          <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer"
            onClick={() => setMobileOpen(false)}
            style={{
              marginTop: 16, background: '#2E5A96', color: '#fafafa',
              borderRadius: 10, padding: '14px 18px', textAlign: 'center',
              fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 15,
              textDecoration: 'none',
            }}>Erstgespräch buchen →</a>
        </div>
      )}
    </header>
  );
}

window.SiteHeader = SiteHeader;