// Terra Group — Header Component
// Exports: Header

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [isWide, setIsWide] = React.useState(window.innerWidth >= 768);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    const onResize = () => {
      setIsWide(window.innerWidth >= 768);
      if (window.innerWidth >= 768) setMobileOpen(false);
    };
    window.addEventListener('scroll', onScroll);
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); };
  }, []);

  const navLinks = [
    { label: 'Services', href: '#services' },
    { label: 'About', href: '#about' },
    { label: 'Contact Us', href: '#contact' },
  ];

  const scrollTo = (id) => {
    const el = document.querySelector(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top, behavior: 'smooth' });
    }
    setMobileOpen(false);
  };

  const s = {
    nav: {
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: (scrolled || mobileOpen) ? 'rgba(255,255,255,0.97)' : 'transparent',
      backdropFilter: (scrolled || mobileOpen) ? 'blur(8px)' : 'none',
      borderBottom: (scrolled || mobileOpen) ? '1px solid #E5E9EE' : '1px solid rgba(255,255,255,0.15)',
      transition: 'all 0.3s ease',
      boxShadow: scrolled ? '0 2px 16px rgba(21,66,112,0.08)' : 'none',
    },
    inner: {
      maxWidth: 1200, margin: '0 auto', padding: '0 24px',
      height: 72, display: 'flex', alignItems: 'center',
      justifyContent: 'space-between',
    },
    logoWrap: { display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', flexShrink: 0 },
    logoText: {
      fontFamily: "'Playfair Display', serif", fontSize: 20, fontWeight: 700,
      color: (scrolled || mobileOpen) ? '#154270' : 'white',
      letterSpacing: '0.08em', whiteSpace: 'nowrap',
    },
    // Desktop links
    links: {
      display: isWide ? 'flex' : 'none',
      gap: 32, alignItems: 'center', listStyle: 'none', margin: 0, padding: 0,
    },
    link: {
      fontFamily: "'Inter', sans-serif", fontSize: 15, fontWeight: 500,
      color: scrolled ? '#2d3e4f' : 'rgba(255,255,255,0.88)',
      textDecoration: 'none', transition: 'color 0.2s', cursor: 'pointer',
    },
    // Hamburger
    burger: {
      display: isWide ? 'none' : 'flex',
      flexDirection: 'column', gap: 5, cursor: 'pointer',
      background: 'none', border: 'none', padding: 6,
    },
    bar: (i) => ({
      width: 24, height: 2, borderRadius: 2,
      background: (scrolled || mobileOpen) ? '#154270' : 'white',
      transition: 'all 0.25s ease',
      transform: mobileOpen
        ? i === 0 ? 'translateY(7px) rotate(45deg)'
        : i === 2 ? 'translateY(-7px) rotate(-45deg)'
        : 'scaleX(0)'
        : 'none',
      opacity: mobileOpen && i === 1 ? 0 : 1,
    }),
    // Mobile dropdown
    mobileMenu: {
      display: (!isWide && mobileOpen) ? 'flex' : 'none',
      flexDirection: 'column',
      borderTop: '1px solid #E5E9EE',
      padding: '8px 0 16px',
      background: 'rgba(255,255,255,0.97)',
    },
    mobileLink: {
      fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 500,
      color: '#154270', padding: '14px 24px', cursor: 'pointer',
      borderBottom: '1px solid #f3f6f9', textDecoration: 'none',
      transition: 'background 0.15s',
    },
  };

  return (
    <nav style={s.nav}>
      <div style={s.inner}>
        <a style={s.logoWrap} href="#">
          <svg width="28" height="24" viewBox="0 0 100 80" fill="none">
            <polygon points="50,5 90,40 80,40 80,75 20,75 20,40 10,40" fill={(scrolled || mobileOpen) ? '#154270' : 'white'}/>
            <rect x="42" y="38" width="16" height="37" fill="#87C8E8"/>
          </svg>
          <span style={s.logoText}>TERRA GROUP</span>
        </a>

        {/* Desktop nav */}
        <ul style={s.links}>
          {navLinks.map(l => (
            <li key={l.label}>
              <a style={s.link} onClick={() => scrollTo(l.href)}>{l.label}</a>
            </li>
          ))}
        </ul>

        {/* Burger button */}
        <button style={s.burger} onClick={() => setMobileOpen(o => !o)} aria-label="Menu">
          <span style={s.bar(0)}></span>
          <span style={s.bar(1)}></span>
          <span style={s.bar(2)}></span>
        </button>
      </div>

      {/* Mobile dropdown */}
      <div style={s.mobileMenu}>
        {navLinks.map(l => (
          <a key={l.label} style={s.mobileLink} onClick={() => scrollTo(l.href)}>{l.label}</a>
        ))}
      </div>
    </nav>
  );
};

Object.assign(window, { Header });