const Servicos = ({ 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 servicos = [
    {
      num: '01', title: 'Diagnóstico Comercial e de Marketing',
      desc: 'Análise crítica da operação atual para identificar gargalos de geração de demanda, CRM, funil, propostas, indicadores e rotina de gestão.',
      tags: ['Maturidade comercial', 'Gargalos de funil', 'CRM', 'Indicadores'],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <circle cx="14" cy="14" r="10" stroke="#fc6466" strokeWidth="1.5"/>
          <path d="M14 9v5l3 3" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round"/>
          <path d="M8 5L5 8M20 5l3 3M8 23l-3-3M20 23l3-3" stroke="#fc6466" strokeWidth="1" strokeLinecap="round" opacity="0.5"/>
        </svg>
      ),
    },
    {
      num: '02', title: 'Planejamento Estratégico Comercial e de Marketing',
      desc: 'Definição de ICP, metas, canais, mensagens, ofertas, indicadores e plano de ação.',
      tags: ['ICP', 'Metas', 'Canais', 'Plano de ação'],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="4" y="4" width="20" height="20" rx="3" stroke="#fc6466" strokeWidth="1.5"/>
          <path d="M9 14h10M9 9h6M9 19h8" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      num: '03', title: 'Estruturação Inbound',
      desc: 'Organização da geração de demanda por meio de presença digital, conteúdo, landing pages, campanhas, automações e nutrição.',
      tags: ['Landing pages', 'Nutrição', 'Automação', 'Qualificação'],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M14 4C8.477 4 4 8.477 4 14s4.477 10 10 10 10-4.477 10-10" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round"/>
          <path d="M18 4l6 0 0 6" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M24 4L14 14" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      num: '04', title: 'Estruturação Outbound',
      desc: 'Criação da rotina de prospecção ativa com segmentação, listas, cadências, scripts, qualificação e passagem para vendas.',
      tags: ['Cadências', 'Scripts SDR', 'Segmentação', 'Qualificação'],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M4 20l6-8 4 4 4-6 6 4" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="22" cy="8" r="3" stroke="#fc6466" strokeWidth="1.5"/>
        </svg>
      ),
    },
    {
      num: '05', title: 'Desenho do Processo Comercial',
      desc: 'Estruturação do funil, etapas comerciais, critérios de avanço, responsabilidades, follow-up e governança do CRM.',
      tags: ['Funil comercial', 'Follow-up', 'Governança CRM', 'Pipeline'],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <path d="M4 6h20l-7 9v8l-6-3v-5L4 6z" stroke="#fc6466" strokeWidth="1.5" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      num: '06', title: 'Gestão de Propostas Comerciais',
      desc: 'Padronização da emissão, acompanhamento e controle de propostas para melhorar rastreabilidade e reduzir retrabalho.',
      tags: ['Emissão', 'Rastreabilidade', 'Controle', 'Padronização'],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="5" y="3" width="14" height="18" rx="2" stroke="#fc6466" strokeWidth="1.5"/>
          <path d="M9 8h6M9 12h6M9 16h4" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round"/>
          <path d="M16 19l3 3 5-5" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      num: '07', title: 'Rotina de Gestão Comercial e Performance',
      desc: 'Implantação de reuniões, indicadores, relatórios, planos de ação e melhoria contínua.',
      tags: ['Indicadores', 'Relatórios', 'Reuniões', 'Melhoria contínua'],
      icon: (
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
          <rect x="3" y="3" width="22" height="22" rx="3" stroke="#fc6466" strokeWidth="1.5"/>
          <path d="M8 18l4-4 3 3 5-7" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
  ];

  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: 800, margin: '0 auto' }}>
          <SectionLabel>Serviços consultivos</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 }}>
            Serviços para estruturar prospecção, vendas e{' '}
            <span style={{ color: C.coral }}>gestão comercial</span>
          </h1>
          <Body style={{ maxWidth: 600, margin: '0 auto 36px' }}>Da estratégia à rotina de acompanhamento, a BARPES DIGITAL organiza a operação comercial para gerar mais clareza, controle e previsibilidade.</Body>
          <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico Comercial</CTABtn>
        </div>
      </section>

      {/* Lista de serviços */}
      <section style={{ ...sectionPad, background: C.bg2, borderTop: '1px solid rgba(255,255,255,0.07)' }}>
        <div style={maxW}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            {servicos.map((s, i) => (
              <ServiceRow key={i} s={s} C={C} />
            ))}
          </div>
        </div>
      </section>

      {/* Grid visual */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, marginBottom: 48 }} className="grid-3">
            {[
              { label: 'Estratégia', val: 'ICP + Canais + Proposta de valor' },
              { label: 'Execução', val: 'Inbound + Outbound + SDR' },
              { label: 'Processo', val: 'Funil + CRM + Follow-up' },
              { label: 'Tecnologia', val: 'Stack integrada + Automação' },
              { label: 'Propostas', val: 'Emissão + Controle + Rastreio' },
              { label: 'Gestão', val: 'Indicadores + Reuniões + Planos de ação' },
            ].map(item => (
              <div key={item.label} style={{ background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 10, padding: '22px 24px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '1px', textTransform: 'uppercase' }}>{item.label}</div>
                <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.sec }}>{item.val}</div>
              </div>
            ))}
          </div>

          <div style={{ background: 'linear-gradient(135deg, #1A0A0A 0%, #242424 100%)', border: '1px solid rgba(252,100,102,0.2)', borderRadius: 16, padding: '56px 48px', textAlign: 'center' }}>
            <SectionLabel>Abordagem</SectionLabel>
            <H2 style={{ marginBottom: 12 }}>Serviço consultivo com foco em implantação, não em teoria.</H2>
            <Body style={{ maxWidth: 560, margin: '0 auto 36px' }}>A BARPES DIGITAL atua para transformar recomendações em processo, ferramenta, rotina e acompanhamento.</Body>
            <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico Comercial</CTABtn>
          </div>
        </div>
      </section>
    </div>
  );
};

const ServiceRow = ({ s, C }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ border: `1px solid ${open ? 'rgba(252,100,102,0.3)' : C.border}`, borderRadius: 12, overflow: 'hidden', transition: 'border-color 0.2s' }}>
      <button onClick={() => setOpen(!open)} style={{ width: '100%', background: open ? '#1A1A1A' : 'transparent', border: 'none', cursor: 'pointer', padding: '24px 28px', display: 'flex', alignItems: 'center', gap: 20 }}>
        <div style={{ flexShrink: 0 }}>{s.icon}</div>
        <div style={{ flex: 1, textAlign: 'left' }}>
          <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white }}>{s.num} — {s.title}</div>
        </div>
        <span style={{ color: C.coral, fontSize: 20, transition: 'transform 0.2s', transform: open ? 'rotate(45deg)' : 'none', flexShrink: 0 }}>+</span>
      </button>
      {open && (
        <div style={{ padding: '0 28px 28px', background: '#1A1A1A' }}>
          <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 16, color: C.sec, lineHeight: 1.75, marginBottom: 20 }}>{s.desc}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {s.tags.map(tag => (
              <span key={tag} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 12, color: C.coral, background: 'rgba(252,100,102,0.1)', border: '1px solid rgba(252,100,102,0.2)', padding: '5px 12px', borderRadius: 20 }}>{tag}</span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { Servicos, ServiceRow });