// ============================================================
// SERVIÇOS + PROCESSO
// ============================================================

const PACKS = [
  {
    name: 'Setup 1',
    tier: 'Tráfego que converte',
    desc: 'Pra quem precisa começar a gerar lead todo dia, com previsibilidade.',
    items: [
      'Google Ads · pesquisa + display',
      'Landing page otimizada',
      'Pixel + conversões configurados',
      'Relatório semanal por WhatsApp',
      'Ajustes quinzenais de campanha',
    ],
    featured: false
  },
  {
    name: 'Setup 2',
    tier: 'Tráfego + remarketing',
    desc: 'Quem já tem fluxo de lead mas tá perdendo no meio do caminho.',
    items: [
      'Tudo do Setup 1',
      'Meta Ads (Instagram + Facebook)',
      'Remarketing em todas as etapas',
      'Criativos mensais com IA + design',
      'Otimização semanal',
      'Dashboard de métricas',
    ],
    featured: true,
    badge: 'Mais escolhido'
  },
  {
    name: 'Setup 3',
    tier: 'Operação inteligente',
    desc: 'Tráfego + atendimento organizado + IA 24/7 + todos os dados do negócio conectados. Você sabe o que está acontecendo sem precisar perguntar pra ninguém.',
    items: [
      'Tudo do Setup 2',
      'Kommo CRM configurado (funis prontos)',
      'IA qualificando lead automático',
      'Automações no n8n (notificações, sync, follow-up)',
      'Integração com Google Meu Negócio',
      'Dashboard semanal automático no WhatsApp',
      'Toda semana: resumo automático da operação no WhatsApp',
      'CRM + financeiro + tarefas — tudo num lugar só',
    ],
    featured: false
  }
];

function Servicos() {
  return (
    <section className="section" id="servicos" data-screen-label="03 Serviços">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 760 }}>
          <span className="eyebrow">03 · pacotes</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Três <em>caminhos</em>.<br />Um pra cada momento do seu negócio.
          </h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Começa simples, evolui conforme você cresce. Sem contrato de fidelidade, sem letra miúda.
          </p>
        </div>

        <div className="services-grid">
          {PACKS.map((p, i) => (
            <div className={`service-card reveal${p.featured ? ' featured' : ''}`} key={p.name}>
              {p.badge && <span className="badge-best">{p.badge}</span>}
              <div className="s-name">{p.name}</div>
              <div className="s-tier">{p.tier}</div>
              <p style={{
                fontSize: 14.5,
                lineHeight: 1.55,
                color: p.featured ? 'rgba(245,240,226,0.7)' : 'var(--ink-mute)',
                marginTop: 12,
                marginBottom: 24
              }}>
                {p.desc}
              </p>
              <ul className="s-list">
                {p.items.map((it, j) => <li key={j}>{it}</li>)}
              </ul>
              <a className={p.featured ? 'btn btn-outline' : 'btn btn-primary'} href="#contato">
                Conversar sobre esse setup <Icon.arrow />
              </a>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 40,
          padding: '20px 24px',
          background: 'var(--bg-elev)',
          border: '1px dashed var(--line-strong)',
          borderRadius: 'var(--radius)',
          fontSize: 14.5,
          color: 'var(--ink-mute)',
          textAlign: 'center'
        }} className="reveal">
          Não cabe em nenhum dos três?{' '}
          <a href="#contato" style={{ color: 'var(--olive-deep)', fontWeight: 500, textDecoration: 'underline', textUnderlineOffset: 3 }}>
            Conta o que você precisa
          </a>
          {' '}— a gente monta uma proposta na medida.
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  {
    n: '01',
    title: 'Diagnóstico',
    body: 'Reunião de 30min pra entender o seu negócio, o ticket, quem é o cliente e onde tá o gargalo. Saímos com um plano em texto.',
    tags: ['30min', 'Google Meet', 'sem custo']
  },
  {
    n: '02',
    title: 'Setup técnico',
    body: 'Configuramos Google Ads, Meta Ads, Kommo CRM, automações no n8n e (quando faz sentido) atendimento automatizado com IA pra qualificar lead. Tudo no nome do cliente.',
    tags: ['7-14 dias', 'tudo no seu nome', 'sem lock-in']
  },
  {
    n: '03',
    title: 'Operação',
    body: 'Ajustes semanais de campanha, otimização de criativos, follow-up automatizado. Você recebe um resumo no WhatsApp toda segunda às 9h.',
    tags: ['ajustes semanais', 'relatório seg 9h', 'WhatsApp']
  },
  {
    n: '04',
    title: 'Crescimento',
    body: 'Conforme você cresce, a gente expande: mais cidades, novos canais, novas automações. A operação acompanha o ritmo do negócio.',
    tags: ['expansão', 'novos canais', 'novas automações']
  }
];

function Processo() {
  return (
    <section className="section" id="processo" data-screen-label="04 Processo">
      <div className="container">
        <div className="reveal" style={{ maxWidth: 760 }}>
          <span className="eyebrow">04 · como trabalhamos</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Quatro etapas.<br /><em>Zero surpresa.</em>
          </h2>
        </div>

        <div className="process-list reveal">
          {STEPS.map((s) => (
            <div className="process-step" key={s.n}>
              <div className="process-num">{s.n}</div>
              <div className="process-title">{s.title}</div>
              <div className="process-body">{s.body}</div>
              <div className="process-tags">
                {s.tags.map(t => <span className="process-tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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