// WebbIA™ Tech — Produto, Sobre, Contato pages
// WebbIA Core: Start · Convert · Growth · Digital · Intel Flow

// ============================================================
// SUBPRODUTO MOCKS
// ============================================================

const ChatCRMMock = () => {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 5), 1800);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="sub-mock sub-mock-chat" aria-hidden="true">
      <div className="mock-chat card card-glow">
        <div className="mock-chat-header">
          <Icon name="whats" size={14} />
          <span>WhatsApp · Lead 14:32</span>
          <span className="mock-status"><span className="mock-status-dot"></span>IA ativa</span>
        </div>
        <div className="mock-bubbles">
          <div className={`bubble bubble-them ${step >= 0 ? 'in' : ''}`}>Olá, queria mais informações</div>
          <div className={`bubble bubble-us ${step >= 1 ? 'in' : ''}`}>Oi! Posso ajudar. Qual seu interesse?</div>
          <div className={`bubble bubble-them ${step >= 2 ? 'in' : ''}`}>Plano corporativo, 30 pessoas</div>
          <div className={`bubble bubble-us ${step >= 3 ? 'in' : ''}`}>Perfeito. Tenho horários quinta 10h ou sexta 15h. Qual prefere?</div>
        </div>
      </div>
      <svg className="mock-connector" viewBox="0 0 200 200" aria-hidden="true">
        <defs>
          <linearGradient id="ccGrad" x1="0" x2="1">
            <stop offset="0%" stopColor="#5B4BCC" stopOpacity="0"/>
            <stop offset="40%" stopColor="#7C6EE0" stopOpacity="0.8"/>
            <stop offset="100%" stopColor="#22D3A0" stopOpacity="0.9"/>
          </linearGradient>
        </defs>
        <path d="M10 30 C 80 30, 100 130, 190 170" stroke="url(#ccGrad)" strokeWidth="1.5" fill="none" strokeDasharray="4 4"/>
      </svg>
      <div className="mock-crm card">
        <div className="mock-crm-header">
          <span className="eyebrow"><span className="dot"></span>CRM · Lead qualificado</span>
        </div>
        <div className="mock-crm-row">
          <div className="mock-avatar">M</div>
          <div>
            <div style={{ fontWeight: 500, fontSize: 15 }}>Maria S.</div>
            <div className="muted" style={{ fontSize: 12 }}>Plano Corporativo · 30 pessoas</div>
          </div>
        </div>
        <div className="mock-stage">
          <div className="mock-stage-row"><span>Status</span><span className="pill pill-success">Pronto p/ fechar</span></div>
          <div className="mock-stage-row"><span>Horário</span><span>Quinta · 10:00</span></div>
          <div className="mock-stage-row"><span>1º contato</span><span>1m 22s</span></div>
        </div>
        <div className="mock-bar"><div className="mock-bar-fill" style={{ width: '78%' }}></div></div>
        <div className="mock-meta">
          <span className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)' }}>SCORE</span>
          <span style={{ color: 'var(--accent-success)', fontWeight: 600, fontSize: 14 }}>78 / alto</span>
        </div>
      </div>
    </div>
  );
};

// N8N flow visualization — operational automation (Start Flow)
const N8NFlowMock = () => {
  const flows = [
    {
      title: 'Triagem automatizada',
      icon: 'mail',
      nodes: [
        { label: 'Entrada', icon: 'mail' },
        { label: 'IA classifica', icon: 'spark' },
        { label: 'Encaminha', icon: 'check' },
      ],
      time: 'classifica · prioriza',
    },
    {
      title: 'Rotinas internas',
      icon: 'clock',
      nodes: [
        { label: 'Gatilho', icon: 'clock' },
        { label: 'Fluxo', icon: 'spark' },
        { label: 'Executa', icon: 'rocket' },
      ],
      time: 'roda 24/7',
    },
    {
      title: 'Integrações',
      icon: 'flow',
      nodes: [
        { label: 'CRM', icon: 'crm' },
        { label: 'WhatsApp', icon: 'whats' },
        { label: 'Planilhas', icon: 'arrow-right' },
      ],
      time: 'sem retrabalho manual',
    },
  ];
  return (
    <div className="n8n-flows" aria-hidden="true">
      {flows.map((f, i) => (
        <div key={i} className="n8n-flow card" style={{ animationDelay: `${i * 200}ms` }}>
          <div className="n8n-flow-head">
            <div className="n8n-flow-icon"><Icon name={f.icon} size={14}/></div>
            <div>
              <div style={{ fontWeight: 500, fontSize: 14 }}>{f.title}</div>
              <div className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 2 }}>{f.time}</div>
            </div>
          </div>
          <div className="n8n-flow-rail">
            {f.nodes.map((n, j) => (
              <React.Fragment key={j}>
                <div className="n8n-node" style={{ animationDelay: `${i * 200 + j * 300}ms` }}>
                  <div className="n8n-node-dot"><Icon name={n.icon} size={10}/></div>
                  <span>{n.label}</span>
                </div>
                {j < f.nodes.length - 1 && (
                  <div className="n8n-edge">
                    <span className="n8n-pulse" style={{ animationDelay: `${i * 200 + j * 300}ms` }}></span>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

// Growth Flow mock — auditoria recorrente / otimização contínua
const GrowthMock = () => {
  return (
    <div className="consult-mock" aria-hidden="true">
      <div className="consult-radar">
        <div className="consult-ring"></div>
        <div className="consult-ring consult-ring-2"></div>
        <div className="consult-ring consult-ring-3"></div>
        <div className="consult-center">
          <Icon name="trend" size={20}/>
        </div>
        <div className="consult-pin consult-pin-1">
          <div className="consult-pin-dot"></div>
          <div className="consult-pin-label">Funil</div>
        </div>
        <div className="consult-pin consult-pin-2">
          <div className="consult-pin-dot"></div>
          <div className="consult-pin-label">Conversão</div>
        </div>
        <div className="consult-pin consult-pin-3">
          <div className="consult-pin-dot"></div>
          <div className="consult-pin-label">Retenção</div>
        </div>
        <div className="consult-pin consult-pin-4">
          <div className="consult-pin-dot"></div>
          <div className="consult-pin-label">Recuperação</div>
        </div>
      </div>
      <div className="consult-report card">
        <div className="eyebrow" style={{ marginBottom: 12 }}><span className="dot"></span>Auditoria · ciclo 03</div>
        <div className="consult-report-row">
          <span className="muted">Etapas otimizadas</span>
          <span className="pill pill-success">+5</span>
        </div>
        <div className="consult-report-row">
          <span className="muted">Lift de conversão</span>
          <span style={{ color: 'var(--accent-success)' }}>+34%</span>
        </div>
        <div className="consult-report-row">
          <span className="muted">Roadmap</span>
          <span className="brand" style={{ fontWeight: 500 }}>3 frentes ativas</span>
        </div>
        <div className="consult-report-row">
          <span className="muted">Receita recuperada</span>
          <span style={{ color: 'var(--accent-success)' }}>R$ 84k</span>
        </div>
      </div>
    </div>
  );
};

// Digital Flow mock — site/landing page premium
const DigitalMock = () => {
  return (
    <div className="digital-mock" aria-hidden="true">
      <div className="digital-window card card-glow">
        <div className="digital-bar">
          <span className="digital-dot" style={{ background: '#FF5F57' }}></span>
          <span className="digital-dot" style={{ background: '#FEBC2E' }}></span>
          <span className="digital-dot" style={{ background: '#28C840' }}></span>
          <span className="digital-url">
            <Icon name="globe" size={11}/> webbiatech.com.br
          </span>
        </div>
        <div className="digital-page">
          <div className="digital-nav">
            <span className="digital-logo"></span>
            <span className="digital-navlinks">
              <span></span><span></span><span></span>
            </span>
          </div>
          <div className="digital-hero">
            <div className="digital-eyebrow"></div>
            <div className="digital-title"></div>
            <div className="digital-title digital-title-2"></div>
            <div className="digital-sub"></div>
            <div className="digital-cta"></div>
          </div>
          <div className="digital-grid">
            <div className="digital-card"><div></div><div></div></div>
            <div className="digital-card"><div></div><div></div></div>
            <div className="digital-card"><div></div><div></div></div>
          </div>
        </div>
      </div>
      <div className="digital-stats card">
        <div className="eyebrow" style={{ marginBottom: 12 }}><span className="dot"></span>Performance · 30 dias</div>
        <div className="digital-stat-row">
          <div>
            <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Page Speed</div>
            <div style={{ fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 4, color: 'var(--accent-success)' }}>98<span style={{ fontSize: 14, color: 'var(--text-muted)' }}>/100</span></div>
          </div>
          <div>
            <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Conversão</div>
            <div style={{ fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 4 }}>4.8<span style={{ fontSize: 14, color: 'var(--text-muted)' }}>%</span></div>
          </div>
        </div>
        <div className="digital-bar-mini"><div className="digital-bar-fill"></div></div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)' }}>
          <span>UPTIME 99.9%</span>
          <span>SSL · ANALYTICS</span>
        </div>
      </div>
    </div>
  );
};

// Intel Flow mock — BI dashboard premium
const IntelMock = () => {
  const bars = [38, 52, 44, 67, 58, 79, 71, 88];
  return (
    <div className="intel-mock" aria-hidden="true">
      <div className="intel-dash card card-glow">
        <div className="intel-head">
          <div>
            <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Executive dashboard</div>
            <div style={{ fontSize: 16, fontWeight: 500, marginTop: 4 }}>Receita por canal</div>
          </div>
          <span className="pill pill-success">ao vivo</span>
        </div>
        <div className="intel-kpis">
          <div className="intel-kpi">
            <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>MRR</div>
            <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 2 }}>R$ 184k</div>
            <div style={{ fontSize: 11, color: 'var(--accent-success)', marginTop: 2 }}>+18% MoM</div>
          </div>
          <div className="intel-kpi">
            <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>CAC</div>
            <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 2 }}>R$ 312</div>
            <div style={{ fontSize: 11, color: 'var(--accent-success)', marginTop: 2 }}>−9%</div>
          </div>
          <div className="intel-kpi">
            <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>LTV</div>
            <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 2 }}>R$ 4.2k</div>
            <div style={{ fontSize: 11, color: 'var(--accent-success)', marginTop: 2 }}>+12%</div>
          </div>
        </div>
        <div className="intel-chart">
          {bars.map((h, i) => (
            <div key={i} className="intel-bar" style={{ height: `${h}%`, animationDelay: `${i * 80}ms` }}></div>
          ))}
        </div>
      </div>
      <div className="intel-insight card">
        <div className="eyebrow" style={{ marginBottom: 10 }}><span className="dot"></span>Insight executivo</div>
        <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
          O canal <span className="brand" style={{ fontWeight: 500 }}>WhatsApp + IA</span> superou tráfego pago em receita pelo segundo mês. Recomendação: realocar 30% do budget de mídia.
        </div>
        <div className="intel-meta">
          <span className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Confiança</span>
          <span style={{ color: 'var(--accent-success)', fontSize: 12, fontWeight: 500 }}>92%</span>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// WEBBIA CORE — 5 produtos
// Ordem de exibição: Convert · Digital · Start · Growth · Intel
// ============================================================

const SUBPRODUTOS = [
  {
    id: 'convert-flow',
    name: 'Convert Flow',
    category: 'CRM Performance System',
    journey: '02 · Converter',
    tagline: 'Sistema inteligente de estruturação comercial',
    slogan: 'Transforma CRM em máquina de conversão previsível. Lead que entra é lead que vira reunião — com pipeline organizado, scoring automatizado e follow-up sem buraco.',
    color: 'var(--brand-light)',
    icon: 'flow',
    badge: 'Carro-chefe',
    Mock: ChatCRMMock,
    bullets: [
      { icon: 'crm',   title: 'Estruturação de CRM', body: 'Pipeline, etapas e regras desenhados para a realidade da sua operação — não um template genérico.' },
      { icon: 'whats', title: 'Automação comercial', body: 'Follow-up automático, distribuição de leads e alertas em tempo real para o time não perder prazo.' },
      { icon: 'spark', title: 'Lead intelligence', body: 'Scoring, segmentação e priorização — o time foca em quem está pronto para fechar.' },
      { icon: 'trend', title: 'Performance comercial', body: 'Indicadores por etapa, gargalos visíveis e taxa de conversão acompanhada toda semana.' },
    ],
    audience: 'Imobiliárias · Clínicas · Consultorias · Educação · Vendas complexas',
    caseEx: { sit: 'Empresa recebe 100 mensagens no WhatsApp por dia', sol: 'IA responde, separa quem tem interesse real e agenda reunião — vendedor entra só para fechar.' },
    prazo: 'Entrega em 10 dias',
    valueAnchor: {
      tone: 'light',
      pre: 'Empresas que automatizam a qualificação no WhatsApp ',
      hl: 'triplicam a taxa de fechamento',
      post: ' — com a mesma equipe.',
    },
    recebe: [
      { t: 'Agente de IA no WhatsApp', d: 'responde em menos de 2 min, 24/7' },
      { t: 'Qualificação automática',  d: 'modelo BANT, 4 a 6 perguntas' },
      { t: 'Lead scoring',             d: 'classifica em quente, morno e frio' },
      { t: 'Integração com CRM',       d: 'lead entra organizado, com histórico' },
      { t: 'Agendamento automático',   d: 'sem depender de humano' },
    ],
    cta: 'Diagnóstico de 20 min — sem custo',
    pricing: {
      setup: { label: 'Setup único', value: 'R$ 1.990' },
      tiers: [
        { name: 'Start',   price: 'R$ 590',   period: '/mês' },
        { name: 'Pro',     price: 'R$ 1.190', period: '/mês', featured: true },
        { name: 'Scale',   price: 'R$ 2.190', period: '/mês' },
      ],
    },
  },
  {
    id: 'digital-flow',
    name: 'Digital Flow',
    category: 'Digital Presence System',
    journey: '04 · Posicionar',
    tagline: 'Construção e evolução de presença digital',
    slogan: 'Site, landing pages e infraestrutura digital com padrão premium — feitos para converter, não só para parecer bonito.',
    color: 'var(--accent-success)',
    icon: 'globe',
    badge: 'Entrada',
    Mock: DigitalMock,
    bullets: [
      { icon: 'globe', title: 'Estruturas digitais', body: 'Sites, landing pages e páginas comerciais desenhadas como ativo de conversão.' },
      { icon: 'flow',  title: 'Infraestrutura premium', body: 'Hospedagem, domínio, SSL e performance cuidados pela WebbIA — você não precisa pensar nisso.' },
      { icon: 'trend', title: 'Analytics aplicado', body: 'Monitoramento, eventos e insights mensais que viram melhoria — não só relatório bonito.' },
      { icon: 'rocket', title: 'Estrutura de conversão', body: 'CTAs, captação e jornada de página pensados para virar lead qualificado no CRM.' },
    ],
    audience: 'Todo negócio com necessidade de presença digital',
    caseEx: { sit: 'Pequena empresa só tem Instagram e perde lead por falta de site', sol: 'Landing page convertendo + analytics aplicado e CTA pensado para virar lead no CRM.' },
    prazo: 'No ar em 5-7 dias',
    valueAnchor: {
      tone: 'light',
      pre: '',
      hl: '80% dos acessos são pelo celular',
      post: ' — e o visitante decide em segundos.',
    },
    recebe: [
      { t: 'Landing/site de conversão', d: 'headline, prova social, objeções, CTA' },
      { t: 'Copy persuasiva',           d: 'texto orientado a resultado' },
      { t: 'Formulário otimizado',      d: 'poucos campos, validação, LGPD' },
      { t: 'Mobile-first',              d: 'carregamento rápido' },
      { t: 'Integração WhatsApp/CRM',   d: 'lead cai direto no atendimento' },
      { t: 'Rastreamento',              d: 'tags, pixels e eventos' },
      { t: 'SEO básico',                d: 'para ser encontrado no Google' },
    ],
    cta: 'Diagnóstico de 20 min — sem custo',
    pricing: {
      setup: { label: 'Projeto', value: 'a partir de R$ 1.790' },
      tiers: [
        { name: 'Start',       price: 'R$ 1.790', period: 'projeto' },
        { name: 'Business',    price: 'R$ 3.490', period: 'projeto', featured: true },
        { name: 'Performance', price: 'R$ 5.790', period: 'projeto' },
      ],
      recurring: [
        { name: 'Site Care',  price: 'R$ 347/mês' },
        { name: 'Growth Web', price: 'R$ 690/mês' },
      ],
    },
  },
  {
    id: 'start-flow',
    name: 'Start Flow',
    category: 'Operational Automation System',
    journey: '01 · Organizar',
    tagline: 'Sistema de automação operacional inteligente',
    slogan: 'Estrutura a operação por baixo. Elimina retrabalho, reduz dependência de processo manual e prepara o terreno para escalar.',
    color: 'var(--brand-glow)',
    icon: 'spark',
    Mock: N8NFlowMock,
    bullets: [
      { icon: 'spark', title: 'Automação operacional', body: 'Fluxos inteligentes, rotinas automatizadas e processos recorrentes rodando sem ninguém precisar lembrar.' },
      { icon: 'flow',  title: 'Integrações nativas', body: 'CRM, WhatsApp, APIs, planilhas e ferramentas internas conversando entre si — fim do copia-e-cola.' },
      { icon: 'trend', title: 'Triagem automatizada', body: 'Classificação, encaminhamento e priorização sem precisar de gente no meio.' },
      { icon: 'check', title: 'Evolução contínua', body: 'Ajustes, refinamentos e melhorias mensais — a operação fica melhor mês a mês.' },
    ],
    audience: 'Clínicas · Escritórios · Imobiliárias · Consultorias · Pequenas operações estruturadas',
    caseEx: { sit: 'Clínica esquece de confirmar consultas e a falta dispara', sol: 'IA envia confirmação automática no horário certo — falta cai junto.' },
    prazo: 'Entrega em 10 dias',
    valueAnchor: {
      tone: 'light',
      pre: 'Funil automatizado elimina retrabalho, corta erro humano e cria ',
      hl: 'histórico confiável para decidir',
      post: '.',
    },
    recebe: [
      { t: 'Mapeamento do processo atual', d: 'como o negócio funciona hoje' },
      { t: 'Desenho do funil comercial',   d: 'etapas e critérios claros' },
      { t: 'Implementação de CRM',         d: 'configurado e padronizado' },
      { t: 'Automação de rotinas',         d: 'follow-up, lembretes, registro' },
      { t: 'Treinamento da operação',      d: 'time operando com consistência' },
    ],
    cta: 'Diagnóstico de 20 min — sem custo',
    pricing: {
      setup: { label: 'Setup único', value: 'R$ 1.790' },
      tiers: [
        { name: 'Basic',   price: 'R$ 457',   period: '/mês' },
        { name: 'Pro',     price: 'R$ 907',   period: '/mês', featured: true },
        { name: 'Premium', price: 'R$ 1.790', period: '/mês' },
      ],
    },
  },
  {
    id: 'growth-flow',
    name: 'Growth Flow',
    category: 'Revenue Acceleration System',
    journey: '03 · Escalar',
    tagline: 'Camada estratégica de evolução comercial',
    slogan: 'Para quem já tem CRM e quer extrair mais. Auditoria recorrente, otimização contínua e roadmap de crescimento orientado por dados.',
    color: 'var(--brand-light)',
    icon: 'trend',
    badge: 'Upsell',
    Mock: GrowthMock,
    bullets: [
      { icon: 'spark',  title: 'Auditoria recorrente', body: 'Análise comercial e revisão de funil em ciclos curtos — ninguém deixa o sistema ficar velho.' },
      { icon: 'trend',  title: 'Otimização contínua', body: 'Ajustes, refinamentos e melhorias mês a mês para ganho composto em conversão.' },
      { icon: 'rocket', title: 'Estratégia de receita', body: 'Frentes de conversão, retenção e recuperação trabalhadas em paralelo.' },
      { icon: 'flow',   title: 'Roadmap evolutivo', body: 'Plano de evolução estruturado por trimestre — com hipóteses, prioridade e ROI esperado.' },
    ],
    audience: 'Empresas que já possuem CRM rodando',
    caseEx: { sit: 'Time de vendas com CRM, mas atolado em leads sem priorizar', sol: 'IA pontua quem tem mais chance de comprar e avisa o vendedor no momento certo.' },
    prazo: 'Entrega em 10 dias',
    valueAnchor: {
      tone: 'success',
      pre: 'Empresas em crescimento perdem em média ',
      hl: '27% da receita potencial',
      post: ' por ineficiências não mapeadas.',
    },
    recebe: [
      { t: 'Auditoria do funil',        d: 'onde o cliente entra, esfria e abandona' },
      { t: 'Auditoria de CRM e dados',  d: 'o que você mede e o que está cego' },
      { t: 'Entrevista de imersão',     d: 'mapeamento do processo real' },
      { t: 'Benchmark do setor',        d: 'como referências operam' },
      { t: 'Relatório de causas-raiz',  d: 'gargalos + impacto financeiro' },
      { t: 'Roadmap trimestral',        d: 'ações priorizadas por ROI' },
    ],
    distinction: true,
    cta: 'Diagnóstico de 20 min — sem custo',
    pricing: {
      setup: { label: 'Diagnóstico inicial', value: 'R$ 2.490' },
      tiers: [
        { name: 'Core',  price: 'R$ 1.790', period: '/mês' },
        { name: 'Scale', price: 'R$ 3.490', period: '/mês', featured: true },
        { name: 'Elite', price: 'R$ 5.790', period: '/mês' },
      ],
    },
  },
  {
    id: 'intel-flow',
    name: 'Intel Flow',
    category: 'Business Intelligence System',
    journey: '05 · Otimizar',
    tagline: 'Sistema estratégico orientado por dados',
    slogan: 'Transforma informação em decisão executiva. Dashboards vivos, KPIs reais e recomendações com nível de consultoria estratégica.',
    color: 'var(--accent-success)',
    icon: 'star',
    badge: 'Premium',
    Mock: IntelMock,
    bullets: [
      { icon: 'spark',  title: 'Diagnóstico 360º', body: 'Operação, vendas e atendimento mapeados juntos — com o ponto de vista do C-level.' },
      { icon: 'trend',  title: 'Dashboards executivos', body: 'KPIs e indicadores vivos em painel único — decisão com número, não com achismo.' },
      { icon: 'rocket', title: 'Insights acionáveis', body: 'Recomendações, correções e oportunidades — não relatórios para arquivar.' },
      { icon: 'crm',    title: 'Consultoria contínua', body: 'Acompanhamento e evolução analítica com cadência executiva.' },
    ],
    audience: 'Empresas com operação consolidada',
    caseEx: { sit: 'Agência perde horas montando relatórios manuais', sol: 'Google Ads, Meta e planilhas conectados — relatório executivo nasce pronto.' },
    prazo: 'Entrega em 10 dias',
    valueAnchor: {
      tone: 'light',
      pre: 'Sem dados conectados, decisão vira achismo. ',
      hl: 'Intel Flow transforma número em evidência',
      post: '.',
    },
    recebe: [
      { t: 'Auditoria de dados',     d: 'fontes, fragmentação, o que não é medido' },
      { t: 'Definição de KPIs',      d: 'métricas que importam por área' },
      { t: 'Arquitetura do painel',  d: 'desenho do dashboard' },
      { t: 'Dashboard inicial',      d: 'Looker Studio ou Power BI' },
      { t: 'Relatório de leitura',   d: 'o que os números dizem' },
      { t: 'Rituais de análise',     d: 'cadência de revisão definida' },
    ],
    distinction: true,
    cta: 'Diagnóstico de 20 min — sem custo',
    pricing: {
      setup: { label: 'Diagnóstico inicial', value: 'R$ 3.490' },
      tiers: [
        { name: 'Insight',   price: 'R$ 1.790', period: '/mês' },
        { name: 'Growth',    price: 'R$ 3.490', period: '/mês', featured: true },
        { name: 'Executive', price: 'R$ 6.790', period: '/mês' },
      ],
    },
  },
];

// ============================================================
// PRODUTO PAGE
// ============================================================

const ProdutoPage = () => {
  useReveal();
  return (
    <>
      <section className="section section-tight" style={{ paddingTop: 100 }}>
        <div className="container" style={{ maxWidth: 980 }}>
          <div className="eyebrow reveal"><span className="dot"></span>WebbIA Core · 5 sistemas conectados</div>
          <h1 className="reveal" style={{ '--reveal-delay': '80ms', marginTop: 22 }}>
            Cinco sistemas. <span className="serif brand">Um ecossistema</span><br/>de evolução empresarial.
          </h1>
          <p className="muted reveal" style={{ '--reveal-delay': '160ms', fontSize: 19, maxWidth: 720, marginTop: 28, lineHeight: 1.6 }}>
            A WebbIA não vende serviços isolados. Entrega sistemas proprietários que organizam, convertem, escalam, posicionam e otimizam o seu negócio — em camadas que se conectam e evoluem com a operação.
          </p>

          {/* Journey strip — clicável, leva para o produto correspondente */}
          <div className="journey-strip reveal" style={{ '--reveal-delay': '220ms' }}>
            {[
              { num: '01', verb: 'Organizar', prod: 'Start Flow',   id: 'start-flow'   },
              { num: '02', verb: 'Converter', prod: 'Convert Flow', id: 'convert-flow' },
              { num: '03', verb: 'Escalar',   prod: 'Growth Flow',  id: 'growth-flow'  },
              { num: '04', verb: 'Posicionar', prod: 'Digital Flow', id: 'digital-flow' },
              { num: '05', verb: 'Otimizar',  prod: 'Intel Flow',   id: 'intel-flow'   },
            ].map((s, i, arr) => (
              <React.Fragment key={s.num}>
                <a
                  href={`#prod-${s.id}`}
                  className="journey-step"
                  onClick={(e) => {
                    e.preventDefault();
                    document.getElementById(`prod-${s.id}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }}
                >
                  <span className="journey-num">{s.num}</span>
                  <div className="journey-verb">{s.verb}</div>
                  <div className="journey-prod">{s.prod}</div>
                </a>
                {i < arr.length - 1 && <span className="journey-arrow">→</span>}
              </React.Fragment>
            ))}
          </div>

          {/* sub-nav removido — redundante com journey-strip */}
        </div>
      </section>

      {SUBPRODUTOS.map((s, i) => (
        <SubprodutoBlock key={s.id} sub={s} index={i} />
      ))}

      <section className="section">
        <div className="container">
          <div className="cta-block reveal">
            <div className="cta-glow" aria-hidden="true"></div>
            <div style={{ position: 'relative', zIndex: 2 }}>
              <div className="eyebrow" style={{ justifyContent: 'center' }}>
                <span className="dot"></span>Core completo
              </div>
              <h2 style={{ marginTop: 18, textAlign: 'center', maxWidth: 780, margin: '18px auto 0' }}>
                Estruture. Automatize. <span className="serif brand">Escale.</span>
              </h2>
              <p className="muted" style={{ textAlign: 'center', fontSize: 17, marginTop: 18, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
                Comece pelo Convert ou Digital Flow. Evolua para Growth e Intel quando a operação pedir.
              </p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-cta" onClick={() => window.navigate('contato')}>
                  <Icon name="rocket" size={14}/> Diagnóstico gratuito
                </button>
                <button className="btn btn-ghost" onClick={() => window.navigate('home')}>
                  Voltar ao início <Icon name="arrow-right" size={14}/>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

const SubprodutoBlock = ({ sub, index }) => {
  // Standardizado: todos os blocos começam pelo nome do produto (esquerda)
  // e terminam no valor/pricing (direita).
  const reverse = false;
  return (
    <section className="section sub-block" id={`prod-${sub.id}`} style={{ '--sub-color': sub.color }}>
      <div className="container">
       <div className="sub-card reveal">
        <div className={`sub-grid ${reverse ? 'sub-grid-rev' : ''}`}>
          <div className="sub-copy">
            <div className="sub-num-row">
              <span className="sub-num">0{index+1}</span>
              <span className="sub-journey">{sub.journey}</span>
              {sub.badge && <span className="sub-badge">{sub.badge}</span>}
              {sub.prazo && (
                <span className="sub-prazo"><Icon name="clock" size={13}/>{sub.prazo}</span>
              )}
            </div>
            <div className="eyebrow" style={{ marginTop: 12 }}><span className="dot"></span>{sub.category}</div>
            <h2 style={{ marginTop: 8 }}>WebbIA <span className="serif" style={{ color: sub.color }}>{sub.name}</span></h2>
            <p style={{ marginTop: 8, fontSize: 14, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em', color: 'var(--text-secondary)' }}>
              {sub.tagline}
            </p>
            <p className="muted" style={{ marginTop: 14, fontSize: 15.5, lineHeight: 1.55, maxWidth: 500 }}>{sub.slogan}</p>

            {sub.valueAnchor && (
              <div
                className="sub-anchor"
                style={{ '--anchor-color': sub.valueAnchor.tone === 'success' ? 'var(--accent-success)' : 'var(--brand-light)' }}
              >
                <p>{sub.valueAnchor.pre}<span className="sub-anchor-hl">{sub.valueAnchor.hl}</span>{sub.valueAnchor.post}</p>
              </div>
            )}

            <div className="sub-bullets">
              {sub.bullets.map((b, j) => (
                <div key={j} className="sub-bullet">
                  <div className="sub-bullet-icon" style={{ borderColor: sub.color + '40', color: sub.color }}>
                    <Icon name={b.icon} size={16}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 15 }}>{b.title}</div>
                    <div className="muted" style={{ fontSize: 13.5, lineHeight: 1.45, marginTop: 3 }}>{b.body}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="sub-audience">
              <span className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Público ideal</span>
              <span style={{ fontSize: 14, color: 'var(--text-secondary)' }}>{sub.audience}</span>
            </div>

            {sub.caseEx && (
              <div className="sub-case">
                <span className="sub-case-label">Caso real</span>
                <div className="sub-case-sit">{sub.caseEx.sit}</div>
                <div className="sub-case-arrow">→</div>
                <div className="sub-case-sol">{sub.caseEx.sol}</div>
              </div>
            )}
          </div>

          <div className="sub-visual-wrap" style={{ '--reveal-delay': '160ms' }}>
            <div className="sub-visual">
              <sub.Mock />
            </div>
            {sub.pricing && <SubPricing pricing={sub.pricing} color={sub.color} />}
          </div>
        </div>

        {sub.recebe && (
          <div className="recebe-panel">
            <div className="recebe-head">
              <div className="eyebrow"><span className="dot"></span>O que você recebe</div>
            </div>
            <div className="recebe-grid">
              {sub.recebe.map((r, j) => (
                <div key={j} className="recebe-item">
                  <span className="recebe-check"><Icon name="check" size={12}/></span>
                  <div>
                    <span className="recebe-t">{r.t}</span>
                    <span className="recebe-d"> — {r.d}</span>
                  </div>
                </div>
              ))}
            </div>
            {sub.distinction && (
              <div className="sub-distinction">
                <span><span className="sub-distinction-q">Quer crescer receita?</span> <span className="sub-distinction-arrow">→</span> <span style={{ color: 'var(--brand-light)', fontWeight: 500 }}>Growth Flow</span></span>
                <span><span className="sub-distinction-q">Já tem dados e quer enxergar?</span> <span className="sub-distinction-arrow">→</span> <span style={{ color: 'var(--accent-success)', fontWeight: 500 }}>Intel Flow</span></span>
              </div>
            )}
            <div className="recebe-cta">
              <button className="btn btn-primary" onClick={() => window.navigate('contato')}>
                {sub.cta} <Icon name="arrow-up-right" size={14}/>
              </button>
            </div>
          </div>
        )}
       </div>
      </div>
    </section>
  );
};

const SubPricing = ({ pricing, color }) => {
  return (
    <div className="sub-pricing card" style={{ '--sub-color': color }}>
      <div className="sub-pricing-head">
        <div>
          <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>{pricing.setup.label}</div>
          <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 4, color: color }}>{pricing.setup.value}</div>
        </div>
        <div className="sub-pricing-sep"></div>
      </div>
      <div className="sub-pricing-tiers">
        {pricing.tiers.map((t, i) => (
          <div key={i} className={`sub-tier ${t.featured ? 'is-featured' : ''}`}>
            {t.featured && <span className="sub-tier-badge">Recomendado</span>}
            <div className="sub-tier-name">{t.name}</div>
            <div className="sub-tier-price">{t.price}<span className="sub-tier-period">{t.period}</span></div>
          </div>
        ))}
      </div>
      {pricing.recurring && (
        <div className="sub-pricing-recurring">
          <div className="muted" style={{ fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8 }}>Recorrência opcional</div>
          {pricing.recurring.map((r, i) => (
            <div key={i} className="sub-recurring-row">
              <span>{r.name}</span>
              <span style={{ color: 'var(--text-primary)', fontWeight: 500 }}>{r.price}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ============================================================
// SOBRE
// ============================================================

const SobrePage = () => {
  useReveal();
  return (
    <>
      <section className="section section-tight" style={{ paddingTop: 100 }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="eyebrow reveal"><span className="dot"></span>Sobre a WebbIA™ Tech</div>
          <h1 className="reveal" style={{ '--reveal-delay': '80ms', marginTop: 22 }}>
            Inteligência aplicada ao <span className="serif brand">crescimento</span>.
          </h1>
          <p className="muted reveal" style={{ '--reveal-delay': '160ms', fontSize: 19, maxWidth: 720, marginTop: 28, lineHeight: 1.6 }}>
            A WebbIA é uma empresa de transformação operacional e aceleração digital orientada por inteligência aplicada. Estruturamos negócios através de automação, inteligência operacional, presença digital, CRM estratégico e dados aplicados — em sistemas proprietários que evoluem junto com a operação.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="about-grid">
            <div className="card card-glow reveal">
              <div className="eyebrow"><span className="dot"></span>Proposta de valor</div>
              <h3 style={{ marginTop: 14 }}>Operações desorganizadas viram sistemas previsíveis.</h3>
              <p className="muted" style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6 }}>
                Transformamos operações desorganizadas em sistemas inteligentes, previsíveis e escaláveis. Não vendemos serviços isolados — entregamos camadas que se conectam.
              </p>
            </div>
            <div className="card reveal" style={{ '--reveal-delay': '100ms' }}>
              <div className="eyebrow"><span className="dot"></span>Diferencial</div>
              <h3 style={{ marginTop: 14 }}>Estratégia, tecnologia, performance e escalabilidade.</h3>
              <p className="muted" style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6 }}>
                Diagnóstico de negócio + automação e integração + conversão e otimização + evolução contínua orientada por dados. Quatro frentes em uma única casa.
              </p>
            </div>
            <div className="card reveal" style={{ '--reveal-delay': '200ms' }}>
              <div className="eyebrow"><span className="dot"></span>Para quem</div>
              <h3 style={{ marginTop: 14 }}>Negócios que querem escalar com previsibilidade.</h3>
              <p className="muted" style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6 }}>
                Imobiliárias, clínicas, consultorias, educação, escritórios e operações médias que precisam de estrutura — não de mais ferramentas soltas.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* PILLARS — Diagnóstico · Automação · Resultado */}
      <section className="section pillars-section">
        <div className="container">
          <div className="pillars-head reveal">
            <div className="pillars-eyebrow"><span className="pillars-dot"></span>OS TRÊS PILARES</div>
            <h2 className="pillars-h2">Três pilares. <span className="pillars-h2-soft">Uma operação.</span></h2>
          </div>
          <div className="pillars-grid">
            {[
              { num: '01', icon: 'spark', title: 'Diagnóstico', body: 'Inteligência de negócio antes de qualquer automação.' },
              { num: '02', icon: 'cpu',   title: 'Automação',   body: 'Sistemas integrados que evoluem com a operação.' },
              { num: '03', icon: 'trend', title: 'Resultado',   body: 'Receita medida, não estimada.' },
            ].map((p, i) => (
              <div key={p.num} className="pillar-card reveal" style={{ '--reveal-delay': `${i * 100}ms` }}>
                <div className="pillar-icon"><Icon name={p.icon} size={22}/></div>
                <div className="pillar-num">{p.num}</div>
                <h3 className="pillar-title">{p.title}</h3>
                <p className="pillar-body">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="numbers-strip reveal">
            <div><div className="num-value serif">2026</div><div className="num-label">ano de fundação</div></div>
            <div><div className="num-value serif">5</div><div className="num-label">sistemas no Core</div></div>
            <div><div className="num-value serif">10d</div><div className="num-label">do contrato à operação</div></div>
            <div><div className="num-value serif">24/7</div><div className="num-label">a IA não dorme</div></div>
          </div>
        </div>
      </section>
    </>
  );
};

// ============================================================
// CONTATO
// ============================================================

const ContatoPage = () => {
  useReveal();
  const [form, setForm] = React.useState({ nome: '', empresa: '', telefone: '', interesse: 'Convert Flow', mensagem: '' });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    const msg =
      `Olá! Gostaria de solicitar um diagnóstico gratuito com a WebbIA.\n\n` +
      `*Nome:* ${form.nome}\n` +
      `*Empresa:* ${form.empresa}\n` +
      `*WhatsApp:* ${form.telefone}\n` +
      `*Interesse:* ${form.interesse}\n` +
      `*Mensagem:* ${form.mensagem || 'Não informada'}`;
    window.open(`https://wa.me/5511979901764?text=${encodeURIComponent(msg)}`, '_blank');
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };
  return (
    <section className="section section-tight" style={{ paddingTop: 80 }}>
      <div className="container">
        <div className="contato-grid">
          <div>
            <div className="eyebrow reveal"><span className="dot"></span>Fale com a gente</div>
            <h1 className="reveal" style={{ '--reveal-delay': '80ms', marginTop: 22 }}>
              Diagnóstico <span className="serif brand">gratuito</span><br/>em 30 minutos.
            </h1>
            <p className="muted reveal" style={{ '--reveal-delay': '160ms', fontSize: 18, marginTop: 24, maxWidth: 460, lineHeight: 1.6 }}>
              Conte rapidamente sobre sua operação. Mostramos onde estão os vazamentos e qual sistema do WebbIA Core se encaixa primeiro.
            </p>
            <div style={{ marginTop: 48 }} className="contato-info">
              <a href="https://wa.me/5511979901764" className="contato-row" target="_blank" rel="noopener">
                <div className="contato-icon"><Icon name="whats" size={18}/></div>
                <div>
                  <div className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>WhatsApp direto</div>
                  <div style={{ fontSize: 17, marginTop: 4 }}>+55 11 97990-1764</div>
                </div>
                <Icon name="arrow-up-right" size={16}/>
              </a>
              <div className="contato-row">
                <div className="contato-icon"><Icon name="globe" size={18}/></div>
                <div>
                  <div className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Site</div>
                  <div style={{ fontSize: 17, marginTop: 4 }}>webbiatech.com.br</div>
                </div>
              </div>
              <div className="contato-row">
                <div className="contato-icon"><Icon name="chat" size={18}/></div>
                <div>
                  <div className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Fundador</div>
                  <div style={{ fontSize: 17, marginTop: 4 }}>Rodrigo Guimarães</div>
                </div>
              </div>
            </div>
          </div>

          <form className="card card-glow contato-form reveal" onSubmit={submit} style={{ '--reveal-delay': '180ms' }}>
            <div className="eyebrow"><span className="dot"></span>Solicitar diagnóstico</div>
            <h3 style={{ marginTop: 14, marginBottom: 24 }}>Conte sobre seu negócio</h3>

            <label className="field">
              <span>Nome</span>
              <input required value={form.nome} onChange={e => setForm({...form, nome: e.target.value})} placeholder="Seu nome completo"/>
            </label>
            <label className="field">
              <span>Empresa</span>
              <input required value={form.empresa} onChange={e => setForm({...form, empresa: e.target.value})} placeholder="Nome da empresa e segmento"/>
            </label>
            <label className="field">
              <span>WhatsApp</span>
              <input required value={form.telefone} onChange={e => setForm({...form, telefone: e.target.value})} placeholder="(11) 90000-0000"/>
            </label>
            <label className="field">
              <span>Sistema de interesse</span>
              <select value={form.interesse} onChange={e => setForm({...form, interesse: e.target.value})}>
                <option>Convert Flow — CRM Performance</option>
                <option>Digital Flow — Presença digital</option>
                <option>Start Flow — Automação operacional</option>
                <option>Growth Flow — Aceleração de receita</option>
                <option>Intel Flow — Business Intelligence</option>
                <option>Não sei ainda — quero diagnóstico</option>
              </select>
            </label>
            <label className="field">
              <span>Como podemos ajudar?</span>
              <textarea rows="4" value={form.mensagem} onChange={e => setForm({...form, mensagem: e.target.value})} placeholder="Volume mensal de leads, processos manuais, principal gargalo..."/>
            </label>

            <button className="btn btn-primary btn-cta" type="submit" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}>
              {sent ? <><Icon name="check" size={14}/> Recebido — retornamos em 24h</> : <><Icon name="rocket" size={14}/> Enviar solicitação</>}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ProdutoPage, SobrePage, ContatoPage });