/* global React, Icon */
const { useState: useSz, useEffect: useEz } = React;

// ============================================
// AUTOMATION / BOT
// ============================================
function Automation() {
  return (
    <section className="section" id="automacoes" style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Automação & IA</span>
          <h2 className="display-2">Fluxos que trabalham por você.<br/>IA que resolve antes de você responder.</h2>
          <p className="lead mt-2">Editor visual de fluxos, classificação inteligente, sugestões de resposta e integração com modelos de IA generativa.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems: 'center' }}>
          <div className="reveal card" style={{ padding: 32, background: 'var(--surface)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Editor de fluxos BOT</div>
              <div style={{ display: 'flex', gap: 6 }}>
                <span style={{ padding: '3px 8px', fontSize: 11, background: 'var(--brand-50)', color: 'var(--brand-700)', borderRadius: 5, fontFamily: 'var(--font-mono)' }}>v4.2</span>
                <span style={{ padding: '3px 8px', fontSize: 11, background: '#ecfdf5', color: '#059669', borderRadius: 5, fontFamily: 'var(--font-mono)' }}>● Publicado</span>
              </div>
            </div>
            <FlowChart/>
          </div>
          <div className="reveal" data-delay="2">
            {[
              { t: 'Classificação automática', d: 'IA classifica mensagens por intenção, urgência e setor ideal de atendimento.' },
              { t: 'Sugestões em tempo real', d: 'Respostas sugeridas ao atendente baseadas no histórico e na base de conhecimento.' },
              { t: 'Gatilhos condicionais', d: 'Automação por regras: horário, setor, tag, canal, tempo de espera, palavra-chave.' },
              { t: 'Resolução sem humano', d: 'Perguntas frequentes respondidas 24/7 com transferência suave quando necessário.' },
            ].map((f, i) => (
              <div key={i} style={{ padding: '20px 0', borderBottom: i < 3 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{ width: 32, height: 32, borderRadius: 8, background: '#f3e8ff', color: '#7c3aed', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name="sparkles" size={16}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 500, fontSize: 16 }}>{f.t}</div>
                    <div className="text-muted mt-1" style={{ fontSize: 14 }}>{f.d}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FlowChart() {
  const [active, setActive] = useSz(0);
  useEz(() => {
    const t = setInterval(() => setActive(a => (a + 1) % 5), 1400);
    return () => clearInterval(t);
  }, []);
  const nodes = [
    { x: 8,  y: 40, w: 120, label: 'Mensagem', sub: 'WhatsApp', color: '#25D366', icon: 'whatsapp' },
    { x: 35, y: 10, w: 140, label: 'IA classifica', sub: 'intenção + urgência', color: '#7c3aed', icon: 'sparkles' },
    { x: 35, y: 72, w: 140, label: 'Verificar cliente', sub: 'buscar CRM', color: '#3b5bdb', icon: 'users' },
    { x: 66, y: 40, w: 130, label: 'Rotear', sub: 'fila / setor', color: '#f59e0b', icon: 'layers' },
    { x: 88, y: 40, w: 110, label: 'Atender', sub: 'humano / bot', color: '#10b981', icon: 'check' },
  ];
  return (
    <div style={{ position: 'relative', height: 300, background: 'var(--surface-2)', borderRadius: 12, border: '1px solid var(--border)', padding: 20, overflow: 'hidden' }}>
      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <path d="M 14 44 C 25 44 25 18 35 18" stroke={active >= 1 ? '#7c3aed' : 'var(--border-strong)'} strokeWidth="0.4" fill="none"/>
        <path d="M 14 46 C 25 46 25 74 35 74" stroke={active >= 2 ? '#3b5bdb' : 'var(--border-strong)'} strokeWidth="0.4" fill="none"/>
        <path d="M 50 20 C 60 20 60 42 66 42" stroke={active >= 3 ? '#f59e0b' : 'var(--border-strong)'} strokeWidth="0.4" fill="none"/>
        <path d="M 50 74 C 60 74 60 46 66 46" stroke={active >= 3 ? '#f59e0b' : 'var(--border-strong)'} strokeWidth="0.4" fill="none"/>
        <path d="M 76 44 L 88 44" stroke={active >= 4 ? '#10b981' : 'var(--border-strong)'} strokeWidth="0.4" fill="none"/>
      </svg>
      {nodes.map((n, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${n.x}%`, top: `${n.y}%`,
          width: n.w, transform: 'translateY(-50%)',
          padding: '10px 12px', borderRadius: 10,
          background: 'var(--surface)',
          border: active === i ? `2px solid ${n.color}` : '1px solid var(--border)',
          boxShadow: active === i ? `0 0 0 4px ${n.color}22` : 'none',
          transition: 'all 0.3s ease',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 22, height: 22, borderRadius: 5, background: `${n.color}22`, color: n.color, display: 'grid', placeItems: 'center' }}>
              <Icon name={n.icon} size={12}/>
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 500 }}>{n.label}</div>
              <div style={{ fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{n.sub}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ============================================
// PRICING
// ============================================
function Pricing() {
  const plans = [
    {
      name: 'Starter',
      desc: 'Para começar a centralizar o atendimento.',
      price: 'Sob consulta',
      features: ['Até 10 atendentes', '1 conexão WhatsApp', 'CRM + Contatos', 'Campanhas básicas', 'Suporte em horário comercial'],
      cta: 'Falar com comercial', highlight: false,
    },
    {
      name: 'Business',
      desc: 'Operações com múltiplos setores e volume.',
      price: 'Sob consulta',
      features: ['Atendentes ilimitados', 'Múltiplas conexões WhatsApp', 'Todos os módulos principais', 'BOT & Automação com IA', 'API + Webhooks', 'SLA 99,5% · suporte estendido'],
      cta: 'Solicitar proposta', highlight: true,
    },
    {
      name: 'Enterprise',
      desc: 'Corporações e operações white-label.',
      price: 'Personalizado',
      features: ['Tudo do Business', 'Multi-tenant + White-label', 'SSO + SAML', 'SLA 99,95% · suporte 24/7', 'CSM dedicado', 'Ambientes dedicados', 'Conformidade avançada'],
      cta: 'Falar com especialista', highlight: false,
    },
  ];
  return (
    <section className="section" id="precos" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Preços</span>
          <h2 className="display-2">Planos que acompanham sua operação.</h2>
          <p className="lead mt-2">Preços sob consulta porque seu negócio é único. Monta-se um plano junto do time comercial.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {plans.map((p, i) => (
            <div key={i} className="reveal" data-delay={i+1} style={{
              padding: 32, borderRadius: 16,
              background: p.highlight ? 'linear-gradient(180deg, var(--brand-700), var(--brand-900))' : 'var(--surface)',
              color: p.highlight ? 'white' : 'var(--text)',
              border: p.highlight ? '1px solid rgba(147,173,255,0.3)' : '1px solid var(--border)',
              boxShadow: p.highlight ? '0 30px 60px -20px rgba(59,91,219,0.4)' : 'var(--shadow-sm)',
              position: 'relative',
            }}>
              {p.highlight && <div style={{ position: 'absolute', top: -12, left: 24, padding: '4px 12px', background: 'white', color: 'var(--brand-700)', fontSize: 11, fontWeight: 600, borderRadius: 999, letterSpacing: '0.05em' }}>MAIS CONTRATADO</div>}
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>{p.name}</div>
              <div style={{ fontSize: 14, opacity: p.highlight ? 0.75 : 1, color: p.highlight ? 'rgba(255,255,255,0.75)' : 'var(--text-muted)', marginTop: 4 }}>{p.desc}</div>
              <div style={{ margin: '24px 0', paddingBottom: 24, borderBottom: p.highlight ? '1px solid rgba(255,255,255,0.1)' : '1px solid var(--border)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>{p.price}</div>
              </div>
              <div style={{ display: 'grid', gap: 10, marginBottom: 24 }}>
                {p.features.map((f, j) => (
                  <div key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14 }}>
                    <Icon name="check" size={16} color={p.highlight ? '#93adff' : 'var(--brand-500)'}/>
                    <span style={{ color: p.highlight ? 'rgba(255,255,255,0.9)' : 'var(--text)' }}>{f}</span>
                  </div>
                ))}
              </div>
              <a href="#demo" className={`btn ${p.highlight ? 'btn-primary' : 'btn-ghost'}`} style={{ width: '100%', ...(p.highlight ? { background: 'white', color: 'var(--brand-700)' } : {}) }}>
                {p.cta}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Automation = Automation;
window.Pricing = Pricing;