/* global React */

// ============================================
// HOME-ONLY SECTIONS (enxuta)
// Pilares  ·  TestimonialsCompact  ·  HowItWorks
// ============================================

// ============================================
// PILARES — 4 cards que linkam para páginas
// ============================================
function Pilares() {
  const items = [
    {
      href: 'modulos.html',
      icon: 'grid',
      title: 'Plataforma modular',
      desc: '20+ módulos organizados em 6 pilares. Ative só o que sua operação usa.',
      accent: '#3b5bdb',
      accentSoft: '#eef2ff',
      cta: 'Ver todos os módulos',
    },
    {
      href: 'whatsapp.html',
      icon: 'whatsapp',
      title: 'WhatsApp oficial',
      desc: 'Atendimento multi-sessão via API oficial da Meta. Templates, filas e histórico.',
      accent: '#25D366',
      accentSoft: '#ecfdf5',
      cta: 'Conhecer a central',
    },
    {
      href: 'automacoes.html',
      icon: 'bot',
      title: 'Automação com IA',
      desc: 'BOT visual, classificação inteligente e fluxos que trabalham pelo seu time.',
      accent: '#8b5cf6',
      accentSoft: '#f3e8ff',
      cta: 'Ver automações',
    },
    {
      href: 'whitelabel.html',
      icon: 'globe',
      title: 'White-label nativo',
      desc: 'Sua marca, seu domínio, seus planos. Multi-tenant com dados isolados.',
      accent: '#d97706',
      accentSoft: '#fef3e7',
      cta: 'Sobre o modelo',
    },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg)', padding: '127px 0px' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">A plataforma em 4 pilares</span>
          <h2 className="display-2">Tudo o que uma operação precisa,<br/>organizado para crescer.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="pilares-grid">
          {items.map((it, i) => (
            <a key={i} href={it.href} className="card reveal pilar-card" data-delay={i+1} style={{
              padding: 32,
              background: 'var(--surface)',
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
              textDecoration: 'none',
              color: 'inherit',
              transition: 'transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease',
              position: 'relative',
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 12,
                background: it.accentSoft, color: it.accent,
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name={it.icon} size={26}/>
              </div>
              <div>
                <h3 className="display-3" style={{ fontSize: 22, margin: 0, letterSpacing: '-0.02em' }}>{it.title}</h3>
                <p className="mt-2 text-muted" style={{ fontSize: 15, lineHeight: 1.55 }}>{it.desc}</p>
              </div>
              <div style={{
                marginTop: 'auto', paddingTop: 20,
                borderTop: '1px solid var(--border)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 14, fontWeight: 500,
                color: it.accent,
              }}>
                <span>{it.cta}</span>
                <span className="pilar-arrow" style={{ transition: 'transform 0.2s ease', display: 'inline-block' }}>→</span>
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        .pilar-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 32px -12px rgba(11,16,32,0.12);
          border-color: var(--text-soft) !important;
        }
        .pilar-card:hover .pilar-arrow { transform: translateX(4px); }
        @media (max-width: 820px) {
          .pilares-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================
// TESTIMONIALS COMPACT — 2 depoimentos em destaque
// ============================================
function TestimonialsCompact() {
  const items = [
    {
      q: 'Substituímos quatro ferramentas por uma só. A operação ficou mais previsível e o time parou de perder contexto entre sistemas.',
      a: 'Gerente de Operações', c: '[CLIENTE A]', color: '#3b5bdb',
    },
    {
      q: 'O modelo white-label foi decisivo. Lançamos nossa marca de atendimento em 3 semanas com todos os módulos prontos.',
      a: 'CEO', c: '[REVENDA B]', color: '#8b5cf6',
    },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Operações reais</span>
          <h2 className="display-2">Quem já opera com a TSA.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }} className="tcompact-grid">
          {items.map((it, i) => (
            <div key={i} className="card reveal" data-delay={i+1} style={{ padding: 36, background: 'var(--surface)' }}>
              <svg width="28" height="24" viewBox="0 0 28 24" fill="none" style={{ opacity: 0.2 }}>
                <path d="M0 14h6v10H0V14Zm0-4V0h10v10H0Zm16 4h6v10h-6V14Zm0-4V0h10v10h-6Z" fill={it.color}/>
              </svg>
              <p className="mt-3" style={{ fontSize: 18, lineHeight: 1.5, letterSpacing: '-0.01em' }}>{it.q}</p>
              <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: `${it.color}22`, border: `1px solid ${it.color}55`, display: 'grid', placeItems: 'center', color: it.color, fontWeight: 600 }}>
                  {it.c.charAt(1)}
                </div>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 14.5 }}>{it.a}</div>
                  <div className="text-muted" style={{ fontSize: 13 }}>{it.c}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Logos band */}
        <div className="reveal" data-delay="3" style={{
          marginTop: 48,
          padding: '28px 32px',
          background: 'var(--surface)',
          border: '1px solid var(--border)',
          borderRadius: 14,
          display: 'flex',
          flexWrap: 'wrap',
          gap: 24,
          alignItems: 'center',
          justifyContent: 'space-between',
        }}>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            Operações que confiam na TSA
          </div>
          <div style={{ display: 'flex', gap: 40, flexWrap: 'wrap', opacity: 0.55 }}>
            {['CLIENTE A', 'REVENDA B', 'CLIENTE C', 'PARCEIRO D', 'CLIENTE E'].map((n, i) => (
              <div key={i} style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 600, fontSize: 15,
                letterSpacing: '-0.01em',
                color: 'var(--text)',
              }}>
                {n}
              </div>
            ))}
          </div>
        </div>
        <div className="text-muted text-center mt-3" style={{ fontSize: 12.5 }}>
          * Depoimentos e logos ilustrativos — serão substituídos por cases reais após liberação.
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .tcompact-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ============================================
// HOW IT WORKS — 3 passos
// ============================================
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Conecte seus canais',
      desc: 'Plugue WhatsApp oficial, e-mail, chat e os sistemas que sua equipe já usa. Configure setores, filas e permissões em minutos.',
      icon: 'layers',
      color: '#3b5bdb',
    },
    {
      n: '02',
      title: 'Monte a automação',
      desc: 'Desenhe fluxos de BOT, distribuição inteligente e respostas automáticas no editor visual. Sem código, sem ferramenta paralela.',
      icon: 'bot',
      color: '#8b5cf6',
    },
    {
      n: '03',
      title: 'Opere com clareza',
      desc: 'Dashboards em tempo real, métricas por setor e equipe, histórico completo. Decida com dado, não com achismo.',
      icon: 'chart',
      color: '#10b981',
    },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Como funciona</span>
          <h2 className="display-2">Da conversa ao resultado<br/>em três movimentos.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, position: 'relative' }} className="how-grid">
          {/* Connector line */}
          <div className="how-line" style={{
            position: 'absolute',
            top: 36, left: '16.66%', right: '16.66%',
            height: 2,
            background: 'linear-gradient(90deg, #3b5bdb 0%, #8b5cf6 50%, #10b981 100%)',
            opacity: 0.2,
            zIndex: 0,
          }}/>
          {steps.map((s, i) => (
            <div key={i} className="reveal" data-delay={i+1} style={{
              position: 'relative',
              zIndex: 1,
              padding: '0 20px',
              textAlign: 'center',
            }}>
              <div style={{
                width: 72, height: 72, borderRadius: '50%',
                background: 'var(--surface)',
                border: `2px solid ${s.color}`,
                color: s.color,
                display: 'grid', placeItems: 'center',
                margin: '0 auto 20px',
                boxShadow: '0 8px 24px -8px rgba(11,16,32,0.08)',
              }}>
                <Icon name={s.icon} size={28}/>
              </div>
              <div style={{
                fontFamily: 'var(--font-mono, monospace)',
                fontSize: 11,
                fontWeight: 600,
                letterSpacing: '0.12em',
                color: s.color,
                marginBottom: 6,
              }}>
                PASSO {s.n}
              </div>
              <h3 className="display-3" style={{ fontSize: 20, margin: 0, letterSpacing: '-0.02em' }}>{s.title}</h3>
              <p className="mt-2 text-muted" style={{ fontSize: 14.5, lineHeight: 1.55, maxWidth: 300, margin: '8px auto 0' }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .how-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .how-line { display: none; }
        }
      `}</style>
    </section>
  );
}

window.Pilares = Pilares;
window.TestimonialsCompact = TestimonialsCompact;
window.HowItWorks = HowItWorks;