// Header + Hero + Engenharia & Equipamentos (merged)

// ─────────────────────────────────────────────────────────────
// Header / Nav sticky
// ─────────────────────────────────────────────────────────────
function Header({ lang, setLang, accent, copy, onOpenModal }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [vw, setVw] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1440);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    const onResize = () => setVw(window.innerWidth);
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  const tier = vw >= 1280 ? 'full' : vw >= 1080 ? 'trim' : vw >= 760 ? 'compact' : 'mini';

  const linkStyle = {
    fontFamily: T.mono, fontSize: 12, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: T.cream, textDecoration: 'none',
    transition: 'color .15s ease, opacity .15s ease', padding: '4px 0', whiteSpace: 'nowrap',
    opacity: 0.72
  };

  const allLinks = [
  ['#engenharia', copy.nav.eng],
  ['#cenario', copy.nav.cenario],
  ['#servicos', copy.nav.serv],
  ['#planos', copy.nav.plans],
  ['#duvidas', copy.nav.faq],
  ['#localizacao', copy.nav.loc]];

  const visibleLinks =
  tier === 'full' ? allLinks :
  tier === 'trim' ? [allLinks[0], allLinks[1], allLinks[3], allLinks[4]] :
  [];

  const horizPad = vw < 760 ? 24 : T.gutter;

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(245, 239, 224, 0.94)' : 'rgba(245, 239, 224, 0.88)',
      backdropFilter: 'blur(14px) saturate(140%)',
      WebkitBackdropFilter: 'blur(14px) saturate(140%)',
      borderBottom: `1px solid ${scrolled ? 'rgba(20, 8, 32, 0.10)' : 'transparent'}`,
      transition: 'background .2s ease, border-color .2s ease'
    }}>
      <div style={{
        maxWidth: T.maxW, margin: '0 auto', padding: `${scrolled ? 14 : 22}px ${horizPad}px`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        transition: 'padding .2s ease', gap: 16
      }}>
        <a href="#top" style={{ textDecoration: 'none', flexShrink: 0 }}>
          <Logo size={24} color={T.cream} accent={accent} live short={tier === 'mini'} />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: tier === 'full' ? 26 : 18, flexShrink: 0 }}>
          {visibleLinks.map(([href, label]) =>
          <a key={href} href={href} style={linkStyle}
          onMouseEnter={(e) => {e.currentTarget.style.color = T.ink;e.currentTarget.style.opacity = 1;}}
          onMouseLeave={(e) => {e.currentTarget.style.color = T.cream;e.currentTarget.style.opacity = 0.72;}}>
            {label}</a>
          )}

          <div style={{ display: 'flex', gap: 0, border: `1px solid rgba(20, 8, 32, 0.18)`, borderRadius: 4, overflow: 'hidden', flexShrink: 0 }}>
            {['pt', 'en'].map((l) =>
            <button key={l} onClick={() => setLang(l)} style={{
              background: lang === l ? T.cream : 'transparent',
              color: lang === l ? T.night : T.mist,
              border: 'none', padding: '6px 10px',
              fontFamily: T.mono, fontSize: 11, fontWeight: 600, letterSpacing: '0.18em',
              textTransform: 'uppercase', cursor: 'pointer',
              transition: 'background .15s ease, color .15s ease'
            }}>{l}</button>
            )}
          </div>

          {tier !== 'mini' &&
          <button onClick={onOpenModal} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '11px 18px',
            background: accent, color: T.ink,
            fontFamily: T.mono, fontSize: 11, fontWeight: 600,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            border: 'none', borderRadius: 4,
            cursor: 'pointer',
            transition: 'transform .15s ease',
            whiteSpace: 'nowrap'
          }}
          onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
          onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
            
              <span style={{
              width: 7, height: 7, borderRadius: '50%', background: T.ink,
              animation: 'pulse9j 1.6s ease-in-out infinite'
            }} />
              {copy.nav.cta}
            </button>
          }
        </nav>
      </div>
    </header>);

}

// ─────────────────────────────────────────────────────────────
// Hero — duas colunas: headline + CTAs à esquerda · vídeo à direita
// ─────────────────────────────────────────────────────────────
function Hero({ copy, accent, onOpenModal, showWave, density }) {
  const dispSize = density === 'cinema' ? 88 : 72;
  return (
    <Section id="top" py={0} style={{ paddingTop: 160, paddingBottom: 100, overflow: 'hidden' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56, flexWrap: 'wrap', gap: 16 }}>
          <Kicker>{copy.hero.kicker}</Kicker>
          <OnAir label={copy.hero.onair} accent={accent} />
        </div>

        {/* Duas colunas: texto à esquerda · vídeo à direita */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64,
          alignItems: 'center', marginBottom: 72
        }}>
          {/* Coluna esquerda — headline + CTAs */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
            <Display size={dispSize} style={{ marginBottom: 0 }}>
              {copy.hero.h1a}{' '}
              <span style={{ color: accent, fontWeight: 500 }}>{copy.hero.h1b}</span>
              {copy.hero.h1c}<span style={{ color: accent, fontWeight: 500 }}>{copy.hero.h1d}</span>
            </Display>

            <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
              <button onClick={onOpenModal} style={{
                display: 'inline-flex', alignItems: 'center', gap: 14,
                padding: '18px 28px',
                background: accent, color: T.ink,
                fontFamily: T.mono, fontSize: 13, fontWeight: 600,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                border: 'none', borderRadius: 4, cursor: 'pointer',
                transition: 'transform .15s ease'
              }}
              onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
              onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
                
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.ink, animation: 'pulse9j 1.6s ease-in-out infinite', opacity: 0.85 }} />
                {copy.hero.cta}
              </button>
              <CTA href="#engenharia" kind="ghost">{copy.hero.ctaAlt}</CTA>
            </div>

            {/* Tagline EN secundária */}
            <div style={{
              paddingTop: 18, borderTop: `1px solid ${T.hairline}`,
              fontFamily: T.mono, fontSize: 11, color: T.fog,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              fontStyle: 'italic'
            }}>
              {copy.hero.tagEn}
            </div>
          </div>

          {/* Coluna direita — vídeo de apresentação */}
          <div>
            <MediaSlot
              kind="video"
              aspect="16/9"
              accent={accent}
              showChrome={false} />
          </div>
        </div>

        {showWave &&
        <div style={{ marginBottom: 48, paddingTop: 24 }}>
            <Wave width={1200} height={56} bars={96} color={T.cream} weight={1} seed={3} animate />
          </div>
        }
      </Container>
    </Section>);

}

// ─────────────────────────────────────────────────────────────
// Engenharia & Equipamentos (merged)
// 3 pilares (Áudio / Vídeo / Iluminação) + spec sheet com 5 categorias
// + foto da sala como B-roll
// ─────────────────────────────────────────────────────────────
function EngEqEquipamentos({ copy, accent }) {
  const c = copy.cred;
  const eq = copy.eq;

  return (
    <Section id="engenharia" py={96} bg={T.night} style={{ borderTop: `1px solid ${T.hairline}` }}>
      <Container>
        <SectionHead
          kicker={copy.eng.kicker}
          title1={copy.eng.title1} title1Hi={copy.eng.title1Hi} title1Punct={copy.eng.title1Punct}
          caption={c.body}
          accent={accent} />

        {/* 3 pilares — colunas verticais Vídeo · Áudio · Iluminação */}
        <div data-grid-collapse style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16
        }}>
          {eq.cats.map((cat, i) =>
          <article key={i} style={{
            background: T.night,
            border: `1px solid ${T.hairline}`,
            padding: '36px 32px 32px',
            display: 'flex', flexDirection: 'column',
            minHeight: 460,
            transition: 'background .2s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = T.night2}
          onMouseLeave={(e) => e.currentTarget.style.background = T.night}>
              {/* Ícone grande */}
              <div style={{ marginBottom: 24 }}>
                <PillarIcon kind={cat.tag} accent={accent} color={T.cream} size={64} />
              </div>

              {/* Nome */}
              <h3 style={{
              fontFamily: T.sans, fontWeight: 400, fontSize: 38,
              letterSpacing: '-0.025em', lineHeight: 1,
              margin: '0 0 28px', color: T.cream
            }}>{cat.name}<span style={{ color: accent }}>.</span></h3>

              {/* Items */}
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, flex: 1 }}>
                {cat.items.map((it, j) =>
              <li key={j} style={{
                display: 'flex', gap: 12,
                padding: '12px 0',
                borderTop: `1px solid ${T.hairline}`,
                fontFamily: T.mono, fontSize: 12, lineHeight: 1.5,
                color: T.bone, letterSpacing: '0.02em'
              }}>
                    <span style={{ color: accent, fontWeight: 700, flexShrink: 0 }}>·</span>
                    <span>{it}</span>
                  </li>
              )}
              </ul>

              {/* Stat — rodapé */}
              <div style={{
              marginTop: 28,
              paddingTop: 24,
              borderTop: `1px solid ${T.hairline}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end'
            }}>
                <div>
                  <Kicker>SPEC</Kicker>
                  <div style={{
                  marginTop: 4,
                  fontFamily: T.mono, fontSize: 10, color: T.fog,
                  letterSpacing: '0.22em', textTransform: 'uppercase'
                }}>{cat.nSub}</div>
                </div>
                <div style={{
                fontFamily: T.mono,
                fontSize: cat.n.length > 1 ? 44 : 56,
                fontWeight: 500,
                color: accent, letterSpacing: '-0.03em', lineHeight: 0.9
              }}>{cat.n}</div>
              </div>
            </article>
          )}
        </div>

        {/* Footnote */}
        <div style={{
          marginTop: 36, textAlign: 'center',
          fontFamily: T.mono, fontSize: 11, color: T.fog,
          letterSpacing: '0.3em', textTransform: 'uppercase'
        }}>
          <span style={{ color: accent }}>·</span> {c.footnote} <span style={{ color: accent }}>·</span>
        </div>
      </Container>
    </Section>);

}

Object.assign(window, { Header, Hero, EngEqEquipamentos });