/* Header — dark, minimal, scroll-aware */
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  const links = [
    { name: 'Leistungen', href: 'services' },
    { name: 'Team',       href: 'about' },
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'all .4s var(--ease-out)',
      padding: scrolled ? '14px 0' : '22px 0',
      background: scrolled ? 'rgba(5,5,5,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(22px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#" onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'});}}
           style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'var(--text)' }}>
          <BrandMark size={28} />
          <Wordmark fontSize={17} />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="hide-mobile">
          {links.map(l => (
            <a key={l.href} href={`#${l.href}`} onClick={(e)=>{e.preventDefault(); scrollTo(l.href);}}
               style={{ padding: '8px 14px', color: 'var(--text-2)', fontSize: 14, textDecoration: 'none', transition: 'color .2s' }}
               onMouseEnter={(e)=>e.currentTarget.style.color='var(--text)'}
               onMouseLeave={(e)=>e.currentTarget.style.color='var(--text-2)'}>
              {l.name}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button className="btn btn-secondary btn-sm hide-mobile" onClick={()=>scrollTo('contact')}>
            Termin buchen
            <Icon name="arrow" size={14} />
          </button>
          <button className="btn btn-ghost show-mobile" onClick={()=>setOpen(!open)} aria-label="Menü">
            <Icon name={open ? 'close' : 'menu'} size={20} />
          </button>
        </div>
      </div>

      {open && (
        <div className="show-mobile" style={{
          borderTop: '1px solid var(--border)',
          background: 'rgba(5,5,5,0.96)',
          backdropFilter: 'blur(22px)',
          padding: '16px 0'
        }}>
          <div className="container" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {links.map(l => (
              <a key={l.href} href={`#${l.href}`} onClick={(e)=>{e.preventDefault(); scrollTo(l.href); setOpen(false);}}
                 style={{ padding: '12px 0', color: 'var(--text)', fontSize: 18, textDecoration: 'none' }}>{l.name}</a>
            ))}
            <button className="btn btn-primary" style={{marginTop:10}} onClick={()=>{scrollTo('contact');setOpen(false);}}>
              Termin buchen
            </button>
          </div>
        </div>
      )}
    </header>
  );
}

function Logo({ size = 28 }) {
  return <BrandMark size={size} />;
}

/* BrandMark — echtes Logo als Bild, mit Glow-Fallback-Styling */
function BrandMark({ size = 28, glow = true }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center',
      width:size, height:size, flexShrink:0, position:'relative'
    }}>
      <img
        src="assets/logo.png"
        alt="archaitechs"
        width={size} height={size}
        draggable={false}
        style={{
          width:size, height:size, objectFit:'contain', display:'block',
          filter: (glow
            ? 'grayscale(1) brightness(1.6) contrast(1.2) drop-shadow(0 0 10px rgba(255,255,255,0.25))'
            : 'grayscale(1) brightness(1.6) contrast(1.2)'),
          userSelect: 'none',
          WebkitUserDrag: 'none',
          pointerEvents: 'none',
        }}
      />
    </span>
  );
}

/* Helvetica-bold wordmark: tight tracking, semibold-to-bold weight, with
   custom "AI" highlight in the middle if desired. Uses Helvetica stack
   with Inter Tight as web fallback. */
function Wordmark({ fontSize = 17, highlightAI = false }) {
  const baseStyle = {
    fontFamily: '"Helvetica Neue", Helvetica, Arial, "Inter Tight", sans-serif',
    fontWeight: 700,
    fontSize: fontSize,
    letterSpacing: '-0.035em',
    lineHeight: 1,
    textTransform: 'lowercase',
    color: 'inherit',
  };
  if (!highlightAI) {
    return <span style={baseStyle}>archaitechs</span>;
  }
  return <span style={baseStyle}>archaitechs</span>;
}

Object.assign(window, { Header, Logo, Wordmark, BrandMark });