/* global React, Reveal, Icon */
const { useState: useHelp } = React;

// ════════════════════════════════════════════════════════════
//  COMO AJUDA — practical "antes → depois", right after Para quem
// ════════════════════════════════════════════════════════════
function ComoAjuda() {
  const antes = [
    'Planilha que ninguém atualiza',
    'Caderno na gaveta e mil grupos de WhatsApp',
    '“Quem tá com isso?” o dia inteiro',
    'Faturou, mas não sabe se sobrou',
    'Retrabalho e prazo estourado',
  ];
  const depois = [
    'Comercial, operação e financeiro num lugar só',
    'Cada um sabe exatamente a sua parte',
    'O sistema passa o trabalho adiante sozinho',
    'Rentabilidade real de cada projeto à vista',
    'Você no controle — leve por fora, robusto por dentro',
  ];
  return (
    <section id="como-ajuda" className="section" style={{ background: 'var(--peach-soft)', overflow: 'hidden' }}>
      <div aria-hidden="true" data-px="-62" style={{ position: 'absolute', top: '-3%', left: '6%', width: 260, height: 260, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,253,248,0.6), rgba(255,253,248,0) 68%)', pointerEvents: 'none', zIndex: 0, willChange: 'transform' }} />
      <div aria-hidden="true" data-px="70" data-px-rot="16" style={{ position: 'absolute', bottom: '8%', right: '4%', width: 160, height: 160, borderRadius: '40% 60% 55% 45% / 55% 45% 60% 40%', border: '2px solid rgba(195,106,77,0.2)', pointerEvents: 'none', zIndex: 0, willChange: 'transform' }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="sec-head" style={{ textAlign: 'center', margin: '0 auto' }}>
          <Reveal as="div" className="eyebrow">Como a Convive ajuda</Reveal>
          <Reveal as="h2" delay={60} className="sec-title">
            Da bagunça espalhada<br />ao <em className="it" style={{ color: 'var(--terra)' }}>controle num lugar só</em>.
          </Reveal>
          <Reveal as="p" delay={120} className="sec-lead" style={{ margin: '20px auto 0' }}>
            Sem manual, sem virar a empresa de cabeça pra baixo. A gente entra no seu ritmo e organiza o que hoje vive espalhado.
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 'clamp(16px, 3vw, 32px)', alignItems: 'stretch', marginTop: 52 }} className="ba-grid">
          {/* ANTES */}
          <Reveal>
            <div style={{ height: '100%', background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: 'clamp(22px,3vw,30px)', boxShadow: 'var(--shadow-sm)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <span style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--sand)', color: 'var(--ink-faint)', display: 'grid', placeItems: 'center', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18 }}>×</span>
                <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>Hoje, sem a Convive</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
                {antes.map(t => (
                  <div key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                    <span style={{ width: 18, height: 18, borderRadius: '50%', border: '1.5px solid var(--line)', color: 'var(--ink-faint)', display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2, fontSize: 11 }}>×</span>
                    <span style={{ fontSize: 15.5, color: 'var(--ink-faint)', lineHeight: 1.4, textDecoration: 'line-through', textDecorationColor: 'var(--line)' }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          {/* arrow */}
          <Reveal delay={120} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span className="ba-arrow" style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--terra)', color: 'var(--paper)', display: 'grid', placeItems: 'center', boxShadow: '0 10px 24px -8px rgba(192,89,58,.7)', flexShrink: 0 }}>
              <Icon name="arrow" size={24} stroke={2.3} />
            </span>
          </Reveal>

          {/* DEPOIS */}
          <Reveal delay={80}>
            <div style={{ height: '100%', background: 'var(--ink)', borderRadius: 'var(--radius-lg)', padding: 'clamp(22px,3vw,30px)', boxShadow: 'var(--shadow-md)', color: 'var(--paper)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <span style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--terra)', color: 'var(--paper)', display: 'grid', placeItems: 'center' }}><Icon name="check" size={18} stroke={2.4} /></span>
                <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--peach)' }}>Com a Convive</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
                {depois.map(t => (
                  <div key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 11 }}>
                    <span style={{ color: 'var(--peach)', flexShrink: 0, marginTop: 1 }}><Icon name="check" size={18} stroke={2.4} /></span>
                    <span style={{ fontSize: 15.5, color: 'var(--paper)', lineHeight: 1.4, fontWeight: 500 }}>{t}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

        {/* practical 3 steps */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px,1fr))', gap: 16, marginTop: 28 }}>
          {[
            ['route', '1 · A gente entra no seu ritmo', 'Começa pelo que mais dói, sem parar a operação.'],
            ['layers', '2 · Unifica o que tá espalhado', 'Planilha, caderno e WhatsApp viram um lugar só.'],
            ['chart', '3 · Você passa a ver tudo claro', 'Quem tá com o quê, prazo e dinheiro real, na hora.'],
          ].map(([ic, t, d], i) => (
            <Reveal key={t} delay={i * 80}>
              <div style={{ display: 'flex', gap: 13, alignItems: 'flex-start', background: 'rgba(255,253,248,0.6)', border: '1px solid var(--peach)', borderRadius: 16, padding: '18px 20px', height: '100%' }}>
                <span style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--white)', color: 'var(--terra)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={ic} size={19} /></span>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{t}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.45, marginTop: 3 }}>{d}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={120} style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
          <a href="#produto" className="btn btn-primary btn-lg">Ver isso rodando no produto <Icon name="arrow" size={19} /></a>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 760px){
          .ba-grid{ grid-template-columns: 1fr !important; }
          .ba-arrow{ transform: rotate(90deg); }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ComoAjuda });