const Tecnologia = ({ navigate }) => {
  const C = { coral: '#fc6466', bg: '#111111', bg2: '#1A1A1A', bg3: '#242424', white: '#FFFFFF', sec: '#D9D9D9', muted: '#A6A6A6', border: 'rgba(255,255,255,0.10)' };
  const sectionPad = { padding: '96px 32px' };
  const maxW = { maxWidth: 1280, margin: '0 auto' };

  const SectionLabel = ({ children }) => (
    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 12 }}>{children}</div>
  );
  const H2 = ({ children, style={} }) => (
    <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(26px,3.5vw,40px)', color: C.white, margin: '0 0 16px', lineHeight: 1.2, ...style }}>{children}</h2>
  );
  const Body = ({ children, style={} }) => (
    <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 17, color: C.sec, lineHeight: 1.75, margin: '0 0 16px', ...style }}>{children}</p>
  );
  const CTABtn = ({ primary, children, onClick }) => (
    <button onClick={onClick} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, background: primary ? C.coral : 'transparent', color: primary ? '#000' : C.white, border: primary ? 'none' : '1px solid rgba(255,255,255,0.25)', padding: '14px 28px', borderRadius: 7, cursor: 'pointer', transition: 'all 0.2s' }}
      onMouseEnter={e => e.target.style.background = primary ? '#ff4f51' : 'rgba(255,255,255,0.08)'}
      onMouseLeave={e => e.target.style.background = primary ? C.coral : 'transparent'}
    >{children}</button>
  );

  const parceiros = [
    {
      name: 'QOCKPIT', cat: 'Planejamento, indicadores e gestão',
      benefit: 'Conecta estratégia comercial com metas, indicadores, planos de ação e acompanhamento gerencial.',
      area: 'Gestão Estratégica',
      color: '#2563eb',
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <rect x="3" y="3" width="26" height="26" rx="4" stroke="#2563eb" strokeWidth="1.5"/>
          <path d="M9 22l4-6 4 4 4-8" stroke="#2563eb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="9" cy="22" r="2" fill="#2563eb"/>
        </svg>
      ),
    },
    {
      name: 'Exact Sales / Spotter', cat: 'Sales Engagement e SDR',
      benefit: 'Dá consistência à prospecção ativa, qualificação, cadências e rotina SDR.',
      area: 'Prospecção Ativa',
      color: '#7c3aed',
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <circle cx="16" cy="16" r="12" stroke="#7c3aed" strokeWidth="1.5"/>
          <path d="M12 16l3 3 5-6" stroke="#7c3aed" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      name: 'RD Station CRM', cat: 'CRM comercial',
      benefit: 'Organiza pipeline, oportunidades, atividades, histórico de vendas e previsibilidade comercial.',
      area: 'CRM',
      color: '#059669',
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <path d="M4 26l6-10 5 5 5-8 8 6" stroke="#059669" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <rect x="3" y="3" width="26" height="26" rx="3" stroke="#059669" strokeWidth="1.5"/>
        </svg>
      ),
    },
    {
      name: 'RD Station Marketing', cat: 'Automação de marketing',
      benefit: 'Apoia geração, segmentação, nutrição e automação de leads inbound.',
      area: 'Marketing',
      color: '#d97706',
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <path d="M6 16C6 10.477 10.477 6 16 6s10 4.477 10 10" stroke="#d97706" strokeWidth="1.5" strokeLinecap="round"/>
          <path d="M26 16v2a10 10 0 01-20 0v-2" stroke="#d97706" strokeWidth="1.5" strokeLinecap="round"/>
          <path d="M16 6v6M12 8l2 5M20 8l-2 5" stroke="#d97706" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      name: 'RD Station Conversas', cat: 'Atendimento e conversas comerciais',
      benefit: 'Centraliza interações comerciais em canais digitais e reduz perda de contatos.',
      area: 'Atendimento',
      color: '#0891b2',
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <path d="M6 8h20a2 2 0 012 2v10a2 2 0 01-2 2H10l-6 4V10a2 2 0 012-2z" stroke="#0891b2" strokeWidth="1.5" strokeLinejoin="round"/>
          <path d="M11 14h10M11 18h6" stroke="#0891b2" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      name: 'Provelo', cat: 'Emissão e gestão de propostas',
      benefit: 'Padroniza propostas comerciais, aumenta rastreabilidade e reduz retrabalho.',
      area: 'Propostas',
      color: '#dc2626',
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <rect x="5" y="3" width="16" height="22" rx="2" stroke="#dc2626" strokeWidth="1.5"/>
          <path d="M9 10h8M9 14h8M9 18h5" stroke="#dc2626" strokeWidth="1.5" strokeLinecap="round"/>
          <path d="M18 22l3 4 6-6" stroke="#dc2626" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
  ];

  const jornada = [
    { stage: 'Planejamento', tools: ['QOCKPIT'], desc: 'Metas, indicadores e gestão estratégica' },
    { stage: 'Prospecção', tools: ['Exact Sales','RD Station Marketing'], desc: 'Inbound, outbound e SDR' },
    { stage: 'Conversão', tools: ['RD Station CRM','RD Station Conversas'], desc: 'Pipeline, follow-up e atendimento' },
    { stage: 'Proposta', tools: ['Provelo'], desc: 'Emissão, controle e rastreio' },
    { stage: 'Gestão', tools: ['QOCKPIT'], desc: 'Indicadores e planos de ação' },
  ];

  return (
    <div style={{ background: C.bg }}>
      {/* Hero */}
      <section style={{ ...sectionPad, paddingTop: 160, background: 'radial-gradient(ellipse 70% 50% at 50% 0%, rgba(252,100,102,0.06) 0%, transparent 70%), #111111', textAlign: 'center' }}>
        <div style={{ ...maxW, maxWidth: 820, margin: '0 auto' }}>
          <SectionLabel>Tecnologia comercial</SectionLabel>
          <h1 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(30px,4.5vw,52px)', color: C.white, margin: '0 0 24px', lineHeight: 1.12 }}>
            Tecnologia para sustentar uma máquina comercial{' '}
            <span style={{ color: C.coral }}>mais previsível</span>
          </h1>
          <Body style={{ maxWidth: 600, margin: '0 auto 36px' }}>A BARPES DIGITAL conecta softwares parceiros à estratégia comercial para organizar prospecção, CRM, automação, atendimento, propostas e indicadores.</Body>
          <CTABtn primary onClick={() => navigate('diagnostico')}>Falar sobre tecnologia comercial</CTABtn>
        </div>
      </section>

      {/* Tecnologia com propósito */}
      <section style={{ ...sectionPad, background: C.bg2, borderTop: '1px solid rgba(255,255,255,0.07)' }}>
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          <div>
            <SectionLabel>Tecnologia com propósito</SectionLabel>
            <H2>A tecnologia entra para sustentar o processo, não substituir a estratégia.</H2>
            <Body>Na BARPES DIGITAL, a tecnologia não vem antes da estratégia. Ela entra para sustentar o processo comercial desenhado, automatizar rotinas, organizar dados e dar mais visibilidade à gestão.</Body>
          </div>
          {/* Jornada visual */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {jornada.map((j, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16, background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 10, padding: '14px 20px' }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(252,100,102,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 12, color: C.coral }}>{String(i+1).padStart(2,'0')}</span>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: C.white }}>{j.stage}</div>
                  <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, marginTop: 2 }}>{j.desc}</div>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, justifyContent: 'flex-end' }}>
                  {j.tools.map(t => (
                    <span key={t} style={{ fontFamily: 'Montserrat,sans-serif', fontSize: 11, fontWeight: 600, color: C.coral, background: 'rgba(252,100,102,0.1)', padding: '3px 8px', borderRadius: 4, whiteSpace: 'nowrap' }}>{t}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Parceiros */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 56px' }}>
            <SectionLabel>Parceiros estratégicos</SectionLabel>
            <H2>Soluções autorizadas para cada etapa da jornada comercial</H2>
            <Body style={{ margin: 0 }}>Parceiros selecionados por critério de especialização, não por portfólio genérico.</Body>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 60 }} className="grid-3">
            {parceiros.map((p, i) => (
              <div key={i} style={{ background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 14, padding: 28, display: 'flex', flexDirection: 'column', gap: 0, transition: 'border-color 0.2s, transform 0.2s' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(252,100,102,0.3)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                <div style={{ marginBottom: 16 }}>{p.icon}</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 17, color: C.white, marginBottom: 4 }}>{p.name}</div>
                <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.coral, letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 14 }}>{p.area}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.muted, lineHeight: 1.7, margin: 0 }}>{p.benefit}</p>
              </div>
            ))}
          </div>

          {/* O papel da BARPES */}
          <div style={{ background: C.bg3, border: '1px solid rgba(252,100,102,0.15)', borderRadius: 16, padding: '56px 48px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }} className="hero-grid">
            <div>
              <SectionLabel>Nosso papel</SectionLabel>
              <H2>Mais do que contratar ferramentas, sua empresa precisa integrar tecnologia à rotina comercial.</H2>
            </div>
            <div>
              <Body>A BARPES DIGITAL apoia a escolha, organização e uso das tecnologias dentro de uma lógica maior de processo, gestão e indicadores.</Body>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
                {['Seleção da stack adequada ao modelo comercial','Organização dos dados e integrações','Automações com propósito definido','Indicadores conectados à tomada de decisão'].map(item => (
                  <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 20, height: 20, borderRadius: 6, background: 'rgba(252,100,102,0.12)', border: '1px solid rgba(252,100,102,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4L3.5 6.5L9 1" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec }}>{item}</span>
                  </div>
                ))}
              </div>
              <CTABtn primary onClick={() => navigate('diagnostico')}>Quero organizar minha stack comercial</CTABtn>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { Tecnologia });