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

function Header({ onNavigate, current, mode }) {
  const t = window.useT();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const hamburgerRef = useRef(null);
  const firstLinkRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // body scroll-lock + Escape listener while drawer open
  useEffect(() => {
    if (!open) return;
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => {
      if (e.key === 'Escape') {
        setOpen(false);
        // return focus to hamburger
        setTimeout(() => { if (hamburgerRef.current) hamburgerRef.current.focus(); }, 0);
      }
    };
    window.addEventListener('keydown', onKey);
    // focus first link
    setTimeout(() => { if (firstLinkRef.current) firstLinkRef.current.focus(); }, 50);
    return () => {
      document.body.style.overflow = prevOverflow;
      window.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const links = [
  ['agencia', t('header.nav.agencia')],
  ['servicios', t('header.nav.servicios')],
  ['metodo', t('header.nav.metodo')],
  ['portfolio', t('header.nav.portfolio')],
  ['confianza', t('header.nav.confianza')]];


  // mode: 'transparent' over hero before scroll; otherwise solid
  const transparent = mode === 'transparent' && !scrolled;
  const txtColor = transparent ? 'var(--lr-cal-blanca)' : 'var(--fg-primary, var(--lr-tierra-profunda))';

  const handleDrawerNav = (k) => {
    onNavigate(k);
    setOpen(false);
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: transparent ? 'transparent' : 'var(--lr-cal-blanca)',
      backdropFilter: transparent ? 'none' : 'blur(10px)',
      WebkitBackdropFilter: transparent ? 'none' : 'blur(10px)',
      borderBottom: transparent ? '1px solid rgba(243,238,231,0.18)' : '1px solid var(--border-subtle)',
      transition: 'background 220ms var(--ease-standard), border-color 220ms var(--ease-standard), color 220ms var(--ease-standard)'
    }}>
      <div className="lr-header-inner" style={{
        maxWidth: 1320, margin: '0 auto', padding: '20px 40px',
        display: 'flex', alignItems: 'center', gap: 32
      }}>
        <a href="#" onClick={(e) => {e.preventDefault();onNavigate('top');}}
        aria-label={t('header.logo.label')}
        style={{
          fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 16,
          letterSpacing: '0.32em', textTransform: 'uppercase',
          textDecoration: 'none', borderBottom: 'none',
          color: txtColor, transition: 'color 280ms'
        }}>EIDORA</a>

        <nav className="lr-header-nav" style={{ display: 'flex', gap: 22, marginLeft: 'auto' }}>
          {links.map(([k, label]) =>
          <a key={k} href={`#${k}`} onClick={(e) => {e.preventDefault();onNavigate(k);}}
          className="eidora-nav-link"
          style={{
            position: 'relative',
            fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 12,
            letterSpacing: '0.06em',
            textDecoration: 'none', borderBottom: 'none',
            color: txtColor, opacity: 0.86,
            paddingBottom: 4,
            transition: 'opacity 200ms, color 220ms var(--ease-standard)'
          }}>{label}</a>
          )}
        </nav>
        <window.LangSwitcher tone={transparent ? 'light' : 'dark'} />
        <button
          className="lr-header-cta eidora-cta"
          onClick={() => onNavigate('conversemos')}
          style={{
            fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 11,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            background: transparent ? 'transparent' : 'var(--lr-tierra-profunda)',
            color: transparent ? 'var(--lr-cal-blanca)' : 'var(--lr-cal-blanca)',
            border: transparent ? '1px solid var(--lr-cal-blanca)' : '1px solid var(--lr-tierra-profunda)',
            borderRadius: 2,
            padding: '12px 20px', cursor: 'pointer',
            transition: 'all 280ms'
          }}>
          {t('header.cta.primary')}
        </button>

        {/* Hamburger button — visible only <768px */}
        <button
          ref={hamburgerRef}
          className={`eidora-hamburger ${open ? 'is-open' : ''}`}
          onClick={() => setOpen(v => !v)}
          aria-label={open ? t('header.hamburger.close') : t('header.hamburger.open')}
          aria-expanded={open}
          aria-controls="mobile-drawer"
          style={{
            display: 'none',
            marginLeft: 'auto',
            background: transparent ? 'rgba(27,20,16,0.28)' : 'rgba(255,255,255,0.72)',
            border: transparent ? '1px solid rgba(243,238,231,0.55)' : '1px solid var(--border-subtle)',
            borderRadius: 2,
            cursor: 'pointer',
            color: txtColor,
            zIndex: 90
          }}
          aria-hidden="true">
          <span></span><span></span><span></span>
        </button>
      </div>

      {/* Overlay */}
      <div
        className={`lr-drawer-overlay${open ? ' is-open' : ''}`}
        onClick={() => setOpen(false)}
        aria-hidden="true"
        style={{
          position: 'fixed', inset: 0,
          height: '100dvh',
          background: 'rgba(20, 16, 12, 0.42)',
          backdropFilter: 'blur(6px)',
          WebkitBackdropFilter: 'blur(6px)',
          opacity: open ? 1 : 0,
          pointerEvents: open ? 'auto' : 'none',
          transition: 'opacity 300ms cubic-bezier(.2,.7,.15,1)',
          zIndex: 60
        }}
      />

      {/* Drawer */}
      <aside
        id="mobile-drawer"
        role="dialog"
        aria-modal="true"
        aria-label={t('header.drawer.label')}
        className={`lr-drawer${open ? ' is-open' : ''}`}
        style={{
          position: 'fixed',
          top: 0, right: 0, bottom: 0,
          height: '100dvh',
          width: 'min(360px, 86vw)',
          background: 'var(--lr-cal-blanca, #f3eee7)',
          color: 'var(--lr-tierra-profunda)',
          transform: open ? 'translateX(0)' : 'translateX(100%)',
          transition: 'transform 300ms cubic-bezier(.2,.7,.15,1)',
          zIndex: 70,
          padding: '88px 32px max(32px, env(safe-area-inset-bottom))',
          display: 'flex',
          flexDirection: 'column',
          gap: 28,
          boxShadow: open ? '-12px 0 40px rgba(0,0,0,0.18)' : 'none',
          overflowY: 'auto',
          WebkitOverflowScrolling: 'touch'
        }}>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {links.map(([k, label], i) =>
            <a
              key={k}
              ref={i === 0 ? firstLinkRef : null}
              href={`#${k}`}
              onClick={(e) => { e.preventDefault(); handleDrawerNav(k); }}
              style={{
                fontFamily: 'var(--font-display, "Playfair Display", serif)',
                fontSize: 28,
                fontWeight: 500,
                lineHeight: 1.15,
                color: 'var(--lr-tierra-profunda)',
                textDecoration: 'none',
                borderBottom: 'none'
              }}>{label}</a>
          )}
        </nav>

        <button
          onClick={() => handleDrawerNav('conversemos')}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--lr-terracota-700)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--lr-terracota)'; }}
          style={{
            marginTop: 12,
            fontFamily: 'var(--font-ui)',
            fontWeight: 700, fontSize: 12,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            background: 'var(--lr-terracota)',
            color: 'var(--lr-cal-blanca)',
            border: 'none',
            borderRadius: 2,
            padding: '20px 36px',
            minHeight: 44,
            cursor: 'pointer',
            textAlign: 'left',
            transition: 'background 240ms var(--ease-standard)'
          }}>
          {t('header.cta.primary')}
        </button>

        <window.LangSwitcher mode="stacked" tone="dark" />

        <div style={{
          marginTop: 'auto',
          paddingTop: 24,
          borderTop: '1px solid rgba(60,40,28,0.16)',
          display: 'flex', flexDirection: 'column', gap: 8,
          fontFamily: 'var(--font-ui)',
          fontSize: 11,
          letterSpacing: '0.32em',
          textTransform: 'uppercase',
          color: 'var(--lr-tierra-profunda)',
          opacity: 0.82
        }}>
          <a href="mailto:info@eidoraprojects.com" style={{ color: 'inherit', textDecoration: 'none' }}>info@eidoraprojects.com</a>
          <a href="tel:+34614325564" style={{ color: 'inherit', textDecoration: 'none' }}>+34 614 32 55 64</a>
          <a href="tel:+34687052535" style={{ color: 'inherit', textDecoration: 'none' }}>+34 687 05 25 35</a>
        </div>
      </aside>

      <style>{`
        .eidora-nav-link::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 0;
          height: 1px;
          background: currentColor;
          transition: width 240ms var(--ease-standard, cubic-bezier(.2,.7,.15,1));
        }
        .eidora-nav-link:hover::after,
        .eidora-nav-link:focus-visible::after {
          width: 100%;
        }
        .eidora-nav-link:hover { opacity: 1; }
        .eidora-nav-link:focus-visible,
        .eidora-cta:focus-visible {
          outline: 2px solid var(--lr-terracota, #B97857);
          outline-offset: 3px;
        }
        .eidora-hamburger {
          width: 44px;
          height: 44px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 5px;
          background: transparent !important;
          border: 0 !important;
          padding: 12px !important;
        }
        .eidora-hamburger span {
          display: block;
          width: 22px;
          height: 1.5px;
          background: currentColor;
          transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
        }
        .eidora-hamburger.is-open span:nth-child(1) {
          transform: translateY(6.5px) rotate(45deg);
        }
        .eidora-hamburger.is-open span:nth-child(2) {
          opacity: 0;
        }
        .eidora-hamburger.is-open span:nth-child(3) {
          transform: translateY(-6.5px) rotate(-45deg);
        }
        @media (max-width: 768px) {
          .lr-header-inner { padding: 16px 22px !important; gap: 16px !important; }
          .lr-header-nav { display: none !important; }
          .lr-header-cta { display: none !important; }
          .eidora-hamburger {
            display: inline-flex !important;
            position: absolute;
            top: 50%;
            right: 18px;
            transform: translateY(-50%);
            min-width: 44px;
            min-height: 44px;
          }
        }
        @media (max-width: 1120px) {
          .lr-header-nav { gap: 16px !important; }
          .eidora-nav-link { font-size: 11.5px !important; }
          .lr-header-cta { padding: 11px 16px !important; }
        }
        @media (max-width: 480px) {
          .lr-header-inner { padding: 14px 18px !important; }
          .eidora-hamburger { right: 14px; }
        }
      `}</style>
    </header>);

}

window.Header = Header;