// WebbIA™ Tech — Home page (foco: empresa)

const HeroCompanyMock = () => {
  // WebbIA Core — 5 sistemas orbitando o núcleo
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActive((a) => (a + 1) % 5), 1800);
    return () => clearInterval(id);
  }, []);
  const nodes = [
  { label: 'Convert Flow', sub: 'CRM Performance', icon: 'flow' },
  { label: 'Digital Flow', sub: 'Presença digital', icon: 'globe' },
  { label: 'Start Flow', sub: 'Automação operacional', icon: 'spark' },
  { label: 'Growth Flow', sub: 'Aceleração de receita', icon: 'trend' },
  { label: 'Intel Flow', sub: 'Business Intelligence', icon: 'star' }];


  return (
    <div className="hero-orbit hero-orbit-5" aria-hidden="true">
      <div className="orbit-ring orbit-ring-1"></div>
      <div className="orbit-ring orbit-ring-2" style={{ height: "460px", borderRadius: "5px" }}></div>
      <div className="orbit-core">
        <div className="orbit-core-inner">
          <span className="logo-mark" style={{ width: 36, height: 36 }}></span>
          <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 14 }}>WebbIA™ Tech</div>
          <div style={{ fontSize: 14, marginTop: 4, color: 'var(--text-secondary)' }}>WebbIA Core</div>
        </div>
      </div>
      {nodes.map((n, i) =>
      <div key={i} className={`orbit-node orbit-node-${i} ${active === i ? 'is-active' : ''}`} style={{ height: "58px", justifyContent: "flex-start", flexDirection: "row", margin: "1px", alignItems: "center", width: "240px", gap: "10px", textAlign: "left", borderWidth: "1px", borderRadius: "999px", padding: "9px 14px" }}>
          <div className="orbit-node-icon"><Icon name={n.icon} size={16} /></div>
          <div>
            <div style={{ fontWeight: 500, fontSize: 14 }}>{n.label}</div>
            <div className="muted" style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{n.sub}</div>
          </div>
        </div>
      )}
    </div>);

};

const HomePage = () => {
  useReveal();
  const pillars = [
  { icon: 'spark', title: 'Estratégia + Tecnologia', body: 'Diagnóstico de negócio antes da automação. IA, integrações e CRM aplicados sobre processo desenhado, não em cima do caos.' },
  { icon: 'flow', title: 'Metodologia proprietária', body: 'Não vendemos serviços isolados. Entregamos um Core de cinco sistemas — Convert, Digital, Start, Growth e Intel Flow — que se conectam e evoluem juntos.' },
  { icon: 'trend', title: 'Performance + Escala', body: 'Conversão e otimização medidas semana a semana. Evolução contínua orientada por dados, com previsibilidade de receita.' }];

  const why = [
  { kpi: '5', label: 'sistemas conectados no WebbIA Core' },
  { kpi: '10d', label: 'do contrato à operação rodando' },
  { kpi: '24/7', label: 'inteligência aplicada que não dorme' }];


  return (
    <>
      {/* HERO */}
      <section className="section section-hero">
        <div className="container hero-grid">
          <div className="hero-copy">
            <div className="eyebrow reveal" style={{ '--reveal-delay': '0ms' }}>
              <span className="dot"></span>WebbIA™ Tech · Inteligência aplicada ao crescimento
            </div>
            <h1 className="reveal" style={{ '--reveal-delay': '80ms' }}>
              Operações desorganizadas viram <span className="serif brand">sistemas previsíveis</span>.
            </h1>
            <p className="muted reveal" style={{ '--reveal-delay': '160ms', fontSize: 18, maxWidth: 540, lineHeight: 1.6 }}>
              A WebbIA é uma empresa de transformação operacional e aceleração digital. Estruturamos negócios com automação, CRM estratégico, presença digital e dados aplicados — em sistemas proprietários que escalam com previsibilidade.
            </p>
            <div className="hero-actions reveal" style={{ '--reveal-delay': '240ms' }}>
              <button className="btn btn-primary btn-cta" onClick={() => window.navigate('produto')}>
                <Icon name="rocket" size={14} /> Conheça o WebbIA Core
              </button>
              <a className="btn btn-ghost" href="https://wa.me/5511979901764?text=Ol%C3%A1%21%20Gostaria%20de%20solicitar%20um%20diagn%C3%B3stico%20gratuito%20com%20a%20WebbIA." target="_blank" rel="noopener">
                Solicitar diagnóstico <Icon name="arrow-right" size={14} />
              </a>
            </div>
            <div className="hero-trust reveal" style={{ '--reveal-delay': '320ms' }}>
              <div className="hero-trust-item">
                <span style={{ color: 'var(--accent-success)' }}><Icon name="check" size={14} /></span>
                5 sistemas conectados
              </div>
              <div className="hero-trust-item">
                <span style={{ color: 'var(--accent-success)' }}><Icon name="check" size={14} /></span>
                Setup em 10 dias
              </div>
              <div className="hero-trust-item">
                <span style={{ color: 'var(--accent-success)' }}><Icon name="check" size={14} /></span>
                Evolução contínua
              </div>
            </div>
          </div>
          <div className="hero-visual reveal" style={{ '--reveal-delay': '300ms' }}>
            <HeroCompanyMock />
          </div>
        </div>
      </section>

      {/* WHY strip — removido (deslocado em relação ao layout) */}

      {/* JOURNEY — Jornada estratégica do cliente */}
      <section className="section">
        <div className="container">
          <div className="section-head reveal">
            <div className="eyebrow"><span className="dot"></span>Jornada estratégica</div>
            <h2>Cinco etapas. <span className="serif brand">Um ecossistema.</span></h2>
            <p className="muted" style={{ fontSize: 17 }}>Cada Flow resolve uma camada. Juntos, transformam operação em receita previsível.</p>
          </div>
          <div className="journey-cards reveal">
            {[
            { num: '01', verb: 'Organizar', prod: 'Start Flow', sub: 'Automação operacional', icon: 'spark' },
            { num: '02', verb: 'Converter', prod: 'Convert Flow', sub: 'CRM Performance', icon: 'flow', featured: true },
            { num: '03', verb: 'Escalar', prod: 'Growth Flow', sub: 'Aceleração de receita', icon: 'trend' },
            { num: '04', verb: 'Posicionar', prod: 'Digital Flow', sub: 'Presença digital', icon: 'globe' },
            { num: '05', verb: 'Otimizar', prod: 'Intel Flow', sub: 'Business Intelligence', icon: 'star' }].
            map((s, i) =>
            <div key={s.num} className={`journey-card ${s.featured ? 'is-featured' : ''}`} style={{ '--reveal-delay': `${i * 70}ms` }} onClick={() => window.navigate('produto')}>
                <div className="journey-card-num">{s.num}</div>
                <div className="journey-card-icon"><Icon name={s.icon} size={16} /></div>
                <div className="journey-card-verb">{s.verb}</div>
                <div className="journey-card-prod">WebbIA {s.prod}</div>
                <div className="journey-card-sub">{s.sub}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PILLARS movidos para a página Sobre */}

      {/* CASOS REAIS — o que automatizamos no dia a dia */}
      <section className="section">
        <div className="container">
          <div className="section-head reveal">
            <div className="eyebrow"><span className="dot"></span>O que a WebbIA faz, na prática</div>
            <h2>Processos manuais viram <span className="serif brand">automações com IA.</span></h2>
            <p className="muted" style={{ fontSize: 17 }}>Tarefas repetitivas que travam o dia da equipe — atendimento, planilhas, relatórios, qualificação — passam a rodar sozinhas. Sem teoria, sem futurismo.</p>
          </div>

          <div className="cases-grid reveal">
            {[
              { num: '01', title: 'WhatsApp',   sit: 'Empresa recebe centenas de mensagens/dia e não responde tudo',     sol: 'IA responde, qualifica e agenda reuniões sozinha.',                       icon: 'whats', product: 'Convert Flow', accent: 'var(--brand-light)' },
              { num: '02', title: 'Planilhas',  sit: 'Corretor gasta horas preenchendo planilhas manualmente',             sol: 'Sistema puxa e atualiza tudo automaticamente.',                              icon: 'flow',  product: 'Start Flow',   accent: 'var(--brand-glow)' },
              { num: '03', title: 'Clínicas',   sit: 'Clínica esquece de confirmar consultas e sofre com faltas',         sol: 'IA manda lembretes automáticos e reduz ausências.',                         icon: 'clock', product: 'Convert Flow', accent: 'var(--brand-light)' },
              { num: '04', title: 'Relatórios', sit: 'Agência perde dias cruzando dados de anúncios e CRM',                sol: 'Sistema conecta tudo e gera relatórios automáticos.',                       icon: 'trend', product: 'Intel Flow',   accent: 'var(--accent-success)' },
              { num: '05', title: 'Leads',      sit: 'Empresa tem excesso de leads mas não prioriza follow-up',           sol: 'IA identifica quem está pronto para comprar e avisa o vendedor.',           icon: 'spark', product: 'Growth Flow',  accent: 'var(--brand-light)' },
              { num: '06', title: 'Vendas',     sit: 'Time de vendas atualiza pipelines manualmente e perde timing',       sol: 'IA movimenta negócios no CRM e prevê o fechamento.',                         icon: 'rocket', product: 'Growth + Intel', accent: 'var(--accent-success)' },
            ].map((c, i) => (
              <div key={i} className="case-card" style={{ '--reveal-delay': `${i * 70}ms`, '--case-accent': c.accent }}>
                <div className="case-card-head">
                  <div className="case-card-icon"><Icon name={c.icon} size={14}/></div>
                  <span className="case-card-num">{c.num} · <strong>{c.title}</strong></span>
                </div>
                <div className="case-card-sit">{c.sit}</div>
                <div className="case-card-arrow">→</div>
                <div className="case-card-sol">{c.sol}</div>
                <div className="case-card-product">
                  <span className="case-card-product-label">Resolvido por</span>
                  <span className="case-card-product-name">WebbIA {c.product}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="cases-summary reveal">
            <div className="cases-summary-copy">
              <div className="eyebrow"><span className="dot"></span>Na prática, é como instalar</div>
              <h3 style={{ marginTop: 12 }}>Um <span className="serif brand">cérebro digital</span> dentro da operação.</h3>
              <p className="muted" style={{ fontSize: 15, lineHeight: 1.6, marginTop: 14, maxWidth: 480 }}>
                Não é IA futurista — é IA que economiza tempo, reduz trabalho manual, organiza a operação, automatiza o atendimento e libera o time para vender mais.
              </p>
            </div>
            <div className="cases-summary-items">
              {[
                { num: '01', label: 'Cérebro digital', sub: 'IA aplicada' },
                { num: '02', label: 'Robôs administrativos', sub: 'Tarefas repetitivas' },
                { num: '03', label: 'Integrações nativas', sub: 'Sistemas conversando' },
              ].map((it) => (
                <div key={it.num} className="cases-summary-item">
                  <span className="cases-summary-num">{it.num}</span>
                  <div>
                    <div className="cases-summary-label">{it.label}</div>
                    <div className="cases-summary-sub">{it.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIAL */}
      {/* PROVA SOCIAL — 2 testemunhos lado a lado */}
      <section className="section">
        <div className="container">
          <div className="section-head reveal">
            <div className="eyebrow"><span className="dot"></span>Prova social</div>
            <h2>Quem já <span className="serif brand">colocou em produção.</span></h2>
          </div>

          <div className="proof-grid reveal">
            {[
              {
                quote: 'Triplicamos os agendamentos em 30 dias. A IA responde na hora e minha secretária só entra para fechar.',
                name: 'Dr. Luciano Machado',
                role: 'Cirurgia Bariátrica · São Paulo',
                initials: 'LM',
                metric: '3×',
                metricLabel: 'agendamentos',
                product: 'Convert Flow',
              },
              {
                quote: 'Pagávamos caro no Google e perdíamos o lead por demora. Hoje a IA qualifica na hora e o corretor recebe só quem está pronto para visitar.',
                name: 'Marcos Andrade',
                role: 'Diretor Comercial · Grupo Vistta SP',
                initials: 'MA',
                metric: '3×',
                metricLabel: 'leads qualificados',
                product: 'Convert Flow',
              },
            ].map((p, i) => (
              <div key={i} className="proof-card" style={{ '--reveal-delay': `${i * 100}ms` }}>
                <svg className="proof-quote" viewBox="0 0 60 50" aria-hidden="true">
                  <path d="M0 30c0-14 8-25 22-30v8C13 12 9 19 9 27h13v23H0zm38 0c0-14 8-25 22-30v8c-9 4-13 11-13 19h13v23H38z" fill="currentColor" />
                </svg>
                <p className="proof-text">{p.quote}</p>

                <div className="proof-metric">
                  <span className="proof-metric-value serif">{p.metric}</span>
                  <span className="proof-metric-label">{p.metricLabel}</span>
                </div>

                <div className="proof-author">
                  <div className="proof-avatar">{p.initials}</div>
                  <div className="proof-author-info">
                    <div className="proof-author-name">{p.name}</div>
                    <div className="proof-author-role">{p.role}</div>
                  </div>
                  <span className="proof-author-product">WebbIA {p.product}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <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>Próximo passo
              </div>
              <h2 style={{ marginTop: 18, textAlign: 'center', maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
                Pronto para uma operação que <span className="serif brand">não vaza</span>?
              </h2>
              <p className="muted" style={{ textAlign: 'center', fontSize: 17, marginTop: 18, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto' }}>
                Diagnóstico gratuito em 30 minutos. Sem compromisso, com plano de ação.
              </p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
                <a className="btn btn-primary btn-cta" href="https://wa.me/5511979901764?text=Ol%C3%A1%21%20Gostaria%20de%20solicitar%20um%20diagn%C3%B3stico%20gratuito%20com%20a%20WebbIA." target="_blank" rel="noopener">
                  <Icon name="rocket" size={14} /> Quero meu diagnóstico
                </a>
                <a className="btn btn-ghost" href="https://wa.me/5511979901764" target="_blank" rel="noopener">
                  <Icon name="whats" size={14} /> WhatsApp direto
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>);

};

const MiniChart = () => {
  const bars = [22, 28, 35, 41, 52, 68, 82];
  return (
    <div className="mini-chart">
      {bars.map((h, i) =>
      <div key={i} className="mini-bar-wrap">
          <div className="mini-bar" style={{ height: `${h}%`, animationDelay: `${i * 80}ms` }}></div>
        </div>
      )}
    </div>);

};

const PricingGrid = ({ onContact }) => {
  const plans = [
  {
    name: 'Start',
    price: 'R$ 590',
    tag: 'Convert Flow · entrada',
    features: ['Pipeline básico', 'Automação essencial', 'Follow-up automatizado', 'Indicadores por etapa']
  },
  {
    name: 'Pro',
    price: 'R$ 1.190',
    tag: 'Convert Flow · operação completa',
    featured: true,
    features: ['Pipeline avançado', 'Lead scoring + segmentação', 'Distribuição automática', 'Performance por etapa', 'Otimizações mensais']
  },
  {
    name: 'Scale',
    price: 'R$ 2.190',
    tag: 'Convert Flow · times grandes',
    features: ['Múltiplos pipelines', 'Lead intelligence avançado', 'Integrações sob demanda', 'Acompanhamento executivo', 'Roadmap trimestral']
  }];

  return (
    <div className="pricing-grid">
      {plans.map((p, i) =>
      <div key={i} className={`pricing-card reveal ${p.featured ? 'pricing-featured' : ''}`} style={{ '--reveal-delay': `${i * 100}ms` }}>
          {p.featured && <div className="pricing-badge">Recomendado</div>}
          <div className="eyebrow" style={{ marginBottom: 8 }}><span className="dot"></span>{p.tag}</div>
          <h3 style={{ marginBottom: 4 }}>{p.name}</h3>
          <div className="pricing-price">
            <span className="pricing-amount">{p.price}</span>
            <span className="pricing-period">/mês</span>
          </div>
          <ul className="pricing-features">
            {p.features.map((f, j) =>
          <li key={j}><Icon name="check" size={14} /> <span>{f}</span></li>
          )}
          </ul>
          <button
          className={p.featured ? 'btn btn-primary' : 'btn btn-ghost'}
          style={{ width: '100%', justifyContent: 'center' }}
          onClick={onContact}>
          
            {p.featured ? 'Começar com Pro' : 'Escolher plano'} <Icon name="arrow-right" size={14} />
            
          </button>
        </div>
      )}
    </div>);

};

Object.assign(window, { HomePage, PricingGrid, HeroCompanyMock });