// OOBOX site — services, solutions, cases sections

// ============== SERVICES ==============
function Services() {
  const [active, setActive] = React.useState(0);
  const services = [
    {
      tag: 'TECNOLOGIA',
      t: 'Arquitetura & Implementação',
      d: 'Desenhamos e implementamos a stack que sustenta o crescimento — integrações, automações e infraestrutura preparada para escalar.',
      items: ['Diagnóstico de stack atual', 'Integrações & APIs', 'Automação de processos', 'CRM & Data layer'],
    },
    {
      tag: 'GROWTH',
      t: 'Growth Marketing & Aquisição',
      d: 'Não é vender mais. É vender melhor. Funis orientados a métricas, testes contínuos e otimização baseada em dados reais.',
      items: ['Funis de aquisição', 'Performance & mídia paga', 'CRO & landing pages', 'Atribuição & analytics'],
    },
    {
      tag: 'DADOS',
      t: 'Inteligência de Dados',
      d: 'Transformamos dados dispersos em decisões claras. Dashboards que vão direto ao ponto e modelos preditivos que orientam o próximo passo.',
      items: ['Dashboards executivos', 'Modelos preditivos', 'Segmentação avançada', 'Forecast & cohort'],
    },
    {
      tag: 'ESTRATÉGIA',
      t: 'Consultoria Estratégica',
      d: 'Sentamos junto, questionamos o óbvio e desenhamos o caminho. Sem fórmula pronta — só método e clareza.',
      items: ['Diagnóstico 360°', 'Roadmap estratégico', 'OKRs & métricas', 'Workshops executivos'],
    },
  ];

  return (
    <section id="servicos" className="section">
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div style={{ maxWidth: 640 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>O QUE FAZEMOS</div>
            <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 52px)', fontWeight: 800, letterSpacing: '-0.02em' }}>
              Soluções pensadas para <span className="grad-text">resultado real</span>, não para vaidade.
            </h2>
          </div>
          <a href="#contato" className="btn btn-ghost">Solicitar diagnóstico <Icon name="arrow-right" size={14} /></a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0, border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden' }} className="services-grid">
          {/* Tabs */}
          <div style={{ borderRight: '1px solid var(--line)', background: 'rgba(255,255,255,0.015)' }}>
            {services.map((s, i) => (
              <button
                key={i}
                onClick={() => setActive(i)}
                style={{
                  width: '100%', textAlign: 'left', padding: '28px 28px',
                  borderBottom: i < services.length - 1 ? '1px solid var(--line)' : 'none',
                  background: active === i ? 'linear-gradient(90deg, rgba(123, 63, 228, 0.12), transparent)' : 'transparent',
                  borderLeft: active === i ? '3px solid var(--violet)' : '3px solid transparent',
                  transition: 'all 0.2s ease', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}
              >
                <div>
                  <div style={{ fontFamily: 'var(--font-sub)', fontSize: 11, letterSpacing: '0.18em', color: active === i ? 'var(--violet)' : 'var(--gray)', marginBottom: 6 }}>0{i+1} · {s.tag}</div>
                  <div style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 17, color: 'var(--white)' }}>{s.t.split('&')[0]}</div>
                </div>
                <Icon name="arrow-right" size={16} color={active === i ? 'var(--violet)' : 'var(--gray-dim)'} />
              </button>
            ))}
          </div>
          {/* Detail */}
          <div style={{ padding: 48, position: 'relative', minHeight: 480, overflow: 'hidden' }}>
            <div style={{ position: 'absolute', bottom: -60, right: -60, opacity: 0.4, pointerEvents: 'none' }}>
              <ExpansionShape width={420} height={300} />
            </div>
            <div style={{ position: 'relative', zIndex: 2 }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{services[active].tag}</div>
              <h3 style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 20 }}>{services[active].t}</h3>
              <p style={{ fontSize: 17, color: 'var(--gray)', lineHeight: 1.65, marginBottom: 36, maxWidth: 560 }}>{services[active].d}</p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, maxWidth: 540 }}>
                {services[active].items.map((it, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px', border: '1px solid var(--line)', borderRadius: 4, background: 'rgba(255,255,255,0.015)' }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--violet)' }} />
                    <span style={{ fontSize: 14, fontFamily: 'var(--font-sub)' }}>{it}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== SOLUTIONS / RESULT METRIC ==============
function Solutions() {
  return (
    <section id="solucoes" style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '20%', left: '-15%', width: 600, height: 600, background: 'radial-gradient(circle, rgba(144, 77, 255, 0.18), transparent 60%)', filter: 'blur(60px)', pointerEvents: 'none' }} />
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="grid-pos">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 16 }}>RESULTADOS QUE COMPROVAM</div>
            <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 32 }}>
              Estratégia que <span className="grad-text">gera resultados</span>.
            </h2>
            <div style={{ fontFamily: 'var(--font-head)', fontSize: 'clamp(80px, 12vw, 160px)', fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.05em', marginBottom: 24 }}>
              <span className="grad-text">+37%</span>
            </div>
            <p style={{ fontSize: 19, color: 'var(--gray)', maxWidth: 480, lineHeight: 1.5, fontFamily: 'var(--font-sub)' }}>
              de crescimento médio dos nossos clientes em 12 meses. Sem mágica. Só método, dados e execução afiada.
            </p>
          </div>
          <div className="reveal">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { icon: 'check', t: 'Diagnóstico inteligente', d: 'Entendemos onde está o vazamento real antes de qualquer ação.' },
                { icon: 'check', t: 'Estratégia personalizada', d: 'Nada de playbook genérico. Cada cliente, um plano feito sob medida.' },
                { icon: 'check', t: 'Execução com tecnologia', d: 'Implementamos junto. Não entregamos slides — entregamos resultado.' },
                { icon: 'check', t: 'Análise e otimização contínua', d: 'Acompanhamos métricas, ajustamos a rota, mantemos o ritmo.' },
              ].map((s, i) => (
                <div key={i} style={{
                  display: 'flex', gap: 18, alignItems: 'flex-start',
                  padding: '20px 24px',
                  border: '1px solid var(--line)', borderRadius: 6,
                  background: 'linear-gradient(180deg, rgba(255,255,255,0.025), transparent)',
                  transition: 'all 0.3s', cursor: 'default',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(144, 77, 255, 0.35)'; e.currentTarget.style.transform = 'translateX(6px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'translateX(0)'; }}
                >
                  <div style={{
                    width: 32, height: 32, flexShrink: 0,
                    borderRadius: 4, background: 'var(--grad)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name="check" size={16} color="white" strokeWidth={2.4} />
                  </div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-sub)', fontWeight: 600, fontSize: 16, marginBottom: 4 }}>{s.t}</div>
                    <div style={{ fontSize: 14, color: 'var(--gray)', lineHeight: 1.55 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============== CASES ==============
function Cases() {
  const cases = [
    {
      sector: 'SAAS B2B',
      title: 'De CAC alto a funil saudável em 6 meses',
      stat: '+58%', stat_l: 'em conversão de leads qualificados',
      d: 'Reestruturação de funil, atribuição multi-touch e automação de nutrição com integração ao CRM.',
    },
    {
      sector: 'E-COMMERCE',
      title: 'Otimização de stack e performance',
      stat: '3.2x', stat_l: 'em ROAS após 4 meses',
      d: 'Diagnóstico de mídia, redesign de landing pages e segmentação avançada de audiências.',
    },
    {
      sector: 'INDÚSTRIA',
      title: 'Dashboard executivo unificado',
      stat: '−42%', stat_l: 'em tempo de tomada de decisão',
      d: 'Consolidação de fontes de dados, modelagem em data warehouse e camada visual customizada.',
    },
  ];
  return (
    <section id="cases" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>CASES SELECIONADOS</div>
            <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 52px)', fontWeight: 800, letterSpacing: '-0.02em', maxWidth: 720 }}>
              Decisões melhores começam com <span className="grad-text">dados e estratégia.</span>
            </h2>
          </div>
          <a href="#contato" className="btn btn-ghost">Ver todos os cases <Icon name="arrow-right" size={14} /></a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
          {cases.map((c, i) => (
            <div key={i} className="card reveal" style={{ padding: 0, transitionDelay: `${i * 100}ms`, display: 'flex', flexDirection: 'column' }}>
              {/* Visual area */}
              <div style={{
                aspectRatio: '4/3', position: 'relative', overflow: 'hidden',
                background: 'linear-gradient(135deg, rgba(123, 63, 228, 0.18) 0%, rgba(11, 11, 26, 0.8) 100%)',
                borderBottom: '1px solid var(--line)',
              }}>
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <ExpansionShape width={320} height={220} opacity={0.5} mirror={i % 2 === 1} />
                </div>
                <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24 }}>
                  <div className="grad-text" style={{ fontFamily: 'var(--font-head)', fontWeight: 800, fontSize: 56, letterSpacing: '-0.03em', lineHeight: 1 }}>{c.stat}</div>
                  <div style={{ fontSize: 13, color: 'var(--gray)', marginTop: 4, fontFamily: 'var(--font-sub)' }}>{c.stat_l}</div>
                </div>
                <div style={{ position: 'absolute', top: 24, left: 24, fontFamily: 'var(--font-sub)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--violet)' }}>{c.sector}</div>
              </div>
              <div style={{ padding: 28, flex: 1, display: 'flex', flexDirection: 'column' }}>
                <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 12, letterSpacing: '-0.01em' }}>{c.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--gray)', lineHeight: 1.6, marginBottom: 24, flex: 1 }}>{c.d}</p>
                <a href="#contato" style={{ fontFamily: 'var(--font-sub)', fontSize: 13, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--violet)' }}>
                  Ler estudo de caso <Icon name="arrow-right" size={14} />
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, Solutions, Cases });