// OOBOX site — sections
const { useState: useStateS, useEffect: useEffectS } = React;

// ============== NAV ==============
function Nav() {
  const [scrolled, setScrolled] = useStateS(false);
  const [menuOpen, setMenuOpen] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Sobre', href: '#sobre' },
    { label: 'Serviços', href: '#servicos' },
    { label: 'Soluções', href: '#solucoes' },
    { label: 'Cases', href: '#cases' },
    { label: 'Conteúdos', href: '#conteudos' },
    { label: 'Contato', href: '#contato' },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(11, 11, 26, 0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all 0.3s ease',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 32px' }}>
        <a href="#top" aria-label="OOBOX">
          <OoboxLogo size={1.3} />
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }} className="nav-links">
          {links.map((l) => (
            <a key={l.href} href={l.href} style={{
              fontFamily: 'var(--font-sub)', fontWeight: 500, fontSize: 14,
              color: 'var(--white)', opacity: 0.85, transition: 'opacity 0.2s, color 0.2s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--violet)'; e.currentTarget.style.opacity = 1; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--white)'; e.currentTarget.style.opacity = 0.85; }}
            >{l.label}</a>
          ))}
        </div>
        <a href="#contato" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>
          Falar com especialista
        </a>
        <button
          aria-label="Menu"
          onClick={() => setMenuOpen(!menuOpen)}
          className="mobile-menu-btn"
          style={{ display: 'none' }}
        >
          <Icon name={menuOpen ? 'close' : 'menu'} size={22} />
        </button>
      </div>
      {menuOpen && (
        <div style={{ background: 'rgba(11,11,26,0.97)', borderTop: '1px solid var(--line)', padding: '20px 32px' }}>
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)} style={{
              display: 'block', padding: '12px 0', fontFamily: 'var(--font-sub)', fontWeight: 500,
              borderBottom: '1px solid var(--line)',
            }}>{l.label}</a>
          ))}
        </div>
      )}
    </nav>
  );
}

// ============== HERO ==============
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', paddingTop: 100, paddingBottom: 80 }}>
      {/* Big expansion shape backdrop on right */}
      <div style={{ position: 'absolute', top: '15%', right: '-8%', opacity: 0.7, pointerEvents: 'none' }}>
        <ExpansionShape width={780} height={520} />
      </div>
      {/* Digital lines, top-left */}
      <div style={{ position: 'absolute', top: 110, left: 32, opacity: 0.55, pointerEvents: 'none' }}>
        <DigitalLines width={220} height={140} />
      </div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="reveal">
          <div className="eyebrow" style={{ marginBottom: 24, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ width: 32, height: 1, background: 'var(--violet)' }} />
            CONSULTORIA EM TECNOLOGIA E GROWTH MARKETING
          </div>
          <h1 style={{ fontSize: 'clamp(44px, 7vw, 92px)', fontWeight: 800, letterSpacing: '-0.03em', maxWidth: 1100, marginBottom: 32 }}>
            Inteligência, estratégia<br />
            e tecnologia para<br />
            <span className="grad-text">transformar negócios.</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-sub)', fontSize: 19, color: 'var(--gray)', maxWidth: 620, marginBottom: 48, lineHeight: 1.5 }}>
            Soluções personalizadas que geram crescimento real e sustentável. Não somos uma agência. Não somos apenas consultores. Somos parceiros estratégicos.
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href="#contato" className="btn btn-primary" style={{ padding: '16px 28px', fontSize: 14 }}>
              Falar com especialista
              <Icon name="arrow-right" size={16} />
            </a>
            <a href="#servicos" className="btn btn-ghost" style={{ padding: '16px 28px', fontSize: 14 }}>
              Conheça nossas soluções
            </a>
          </div>
        </div>

        {/* Stats strip */}
        <div className="reveal" style={{
          marginTop: 96, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 1,
          background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden',
        }}>
          {[
            { v: '+37%', l: 'crescimento médio em 12 meses' },
            { v: '50+', l: 'projetos entregues' },
            { v: '4', l: 'pilares estratégicos' },
            { v: '12+', l: 'setores atendidos' },
          ].map((s, i) => (
            <div key={i} style={{ padding: '28px 24px', background: 'var(--bg-deep)' }}>
              <div className="grad-text" style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 36, letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{ fontSize: 13, color: 'var(--gray)', marginTop: 4, fontFamily: 'var(--font-sub)' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== POSITIONING ==============
function Positioning() {
  return (
    <section id="sobre" className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(260px, 1fr) 1.4fr', gap: 80, alignItems: 'flex-start' }} className="grid-pos">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 24 }}>POSICIONAMENTO</div>
            <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 800, letterSpacing: '-0.02em' }}>
              Fora da caixa.<br /><span className="grad-text">Dentro da solução.</span>
            </h2>
          </div>
          <div className="reveal">
            <p style={{ fontSize: 20, color: 'var(--white)', lineHeight: 1.55, marginBottom: 28, fontFamily: 'var(--font-sub)', fontWeight: 400 }}>
              A OOBOX é uma boutique de consultoria em tecnologia e growth marketing que atua de forma estratégica para <span className="violet-text">resolver problemas complexos e gerar crescimento real e sustentável.</span>
            </p>
            <p style={{ fontSize: 16, color: 'var(--gray)', lineHeight: 1.7, marginBottom: 40 }}>
              Não somos uma agência. Não somos apenas consultores. Somos parceiros estratégicos que combinam tecnologia e growth para destravar o que realmente importa: crescimento com eficiência, clareza e propósito.
            </p>

            <div style={{
              padding: 32, borderRadius: 6, position: 'relative', overflow: 'hidden',
              background: 'linear-gradient(135deg, rgba(123, 63, 228, 0.12) 0%, rgba(144, 77, 255, 0.04) 100%)',
              border: '1px solid rgba(144, 77, 255, 0.25)',
            }}>
              <div style={{ position: 'absolute', top: -20, right: -20, opacity: 0.5 }}>
                <DigitalLines width={180} height={120} />
              </div>
              <p style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 22, lineHeight: 1.4, position: 'relative', zIndex: 2 }}>
                Tecnologia sem estratégia é só custo.<br />
                <span className="grad-text">Estratégia com tecnologia é vantagem.</span>
              </p>
            </div>
          </div>
        </div>

        {/* Approach grid */}
        <div className="reveal" style={{ marginTop: 96, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden' }}>
          {[
            { icon: 'cube', t: 'Como pensamos', d: 'Questionamos o óbvio para encontrar o que realmente gera impacto.' },
            { icon: 'target', t: 'Como atuamos', d: 'Unimos tecnologia, dados e estratégia para transformar decisões em resultados.' },
            { icon: 'chart', t: 'O que entregamos', d: 'Soluções personalizadas que aceleram crescimento com inteligência.' },
            { icon: 'people', t: 'Para quem é', d: 'Empresas ambiciosas que buscam vantagem competitiva real.' },
          ].map((a, i) => (
            <div key={i} style={{ background: 'var(--bg-deep)', padding: 32 }}>
              <div className="violet-text" style={{ marginBottom: 18 }}><Icon name={a.icon} size={28} /></div>
              <h4 style={{ fontFamily: 'var(--font-sub)', fontWeight: 600, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--gray)', marginBottom: 12 }}>{a.t}</h4>
              <p style={{ fontSize: 15, color: 'var(--white)', lineHeight: 1.5 }}>{a.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== PILLARS ==============
function Pillars() {
  const pillars = [
    { icon: 'brain', t: 'Inteligência', d: 'Diagnóstico profundo, dados que viram clareza, decisões que viram vantagem.' },
    { icon: 'target', t: 'Estratégia', d: 'Planos de execução claros, com metas mensuráveis e foco em resultado.' },
    { icon: 'code', t: 'Tecnologia', d: 'Implementação técnica robusta, integração de stacks e automação inteligente.' },
    { icon: 'rocket', t: 'Crescimento', d: 'Growth marketing orientado a métricas, com testes e otimização contínua.' },
  ];
  return (
    <section style={{ padding: '120px 0', position: 'relative', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ maxWidth: 720, marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>NOSSOS PILARES</div>
          <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 52px)', fontWeight: 800, letterSpacing: '-0.02em' }}>
            Quatro forças que <span className="grad-text">movem cada projeto.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20 }}>
          {pillars.map((p, i) => (
            <div key={i} className="card reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <div style={{
                width: 56, height: 56, borderRadius: 4,
                border: '1px solid rgba(144, 77, 255, 0.35)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--violet)', marginBottom: 24,
                background: 'rgba(144, 77, 255, 0.06)',
              }}>
                <Icon name={p.icon} size={26} />
              </div>
              <h3 style={{ fontFamily: 'var(--font-sub)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gray)', marginBottom: 10 }}>0{i+1}</h3>
              <h4 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12, letterSpacing: '-0.01em' }}>{p.t}</h4>
              <p style={{ fontSize: 14, color: 'var(--gray)', lineHeight: 1.6 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Positioning, Pillars });