/* CodeSection.jsx — editor window demonstrating modern AI-assisted dev */
const CodeSection = () => {
  // token colors
  const c = { kw: '#3D8BFF', fn: '#00D4FF', str: '#1FD17B', com: '#6B7591', punc: '#A7B0C5', txt: '#C9D3E8', num: '#FFB020' };
  const T = ({ k, children }) => <span style={{ color: c[k] }}>{children}</span>;

  const tabs = ['agente.ts', 'fluxo.n8n.json', 'supabase.sql'];
  const [tab, setTab] = React.useState(0);

  const badges = ['Claude Code', 'Codex', 'GPT', 'Git / GitHub', 'n8n', 'Supabase', 'APIs', 'Integrações'];

  return (
    <section style={{ background: 'var(--ar-bg-section)', padding: '116px 0', overflow: 'hidden' }}>
      <Container>
        <div className="grid-split" style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 56, alignItems: 'center' }}>
          {/* Editor */}
          <Reveal style={{ minWidth: 0 }}>
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', inset: -30, background: 'radial-gradient(circle at 30% 30%, rgba(0,94,255,0.28), transparent 60%)', filter: 'blur(20px)', pointerEvents: 'none' }} />
              <div style={{
                position: 'relative', borderRadius: 16, overflow: 'hidden',
                background: '#080B14', border: '1px solid rgba(255,255,255,0.10)',
                boxShadow: '0 50px 110px -40px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,212,255,0.10)',
                fontFamily: 'var(--ar-font-mono)',
              }}>
                {/* title bar */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px', background: '#0B0F1A', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FF5F57' }} />
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#FEBC2E' }} />
                  <span style={{ width: 11, height: 11, borderRadius: 999, background: '#28C840' }} />
                  <span style={{ marginLeft: 12, fontFamily: 'var(--ar-font-body)', fontSize: 12, color: 'var(--ar-text-dim)' }}>AR · workspace — agente-atendimento</span>
                  <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#1FD17B', fontFamily: 'var(--ar-font-body)' }}>
                    <i data-lucide="sparkles" style={{ width: 13, height: 13 }}></i> IA assistindo
                  </span>
                </div>
                {/* tabs */}
                <div style={{ display: 'flex', background: '#0A0E18', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                  {tabs.map((tb, i) => (
                    <button key={tb} onClick={() => setTab(i)} style={{
                      padding: '9px 16px', fontFamily: 'var(--ar-font-mono)', fontSize: 12, cursor: 'pointer',
                      background: i === tab ? '#080B14' : 'transparent', border: 'none',
                      borderRight: '1px solid rgba(255,255,255,0.06)',
                      borderTop: i === tab ? '2px solid #00D4FF' : '2px solid transparent',
                      color: i === tab ? 'var(--ar-text-main)' : 'var(--ar-text-dim)',
                    }}>{tb}</button>
                  ))}
                </div>
                {/* code body */}
                <div style={{ display: 'flex', fontSize: 13, lineHeight: 1.7 }}>
                  <div style={{ padding: '16px 12px 22px', textAlign: 'right', color: '#34406080', userSelect: 'none', background: '#080B14' }}>
                    {Array.from({ length: 16 }).map((_, i) => <div key={i}>{i + 1}</div>)}
                  </div>
                  <pre style={{ margin: 0, padding: '16px 18px 22px', overflowX: 'auto', flex: 1, color: c.txt }}>
{tab === 0 && (<code>
<div><T k="com">// Agente de atendimento da AR — multicanal</T></div>
<div><T k="kw">import</T> {'{ '}<T k="fn">criarAgente</T>{' }'} <T k="kw">from</T> <T k="str">"@ar/core"</T>;</div>
<div><T k="kw">import</T> {'{ '}<T k="fn">whatsapp</T>, <T k="fn">crm</T>{' }'} <T k="kw">from</T> <T k="str">"@ar/canais"</T>;</div>
<div>&nbsp;</div>
<div><T k="kw">export const</T> <T k="fn">agente</T> = <T k="fn">criarAgente</T>({'{'}</div>
<div>{'  '}nome: <T k="str">"Atendimento AR"</T>,</div>
<div>{'  '}modelo: <T k="str">"claude / gpt"</T>,</div>
<div>{'  '}canais: [<T k="fn">whatsapp</T>, <T k="fn">crm</T>],</div>
<div>{'  '}<T k="fn">aoReceber</T>(<T k="punc">msg</T>) {'{'}</div>
<div>{'    '}<T k="kw">const</T> intent = <T k="kw">await</T> <T k="fn">classificar</T>(msg);</div>
<div>{'    '}<T k="kw">if</T> (intent.lead) <T k="fn">enviarParaCRM</T>(msg);</div>
<div>{'    '}<T k="kw">return</T> <T k="fn">responder</T>(msg, {'{'} contexto: <T k="num">true</T> {'}'});</div>
<div>{'  '}{'}'},</div>
<div>{'}'});<span className="ar-caret" style={{ background: '#00D4FF', display: 'inline-block', width: 7, height: 15, marginLeft: 2, verticalAlign: 'text-bottom' }} /></div>
<div>&nbsp;</div>
<div><T k="com">// → deploy automático via GitHub Actions</T></div>
</code>)}
{tab === 1 && (<code>
<div><T k="punc">{'{'}</T></div>
<div>{'  '}<T k="str">"workflow"</T>: <T k="str">"qualificacao-de-leads"</T>,</div>
<div>{'  '}<T k="str">"trigger"</T>: <T k="str">"webhook:whatsapp"</T>,</div>
<div>{'  '}<T k="str">"nodes"</T>: [</div>
<div>{'    '}{'{'} <T k="str">"type"</T>: <T k="str">"ai.classificar"</T> {'}'},</div>
<div>{'    '}{'{'} <T k="str">"type"</T>: <T k="str">"supabase.insert"</T> {'}'},</div>
<div>{'    '}{'{'} <T k="str">"type"</T>: <T k="str">"crm.criarOportunidade"</T> {'}'},</div>
<div>{'    '}{'{'} <T k="str">"type"</T>: <T k="str">"notificar.equipe"</T> {'}'}</div>
<div>{'  '}],</div>
<div>{'  '}<T k="str">"agendamento"</T>: <T k="str">"realtime"</T>,</div>
<div>{'  '}<T k="str">"retry"</T>: <T k="num">3</T>,</div>
<div>{'  '}<T k="str">"ativo"</T>: <T k="num">true</T></div>
<div><T k="punc">{'}'}</T><span className="ar-caret" style={{ background: '#00D4FF', display: 'inline-block', width: 7, height: 15, marginLeft: 2, verticalAlign: 'text-bottom' }} /></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
</code>)}
{tab === 2 && (<code>
<div><T k="com">-- Base de leads qualificados (Supabase)</T></div>
<div><T k="kw">create table</T> <T k="fn">leads</T> (</div>
<div>{'  '}id <T k="kw">uuid</T> <T k="kw">primary key</T> <T k="kw">default</T> <T k="fn">gen_random_uuid</T>(),</div>
<div>{'  '}nome <T k="kw">text</T>,</div>
<div>{'  '}canal <T k="kw">text</T> <T k="kw">check</T> (canal <T k="kw">in</T> (<T k="str">'whatsapp'</T>,<T k="str">'site'</T>)),</div>
<div>{'  '}intent <T k="kw">text</T>,</div>
<div>{'  '}score <T k="kw">int</T> <T k="kw">default</T> <T k="num">0</T>,</div>
<div>{'  '}criado_em <T k="kw">timestamptz</T> <T k="kw">default</T> <T k="fn">now</T>()</div>
<div>);</div>
<div>&nbsp;</div>
<div><T k="kw">create index</T> <T k="kw">on</T> <T k="fn">leads</T> (score <T k="kw">desc</T>);</div>
<div><span className="ar-caret" style={{ background: '#00D4FF', display: 'inline-block', width: 7, height: 15, verticalAlign: 'text-bottom' }} /></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
</code>)}
                  </pre>
                </div>
                {/* terminal footer */}
                <div style={{ padding: '10px 16px', background: '#0B0F1A', borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--ar-font-mono)', fontSize: 11.5, color: 'var(--ar-text-dim)', flexWrap: 'wrap' }}>
                  <span style={{ color: '#1FD17B', display: 'inline-flex', alignItems: 'center', gap: 5 }}><i data-lucide="check-circle-2" style={{ width: 13, height: 13 }}></i> build ok</span>
                  <span><T k="fn">git</T> push → main</span>
                  <span style={{ color: '#00D4FF' }}>deploy · 12s</span>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Copy + badges */}
          <div>
            <SectionHead
              eyebrow="DESENVOLVIMENTO COM IA"
              title={<>Soluções digitais com IA, automação e <GradText>engenharia moderna</GradText></>}
              sub="Combinamos ferramentas avançadas, boas práticas de desenvolvimento, integrações inteligentes e agentes de IA para criar soluções sob medida para empresas."
              maxWidth={520}
            />
            <Reveal delay={140}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9, marginTop: 28 }}>
                {badges.map(b => (
                  <span key={b} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 7, padding: '8px 14px', borderRadius: 10,
                    background: 'var(--ar-bg-card)', border: '1px solid rgba(255,255,255,0.10)',
                    fontFamily: 'var(--ar-font-mono)', fontSize: 13, color: 'var(--ar-text-main)',
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: 'linear-gradient(135deg,#005EFF,#00D4FF)' }} />{b}
                  </span>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </Container>
      <style>{`.ar-caret { animation: arBlink 1.1s steps(1) infinite; } @keyframes arBlink { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }`}</style>
    </section>
  );
};

window.CodeSection = CodeSection;